Retour de Veille : Développement mobile avec Kotlin / Flutter / ReactNative
HTML-код
- Опубликовано: 6 июл 2024
- Article ► grafikart.fr/blog/mobile-kotl...
Abonnez-vous ► bit.ly/GrafikartSubscribe
00:00 Présentation
13:38 Mon avis sur kotlin
15:43 Flutter
27:34 Mon avis sur Flutter
30:52 React Native
38:00 Avis React Native
41:00 Ressentit final
Aujourd'hui je vous propose de partager les résultats d'une petite veille que j'ai pu faire sur le développement d'application mobile. Afin de mieux comprendre certains outils j'ai décidé d'essayer de créer une même application avec différents outil afin de les comparer. J'ai décidé pour cette session de tester 3 approches différentes :
- Développement natif avec Android & Kotlin
- Développement avec Flutter
- Développement avec React Native
Soutenez Grafikart:
Devenez premium ► grafikart.fr/premium
Donnez via Utip ► utip.io/grafikart
Retrouvez Grafikart sur:
Le site ► grafikart.fr
Twitter ► / grafikart_fr
Discord ► grafikart.fr/tchat 
Наука
Vraiment un plaisir de suivre des vidéos comme celle-ci! Ca donne un beau tour d'horizon et un peu de recul. Je suis tombé sur cette chaîne grâce à tes vidéos sur les design patterns en PHP, mais je ne cesse de voir de nouveaux formats très intéressants. Merci pour ton travail :D
Magnifique vidéo,très sympa d'avoir plus de détails sur plusieurs technologies qui touchent au même domaine.
Merci pour cette présentation, intéressant d'avoir cette présentation👍. N'hésitez pas à nous faire ce genres de comparaisons.
Merci grafikart. Ton contenu est tellement qualitatif.
Tres bonne vidéo et l'approche est bonne : S'intéresser au natif avant de se lancer à l'hybride 👍
Les 3 sont très bien :
- kotlin a fait ses preuves et permet de coder une application de qualité sur Android
- Flutter monte en flèche et est vraiment intuitif
- React natif est simple à utiliser et fait beaucoup penser au web
Merci pour la vidéo
React natif ce n'est pas de l'hybrid (flutter je sais pas donc je ne me prononce pas, a voir ), même si tu écrit ton code en Javascript. En tout cas rien avoir avec un framework comme Ionic par exemple qui pour le coup génère des app hybrid.
J’ai vraiment attendu ça… merci jonathan
Vraiment très intéressantes ses technologies, ça serait encore mieux si on pouvait avoir un contenu de cours du langage kotlin aussi interactif, passionnant et concis comme le contenu habituel de la chaîne.
Encore merci pour cette découverte 🙏
J'apprécie vraiment cette approche
Merci pour cette superbe vidéo ! J'étais très enthousiaste concernant Flutter au début et je me retrouve parfaitement dans l'évaluation que tu en fais. Je mettais beaucoup de choses sur le compte de la jeunesse du framework, pariant sur son évolution, notamment sur la partie web. Au final on a l'impression qu'il n'y a personne à la barre, des choses simples comme le routeur, l'internationalisation, les animations de pages, la gestion des états, deviennent rapidement des purges...j'avais beaucoup d'espoir sur la partie web qui devait arriver avec la 2.0 en version stable, et c'est un enfer a utiliser, aucune vision du responsive, obligé d'utiliser des méthodes étranges rien que pour avoir une scrollbar...je suis revenu après quelques temps sur react+hooks et je trouve que Ionic 5 se débrouille pas mal en tant que framework hybride. Tant qu'à faire de l'hybride, autant en tirer le plein potentiel en terme de temps passé et de développeurs disponibles...bref très déçu par Flutter :(
Des purges pour toi peut être, utilise provider pour la gestion d’états c’est un jeu d’enfant. Pour l’internationalisation le routing etc… il n’y a rien de difficile non plus, en plus il me semble que sur les dernières versions ces éléments sont par défaut dans l’app de base
Dans Flutter, tout est un Widget (autrement dit une class) et qd on build le UI on est entrain d'utiliser les constructeurs directement, c pour cela on a cette syntaxe un peu bizarre Container(
child: Text("..."), ).
J'utilise Flutter depuis 2ans maintenant et, d'après mon expérience, je peux dire que ses performances sont excellentes ( presque natives) et qu'il ne cesse de s'améliorer, la documentation est tres claire/beginner-friendly et la communauté est tres active.
Oui j'aurais juste préféré que la syntaxe soit Widget(options, children) plutôt que d'avoir les children en clef.
En même temps documentation claire c'est relatif, si on veut comparer a la doc de Kotlin par exemple elle n'est pas très clair. Surtout pour quelqu'un qui debut le dev mobile
@@grafikart mmm Oui, probablement, mais je pense que l'on s'habitue assez rapidement à la syntaxe de Flutter.. en général, ce que on fait, c'est qu'on décompose les widgets en Stateless/StatefulWidget séparer et on les 'importe' dans le body du Scaffold, genre:
...
body: Column(
children: [
TitleBuilderWidget(),
ListItemsBuilderWidget(),
FooterBuilderWidget(),
]),
c'est pas top x) mais ça cache le boilerplate
La gestion des données(global surtout) la navigation ou encore l'organisation de ses composants...ne sont pas aborder comme dans la doc Java/Kotlin et ne parlons même pas des intentions...
Toujours un plaisir de suivre, le format est effectivement très intéressant. Néanmoins de l'extrait que j'ai vu de ton code Kotlin, tu peux faire encore plus simple avec une meilleur utilisation du Databing, notamment t'éviter les `setText` et compagnies
L'avantage de React Native et qu'on peut aussi faire du react-native-web, qui fonctionne très bien et permet de dev un site + une app en même temps, flutter permet ça aussi il me semble mais jamais testé. Super Vidéo
Merci pour cette vidéo très intéressante. c'est quoi le système Linux que tu utilises ? merci d'avance
Une petite idée de vidéo pour ta prochaine veille technologique:
Une comparaison entre les services AWS et GCP pour le développement serverless. Tu pourrais par exemple créer une petite application avec un front React et un backend Node déployé sur une ou plusieurs fonctions cloud/lambda.
Je ne connais pas très bien GCP mais par exemple avec AWS on aurait:
-React déployé sur un bucket S3 via Cloudfront
-DynamoDB pour la BDD
-AWS Lambda pour les fonctions Cloud
-Cognito avec Amplify pour l'authentification
-Graphql et Appsync ?
-CI/CD ?
-Orchestration du tout via le framework serverless ?
etc
Un autre avantage de react native est que tu peux ajouter une librairie qui pour dev ton UI en html/css pur, donc c'est cool car en apprenant le web ou apprend aussi le mobile, il y aussi des librairies pour les frameworks Tailwind / Bootstrap
Vidéo très cool,
Tee-shirt encore plus cool
Nice, une nouvelle video
Merci @grafikart pour cette vidéo de veille. Je pense que tu devrais en faire de temps en temps pour permettre aux débutants de se décider.
Par exemple pour quelqu'un qui veut se lancer dans le Dev mobile et qu'il se demande quel techo choisir, du coup ça l'aide beaucoup ce genre de vidéo. Merci !
Par rapport au retour d'expérience qui encourage les personnes de tester les technos intéressantes, je suis complètement d'accord.
Je vais prendre un exemple tout bête : créer un bot discord. J'ai testé plein de libs (discordjs, discordgo et jda principalement) et j'ai trouvé celle que j'adore et que je vais utiliser quasiment partout : jda.
Hésitez pas à tester pour choisir votre techno
un des aspects intéressant de ce genre de retour d'expérience, c'est que pour ceux parmi nous qui maîtrisons déjà très bien certaines technologies que tu découvres, ca nous permet d'avoir un regard neuf et critique sur les technologies qu'on utilise au quotidien car on a toujours le biais de se dire que les technos qu'on connais pas sont moins bien que celles qu'on connaît, les devs flutter ont du tomber de leur chaise après ton retour!
je te le jureeeeeeeeee
Wolahi mais malgrés je me sens à l'aise avec flutter et c une techno qui m plaît bien donc ça change rien. Les différentes techno oui mais avant tout la performance du développeur, le clean code, l'amélioration continue et puis on pourra utiliser les performances maximale d notre techno
J'aimerais bien voir une video qui parlait des différentes installation et mise en configuration de flutter, surtout concernant les Emulator android.
Salut s’il vous plaît répondez moi je veux savoir est-ce que un MacBook Pro core i7 peut coder des applications de façon rapide et efficace car j’ai entendu dire que le MacBook Pro core i5 est lent ?
merci beaucoup
Merci pour le comparatif c'était super intéressant. Que ce que ça donne en poids des app pour chaque frameworks ? Poids des apks et poids de l'installation, si tu as pu comparer. Merci ! :-)
Je fais du react-native et je m'étais intéressé aussi aux poids des apps.
De base une application react-native à sa création pourra pas faire moins de 7 Mo en téléchargement via le Play Store.
Les applications que j'ai créé tournent autour de 10/15 Mo. Elles sont relativement basiques en terme de fonctionnalité.
Avec flutter on est quasiment identique à 1 Mo près.
Néanmoins une fois l'application installée sur le téléphone son poids est pour moi très élevé. Les 7Mo vont se transformer en 25Mo au minimum. Celles que j'ai réalisé sont à 30/40 Mo une fois installées (je ne parle pas du cache de l'application qui dépend de l'utilisation et de vos développements).
Ceci est valable pour un APK. J'ai pas fait trop attention coté iOS.
Hello, est ce que le code est en open source ?
Je me disais peut être que le retour d'expérience de graphikart aurait été un tout petit peu impacté par son expérience avec Javascript, react js.
Super vidéo, mais p'tit reproche lorsque tu fais de très longue vidéo ce serait cool de les séparer un peu. Comme sur ta vidéo sur *Qwant* où sur la timeline on voit les différents sujets abordés sur la vidéo. La tu aurais pu faire une sur Flutter - React - Kotlin. Car connaissant kotlin j'avais envie de le skipper et c'était assez embêtant d'avancer toute les minutes avant de trouver ce que je recherchais.
Ah je suis con j'avais noté les timestamps, j'ai juste oublié de les mettre.
React Native, il me semble que ce n'est plus supporter par Facebook ?
Sur Flutter le décodage et l’encodage se fait facilement, on a même une extension qui permet d’écrire des variables et de générer tout le mappage automatiquement. De plus pour la navigation on peut créer également un fichier de Routing pour organiser ses routes etc…
Je pense que tu n’as pas assez de recul et ou d’expérience sur ce SDK
Pour un développeur qui ne connaît pas réact, quelle est la technologie multiplatforme idéale, sachant que Flutter et moins évident au niveau de la syntaxe ?
AMHA il faut commencer par react-native. Car c du react derrière. En tant que debutant, tu trouveras plein de tutos sur les notions fondamentales de react comme la gestion des états, les hooks, contexte, l'asynchrone, sans parler de typescript qui va te permettre très vite de rendre du code stable (et lisible) même si ca demande un effort initial de rigueur et rend le code un peu plus verbose. Une fois ces notions acquises, il est assez simple de passer sur Native car (en schématisant) ce ne sont que les composants UI (et les CSS) qui changent. Par exemple un DIV en React c'est un VIEW en native (encore une fois je schematise mais on est pas loin de cela). Les communautes react et react native sont immenses, perso j'ai toujours trouvé une réponse à ma question. Sur flutter, nada (pas essayé le dev natif android). Donc je partirai sur cela
Merci pour l'explication. Malheureusement que la vidéo sur React Native n'est pas disponible
Je compte refaire le tutoriel sur react native en me basant sur le code que j'ai fait donc ça devrait arriver.
Dommage que tu n'as pas un mac afin de tester koltin native for ios ça aurait été intéressant.
Deux ans déjà avec flutter et tout ce que je peux dire dessus c'est que c'est un Framework à apprendre car il ne cesse de d'améliorer au fil des années donc je conseil vivement à tous ceux qui lirons ce post de s'y mettre ça en vaut la peine et c'est de plus en plus demandé au niveau de l'emploie.
oui effectivement surtout avec la séparation logique/ui
Merci. Sympas tes vidéo. Donc Résultat aucun semble n'être vraiment satisfaisant.
Alors vous devrier peut-être envisagé Qt (voir même Felgo qui est partenaire de Qt et qui rajoute quelques fonctionnalités notamment pour mobile). Les deux utilise du QML (un langage descriptif avec une syntaxe proche du json) et un peu de JavaScript pour la logique. Je fais des développements sur des systèmes embarqués, et j'avais dû écarté les techno Web à cause de leur manque de performance. Je fais du cross plate-forme Windows et Linux avec Qt (la version non commerciale en LGPL) en plus, mais pas encore sur Android et iOS. Je suis étonné de la complexité des outils utilisés dans cette vidéo, signe d'une méconnaissance de ma part sûrement.
Pour comparer, je me suis prêté au jeu afin d'évaluer la sur-couche felgo, j'ai refait votre application météo avec felgo.
Résultats, c'est très compact, non seulement en termes de ligne (250 lignes) mais aussi en longueur de ligne, on dirait des micros ligne comparer aux autres techno. Par contre, c'est étonnant que Felgo soit resté en Qt5 alors qu'on est déjà à la version Qt6.3. Après, cela n'empêche rien sauf quelques simplifications. je crois que c'est un problème de maturité du portage des modules.
Pour ceux que ça intéresse de voir la gueule du résultat : taper user:loupium puis MaMeteoQtFelgo dans github
Moi j'ai refait la même application que Graphikart, mais faut savoir qu'il existe aussi un exemple d'application météo chez felgo et une autre chez Qt. C'est deux salles deux l'ambiance, felgo est resté en QML + JS alors que Qt n'a pas pu s'empêcher de rajouter du C++ ( en plus du QML + JS) pour la création du modèle avec le remplissage des data. Bon après, Qt a fait cet exemple à des fins didactiques, car c'est un peu overkill sinon.
C'est marrant, c'est là qu'on voit que c'est deux approches très différentes. Felgo oriente sa communication et ses exemples pour s'adresser à ceux qui viennent du Web, alors que Qt s'adresse à ceux qui viennent du Desktop, alors qu'ils utilisent la même techno.
Après, je sais que la partie rendue graphique avec qml tient route, car c'est ce que j'utilise en embarquer, par contre je me pose encore des questions sur les performances avec du JavaScript pour la logique sur un gros projet.
Bon après, les applications mobiles sont pas d'une très grande complexité comparée aux application desktop/Embarqué.
Concernant react native, pour le testing, il y a jest déjà intégré dans le projet init de react native donc en soi c'est une solution déjà donnée, il ne faut pas chercher
Que penses-tu de ionic et de vue-native ?
+1
onic je l'ai utilisé il y a très longtemps et il utilise une webview donc ça revient à faire un site web. Et le moteur de rendu des OS peut être limitant ainsi que la communication avec certains composants natif (j'avais voulu faire un selecteur de photo sur le téléphone et j'ai finit par devoir coder ça en natif :( )
Vue-native pas encore testé.
Quand est ce que tu parleras d'Ionic qui monte aussi en flèche ?
Ionic je l'ai utilisé il y a très longtemps et il utilise une webview donc ça revient à faire un site web. Et le moteur de rendu des OS peut être limitant ainsi que la communication avec certains composants natif (j'avais voulu faire un selecteur de photo sur le téléphone et j'ai finit par devoir coder ça en natif :( )
Ionic monte en flèche ? Moi j'avais l'impression que c'était plutôt l'inverse, t'as des sources ? 🤔
la version 2 de la navigation de flutter est une usine à gaz incomprehensible encore plus floue que la v1
Svp, il est possible de faire des appelles et envoyer des SMS avec cordova ?
Je ne sais pas je ne parle pas de Cordova dans cette vidéo.
Ce qui serai bien c'est un tuto sur l'hébergement des sites créés à partir de framework comme React, du genre "Comment héberger une application MERN" je trouve que c'est un sujet pas très bien expliqué sur internet ou même dans d'autres chaînes youtube
Bah React c'est du front donc je vois pas le soucis, par contre pour Node - puisque c'est le stack que tu fais référence il faut regarder quel herbergeur fait du Node, j'utilise heroku pour des petits trucs à la con, sinon faut se tourner vers du gros cloud genre Amazon, Google, DigitalOcean ou un VPS. Au Canada le mien propose ça par contre OVH en France que dalle visiblement.
Dev android depuis 6 ans je penses que y’a vidéo était bien pour présenter android maintenant les gens qui veulent vraiment y aller lisez la documentation elle est vraiment bien faites
Franchement j'ai eu le même problèmes avec Flutter , l'imbrication des widgets qui vont dans tous les sens, un lisibilité des codes assez infernale . Bref j'ai eu du mal à conceptualisé le paradigme et tous l’écosystème qui gravite au tours .
Merci pour la vidéo Grafikart .
J arrive au même endroit
Est-ce que vous pensez qu'un jour les PWA vont prendre le dessus sur les app mobiles classiques ?
C'est finalement le moyen le plus simple d'avoir du cross platform.
Non car si tu as besoin d'accéder à certaines API du téléphone ce n'est pas pratique. Aussi, rien ne garantit que Safari les supporte complètement.
32:08 c’est exactement comme Electron !
Pas du tout car electron utilise le moteur de rendu chrome pour l'interface. React native lui utilise les éléments d'interface natif à l'OS cible (android ou iOS)
(mes commentaires se font supprimer tout seul, même s'il n'y a pas de lien 😅)
@@grafikart je voulais parler du process node. Notamment le système de frameless, où il est différent sur Windows/Linux et macOS, notamment si nous voulons garder les trafics lights.
Bonsoir. Bon étant un dev flutter qui a commencé par du web comme toi, je peux te dire que tu n'as pas pu malheureusement saisir toutes la pertinence et la puissance de flutter et c'est normal étant donné que tu avais des préjugés je pense, mais aussi peut être le temps limité. Flutter est un framework qui offre des possibilités infinies en terme de design mais d'autres permet d'interagir pratiquement nativement avec pratiquement tous les fonctionnalités systèmes Android et iOS. Bref tu n'as pas malheureusement saisir à quel point Flutter est extraordinaire. Je te conseille si c'est possible de faire un vrai projet avec et tu verras. Mais je te concède il y'a des aspects qui ne sont pas bien documenté pour les débutants
Bonne vidéo, merci. Il manquerait juste Swift pour que ce soit "complet".
Du coup, React native implique une connaissance préalable de React donc c'est compliqué pour ceux qui ne font pas React. Perso je vais aller dans cet ordre : kotlin-flutter-react native (que je ne sais pas encore l'année de mon initiation 😀) sachant que je viens de Java. Merci pour vidéo
Si tu viens du java tu peux l'utiliser directement pour faire des applications natives android. Même si c'est pas le langage principal ça l'a été pendant longtemps donc c'est toujours intéressant pour maintenant des applications hérités.
Il manque IONIC
Kotlin c'est chaud quand même avec tous les mots clefs du langage 😱 y'en a limite trop
Xamarin on en parle ?
c'est pas une techno dead comme ionic? C'était pour faire du cross platform avant Flutter / Kotlin et c'était plutôt crade dans mes souvenir
SuR reactNative finalement le problème c'est sa propre philosophie : il y a rien, il faut ajouter des librairies pour tout. C'est déstabilisant.
Je vois tellement de mauvaise fois c'est incroyable. Tu parles de la doc flutter mais pas react native, c'est reconnu que la doc flutter est une des meilleurs et largement au dessus de react native, mais tu parles pas de la doc react native mais tape sur cette de flutter.
En react native tu t'autorise à chercher sur internet alors que pour flutter tu dis essayer d'utiliser uniquement la doc (qui fait ça???).
Tu parles de problèmes (parsing json, gestions des states) déjà résolus par 50 librairies (hook, riverpod, freezed, bloc etc) mais tu les utilises pas alors qu'en react native tu t'autorises à utiliser des libs à gogo.
Sérieux la mauvaise fois level 1000...
Là où je suis d'accord, c'est le system de nav éclaté au sol en flutter.
C'est dommage car l'idée était intéressante mais au final résultat inutilisable tellement les façons de faire sont différentes.
en gros flutter c'est à éviter
non
tu a trop fait du web la syntaxe flutter est très lisible c'est une affaire de point de vue et d'habitude ta trop faire du web
Pas du tout à titre de comparaison je préfère la syntaxe de jetpack compose : developer.android.com/jetpack/compose
La syntaxe de Dart était pire quand il fallait mettre des new devant chaque widget et ils ont permis de ne plus avoir à le faire et je pense qu'il y a encore des amélioration possible pour simplifier la syntaxe (permettre de mettre les enfant directement en paramètre serait une bonne chose)
Exemple :
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
Text('Deliver features faster'),
Text('Craft beautiful UIs'),
Expanded(
FittedBox(
fit: BoxFit.contain,
FlutterLogo()
),
),
)
React Native > Flutter > Kotlin.
Je l’ai tous testé pour au moins 3 mois.
Flutter n’est pas fluide.
Kotlin c’est trop chiant.
React Native c’est la vie.
Pourquoi tu met du blabla entre les choses interessante ? En faite tu n est pas en train de faire une critique d un trailer de film... Le sujet est assez vaste pour ne pas rajouter du blabla insipide au coté de chaque chose interessante