J'ai commencé comme développeur web front-end puis je suis devenu Battement développeur. Je pense que certains concepts m'ont aidé à adopter Flutter plus facilement. Il y avait aussi quelques nouveaux concepts qui étaient différents.
Dans cet article, je souhaite partager mon expérience et inspirer tous ceux qui se sentent paralysés par le choix d'un écosystème plutôt qu'un autre en montrant comment les concepts sont transférés et que tout nouveau concept peut être appris.
Concepts qui ont été transférés
Cette section montre les endroits où le développement Web frontal et Flutter ressemblent. Il explique les compétences que vous possédez déjà et qui sont un avantage pour vous si vous démarrez Flutter.
1. Implémentation d'interfaces utilisateur (UI)
Pour implémenter une interface utilisateur donnée dans le Web frontal, vous composez des éléments HTML et les stylisez avec CSS. Pour implémenter des interfaces utilisateur dans Flutter, vous composez widgets et coiffez-les avec propriétés.
Comme CSS, le Color la classe dans Dart fonctionne avec "rgba" et "hex". Tout comme CSS, Flutter utilise des pixels pour les unités d'espace et de taille.
Dans Flutter, nous avons des classes Dart et des énumérations pour presque toutes les propriétés CSS et leurs valeurs. Par exemple:
Flutter a également Column ainsi que Row widgets. Ce sont l'équivalent Flutter pour display: flex en CSS. Configurer justify-content ainsi que align-items styles, vous utilisez MainAxisAlignment ainsi que CrossAxisAlignment Propriétés. Pour ajuster le flex-grow style, enveloppez le(s) widget(s) enfant(s) concerné(s) du Column/Row, dans un Expanded or Flexible.
Pour les interfaces utilisateur avancées, Flutter a le CustomPaint classe - c'est à Flutter ce que le Canvas API est au développement web. CustomPaint vous donne un peintre pour dessiner n'importe quelle interface utilisateur comme vous le souhaitez. Vous utiliserez généralement CustomPaint quand vous voulez quelque chose de vraiment complexe. Aussi, CustomPaint est la solution idéale lorsqu'une combinaison de widgets ne fonctionne pas.
2. Développer pour plusieurs Résolutions d'écran
Les sites Web s'exécutent sur des navigateurs et les applications mobiles s'exécutent sur des appareils. En tant que tel, lors du développement pour l'une ou l'autre plate-forme, vous devez garder la plate-forme à l'esprit. Chaque plate-forme implémente les mêmes fonctionnalités (caméra, localisation, notifications, etc.) de différentes manières.
En tant que développeur Web, vous pensez à la réactivité de votre site Web. Vous utilisez des requêtes multimédias pour gérer l'apparence de votre site Web sur des écrans plus petits et plus larges.
En passant du développement Web mobile à Flutter, vous avez le MediaQuery classe d'aide. La MediaQuery la classe vous donne l'appareil actuel orientation (paysage ou portrait). Il vous donne également la fenêtre actuelle size, devicePixelRatio, entre autres informations sur l'appareil. Ensemble, ces valeurs vous donnent un aperçu de la configuration de l'appareil mobile. Vous pouvez les utiliser pour modifier l'apparence de votre application mobile à différentes tailles d'écran.
3. Travailler avec les débogueurs, les éditeurs et les outils de ligne de commande
Les navigateurs de bureau ont des outils de développement. Ces outils incluent un inspecteur, une console, un moniteur réseau, etc. Ces outils améliorent le processus de développement Web. Flutter a aussi le sien Outils de développement. Il a son inspecteur de widgets, son débogueur, son moniteur réseau, entre autres fonctionnalités.
Le support IDE est également similaire. Visual Studio Code est l'un des IDE les plus populaires pour le développement Web. Il existe de nombreuses extensions Web pour VS Code. Flutter prend également en charge VS Code. Ainsi, lors de la transition, vous n'avez pas besoin de changer d'IDE. Il existe des extensions Dart et Flutter pour VS Code. Flutter fonctionne également bien avec Android Studio. Android Studio et VS Code prennent en charge Flutter DevTools. Ces intégrations IDE rendent l'outillage Flutter complet.
La plupart des frameworks JavaScript frontaux sont livrés avec leur interface de ligne de commande (CLI). Par exemple: CLI angulaire, Créer une application React, Vue CLI, etc. Flutter est également livré avec un CLI. La CLI Flutter vous permet de construire, créer et développer des projets Angular. Il a des commandes pour analyser et tester les projets Flutter.
Des concepts qui étaient nouveaux
Cette section traite des concepts spécifiques à Flutter qui sont plus faciles ou inexistants dans le développement Web. Il explique les idées que vous devez garder à l'esprit lorsque vous entrez dans Flutter.
Comment gérer le défilement
Lors du développement pour le Web, le comportement de défilement par défaut est géré par les navigateurs Web. Cependant, vous êtes libre de personnaliser le défilement avec CSS (en utilisant overflow).
Ce n'est pas le cas dans Flutter. Les groupes de widgets ne défilent pas par défaut. Lorsque vous sentez que les groupes de widgets peuvent déborder, vous devez configurer le défilement de manière proactive.
Dans Flutter, vous configurez le défilement en utilisant des widgets particuliers qui permettent le défilement. Par exemple: ListView, SingleChildScrollView, CustomScrollView, etc. Ces widgets déroulants vous offrent un excellent contrôle sur le défilement. Avec CustomScrollView, vous pouvez configurer des mécanismes de défilement experts et complexes au sein de l'application.
Du côté de Flutter, en utilisant ScrollViews est inévitable. Android et iOS ont ScrollView ainsi que UIScrollView pour gérer le défilement. Flutter a besoin d'un moyen d'unifier l'expérience de rendu et de développement en utilisant son ScrollViews, aussi.
Il peut être utile d'arrêter de penser au flux de la structure du document et de considérer plutôt l'application comme une toile ouverte pour les mécanismes de peinture natifs d'un appareil.
2. Configuration de votre environnement de développement
Pour créer le site Web le plus simple, vous pouvez créer un fichier avec un .html extension et ouvrez-le dans un navigateur. Flutter n'est pas si simple. Pour utiliser Flutter, vous devez avoir installé le SDK Flutter ainsi que avez configuré Flutter pour un appareil de test. Donc, si vous voulez coder Flutter pour Android, vous devez configurer le SDK Android. Vous devrez également configurer au moins un appareil Android (un émulateur Android ou un appareil physique).
C'est le même cas pour les appareils Apple (iOS et macOS). Après avoir installé Flutter sur un Mac, vous devez toujours configurer Xcode avant d'aller plus loin. Vous aurez également besoin d'au moins un simulateur iOS ou un iPhone pour tester Flutter sur iOS. Flutter pour le bureau est également une configuration considérable. Sous Windows, vous devez configurer le SDK de développement Windows avec Visual Studio (pas VS Code). Sous Linux, vous installerez plus de packages.
Sans configuration supplémentaire, Flutter fonctionne sur les navigateurs. Par conséquent, vous pourriez ignorer la configuration supplémentaire pour les appareils cibles. Dans la plupart des cas, vous utiliserez Flutter pour le développement d'applications mobiles. Par conséquent, vous souhaiterez configurer au moins Android ou iOS. Flutter est livré avec le flutter doctor commande. Cette commande signale l'état de votre configuration de développement. De cette façon, vous savez sur quoi travailler, dans la configuration, si besoin est.
Cela ne signifie pas que le développement de Flutter est lent. Flutter est livré avec un moteur puissant. La flutter run La commande permet le rechargement à chaud de l'appareil de test pendant le codage. Mais ensuite, vous devrez appuyer sur R pour réellement recharger à chaud. Ce n'est pas un problème. Extension VS Code de Flutter permet le rechargement automatique à chaud lors des modifications de fichiers.
3. Conditionnement et déploiement
Le déploiement de sites Web est moins cher et plus facile que le déploiement d'applications mobiles. Lorsque vous déployez des sites Web, vous y accédez via des noms de domaine. Ces noms de domaine sont généralement renouvelés annuellement. Cependant, ils sont facultatifs.
Aujourd'hui, de nombreuses plateformes proposent un hébergement gratuit.
Par exemple : DigitalOcean vous offre un sous-domaine gratuit sur .ondigitalocean.com.
Vous pouvez utiliser ces domaines si vous créez un site Web de documentation. Vous pouvez également les utiliser lorsque vous ne vous souciez pas de l'image de marque.
Dans le monde de Flutter avec les applications mobiles, vous déployez généralement dans la plupart des cas votre application à deux endroits.
Vous devez créer un compte développeur sur chacune de ces plateformes. L'enregistrement d'un compte de développeur nécessite des frais ou un abonnement et une vérification d'identité.
Pour l'App Store, vous devez vous inscrire au programme Apple Developer. Vous devez maintenir un abonnement annuel de 99 $. Pour Google Play, vous devez créer un paiement unique de 25 $ pour le compte.
Ces magasins examinent chaque application examinée avant sa mise en ligne.
Gardez également à l'esprit que les utilisateurs ne consomment pas facilement les mises à jour des applications. Les utilisateurs doivent explicitement mettre à jour les applications installées. Cela contraste avec le Web où tout le monde peut voir la dernière version déployée d'un site Web.
La gestion des applications déployées est relativement plus exigeante que la gestion des sites Web déployés. Cependant, cela ne devrait pas vous effrayer. Après tout, des millions d'applications sont déployées sur l'un ou l'autre des magasins, vous pouvez donc également ajouter la vôtre.
Réflexions supplémentaires sur le flottement
Flutter est un outil multiplateforme pour créer des applications de bureau, mobiles ou Web. Les applications Flutter sont parfaites au pixel près. Flutter peint la même interface utilisateur sur chaque application, quelle que soit la plate-forme cible. En effet, chaque application Flutter contient le moteur Flutter. Ce moteur rend le code de l'interface utilisateur Flutter. Flutter fournit une toile pour chaque appareil et vous permet de peindre comme vous le souhaitez. Le moteur communique avec la plateforme cible pour gérer les événements et les interactions.
Le flottement est efficace. Il a des niveaux de performance élevés. En effet, il est construit avec Dart et exploite les fonctionnalités de Dart.
Avec ces nombreux avantages, Flutter est un bon choix pour de nombreuses applications. Les applications multiplateformes permettent d'économiser du temps et de l'argent lors de la production et de la maintenance. Cependant, Flutter (et les solutions multiplateformes) peuvent ne pas être un choix optimal dans certains cas.
N'utilisez pas Flutter si vous souhaitez que les utilisateurs utilisent des outils de développement de plate-forme avec votre application. Les outils de développement de plate-forme signifient ici des outils spécifiques à l'appareil, tels que les options de développement Android. Il comprend également des outils de développement de navigateur.
N'utilisez pas Flutter pour le Web si vous vous attendez à ce que les extensions de navigateur interagissent avec le site Web.
De plus, n'utilisez pas Flutter pour les sites Web à fort contenu.
Conclusion
Il s'agissait d'un examen des compétences qui vont du développement Web frontal à l'utilisation de Flutter. Nous avons également discuté des concepts de développement d'applications que vous devez apprendre en tant que développeur Web.
Flutter est plus simple pour les développeurs Web car ils impliquent tous deux la mise en œuvre d'interfaces utilisateur. Si vous démarrez Flutter, vous découvrirez que cela vous offre une bonne expérience de développeur. Essayez Flutter ! Utilisez-le pour créer des applications mobiles et, bien sûr, présenter ce que vous créez.
À votre santé!
