C'est plutôt une autre histoire sur la façon dont je suis passé à un nouveau cadre) Le
matériel n'implique pas la vérité ultime. Nous ne décrivons ici que les solutions que j'ai choisies pour moi-même, et qui pour moi, ayant une grande expérience dans le développement React & React Native, il était plus facile pour moi d'appliquer sur un vrai projet.
Le contexte
Pour commencer, je décrirai, pour ainsi dire, le contexte. Une commande est apparue - pour écrire une petite application mobile multiplateforme (environ 15 écrans). Naturellement, par habitude, j'ai commencé à le faire dans React Native. En deux semaines, l'application a été mise en œuvre à environ 80%.
Le week-end, j'ai lu un autre article de Surf sur Habré avec les résultats de l'enquête. Et la pensée est venue, pourquoi ne pas essayer? Serai-je capable de répéter ce qui a déjà été écrit sur un nouveau cadre pour moi-même? Il a été décidé de passer le week-end à essayer cela. En conséquence, au cours de la semaine suivante, non seulement les 80% qui étaient avant, mais aussi les 20% restants ont été réécrits. le temps de développement a été réduit de plus de moitié!
avantages
Tout d'abord, l'avantage est la rapidité de la mise en page. Les écrans rivetent TRÈS vite. Dégradés linéaires, svg, gif - à peu près tous prêts à l'emploi. Chevauchement des composants ( position: absolue ) - pas de problème du tout. Tout ce qui a causé de la douleur dans React Native se fait avec le clic de vos doigts. Les animations sont généralement un conte de fées! Le même écran avec des composants constamment animés passait plusieurs fois moins de temps avec Flutter.
Moins
Il y a deux inconvénients tangibles. Le premier est la documentation. Très peu en russe. L'anglais officiel n'est pas très bien structuré, oui, il donne beaucoup d'exemples de code utiles, mais il est difficile de comprendre quelque chose de sensé à partir de l'architecture générale de l'application.
Le deuxième inconvénient est les packages. Il y a encore un désordre complet là-bas. Choisir un très bon package pour celui que vous souhaitez n'est pas une tâche insignifiante. Quelque part, une fonctionnalité ne fonctionne pas, ailleurs. Beaucoup de temps est consacré à la sélection. En option - ajoutez quelque chose vous-même, mais c'est à ce moment-là que je m'y habituerai)
Expérience: crochets
Ma connaissance de React remonte à l'époque où les cours normaux venaient d'apparaître. Maintenant, je ne peux pas l'imaginer sans crochets et j'ai déjà oublié les cours. Pour flutter, il existe une merveilleuse bibliothèque flutter_hooks qui vous permet d' ajouter des crochets familiers dans votre projet. Pour moi, il a complètement remplacé StatefulWidget . Il y a beaucoup de hooks, vous pouvez écrire le vôtre, mais le plus souvent useEffect , useState et useMemoized sont utilisés dans mon code . Pour les animations, utilisezAnimationController .
Ce n'est peut-être pas la meilleure solution (je suis prêt à lire les inconvénients dans les commentaires), mais cela vous permet d'utiliser l'arrière-plan de React dans un nouveau cadre pour vous-même. Je ne vois même aucune raison de donner des exemples avec du code - tous les développeurs de React le savent comme notre père!
Expérience: gestion d'état
À un moment donné, j'ai dû travailler avec redux , et avec mobx , et même, avec des exotiques, comme storeon . Il semble qu'il (redux / mobx) soit aussi sous Flutter, mais, franchement, je ne l'ai pas maîtrisé). À mon avis, tout y est trop compliqué par rapport à ce qui était dans React. Vous pouvez, bien sûr, passer plus de temps et comprendre, mais pourquoi, quand j'ai trouvé une meilleure solution: riverpod .
Une bibliothèque de Remi Rousselet , auteur de flutter_hooks - naturellement ils fonctionnent tous les deux très bien). En fait, il s'agit d'un fournisseur modifié . Ajoutez simplement à votre runApp ( ProviderScope (...))wrapper sur tout le reste et obtenez la portée globale dans toute l'application, accessible à partir de n'importe quel widget. Il suffit d'écrire useProvider ( providerName ) dans la méthode de construction de HookWidget et nous avons les données disponibles du fournisseur spécifié.
Il existe de nombreuses options de fournisseur dans la bibliothèque, mais les plus élémentaires sont ChangeNotifyProvider et StateNotifyProvider . Toute la logique métier peut être supprimée en toute sécurité des widgets et transférée vers ces fournisseurs. De plus, ils sont parfaitement combinés les uns aux autres et il ne sera pas difficile d'accéder aux méthodes et aux données de l'autre à partir de l'un.
Le motif est très similaire aux canards reduxl'approche qui, pour moi personnellement, est devenue la plus proche dans le monde de React. Seuls les «canards» sont plus petits. La principale chose à retenir ici est qu'il est préférable d'avoir de nombreux petits fournisseurs qui seront utilisés dans différents widgets plutôt qu'un grand pour eux, car les widgets qui ont réellement été modifiés seront redessinés.
Déception: web
Après le succès écrasant (pour moi-même) avec le développement d'une application mobile, j'ai, comme tout full stack qui se respecte, j'ai décidé de toucher Flutter pour le web. Encore une fois, réécrire l'une des applications d'entreprise vraiment fonctionnelles.
Bien sûr, Flutter Web est toujours en version bêta, et tout ce qui est décrit ci-dessous s'applique spécifiquement à la version bêta. J'espère vraiment qu'avec la sortie, beaucoup de choses changeront pour le mieux. Mais néanmoins, ici Flutter m'a déçu.
La première chose que vous devez savoir sur Flutter Web ne concerne pas les sites Web, mais les applications! Ceux. il faut écrire de la même manière que pour un mobile. Tous les widgets sont identiques. Vous ne pouvez pas utiliser de JS tiers dans votre code. Accédez-y uniquement via dart: js . Accéder au HTML également via dart: html... Cela coupe presque tout ce qui a déjà été fait dans le monde du Web à la fois. Si vous voulez une animation sympa qui a déjà été implémentée quelque part dans css + js, vous ne pouvez pas le faire , écrire un analogue sur flutter ou utiliser dart: js, ce qui n'est pas toujours facile. Il est impossible d'utiliser sans douleur une bibliothèque JS / css prête à l'emploi.
Le deuxième inconvénient est à nouveau les paquets! Bien que sur pub.dev, la majeure partie soit marquée comme prenant en charge à la fois le Web, Android et iOS, en fait, l'un ou l'autre fonctionne généralement. Ceux. vous ne pourrez pas créer du code entièrement multiplateforme.
Les packages pour le Web sont généralement un wrapper sur leurs homologues js. Mais presque toujours, ils ne suivent pas la version du paquet qu'ils emballent.
Exemple:
La tâche consiste à effectuer une autorisation via MS et à recevoir des données utilisateur.
Dans le bon vieux JS, tout est simple: prenez msal etMicrosoft/ microsoft-graph-client - et profitez du résultat. Trouvez msal_flutter dans
Flutter , connectez-le ... et il s'avère que le package Web ne le prend pas en charge. D'accord, nous trouvons msal_js - il s'agit d'un wrapper sur le msal habituel, vous devez donc l'inclure dans index.html via la bonne vieille balise de script. Mais si msal a déjà été mis à jour vers la version 1.4.2, alors ce paquet prend en charge un maximum de 1.3.0! Eh bien, nous avons eu le jeton en deux avec le chagrin, qu'en est-il des données utilisateur? Il existe un package microsoft_graph - aucune documentation dessus. Pour trouver la méthode requise, vous devez entrer dans le code du package et y fouiller. Et pour savoir au final que seuls quelques-uns d'entre eux y sont implémentés pour travailler avec des tâches! Trouver un autre msgraph
- de sorte que généralement la seule méthode prend en charge!
Heureusement, le protocole lui-même n'est pas très compliqué là-bas et vous pouvez rapidement écrire quelque chose de votre choix lorsque vous avez besoin de travailler et de ne pas écrire de bibliothèques)
Environnement
Le troisième et plus gros inconvénient est l'impossibilité de mettre en place l'environnement. Flutter Web s'exécute dans un navigateur ou en tant que serveur Web. Vous pouvez toujours définir le port sur lequel il fonctionnera via les paramètres de ligne de commande (ce qui n'est pas non plus très pratique, où est la configuration?!) Mais comment puis-je l'exécuter en https avec un certificat auto-signé? Alors que dans le même temps la charge chaude fonctionnera et déboguera et d'autres puces qui fonctionnent habituellement? salut! Les gars, 2k20 se termine, et vous avez toujours http? Vraiment?!
Conclusion
Décidément, Flutter, en tant que cadre de développement mobile multiplateforme, déchire React Native en lambeaux sur tous les fronts. Je suis satisfait, le client est également ravi - de quoi d'autre avez-vous besoin?
Mais en tant qu'outil d'écriture d'applications Web, il est encore humide et trop laborieux. Préparez-vous que là où vous avez connecté un package js tiers en quelques secondes, vous écrirez ici un wrapper pendant quelques jours, ou même votre propre analogue sur Flutter.
PS
Je vais le répéter pour ceux qui ont oublié depuis le début de l'article. Les solutions appliquées et les conclusions que j'ai décrites sont les conclusions d'une personne avec une expérience d'une semaine dans Flutter et une expérience de 3 ans dans React. Alors ne les prenez pas pour la vérité ultime. Je suis prêt à discuter dans les commentaires avec le gourou de ce que j'ai fait de mal.