Guide du débutant Flutter

En dehors de la mi-2019, la plateforme multiplateforme est fermement entrée dans la vie des startups du monde entier, mais le plus souvent, les équipes de développement externalisées et les clients qui comptent sur la réduction des coûts la regardent. Quelqu'un parie sur React Native, quelqu'un explore les possibilités de Kotlin Multiplatform, et le nouvel invité du podcast AppsCast Evgeny Saturov saturovv a activement développé sur le Flutter pendant les six derniers mois, surveillant les mises à jour du cadre et promouvant la technologie auprès des masses. De nombreux liens et conseils utiles pour le développeur Flutter débutant: des directives au référentiel avec des exemples de mise en œuvre de l'architecture - dans une conversation avec Eugene.



AppsCast est un podcast de développement mobile publié avec le soutien de la conférence AppsConf . Toutes les deux semaines, un nouvel invité avec qui nous Daniil Popov ( int02h ) discutons des technologies, des meilleures pratiques, de la vie des développeurs, ainsi que de l'holivar et partageons nos expériences.

Alexei Kudryavtsev : Bonjour à tous, aujourd'hui nous visitons Zhenya Saturov, développeur chez Surf et hôte de Flutter Dev Podcast . Zhenya, parlez-nous un peu de vous.

Evgeny Saturov : Toute ma vie consciente, j'ai été développeur Android, mais je ne suis pas aussi sûr de mon avenir sans nuage qu'auparavant. Au cours des six derniers mois, au sein de l'entreprise, nous avons été activement intéressés par Flutter, nous essayons de l'intégrer dans le processus de développement de la production.

Alexei Kudryavtsev : Comment êtes-vous soudainement passé à Flutter à partir d'un développement Android?

Evgeny Saturov : Une question difficile. Je me demande parfois moi-même. J'ai accidentellement entendu parler de Flutter de la part de son plus important propagandiste du pays, Zviad Kardava, lors d'un devfest à Novossibirsk. Nous avons étudié et décidé d'essayer, pendant six mois que nous écrivions sur Flutter, nous nous sommes liés d'amitié avec une interface utilisateur déclarative.

Captures de flottement

Daniil Popov : Qu'est-ce qui vous a attiré chez Flutter?

Evgeny Saturov : Flutter a un seuil d'entrée bas, il manque les concepts d'activité et de fragment, et le cycle de vie est élémentaire et se compose de trois étapes. Tout dans Flutter est un widget: l'application elle-même, que nous représentions comme une classe d'application, tout bloc est un widget dans lequel un autre widget est intégré. Tous les écrans sont construits exclusivement par composition. La structure d'une application Flutter nécessite une architecture plus rationalisée, un flux de données plus cohérent.

Votre tête se casse un peu lorsque vous essayez d'écrire une vue personnalisée dans Flutter après le développement Android. Cela ne fonctionne pas là-bas. Vous devez intégrer les vues les unes aux autres et obtenir des éléments combinés plus complexes.

Chez Google, les E / S ont présenté Jetpack Compose pour Android, qui vous permet d'écrire l'interface utilisateur de manière déclarative. L'idée est entièrement empruntée à Flutter, même les noms sont réutilisés.

Alexei Kudryavtsev : Il existe une telle théorie du complot que Google prépare les développeurs Android pour Flutter.

Evgeny Saturov : Je peux vous lancer une autre théorie du complot - Apple prépare ses développeurs pour Flutter.

La différence entre Flutter et d'autres solutions multiplateformes

Alexei Kudryavtsev : Tout ce que vous avez dit est similaire à la caractéristique des produits React Native ou Xamarin. Quelle est la différence?

Evgeny Saturov : Écrire une bonne application productive sur React Native est difficile à cause des solutions techniques qui la sous-tendent. L'interaction avec la plateforme n'est possible que via JavaScript Bridge. Dans le processus, cette opération réduit considérablement les performances, ce qui est essentiel lors du rendu de l'interface utilisateur.

Flutter, cependant, a résolu le problème des performances à un prix élevé - les développeurs du framework ont ​​dû écrire leurs packs de widgets sur Dart (Flutter est également écrit dessus). Lors du rendu, le problème de l'affaissement par fps a non seulement disparu, mais l'équipe Flutter assure également qu'en théorie, il est possible d'atteindre non seulement 60fps, mais aussi 120fps sur les appareils qui le supportent.

Beaucoup discutent de la raison pour laquelle le cadre ne prend pas en charge Kotlin et s’il apparaîtra, mais les développeurs de Flutter disent qu’ils n’ont pas une telle tâche, mais peut-être que quelqu'un d’autre le fera, comme JetBrains.

Daniil Popov : Il est évident qu'il existe Kotlin Multiplatform. Vous devez faire partie du compilateur qui compile Kotlin dans Dart, et il y aura du profit.

Alexei Kudryavtsev : Vous le dites, comme si c'était comme cliquer sur vos doigts.

Evgeny Saturov : La majeure partie du travail a déjà été effectuée. Sur Google I / O, ils ont parlé d'optimiser le Garbage Collector de Kotlin, qui vous permettra d'utiliser des tonnes d'objets en une milliseconde. Ceci est important, car lors du rendu de l'interface utilisateur, des milliers de graphiques de widgets sont régénérés toutes les 16 millisecondes et doivent être éliminés d'urgence pour éviter le colmatage de la mémoire. Auparavant, Kotlin ne savait pas comment, contrairement à Dart, mais maintenant rien n'empêche de le faire glisser dans Flutter.

Alexei Kudryavtsev : La première partie du processus de recyclage est l'attribution de nombreux objets. Non, les performances s'affaissent-elles à ce stade?

Evgeny Saturov : Les objets eux-mêmes sont légers. En creusant plus profondément, l'application Flutter est une énorme vue d'ensemble du recyclage, une liste avec des éléments réutilisables qui ne sont rendus que lorsque les données derrière eux changent. Dans le même temps, les widgets qui sont recréés toutes les 16 millisecondes n'ont rien à voir avec les widgets qui sont dans Android et sont responsables de se dessiner sur la toile.

Ici, le widget est une classe de données, dans laquelle il existe des données décrivant ce widget. Le widget qui est dessiné sur la toile existe en une seule copie tout au long du cycle de vie. Seul son wrapper de données est entièrement recréé. Cela vous permet de travailler rapidement sans obstruer votre mémoire.

Flutter est un projet entièrement open source.

Ce n'est pas le genre d'open source qui se reflète une fois par trimestre d'un référentiel fermé à un github public. Il s'agit d'un véritable open source, où le développement s'effectue directement dans le référentiel ouvert sur le github. Vous pouvez apporter des modifications aux widgets, écrire votre pack de widgets et l'utiliser dans votre entreprise.

Alexei Kudryavtsev : S'ils ont complètement créé leurs propres widgets, comment ça se passe avec les animations et les transitions entre les écrans, par exemple sur iOS?

Evgeny Saturov : La question la plus importante est de savoir comment rendre l'application familière aux utilisateurs de cette plate-forme. Hors de la boîte, cela ne se produit pas dans presque tous les cas. Si vous écrivez une application sur Dart et utilisez une sorte de pack de widgets, au démarrage, l'application sur Android et iOS se ressemblera.

Afin d'obtenir l'expérience native sur la plateforme, vous devez tester manuellement la plateforme sur l'application en cours d'exécution. S'il s'agit d'iOS, vous utiliserez des widgets du pack Cupertino, s'il s'agit d'Android, des widgets du pack de matériaux. La même chose avec les transitions: vous pouvez activer le balayage arrière pour iOS, mais sur Android, il y aura une navigation native.

Alexei Kudryavtsev : Comment se passe le passage d'un pack à l'autre? Avez-vous vraiment besoin d'écrire "si iOS, utilisez ceci", "si Android, alors ceci"?

Evgeny Saturov : Oui, exactement, à droite littéralement. Sur Google I / O, j'ai demandé aux développeurs Flutter pourquoi ne pas quitter la boîte, coudre un chèque à l'intérieur de la plate-forme qui fonctionne actuellement et définir automatiquement des widgets. Après tout, les gens s'attendent à ce qu'un framework d'interface multiplateforme fasse tout cela lui-même. Ils ont répondu qu'ils voulaient donner aux utilisateurs la liberté de choisir l'apparence de l'application.

Étant donné qu'il est possible d'écrire des packs de widgets de marque pour votre système de conception, vous pouvez écrire une application avec la même apparence sur les deux plates-formes.

À propos des internes Flutter

Daniil Popov : Donc, Flutter a son propre moteur de rendu, qui dessine indépendamment tous les widgets?

Evgeny Saturov : Oui, mais «votre» n'est pas tout à fait le bon mot. Il s'agit de Skia, un moteur bien connu qui fonctionne depuis longtemps dans Chrome, Firefox et un certain nombre d'autres navigateurs.

En fait, l'équipe Flutter est une équipe dérivée de Chrome.

Les développeurs ont été chargés d'overclocker le moteur Chromium au maximum. Dans le même temps, il n'était pas nécessaire de conserver la capacité de rendre la page html. Avec cette condition, ils ont pu l'accélérer presque vingt fois et ont commencé à penser quoi faire avec un tel résultat.

Il est devenu clair que le Web n'est pas la seule application pour ce moteur, et ils ont essayé de faire quelque chose pour le développement mobile. Skia resserré, écrit leurs widgets, et nous avons obtenu des applications assez puissantes. Ensuite, ils l'ont terminé de manière itérative jusqu'à l'état actuel, lorsque nous pouvons écrire des applications complètes, avec une mise en œuvre méticuleuse indiscernable des applications natives.

Alexei Kudryavtsev : Quoi d'autre sous le capot de Flutter? Pouvez-vous me dire en quoi il consiste, où est l'optimisation qui permet d'atteindre de telles performances?

Evgeny Saturov : Si nous parlons de l'architecture de la plateforme elle-même, il faut alors distinguer deux couches principales. La base est écrite "sur les pros". Il comprend Skia - un moteur graphique qui tire toute cette beauté, un moteur de texte entièrement emprunté à Android et Dart VM. La deuxième couche est entièrement écrite en Dart. Il contient tous les packs de widgets: animations, traitement des gestes, Foundation Pack avec toutes sortes de choses. Du fait que tout est écrit en Dart, de bonnes performances sont fournies.

J'insérerai immédiatement cinq cents: si après cette version vous décidez d'essayer de faire quelque chose sur Flutter, installez le plug-in sur Android Studio, récupérez votre première application et dites que vous avez été cruellement trompé, car tout est lent, vous aurez raison. Cela se produit pendant la construction du débogage, qui ralentit vraiment, le retard des animations, les listes défilent à peine et l'application pèse environ 60 Mo. Le fait est que dans la première version, vous tirez un énorme morceau de Dart VM. Il s'agit d'une redevance pour la possibilité de recompiler à la volée. Lorsque vous assemblez la version finale, tous ces mégaoctets seront emportés par le vent, l'application fonctionnera beaucoup plus rapidement, sans affaissement fps du tout. Cette remarque est très importante pour ne pas effrayer les développeurs débutants de Flutter.

Dart VM est un sujet distinct. Il est à noter que le principal contributeur est notre développeur russe Slava Egorov, avec qui ils ont enregistré la sortie de Flutter Dev Podcast . Dart VM vous permet de mettre à jour rapidement le code lorsque des modifications sont apportées. Cela s'appelle Hot Reload - vous apportez des modifications au code, cliquez sur le bouton et après une seconde, les modifications sont déjà visibles sur l'appareil. Cela accélère considérablement le développement et crée une atmosphère favorable dans l'équipe.

Alexei Kudryavtsev : Il me semble qu'il est important que pendant le rechargement à chaud vous restiez dans un état de flux. C'est amusant sur de petits projets. Mais lorsque le projet est volumineux, vous avez déplacé une vue et attendez dix minutes.

Evgeny Saturov : Oui, j'ai entendu des plaintes d'Ayosnikov selon lesquelles l'assemblée peut prendre jusqu'à 10 à 15 minutes.

Un des points forts de Flutter est le péage.

Je ne sais pas comment dans iOS, mais dans Android, le péage est une douleur. Chaque mise à jour d'Android Studio casse quelque chose, et cela fonctionne lentement, cela nécessite des ressources irréalistes, le dernier processeur et une montagne de RAM. Flutter offre immédiatement un péage léger. Il n'est pas nécessaire de travailler dans Android Studio, vous pouvez télécharger VS Code, y installer un plug-in, et cela suffira pour le développement. Je dois dire tout de suite que pour un travail à part entière avec Flutter, vous avez toujours besoin d'un équipement Apple, car sinon vous ne pourrez pas vérifier votre montage sur l'iPhone.

Daniil Popov : Vous avez dit que Flutter se développe à pas de géant, mais y aura-t-il des problèmes de compatibilité descendante à cause de cela? Par exemple, j'ai convaincu l'entreprise de faire une application sur Flutter, nous avons écrit, débogué, et voici la nouvelle version de Flutter ou Dart, et notre code ne compile pas, tout s'écroule. Je me suis assis dans une flaque d'eau devant le client.

Evgeny Saturov : Cela pourrait très bien arriver. Il y a une chose aussi intéressante que les sondages UX menés par l'équipe Flutter.

Le dernier sondage demandait: «Êtes-vous prêt pour des changements non pris en charge sans compatibilité descendante au nom de la simplicité et de la pureté du cadre?» Plus de 80% ont dit qu'ils étaient prêts.

Je ne sais pas s'ils ont bien réfléchi avant de répondre à la question, et dans quelle mesure les résultats étaient légitimes, mais la présence d'une telle publication indique que désormais les développeurs autoriseront des modifications non prises en charge. Cependant, l'ayosniki ne s'y habitue pas. Combien Swift a-t-il déjà été mis à jour de manière assez radicale?

Par où commencer?

Daniil Popov : Par où commencer si vous décidez d'essayer Flutter par vous-même? Par souci d’intérêt, j’ai ouvert les codelabs de Google et il existe des exemples concrets de transfert de Java à Dart. Existe-t-il une telle chose pour les développeurs iOS?

Evgeny Saturov : L'équipe de développement de Flutter a publié une série d'articles sur la façon de migrer vers des représentants de différents profils. Il y a Flutter pour les développeurs Android , Flutter pour les développeurs iOS . J'ouvre et vois, par exemple, "Quel est l'équivalent pour la vue de l'interface utilisateur dans Flutter?" ou "Où est mon Storyboard?". On répond à toutes ces questions. Je vous conseille de commencer par ces articles, ils sont tous dans la documentation Flutter.

Il faut encore aborder le sujet de la façon de se faire des amis avec Dart comme langage de développement pour Flutter. Il y a un Dart Language Tour pour cela . Il y a tous les concepts de base de Dart. Mais, honnêtement, certaines choses diffèrent un peu plus significativement (surtout si vous creusez plus profondément), certaines choses manquent, par exemple, la surcharge de fonction, vous devez toujours mettre un point-virgule à la fin de la ligne ...

Alexey Kudryavtsev : Y a-t-il de la documentation? Qui puis-je suivre sur Twitter? Des blogs sur le médium?

Evgeny Saturov : Bien sûr, maintenant il y a beaucoup d'informations. Il existe un site Web Flutter avec des instructions détaillées sur la configuration d'un environnement de développement, les éléments à télécharger, les kits de développement logiciel (SDK) et les plugins à installer. Il existe des mots de code, ils sont assez simples et raisonnablement informatifs, car ils ne donnent pas la centième partie de ce qu'est Flutter. Mais d'abord, pour comprendre le concept en principe, les codelabs feront l'affaire. Je ne recommande pas de tout parcourir, il y en a des assez difficiles qui intègrent Google Maps dans l'application. C'est également intéressant, mais il y a plus de bruit avec les clés que de vrai développement. Il suffit de passer par les trois premiers. Il existe des exemples plus fonctionnels - des clones de véritables Whatsapp, des applications Instagram avec des hypothèses.

Alexei Kudryavtsev : C'est cool, avec des instructions de migration.

Evgeny Saturov : Oui, vous pouvez voir comment en réalité les gens font les choses que nous avons l'habitude de voir dans les applications. Cela aide à démarrer.
De plus, il existe un tas de cours payants sur Udemy, mais je doute que ce soit très nécessaire. J'ai regardé en quoi ils consistaient, et toutes ces informations (peut-être pas si structurées) peuvent être trouvées absolument gratuites.

Je recommande également le site https://itsallwidgets.com/ , qui vous permet d'installer des applications vitrines sur votre appareil dès maintenant (peu importe si vous allez développer quelque chose sur Flutter ou non) et voir comment elles fonctionnent. Il existe une application History of Everything qui a été écrite en trois mois. C'est un fan absolu, des animations folles. Il y a une chronologie géante sur laquelle vous pouvez zoomer, et divers épisodes de la vie humaine commencent à y apparaître. Chacun a sa propre animation personnalisée. Tout se fait sur Dart sans bibliothèques natives. Sur ce site, vous pouvez comprendre où sont les capacités de Flutter: il y a des jeux écrits exclusivement sur Dart, rendus sur Skia, il y a aussi des applications régulières.

Le concours Flutter Create a eu lieu récemment: vous deviez écrire votre propre petite application à condition que la source, y compris toutes les dépendances, ne pèse pas plus de 5 Ko. Le compagnon a gagné, qui a fait un pas de terre interactif, que vous pouvez tordre, piquer n'importe où et voir des prévisions météorologiques réelles. Cela semble complètement irréaliste. Ces choses peuvent être utilisées pour l'inspiration.

Et vous pouvez toujours utiliser plusieurs référentiels sur GitHub créés par des passionnés. Ils sont tous appelés les mêmes - Awesome Flutter. Ce sont des collections avec tous les échantillons, bibliothèques, articles.

À propos des ressources d'information. Je vous recommande de vous abonner à la chaîne YouTube officielle Flutter. Il y a des émissions qui sortent régulièrement. Widget Flutter de la semaine - chaque semaine, une histoire détaillée sur un seul widget, les principaux cas d'application et les fonctionnalités. Le Boring Flutter Development Show est un format de spectacle intéressant qui dure une heure et sort sans modification. Pendant tout ce temps, les participants codent. Il semble qu'ils le fassent sans trop de préparation, parce que des erreurs sortent constamment, ils essaient de faire quelque chose, ils sont stupides, ils ne comprennent pas ce qui se passe. Regarder cela est incroyablement intéressant.

Si vous regardez tous ces spectacles (il y en avait relativement peu), vous pouvez devenir une personne complètement différente et croire que vous avez écrit Flutter toute votre vie. Ils évoquent des sujets intéressants, des problèmes auxquels les gens sont confrontés et vont à la recherche d'une solution. Il met en vedette toutes les principales stars de Flutter: Emily Fortuna , Andrew Brogdon . Vous pouvez vous y abonner sur Twitter, ils publient activement. Vous devez absolument vous abonner à Brian Egan , il a un référentiel avec 16 échantillons avec différents modèles architecturaux. C'est une chose indispensable lorsque vous écrivez déjà sur Flutter et au début du projet, vous devez choisir l'architecture que vous utiliserez. Allez simplement voir Brian, et il a déjà tout préparé pour vous. Ces gars font avancer l'industrie du développement Flutter.

Flutter en production

Alexei Kudryavtsev : Disons que je suis le directeur technique de l'entreprise. Où puis-je rechercher des développeurs Flutter?

Evgeny Saturov : C'est comme les gens: il y a des bavardoirs ouverts dans un télégramme avec suffisamment de gens qui écrivent déjà sur Flutter. Mais je dirais que vous n'avez pas besoin de chercher un développeur Dart. La langue est un outil et son ignorance n'est pas un obstacle à l'embauche. Une autre question est que Flutter n'est pas seulement du code Dart. Vous devez toujours accéder à la plateforme. Et voici la question: à quelle vitesse les développeurs Android trouveront-ils comment procéder sur iOS, et vice versa, à quelle vitesse votre développeur Web le comprendra, comment le faire à la fois là et là-bas.

Actuellement, l'équipe de développement Flutter la plus équilibrée est composée de développeurs Android et iOS.

Une autre chose est que ce n'est pas toujours possible à réaliser, car les ayosniki se méfient toujours de Flutter.

Alexei Kudryavtsev : Comment Flutter est-il utilisé dans la production? Combien de projets y avez-vous écrit en studio? Et combien cela rentre-t-il?

Daniil Popov : Et qui d'autre que vous écrit dessus?

Evgeny Saturov : Dans notre cas d'externalisation, cela vole de plein fouet , car nous pouvons proposer un prix inférieur à celui de deux applications natives. Au cours des dix années d'existence de frameworks natifs, tous les clients sont habitués à devoir payer deux fois pour le même travail par défaut, ce qui coûte cher, surtout pour les petites entreprises qui comptent de l'argent.

Pour eux, Flutter est une bouée de sauvetage, comme toute plateforme multiplateforme, juste Flutter donne un résultat vraiment cool.

Et il y a déjà des clients qui viennent dire: - Nous n'avons besoin que de Flutter. Récemment, cela s'est produit de plus en plus.

Nous collectons toujours des analyses parce que nous avons terminé un petit projet que nous avons choisi comme pilote. Il s'est avéré que cela se faisait environ une fois et demie plus vite que si nous faisions deux projets natifs en parallèle. Il ne faut pas oublier que c'était notre première expérience sérieuse et que de nombreux problèmes ont été résolus pendant longtemps. Idéalement, vous pouvez obtenir une double augmentation de la vitesse avec les forces d'une équipe plus petite. Et n'oubliez pas qu'il y aura alors moitié moins de débogage, vous n'aurez pas à corriger les bugs sur deux plateformes.

À propos de qui d'autre utilise Flutter. J'ai récemment découvert que certains projets (bien sûr, pas phares) sont écrits à Odnoklassniki, à Grab, un taxi en Asie du Sud-Est qu'Uber a récemment acheté.

La tendance générale est la suivante: il est bien adapté au prototypage, adapté à l'expérimentation, car il y a interopérabilité avec le natif.

Flutter iOS Android-, A\B , , , .

-, ( json, , ).

Flutter ? , , , , , . Flutter — UI, , , .

: ?

: , iOS - , Flutter , . ?

: iOS , , , -, GPU. , iOS- — CPU. , , Flutter, CPU, GPU. - . opengl . Flutter , .

: . , Flutter Engine, . , : APK , 64- . , -.

( ), , iOS- , X-Code ( ).

. Cupertino Widgets 70%. view controller — , . — , .

, , : , . , res, , . Flutter Dart-, . , .

Flutter

: Flutter, roadmap?

: , . Google I/O Flutter for Web , Flutter- web- . Flutter Engine. , . roadmap — . , , .

, , — .

Flutter, , , , , .

, Flutter- . showcase Flutter Live, . flutter-: . , , - developer preview, .

, Flutter . , , .

Release Notes , . , , , , , . , , - , issues Flutter.

Conclusions

: . Flutter , , . Xamarin, . , Flutter .

, Dart . , . , Dart — , . UI , Flutter.

: Android-, Flutter: « 2019 , , - , Flutter».

, , .

Flutter , AppsConf .