Show HN : une bibliothèque GUI Rust via Flutter

(cjycode.com)

3 points par GN⁺ 2024-08-12 | Aucun commentaire pour le moment. | Partager sur WhatsApp

Proposition pour les développeurs qui veulent créer des applications GUI en Rust : conserver l’état et la logique en Rust et y greffer une UI Flutter
Le SDK cross-platform mature de Flutter, son écosystème de widgets, son contrôle au pixel près et le hot reload accélèrent fortement les itérations sur l’UI
Ce n’est pas une approche 100 % Rust pur, mais elle ressemble aux compromis déjà utilisés dans l’UI Rust, comme HTML/CSS/Slint ou les DSL basés sur des macros, où la couche UI est séparée
flutter_rust_bridge sert de pont entre Rust et Flutter en convertissant automatiquement les types arbitraires, &mut, async, traits, results, closure, lifetimes, etc.
La structure peut être examinée à travers des exemples d’application compteur et de todo-list, et tout le code se trouve dans le répertoire d’exemples du dépôt flutter_rust_bridge

Une approche consistant à greffer Flutter sur une GUI Rust

Rust a été désigné pendant 8 ans comme le « langage de programmation le plus apprécié » selon StackOverflow et GitHub, et la demande pour créer des applications GUI en Rust est forte
L’approche proposée consiste à utiliser Flutter et flutter_rust_bridge pour ajouter une GUI à un programme Rust
Pour l’exécuter directement, on peut utiliser le dépôt GitHub ou le dossier de démo

Flutter a été classé comme le « SDK mobile cross-platform le plus populaire » selon StackOverflow, et est utilisé par de nombreux développeurs et marques
Son riche écosystème de widgets facilite l’implémentation des fonctions UI souhaitées
- Il existe même des packages pour des animations comme les confettis
- Il fournit une grande variété de widgets et de fonctionnalités, ainsi qu’une flexibilité de contrôle au pixel près
Le hot reload accélère les itérations dans un processus de développement où l’UI demande souvent des ajustements
- Après une modification du code, on peut voir une UI mise à jour presque instantanément sans perdre l’état
- Cela réduit le temps passé à attendre une recompilation
La même base de code peut s’exécuter non seulement sur Android et iOS, mais aussi sur Linux, MacOS, Windows et le Web

Cette approche n’est pas du Rust pur à 100 %
- Rust prend en charge l’état et la logique, tandis que Flutter gère l’UI
- Cela ressemble à d’autres approches UI en Rust qui utilisent un DSL personnalisé via macros, HTML/CSS/Slint ou un autre langage
Cette séparation correspond à la séparation des préoccupations et a déjà été adoptée dans d’autres cas
Flutter est présenté comme facile à apprendre si l’on comprend Rust
Il existe certaines critiques concernant la plateforme Web, et Flutter semble plus adapté à des formes d’« application » comme Google Earth ou l’éditeur d’animations Rive qu’à des pages web statiques
Flutter comporte beaucoup de boilerplate et de code d’échafaudage
- Dans les petits projets, on modifie généralement peu ces fichiers, ce qui les rend presque invisibles
- Dans les grands projets, la possibilité de les modifier devient aussi une possibilité de personnalisation

L’objectif de flutter_rust_bridge est de relier Rust et Flutter de façon naturelle, comme s’il s’agissait d’un seul langage
Il convertit automatiquement plusieurs éléments
- types arbitraires
- &mut
- async
- traits
- results
- closure (callback)
- lifetimes
La « GUI Rust via Flutter » n’est qu’un des cas d’usage possibles
Parmi les autres usages, on peut utiliser n’importe quelle bibliothèque Rust depuis Flutter, ou écrire en Rust du code comme des algorithmes et faire le reste en Flutter

Cet exemple n’est qu’une des nombreuses façons d’intégrer Rust et Flutter
flutter_rust_bridge est un outil générique qui n’impose pas de structure particulière, ce qui permet aussi des approches de type Redux ou Elm
Côté Rust, l’état est défini avec #[frb(ui_state)] et les méthodes de modification sont marquées avec #[frb(ui_mutation)]
- RustState possède count: i32
- new() initialise count à 100
- increment() augmente count de 1
#[frb(ui_state)] et #[frb(ui_mutation)] sont présentés comme très légers, sans magie cachée interne, et leur code tiendrait sur une dizaine de lignes
L’UI Flutter est écrite de manière déclarative
- un Text qui affiche le compteur actuel
- un TextButton qui appelle state.increment
- les deux éléments sont regroupés dans une colonne avec du padding
Quand on modifie l’UI pendant l’exécution, le hot reload permet de voir immédiatement les changements

L’application todo-list est une section optionnelle choisie pour la complétude, et ne représente qu’une des nombreuses approches que flutter_rust_bridge peut prendre en charge
L’état Rust inclut les éléments todo, le texte saisi, le filtre et le prochain ID
- items: Vec<Item>
- input_text: String
- filter: Filter
- next_id: i32
Item contient id, content, completed
Filter contient All, Active, Completed
Les actions de modification d’état sont implémentées sous #[frb(ui_mutation)]
- add() ajoute un élément à partir du texte actuellement saisi, puis vide l’entrée
- remove(id) supprime l’élément correspondant à cet ID
- toggle(id) inverse l’état d’achèvement
La logique métier repose sur filtered_items() et Filter::check()
- All laisse passer tous les éléments
- Active ne laisse passer que les éléments non terminés
- Completed ne laisse passer que les éléments terminés
L’UI Flutter dispose un champ de texte, une liste et une rangée de boutons de filtre dans une colonne
- SyncTextField relie les changements de saisie et la soumission aux mutations d’état Rust
- Chaque élément todo se compose d’une case à cocher, de texte et d’un bouton de suppression

Tout le code se trouve dans le dépôt flutter_rust_bridge
- frb_example/rust_ui_counter
- frb_example/rust_ui_todo_list
La plupart des fichiers sont du boilerplate auto-généré, principalement dû aux fonctionnalités de Flutter
Les fichiers essentiels sont src/app.rs et ui/lib/main.dart
Pour lancer la démo, exécutez la commande suivante dans le répertoire ui
- flutter_rust_bridge_codegen generate && flutter run