Flutter : le futur du développement unifié ?

Flutter est un SDK de Google permettant de créer de fantastiques applications mobiles, iOS et Android, en utilisant un code commun et en un temps record. Nous verrons dans ce talk ce qui a poussé cette solution à être développée. Nous détaillerons ensuite le fonctionnement de Flutter et ce qui en fait une plateforme de développement attractive. Pour terminer nous verrons quelle est la vision à long terme concernant Flutter et en quoi elle est intéressante.

Transcript

1. Flutter : le futur du développement unifié ? Romain Rastel @lets4r 21 mars 2019 BreizhCamp
2. 2 Le slide chiant Romain Rastel Référent Flutter @lets4r @letsar @lets4r Flutter-Rennes
3. 3 Un peu d’histoire 10/14 05/17 02/18 12/18 Naissance de Flutter Version Alpha Google I/O Version Beta MWC Barcelone Version Stable 1.0 Flutter Live Londres 02/19 Version 1.2 MWC Barcelone
4. 4 “ Build beautiful native apps in record time ”
5. 5 Pourquoi ?
6. 6 “ Build the best way to develop for mobile ”
7. 7 2 équipes Le dev mobile c’est difficile ! Lent Coûteux La diversité des plateformes complique tout Le design est difficile gradle, manifest xml layouts activity fragment recyclervew intents bundke application kotlin android studio cocoapods, manifest storyboard, nib, xib uiviewcontroller uiview uicollectionview segways nsdata appdelegate swift xcode configuration visuel métier outil
8. 8 ≈ 4mn 20s Navigation vers la page 2mn Récupérer la concentration du développeur 20s Déploiement sur le terminal 1mn Compilation 1s Modification Couleur Noir > Bleu Cycles de développement actuel : Productivité basse
9. 9 1 feature = 1 seul dev On peut faire mieux ! Le dev devrait être rapide Le dev devrait voir ce que l’utilisateur verra Modifier un composant devrait être simple
10. 10 Doc Flutter ! Rapide Créatif Open Source Productif
11. 11 Démo
12. 12 Comment ?
13. 13 Google Dart Le langage pour Flutter Reactive : Futures Streams AOT en release JIT en debug Accessible : OOP Syntaxe simple Moderne : Async/await Générateurs
14. 14 Architecture de Flutter Engine (C++) Framework (Dart) Material Cupertino Widgets Rendering Animation Painting Gestures Foundation Skia Dart RT + JIT Text Packages webview firebase yours ! Tools VS Code Android Studio IntelliJ IDEA Dart DevTools Flutter CLI Pub CLI Analysis Server AOT Compiler
15. 15 Everything’s a Widget Widget StatelessWidget Text Icon StatefulWidget … Checkbox TextField
16. 16 Flutter n’utilise pas les composants graphiques du système mais il les simule. Pixel Perfect Material Cupertino
17. 17 Démo
18. 20 Sauvez Votre travail Modifiez Votre code Flutter Stateful Hot Reload Voyez Le résultat instantanément Restez Sur l’écran où vous étiez
19. 21 Simple Tween Animation CurvedAnimation AnimationController Efficace AnimatedContainer Hero animations Flare Outil pour les designers pour créer des animations vectorielles exportables vers Flutter Flutter Animations
20. 22 Platform Channels Messages entre Flutter et Natif Asynchrone Embedding API Dessin Evénéments natifs Flutter Intégration avec le natif
21. 23 Plugins Dart + Code natif (Kotlin, Swift) - WebView, Maps - Firebase Packages Pur code Dart Flutter Third parties https://pub.dartlang.org/flutter
22. 24 Google Google AdWords Hamilton Hamilton Musical Flutter Références externes Alibaba Xianyu
23. 25 x2 développeurs Flutter depuis la 1.0 > 200 millions Utilisateurs d’applications réalisées avec Flutter Top 20 Repos sur GitHub Flutter Chiffres clés > 350 Contributeurs > 1700 Packages Flutter
24. 26 Le futur ?
25. 27 Statut Pas officiellement supporté par Google Travail exploratoire Fonctionne avec la version master de Flutter Roadmap 2019 Mise en place Plus complexe Plugins à réaliser Autre Un Concurrent à Electron ? Go Flutter Desktop Embedder Rasperry Pi Slide Player Flutter Desktop Embedding
26. 28 Statut Pas encore Open Source Expérimentation Plus d’infos à la Google I/O Roadmap 2019 Flutter pour le web Différent de Flash / Silverlight Repose sur les standards du web Autre Hummingbird: Building Flutter for the web Hummingbird
27. 29 Architecture de Flutter pour le Web (Hummingbird)
28. 30 Partie demandant encore beaucoup de recherches. 2 approches explorées en parallèle : § HTML/CSS + Canvas 2D § CSS Paint API Comment Hummingbird dessine à l’écran ? CSS Paint API Nouvelle Web API faisant partie de Houdini Efficace et sans crénelage Ne supporte pas le texte (pour l’instant) Chrome >= 65 & Opera >= 52 HTML/CSS Solution préférée Le browser s’occupe de l’optimisation Support l’accessibilité Canvas 2D Si pas possible avec HTML/CSS Efficace mais représenté en tant qu’image
29. 31 “ Build the best way to develop for a screen ”
30. Romain Rastel @lets4r 21 mars 2019 BreizhCamp Merci Des questions ?