Les outils Flutter NoCode, ça en est où ?

Contexte

Depuis quelques années fleurissent de nombreux outils permettant le développement d’applications et de sites web grâce à un minimum voire sans l’écriture d’une seule ligne de code.

L’intérêt grandissant dont ils font l’objet est à la hauteur de la promesse du développement no code / low code : permettre de créer des outils digitaux de qualité sans avoir de connaissance en programmation.

Durant une demi-journée nous nous sommes confrontés à deux de ces outils, Jetspike et FlutterFlow, qui s’appliquent tous deux à une technologie relativement jeune : Flutter.

Nous voyons a priori deux intérêts potentiels à utiliser le no code pour créer des applications Flutter :

  • permettre à une équipe de développement de fournir rapidement un MVP fonctionnel à un client
  • permettre à une équipe de designers de fournir de maquettes directement intégrables dans un projet

Lors de cet atelier, nous avons commencé par prendre le temps de comprendre ce que permettraient de faire ces deux plateformes et de concevoir des exercices que nous pouvions adapter aux possibilités offertes.

Jetspike

Présentation de l’outil

Jetspike se présente comme une aide graphique à la mise en place d’interfaces en Flutter.

L’objectif qu’il se fixe est de permettre la création rapide d’écrans, c’est-à-dire

  • de mettre en place les widgets correspondants, en indiquant les paramètres qu’ils utiliseront, leur type,
  • de réaliser le data binding des models avec les vues,
  • de pouvoir ensuite intégrer rapidement et sans effort ces écrans.

L’idée est donc de produire du code Flutter qu’il s’agira ensuite d’intégrer dans un projet global. Deux questions se posent immédiatement : celle de la facilité de production du code et celle de sa qualité.

Retours sur nos tests

L’outil semble plein de promesses mais, dans les faits, son usage s’avère assez laborieux : l’interface utilisateur est datée et, lors de nos tests, de nombreux bugs nous ont ralentis dans la mise en place de nos écrans.

Une fois le travail terminé, comme le code n’est pas compilé par la plateforme, son intégration pourra demander un travail supplémentaire, le data binding en particulier se base sur des types que l’on a définis en les nommant simplement, donc gare aux erreurs de frappe !

Pire, les projets sont certes sauvegardés sur la plateforme, mais y revenir plus tard entraine des problèmes d’affichage qui les rendent parfois inutilisables sur Jetspike.

Enfin, à l’étape d’intégration à un projet (dans un IDE) du code produit, on note des erreurs et warnings, qui nécessitent de retoucher les exports Jetspike.

Bref, difficile à utiliser, instable et producteur d’un code de médicore qualité, l’outil ne nous a pas convaincus.

FlutterFlow

Présentation de l’outil

FlutterFlow se base sur le framework Flutter en version no code et a pour but d’aider à la réalisation d’une application mobile de A à Z. La dernière version de l’outil (2.0) date du 11 avril 2022.

Les plateformes supportées à ce jour sont Android, iOS, Web, MacOS en version beta et Windows en version alpha.

L’outil prend en charge tous les widgets de bases et de nombreuses options permettant notamment de personnaliser l’interface. Il propose des fonctionnalités assez poussées, comme l’intégration de paiements, la connexion à Firebase, l’authentification, les notifications, l’ajout de publicités, la possibilité d’ajouter du code ou encore l’intégration avec GitLab.

Il propose également des fonctionnalités similaires à celles utilisées avec Flutter, comme le hot reload, la gestion du splashscreen, la visibilité sur l’arbre des widgets, la possibilité de créer des composants personnalisés, un alignement intuitif des éléments, la mise en place d’animations, l’extraction de widgets, les Google fonts qui sont intégrées, la gestion du dark mode, la gestion des versions, la possibilité d’avoir un aperçu immédiat sur des appareils différents (téléphone, tablette, ordinateur), un mode debug et d’autres fonctionnalités que nous n’avons pas eu le temps de tester.

Un tutoriel est proposé lors de la première utilisation de l’outil afin de le prendre en main et des templates sont disponibles pour partir sur un projet avec une base déjà créée.

Une version gratuite est disponible mais reste assez limitée. La version payante standard, à 30$/mois, permet principalement de générer des builds et d’exporter le code. La version pro est à 70$/mois, elle permet d’avoir des exemples d’applications, des APIs personnalisées, l’intégration Github ou encore le déploiement de l’application sur les stores.

Retours sur nos tests

L’outil est bien fait avec un agréable design, son interface est intuitive et propose beaucoup de fonctionnalités.

Pour autant, bien que l’interface soit intuitive, l’outil demande un certain temps d’adaptation afin de correctement le maîtriser et pour s’y retrouver au milieu de toutes ces fonctionnalités. Nous n’avons pas eu le temps d’aller bien loin en une après-midi et n’avons pas pu tester toutes les fonctionnalités.

Le tutoriel proposé n’est pas très poussé et ne permet pas de maîtriser l’outil, seulement de savoir mettre en place quelques widgets de base.

Conclusion

Jetspike ne nous a pas convaincus, nous ne le recommandons pas : il apparaît que même après prise en main, travailler avec l’outil demande d’une part des compétences en programmation et d’autre part davantage de temps qu’en codant directement en Flutter.

FlutterFlow est un outil puissant pouvant être particulièrement intéressant pour réaliser de belles interfaces, de manière relativement pratique et rapide, notamment grâce au drag’n’drop des widgets / composants. D’ailleurs, certains utilisateurs s’en servent pour produire des maquettes, comme on peut le faire avec d’autres outils comme Figma ou Adobe XD.

En revanche, pour ce qui est des fonctionnalités plus poussées comme la navigation, la gestion d’état, le paiement, etc. , le développement de l’application devient plus laborieux et nécessite du temps pour prendre en main l’outil.

La version gratuite est assez limitée, la génération de build ou l’export du code sont disponibles uniquement en version payante. Les versions payantes représentent un coût non négligeable.

Envie d’en savoir plus ? Notre équipe est à votre écoute pour en discuter davantage et vous aider à faire le bon choix de solutions en fonction de votre contexte, de vos contraintes et de vos enjeux. N’hésitez pas à nous contacter via notre formulaire de contact.

La communauté de pratique Web-Hybride de Mobiapps.