Flutter va bientôt permettre d'écrire de véritables applications multiplateformes y compris pour le desktop
Et pourrait rivaliser avec Electron

Le , par Coriolan

166PARTAGES

16  0 
Si certains ne jurent que par le développement en natif d’applications, des frameworks multiplateformes offrent désormais la possibilité de concevoir des applications à moindre coût, tout en essayant de livrer les meilleures performances. Certes, cette performance n’est pas aussi bonne que celle d’une application native, mais les entreprises sont tentées de baisser les coûts de développement tout en s’efforçant d’avoir des applications fidèles au maximum aux différentes plateformes.

Flutter est le dernier framework en date développé par Google. Tout en étant open source, il sert à développer des applications multiplateformes pour Android et iOS, ainsi que Fuchsia (Windows, Mac et Linux sont aussi supportés).

Les créateurs de Flutter sont issus pour la plupart du monde du web, c’est pour cela qu’on remarque qu’ils ont essayé d’imprégner les meilleures de ses pratiques dans le mobile. Le moteur de rendu de Flutter, écrit essentiellement en C++ supporte un rendu à bas niveau en s’appuyant sur la bibliothèque graphique Skia de Chrome. Il se connecte également avec des SDK spécifiques de plateforme comme ceux fournis par Android et iOS.

À l’approche d’une version stable et finale, Flutter a gagné en popularité depuis l’annonce de la première version bêta au début de cette année. Il permet d’écrire le code une seule fois et le déployer nativement sur Android, iOS, Windows, Mac et Linux avec toute la logique du web derrière (en utilisant AngularDart), c’est pour ça que ce framework pourrait changer la donne du développement multiplateforme.

Norbert, un étudiant et développeur Android qui contribue au développement de ce framwork a livré une présentation de cette question tout en présentant Flutter desktop, une solution permettant de développer des applications desktop réelles et accélérer le développement pour mobile.

Un client Desktop natif pour accélérer le développement mobile

Avant de s’attarder sur le développement d'applications desktop natives, voyons comment exécuter Flutter sur desktop peut être bénéfique pour le développement mobile.

Temps de démarrage


Pour tout développeur Android, la première des choses est de démarrer l’émulateur Android et exécuter Gradle. Dans le GIF suivant, Norbert a enregistré le démarrage de l’émultaur et l’exécution de l’application par défaut de Flutter. Cette étape a duré 2 minutes et 40 secondes, ce qui est lent.


Démarrage d'Android et exécution de Gradle (vitesse x10)

Pour accélérer cette étape, il vaut mieux exécuter l’application nativement, ce qui évite la nécessité d’exécuter Android sur votre système et passer par Gradle. Norbert explique qu’en utilisant cette méthode, vous pouvez commencer à travailler en quelques secondes.


Démarrage d'un simulateur de Flutter en temps réel

Redimensionnable en temps d’exécution

Tout développeur qui se respecte teste son application sur différentes résolutions d’écran, pour mener à bien cette tâche, vous pouvez soit créer différents émulateurs pour s’assurer que votre application tourne comme il le faut sur chaque appareil, ou bien vous pouvez faire comme ici !


Travailler avec les ressources sur votre PC

« Quand vous êtes en train de développer et tester des applications qui doivent interagir avec des ressources sur votre mobile, il peut être encombrant de transférer d’abord tous les fichiers de test vers l’émulateur ou l’appareil. »

Le mieux serait de pouvoir choisir votre fichier nativement et c’est ce qui est possible ici !


L’implémentation desktop utilise la même méthode canal que l’implémentation mobile, de ce fait, il n’y a pas besoin de changer de code.

Hot reloads et débogage

Du fait que Flutter a été en partie écrit en Dart, le langage de programmation de Google, ce framework bénéficie de la fonctionnalité de Hot Reload. Pour dire simple, elle permet de réduire considérablement les temps nécessaires entre chaque build. Ainsi, vous pourrez accélérer le développement de votre application. Le hot reloading et le débogage sont nécessaires pour tout développeur !


Hot reload et débogage de l'application native

RAM

Si vous n’avez pas une machine puissante, l’utilisation de la mémoire vive peut-être problématique. L’émulateur Android utilise à lui seul près de 1 Gb de RAM. Maintenant, essayez de tester deux applications, IntelliJ et Chrome.


1 Gb de RAM pour l'émulateur d'Android

Parce que l’embedder s’exécuter nativement, il n’est pas nécessaire de charger Android, ce qui réduit l’utilisation de la RAM.


100 Mbs de RAM pour l'application native


Les applications Desktop natives

Comme on l’a vu, Flutter facilite le développement pour mobile, mais qu’en est-il pour les applications desktop. Le fait de simplement exécuter Flutter sur desktop ne permet pas d’avoir une application de production adaptée au bureau. Il apparait juste comme si on a exécuté une application mobile sur desktop. En effet, plusieurs éléments manquent comme le pointage de souris(hover), changement de curseur, l’interaction avec la molette de défilement, etc.

Norbert et Simon Lightfoot ont réussi à implémenter ces fonctionnalités sans avoir à changer le code de plateforme. Il s’agit d’un package qui peut être inclus dans n’importe quelle application Flutter.


Application de chat générique dans Flutter sur Desktop

C’est le même code qui est en train de tourner sur l’émulateur Android.

. . .


Développez pour Android et Desktop en même temps

Remarquez que l’application est normale sur l’émulateur, mais change le curseur et ajoute l’effet de hover sur desktop.

Écrire une vraie application multiplateforme, y compris pour le desktop

Widgets


Pointage de curseur

La conception de l’interface utilisateur dans Flutter inclut la création de nombreux widgets. Un widget dans Flutter représente une description immuable d’une partie de l’interface utilisateur. Tous les graphiques y compris le texte, forme et animation sont créés en utilisant des widgets. Des widgets plus complexes peuvent être créés en combinant des widgets simples.

« La plupart des widgets que vous créez sont universellement utilisables. Comme un bouton, indicateur de chargement, etc. », a écrit Norbert. « Ceux qui nécessitent une apparence différente selon la plateforme peuvent être encapsulés facilement en vérifiant la propriété TargetPlatform. »

Les Widgets comme CursorWidget peuvent aussi être inclus dans la version Android sans souci, ils sont simplement ignorés.

Pages

Les pages se diffèrent un peu selon la plateforme et la taille de l’écran. Cependant, elles sont différentes seulement au niveau de la disposition et non pas la fonctionnalité.

Utiliser PageLayoutWidget rend facile la création de disposition pour chaque plateforme.

Le support de tablette est disponible par défaut

Plugins

Aucun changement n’est nécessaire au code Flutter lors de l’utilisation d’un plugin qui supporte le desktop embedder.

Un projet encore en développement

Ces changements ne sont pas encore disponibles, mais le développeur a informé qu’ils seront prêts prochainement. Le but étant de publier un outil qui sera facile à installer, régler et utiliser dans le futur.

Verdict

Puisque Flutter se compile en natif sur chaque plateforme cible, il est différent de la majorité des frameworks multiplateformes. Il ne perd pas en termes de performance comme les options qui utilisent les webviews ou ponts natifs (native bridges). Flutter n’a pas donc de freins sérieux à la performance.

Il apparait que Flutter (avec ces nouveautés) pourrait devenir une alternative viable à Electron, un framework permettant de développer des applications multiplateformes de bureau avec des technologies web (JavaScript, HTML et CSS). L'infrastructure (backend) est codée en node.js, et l'interface (frontend) est bâtie sur la base des outils Chromium, la partie open source de Google Chrome.

Plusieurs applications populaires comme Slack et Whatsapp Desktop ont été développées avec Electron. Il a permis aussi de développer les éditeurs de texte libres Atom de Github et Visual Studio Code de Microsoft.

Seulement, Electron est très gourmand en ressources (CPU et RAM), et certains développeurs accusent ses utilisateurs (développeurs JavaScript) de paresse, en refusant d’apprendre de vrais langages de programmation.

« Oui, Electron rend la vie facile aux développeurs au dépens des ressources des utilisateurs, autrement dit, c’est un développement pourri. »

Source : billet de blog(Norbert)

Et vous ?

Qu’en pensez-vous ?
Préférez-vous le développement multiplateforme ?
Si oui, quel est votre outil préféré : Flutter ? Electron ? Autre ?

Voir aussi

Google publie la Preview finale de Flutter, son SDK mobile Android et iOS, la dernière étape majeure avant la publication de la version stable 1.0
Quels sont vos environnements de développement intégrés (EDI) préférés en 2018 ? Et pourquoi ? Partagez vos avis
Le mode sombre d'Android permet-il d'économiser l'énergie de la batterie des smartphones ? Oui, confirme Google
Kotlin 1.3 est disponible : coroutines désormais stables, Kotlin/Native Beta, bibliothèques multiplateformes et bien plus encore

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de archqt
Membre confirmé https://www.developpez.com
Le 04/12/2018 à 9:37
Bonjour,
ok on apprend que c'est fait en C++, cool...mais j'ai pas l'impression qu'ensuite l'application pourra être en C++, et qu'il faudra apprendre (encore) un autre langage DART.
Qu'en est il de la licence ? BSD ? Y a t il un designer ?
Désolé je suis pris là, je n'ai pas eu le temps de rechercher sur google. Le truc que j'aimerai bien c'est un truc à la QML en licence BSD, MIT...
Bonne fin de journée
Avatar de MaximeCh
Membre éclairé https://www.developpez.com
Le 04/12/2018 à 10:39
Je comprends pas, tu cherches un truc à la QML avec designer? Qu'est ce qu'il te manque dans le monde Qt?
Sinon curieux aussi de savoir si on peut programmer dans le langage de son choix dessus.
Avatar de Kikuts
Membre éclairé https://www.developpez.com
Le 04/12/2018 à 15:10
Pour tout ceux qui se posent la question, étant dév C# XAML (WPF, UWP, Xamarin Forms), avec peu d'expériences en React/Vue/Angular,
je suis presque tombé amoureux de Dart. Je m'étais essayé un peu à React, à TypeScript, à Node, je n'avais pas accroché à ces technos.

Ca faisait très longtemps qu'un langage ne m'avait pas autant bluffé et séduit.
La learning curve est impressionnante. Ce langage est nettement plus accessible que C# (peut être que mon expérience en tant que dév m'a facilité l'apprentissage).

J'ai commencé par me faire la main sur un site web classique avec du Dart puis sur Angular/Dart. Je m'éclate.
Concernant Flutter, je n'ai joué qu'avec le projet HelloWorld et le hot reload.

Mais il est évident que ça va faire un carton. De plus, je pense que Dart sera un langage de premier choix pour concevoir des appli sur Fuschia donc c'est tout bénéf.

Il ne manquait que le fait de pouvoir target les desktop. C'est en bonne route.

Par contre (je me trompe peut être car je suis encore un débutant sur cette techno) mais dire que le même code s'exécute sur le Web ou mobile, c'est un peu trompeur. Sauf si Flutter permet de transformer les widgets en HTML (et ça je ne crois pas. A moins qu'ils prévoient de fournir une sorte de player Web de Flutter), la partie front est différente entre le Web et le mobile. (on peut cependant mutualiser / réutiliser du code métier, des services à la fois sur mobile et sur le Web)
Avatar de archqt
Membre confirmé https://www.developpez.com
Le 04/12/2018 à 16:17
Citation Envoyé par MaximeCh Voir le message
Je comprends pas, tu cherches un truc à la QML avec designer? Qu'est ce qu'il te manque dans le monde Qt?
Sinon curieux aussi de savoir si on peut programmer dans le langage de son choix dessus.
Pas forcément mais on se retrouve, encore, avec un nouveau paradigme, une nouvelle forme d'écriture. Je trouve que celle de QML est pas mal. J'adore Qt mais dans le monde de Qt, il y a plusieurs choses gênantes :
  • la licence est un peu embêtante car sur beaucoup de composants c'est devenu GPL ou Commercial
  • un projet commencé en LGPL ne peut pas passer en commercial
  • la licence est une licence par mois et assez chère, il n'est pas prévu de façon officielle de pouvoir acheter une version comme cela se fait avec C++Builder
  • les programmes sont "lourds" et pas facile à réduire car il faut respecter la licence LGPL


Du coup un autre projet plus léger multi-plateforme serait pas mal je trouve.
Avatar de Bill Fassinou
Chroniqueur Actualités https://www.developpez.com
Le 08/05/2019 à 14:21
Flutter : le framework UI de Google, en plus du mobile, prend désormais en charge le desktop,
le Web et l'embarqué

L’équipe de Google qui travaille sur le développement de Flutter, son framework gratuit et open source d’interface utilisateur, a annoncé hier qu’après plusieurs mois de travail, le framework étend désormais son utilisation à d’autres types de plateformes. À l’avenir, vous pouvez enrichir l’expérience de vos utilisateurs sur les plateformes telles que le Web, les applications de bureau et sur les périphériques de petites tailles. Cette nouvelle arrive environ deux mois après la publication de la version 1.2 du framework livrée avec Dart DevTools, une suite d’outils de programmation et la version 2.2 du langage de programmation Web Dart.

Flutter est un framework de développement d'interface utilisateur gratuit et open source créé par Google. Jusque-là, il était utilisé pour développer des applications pour Android et iOS et constitue également la méthode principale de création d'applications pour Google Fuchsia. Cependant, grâce aux possibilités qu’offre le langage de programmation Web Dart et aux nouveaux outils de développement mis en place aujourd’hui par les navigateurs, Google a pu étendre dans un premier temps le support du framework Flutter vers le Web puis dans un second temps vers les applications bureautiques exécutées par Windows, Mac OS et Linux et à d'autres plateformes. Désormais, a indiqué Google, le framework Flutter devient un framework d’interface utilisateur portable pour tous les écrans.


À travers cette mise à jour du framework, Google entend permettre aux entreprises d’offrir de meilleures expériences à leurs clients sur tous les types d’écrans notamment par le biais d’applications mobiles, de bureau et de Web. « Pour les startups, la possibilité de joindre des utilisateurs sur un mobile, sur le Web ou sur un ordinateur de bureau par le biais de la même application leur permet d’atteindre l’ensemble de leur public dès le premier jour, au lieu d’avoir des limites pour des raisons techniques. En particulier pour les grandes entreprises, la possibilité de fournir la même expérience à tous les utilisateurs avec une base de code réduit la complexité et les coûts de développement, et leur permet de se concentrer sur l'amélioration de la qualité de cette expérience », a déclaré l’équipe en charge du développement du framework.

Flutter n’est donc plus un framework mobile, mais un framework multiplateforme qui peut vous aider à atteindre vos utilisateurs où qu'ils soient. Voici listés ci-dessous les nouveaux apports de Google au framework d’interface utilisateur Flutter :

Flutter pour le Web

Flutter pour le Web est une implémentation de Flutter compatible avec le code et rendue à l'aide de technologies Web standard telles que HTML, CSS et JavaScript. Avec Flutter pour le Web, vous pouvez compiler le code Flutter existant écrit avec le langage de programmation Dart en une expérience client qui peut être incorporée dans le navigateur et déployée sur n’importe quel serveur Web. Vous pouvez utiliser toutes les fonctionnalités de Flutter et vous n'avez pas besoin d'un plug-in de navigateur. Bien que Flutter pour le Web soit encore en développement, Google l’a essayé en partenariat avec le New York Times (NYT) pour développer une nouvelle interface du jeu de Puzzle KenKen que le journal américain propose à ses abonnés. Le jeu a été actualisé et utilise le même code sur Android, iOS, Web, Mac et Chrome OS.

« Les mots croisés du New York Times comptent plus de 400 000 abonnements indépendants et constituent un rituel quotidien pour les personnes qui résolvent des énigmes. Parallèlement à ce dernier, nous avons élargi notre portefeuille de puzzles numériques qui atteint plus de deux millions de résolveurs chaque mois. Nous commencions déjà à explorer Flutter comme solution potentielle au défi de développer rapidement des expériences mobiles attrayantes et de grande qualité. Maintenant, l'ajout de la possibilité de publier sur le Web fait de Flutter une option encore plus attrayante pour un déploiement rapide sur toutes nos plateformes d'utilisateurs. Cette mise à jour de notre ancien jeu KenKen basé sur Flash dans une expérience jouable multiplateforme est quelque chose que nous sommes ravis d'apporter à nos solveurs cette année », a déclaré Eric Von Coelln, directeur exécutif de Puzzles au New York Times à propos de ses expériences avec Flutter.

Flutter pour le desktop

Ce projet a été créé à l'origine pour développer les implémentations de Flutter sous Windows, Mac OS, Chrome OS et Linux. Des travaux sont en cours pour étendre Flutter au support de bureau en tant qu’environnement cible, permettant aux développeurs de créer des applications sur les plateformes précitées avec Flutter. À long terme, cet effort créera une solution totalement intégrée dans laquelle flutter create, flutter runet flutter build fonctionnera pour les plateformes de bureau comme pour les plateformes mobiles, mais cet effort est toujours en cours, a annoncé Google. Bien que ces cibles ne soient pas encore prêtes pour la production, l’équipe de Google Flutter dit avoir publié les premières instructions pour développer des applications Flutter à exécuter sur Mac, Windows et Linux.

Flutter pour les périphériques intégrés

La portabilité de Flutter s’étend également vers les périphériques intégrés c’est-à-dire des appareils de plus petites tailles telles que les Raspberry Pi et Google Home Hub. À ce stade, explique Google, l’une des plateformes intégrées les plus omniprésentes où Flutter est déjà en cours d’exploitation repose sur le système d’exploitation d’affichage intelligent qui alimente les goûts de Google Home Hub. Cela dit, amener Flutter sur une nouvelle plateforme nécessite de porter le moteur Flutter sur la cible, ainsi que de mettre en œuvre une imbrication. Le moteur Flutter est intrinsèquement multiplateforme et peut fonctionner avec diverses API de rendu client (rendu OpenGL, Vulkan et logiciel). Il inclut la machine virtuelle d'exécution Dart.

Flutter pour le mobile

Pour le mobile, Google a annoncé la mise à jour du framework vers sa version 1.5. Selon Google, Flutter 1.5 inclut des centaines de modifications en réponse aux commentaires des développeurs, notamment des mises à jour pour les nouvelles exigences du SDK iOS d'App Store, des mises à jour des widgets iOS et Matériau, la prise en charge des nouveaux types de périphériques par le moteur et Dart 2.3 qui intègre les nouvelles fonctionnalités du langage UI-as-code. Google a annoncé avoir mis au point au cours des derniers mois des packages de qualité production pour les affichages Web, Google Maps et Firebase ML Vision. Google a ajouté ensuite cette semaine la prise en charge initiale des paiements intégrés à l'application. Enfin, avec plus de 2 000 packages open source disponibles pour Flutter, des options sont disponibles pour la plupart des scénarios.

« Flutter est rapide ! Des fonctionnalités qui nous ont pris plusieurs jours à implémenter peuvent être terminées en une seule journée. De nombreux problèmes sur lesquels nous passions beaucoup de temps ne se produisent tout simplement plus. Notre équipe peut désormais se concentrer sur la création d’expériences utilisateur plus raffinées et sur la fourniture de fonctionnalités. Flutter nous permet de dépasser nos attentes. », a déclaré Larry McKenzie, développeur senior chez eBay à propos de Flutter.

Pour finir, Google informe que, LinkedIn a récemment mené une étude qui montrait que Flutter était la compétence la plus rapide parmi les ingénieurs en logiciel, selon les membres du site qui l'ont déclarée dans leur profil au cours des 12 derniers mois. De plus, continue Google, dans une récente enquête sur les développeurs StackOverflow de 2019, Flutter figurait parmi les infrastructures de développement les plus appréciées par les développeurs UI (user interface).

Source : Google

Et vous ?

Que pensez-vous de Flutter ?
Parviendra-t-il à concurrencer Electron ?
Entre Flutter et Electron, lequel préféreriez-vous ? Pourquoi ?

Voir aussi

Google lance Flutter 1.2, son SDK open source de développement d'apps mobiles iOS et Android et Dart DevTools, une suite d'outils de programmation

Un développeur donne des raisons qui peuvent justifier l'utilisation de Flutter, le framework de Google pour créer des apps natives iOS et Android

Flutter va bientôt permettre d'écrire de véritables applications multiplateformes y compris pour le desktop et pourrait rivaliser avec Electron
Avatar de smarlytomtom
Membre averti https://www.developpez.com
Le 08/05/2019 à 17:22
C'est une bonne nouvelle à mon goût ! J'espère qu'on commencera à mettre de côté toutes ses applications basées sur Electron qui mange notre mémoire ! Peut-être même les réécrire ?
Hâte de voir comment les développeurs vont l'accueillir .
Avatar de blbird
Membre éprouvé https://www.developpez.com
Le 08/05/2019 à 17:37
Citation Envoyé par smarlytomtom Voir le message
J'espère qu'on commencera à mettre de côté toutes ses applications basées sur Electron qui mange notre mémoire ! Peut-être même les réécrire ?.
Sur Windows 10, mon Discord prend moins de 220 Mo en mémoire. A côté, Firefox avec 5 onglets prend prêt de 1000 Mo. Je ne sais pas d'où sort cette idée qu'Electron est consommateur de mémoire plus que d'autres applications.
Avatar de Uther
Expert éminent sénior https://www.developpez.com
Le 08/05/2019 à 18:42
Donc ton Firefox fait lui aussi environ 200 Mo par onglet.
Donc le problème est bien là : Electron consomme autant qu'une appli Web alors qu'en théorie, il pourrait être bien plus léger.
Avatar de blbird
Membre éprouvé https://www.developpez.com
Le 08/05/2019 à 19:00
Citation Envoyé par Uther Voir le message
Donc ton Firefox fait lui aussi environ 200 Mo par onglet.
Donc le problème est bien là : Electron consomme autant qu'une appli Web alors qu'en théorie, il pourrait être bien plus léger.
En fait c'est critiquer juste pour le plaisir ou bien? Mon Discord est ouvert avec 12 serveurs, soit 12 onglets. Skype est proche des 300 Mo alors qu'il n'est même pas ouvert. Chrome prend 420 Mo avec un pauvre onglet ouvert VIDE. Krita vide prend 250Mo de mémoire sans rien d'ouvert.

Et oui, Discord est une application très complète, qui ne consomme pas beaucoup en mémoire comparativement à la plupart des applications Windows actuelles équivalentes. Sa consommation mémoire n'a rien de déraisonnable du tout.

Je ne dit pas qu'elle pourrait ne pas être moindre, mais elle n'est clairement pas déraisonnable comme vous semblez chercher à le faire croire.
Avatar de archqt
Membre confirmé https://www.developpez.com
Le 08/05/2019 à 21:24
S'il pouvait faire en sorte
  • que l'on puisse l'utiliser en C++ ce serait encore mieux
  • Et un langage de description d'interface plutôt que du code (style QML pourquoi pas, j'aime bien le format JSON pour cela)


Je n'ai rien contre Dart mais disons que cela permettrait de rassembler encore plus de monde autour de ce projet.

PS Je sais qu'il y a un "pluging" pour pouvoir se greffer sur un noyau C++ mais c'est dommage d'avoir un truc codé en C++ (Skia) et ensuite de ne pas pouvoir facilement utiliser le langage de base de la bibliothèque graphique.
Contacter le responsable de la rubrique Accueil

Partenaire : Hébergement Web