Introduction à Flutter

Transcript

1. Introduction à Flutter GDG Tours
2. Introduction à Flutter GDG Tours Qui suis-je ? Edouard Marquez Freelance développeur Android et Flutter @g123k edouard@marquez.cool Cofondateur du Flutter Paris @FlutterDev
3. Introduction à Flutter GDG Tours Les applications multiplateforme
4. Introduction à Flutter GDG Tours Les applications multiplateforme Mauvaises performances Mauvaise intégration au système
5. Introduction à Flutter GDG Tours … mais ça c'était avant Flutter !
6. Introduction à Flutter GDG Tours En résumé, qu'est-ce que Flutter ? OpenSource Toutes les couches Multiplateforme Android (4.1+) & iOS (8.0+) Inspiré du web Hot Reload, concepts… Code natif = performances Dart Langage de programmation
7. Introduction à Flutter GDG Tours Quelques exemples d'applications itsallwidgets.com
8. Introduction à Flutter GDG Tours Quelques exemples d'applications Google Ads The History of Everything Hamilton
9. Les bases Le langage Dart L'architecture de Flutter Le gestionnaire de dépendances
10. Introduction à Flutter GDG Tours Le paradigme : application native Widgets OEM Position GPS Bluetooth Audio Capteurs Caméra Etc Plateforme Services Code natif Application Canvas Evénements
11. Introduction à Flutter GDG Tours Le paradigme : WebView (Ionic, Cordova…) Javascript WebView Application Plateforme Position GPS Bluetooth Audio Capteurs Caméra Etc Services Bridge Canvas Evénements
12. Introduction à Flutter GDG Tours Le paradigme : type React Native Javascript Widgets OEM Application Plateforme Position GPS Bluetooth Audio Capteurs Caméra Etc Services Bridge Canvas Evénements
13. Introduction à Flutter GDG Tours Le paradigme : Flutter Code natif Canvas Evénements Application Plateforme Position GPS Bluetooth Audio Capteurs Caméra Etc Services Widgets, Rendu Platform Channels
14. Introduction à Flutter GDG Tours La stack Flutter Material Cupertino Widgets Rendering Fondation Animation Painting Gestures Framework (Dart) Skia Dart Text Engine (C++)
15. Le langage Dart
16. Introduction à Flutter GDG Tours Le language Dart Par Google + regain d'intérêt Multiplateforme Cli, web et Flutter Future/Stream async/await Deux modes AOT et JIT Typage fort Depuis Dart 2.0 Syntaxe familière Apprentissage court
18. Le gestionnaire de dépendances
19. Introduction à Flutter GDG Tours Pub : le gestionnaire de packages en Dart pub.dartlang.org Liste des packages Package Code Dart uniquement Plugin Code Dart et Android/iOS
20. Introduction à Flutter GDG Tours De nombreux plugins déjà disponibles Authentification Database & Cloud Firestore Storage Analytics Messaging AdMob Base de données SQLite (SQFLite) Préférences (~ NSUserDefaults) Données Flux Redux RXDart Flutter Stream Friends Autres Google Facebook Twitter Comptes Firebase
21. Les Widgets Stateless / Statefull La liste Mais comment ça marche ?
22. Tout est un widget “ “ Composition over inheritance “ “
23. Combien y-a-t-il de widgets affichés sur cet écran ? Quizz 1 5 1
24. Introduction à Flutter GDG Tours Liste des widgets flutter.io Widgets catalog
25. Introduction à Flutter GDG Tours Application Flutter Gallery Flutter Gallery Google Play uniquement
26. Introduction à Flutter GDG Tours Liste des widgets Material AppBar, RaisedButton, 
 SnackBar, Chip, Card… Cupertino CupertinoNavigationBar, CupertinoButton, Cupertino…. Widgets génériques Text, Image, Padding, Theme… Texte
27. Introduction à Flutter GDG Tours Liste des layouts / containers Fils unique Text, Image, Padding, Theme… Padding Texte Fils multiples Column (les uns en dessous des autres) Row (les uns à côté des autres) Stack (les uns aux dessus des autres) Column Texte
29. Stateless / Statefull
30. Introduction à Flutter GDG Tours Quelle différence entre StatelessWidget et StatefulWidget ? StatelessWidget Son état n'évolue pas au fil du temps Bienvenue ! StatefulWidget Widget attaché à un état (State) qui peut évoluer au fil du temps Vous avez 1 item Ajouter un item au panier
31. StatelessWidget
32. StatefulWidget
33. StatefulWidget -> State
34. Le fonctionnement
35. Introduction à Flutter GDG Tours L'arbre de Widgets Arbre "basique" Ne contient que des attributs simples permettant d'expliquer comment construire l'interface Arbre immutable A chaque changement d'état, on doit reconstruire l'arbre
36. Introduction à Flutter GDG Tours Non pas un, mais trois arbres Arbre des éléments Arbre mutable qui fait le lien entre un Widget et son RenderObject Arbre de widgets Arbre qui décrit les composants et leurs valeurs Arbre de rendu Arbre mutable de RenderObjects qui s'occupent de gérer le layout, le dessin et la gestion du touch
38. Introduction à Flutter GDG Tours Non pas un, mais trois arbres Arbre des widgets Arbre des éléments Arbre de rendu MyApp Text
 text : Hello World Container color : Color.black Element Element Element MyAppRender TextRender
 text : Hello World ContainerRender color : Color.black
40. Introduction à Flutter GDG Tours Non pas un, mais trois arbres Arbre des widgets Arbre des éléments Arbre de rendu MyApp Text
 text : Hello World Container color : Colors.blue Element Element Element MyAppRender TextRender
 text : Hello World ContainerRender color : Colors.blue ContainerRender color : Color.black
41. Les outils pour les développeurs Les IDEs supportés Le Hot Reload Les outils tiers
42. Démo
43. Les IDEs supportés
44. Introduction à Flutter GDG Tours Deux IDEs supportés IntelliJ IDE qui bénéficie du support officiel Visual Studio Code Plugin géré par Google, mais en décalé par rapport à IntelliJ
45. Les outils tiers
46. Introduction à Flutter GDG Tours Flare : le Lottie de Flutter
47. Introduction à Flutter GDG Tours Les CI Bitrise.io Support officiel de Flutter depuis fin janvier CodeMagic CI entièrement dédié à Flutter et gratuit (pour le moment)
48. Les plateformes Les platform views La communication Dart <-> plateforme Les plateformes supportées
49. Introduction à Flutter GDG Tours La communication entre code Dart et les plateformes MethodChannel : transmettre une information
50. Code Flutter
51. Code Android (Java)
52. Code iOS (Objective C)
53. Introduction à Flutter GDG Tours La communication entre code Dart et les plateformes EventChannel : transmettre un flux d'informations
54. Les platform views
55. Flutter dessine tout ce qui est à l'écran “ “ *
56. Introduction à Flutter GDG Tours Flutter doit parfois faire des compromis Google Maps ou WebView demandent beaucoup de travail pour les recréer Widgets indispensables Coucou les SDKs de pub Widgets qui n'existeront jamais La solution : Les Platform Views
58. Les plateformes supportées
59. Introduction à Flutter GDG Tours Côté mobile : Android et iOS
60. Introduction à Flutter GDG Tours Et plus généralement, tout ce qui fait tourner des apps Android Android Things Wear OS ChromeOS + possibilité d'avoir IntelliJ
61. Introduction à Flutter GDG Tours Sur les ordinateurs Desktop Embedding for Flutter google/flutter-desktop-embedding Go Flutter desktop embedder Drakirus/go-flutter-desktop-embedder
62. Introduction à Flutter GDG Tours Jusqu'à faire un équivalent de Powerpoint / Keynote
63. Introduction à Flutter GDG Tours Et même pour le web ! Material Cupertino Widgets Rendering Fondation Animation Painting Gestures Framework (Dart) Flutter Web Engine dart:ui Projet uniquement annoncé et le choix de la solution est en cours 
 (HTML+CSS+Canvas ou CSS Paint API) Projet HummingBird
64. Démo
65. Et maintenant ? La roadmap 2019 Par où commencer
66. La roadmap 2019
67. Introduction à Flutter GDG Tours Roadmap 2019 : cycle de sortie des versions Master Dev Bêta Stable Tous les mois, en début de mois 4 par an (= tous les semestres)
68. Les nouveautés Roadmap 2019 (soumise à modifications) Dynamic patching (Android seulement) Gestion des extensions Communication avec le code en C/C++ Permettre de tester Flutter sans tout l'environnement Meilleure intégration des service Google
69. Par où commencer
70. Introduction à Flutter GDG Tours Tout est expliqué sur le site officiel flutter.io "Get started"
71. Introduction à Flutter GDG Tours Liens utiles Slack francophone slack.flutter-france.fr Newsletter flutterweekly.net Awesome Flutter Solido/awesome-flutter YouTube Flutter Paris youtube.flutter.paris Codelabs officiels codelabs.google.com Cours sur Udacity bit.ly/study-jam-udacity
72. Merci ! Questions ? @g123k @FlutterDev