Flutter en 2021

Transcript

1. Flutter en 2021 Est-ce le bon moment de s'y intéresser ? (Points forts & faiblesses)
2. Devfest Nantes Hello World :) Qui suis-je ? Edouard Marquez Freelance Android & Flutter edouard@marquez.cool @g123k Slack francophone slack.flutter-france.fr Newsletter flutter-digest.com YouTube Flutter France youtube.flutter.paris Newsletter flutter-croissants.com
3. Flutter : késako ?
4. Devfest Nantes Introduction Qu'est-ce que Flutter ? OpenSource 100% du code
5. Devfest Nantes Introduction Qu'est-ce que Flutter ? OpenSource 100% du code Compatibilité Mobile + web + desktop…
6. Devfest Nantes Introduction Qu'est-ce que Flutter ? OpenSource 100% du code Compatibilité Mobile + web + desktop… Inspiré du web Hot Reload, équipe…
7. Devfest Nantes Introduction Qu'est-ce que Flutter ? Compatibilité Mobile + web + desktop… Inspiré du web Hot Reload, équipe… Performant Code natif sur mobile
8. Devfest Nantes Introduction Qu'est-ce que Flutter ? Inspiré du web Hot Reload, équipe… Performant Code natif sur mobile Dart Langage de programmation
9. Devfest Nantes Introduction Qu'est-ce que Flutter ? Données Statista 2021
10. Devfest Nantes Introduction Flutter : quelques chiffres Version stable 2.5.x (septembre 2021) Issues fermées 4 600 Pull Requests validées 3 932 (15 172 en 2020) Contributeurs 252 (1337 en 2020) Reviewers 216
11. Devfest Nantes Introduction Flutter : ça marche ? 150 000 applications Sur le Google Play (mars 2021)
12. Devfest Nantes Introduction Applications Flutter récentes : BMW
13. Devfest Nantes Introduction Applications Flutter récentes : Philips Hue (Signify)
14. Comment ça marche ?
15. Devfest Nantes Comment ça marche ? Le paradigme : application native Widgets OEM Position GPS Bluetooth Audio Capteurs Caméra Etc Plateforme Services Code natif Application Canvas Evénements
16. Devfest Nantes Comment ça marche ? Le paradigme : Flutter Code natif Canvas Evénements Application Plateforme Position GPS Bluetooth Audio Capteurs Caméra Etc Services Widgets, Rendu Platform Channels
17. Devfest Nantes Comment ça marche ? Widgets Rendering Foundation Animation Painting Gestures Material Cupertino Bibliothèque UI Framework (Dart) Frame Pipelining Text Layout Service protocol Composition Platform Channels Dart Isolate Setup Rendering System Events Dart VM Mananagement Frame Scheduling Asset Resolution Moteur (C/C++) Render Surface Setup Native Plugins Packaging Thread setup Event Loop Interop Embedder
18. Devfest Nantes Comment ça marche ? Embedder Render Surface Setup Native Plugins Packaging Thread setup Event Loop Interop Embedder Web HTML / CSS Canvas WebGL WebAssembly
19. Comment code-t-on ?
20. Devfest Nantes Comment code-t-on ? Le concept de "declarative UI" SwiftUI iOS / iPad OS / Mac OS / TV OS / Watch OS Jetpack Compose Android
21. Devfest Nantes Comment code-t-on ? Le concept de "declarative UI" SwiftUI iOS / iPad OS / Mac OS / TV OS / Watch OS Jetpack Compose Android import SwiftUI struct Content : View { @State var model = Themes.listModel var body: some View { List(model.items, action: model.selectItem) { Image(item.image) VStack(alignement: .leading) { Text(item.title) Text(item.subtitle) .color(.gray) } } } }
22. En Flutter Tout est un Widget “ “
23. Devfest Nantes Comment code-t-on ? Imbriquer des Widgets 260 Total Posts 26.84% Container Column (÷) Icon Text Text Row (㲗) Icon Text
24. class TotalPosts extends StatelessWidget { @override Widget build(BuildContext context) { return Container( decoration: ShapeDecoration(shape: RoundedRectangleBorder()), child: Column(children: <Widget>[ Icon(Icons.photo_album), Text('260'), Text('Total posts'), Row(children: <Widget>[ Icon(Icons.trending_up), Text('26.84%') ]), ]), ); } }
26. Devfest Nantes Comment code-t-on ? Les solutions de State Management : une vue simplifiée @RydMike Solution de gestion d'état Vue Evénement Nouvel état Données BDD Requête
27. Devfest Nantes Comment code-t-on ? Les solutions de State Management @RydMike
28. Devfest Nantes Comment code-t-on ? Les solutions de State Management @RydMike Quelle solution dois-je utiliser ? “ “
29. Devfest Nantes Comment code-t-on ? Nouveau template depuis Flutter 2.5 : "skeleton" Plusieurs écrans Liste, écran de détails, paramètres State Management ChangeNotifier Fonctionnalités Traduction, mode sombre
30. Devfest Nantes Comment code-t-on ? Changer d'écran avec le Navigator @RydMike Résultat
31. Devfest Nantes Comment code-t-on ? Le problème du Navigator 2.0
32. Devfest Nantes Comment code-t-on ? Changer d'écran avec le Navigator @RydMike
33. Devfest Nantes Comment code-t-on ? Changer d'écran avec le Navigator @RydMike Dois-je utiliser une lib ? “ “ Quelle version dois-je prendre ? “ “
34. Le langage (Dart)
35. Devfest Nantes Le language Dart Un départ manqué VM Dart Navigateur Changement de direction en 2015 Désormais place à un transpilateur Dart -> JS Remplacer Javascript L'idée est de remplacer le JavaScript qu'ils trouvent inadapté pour les "grosses" application Web.
36. Devfest Nantes Le language Dart Flutter à la rescousse Dart 2.0 (2018) Le langage devient fortement typé pour mieux s'adapter aux frameworks comme Flutter Dart 2.6 (2019) dart2native étend la compilation native à Linux, macOs et Windows. Plus besoin de machine virtuelle Dart 2.12 (2021) La gestion du null arrive dans le langage, tout comme Dart:ffi (communication avec du code en C) Dart 2.13 (2021) Null-safety activé par défaut, typedef généralisé (autre que les fonctions) & améliorations sur Dart:ffi Version courante : Dart 2.14 Ajout de l'opérateur >>>, amélioration du support des Mac M1
37. Devfest Nantes Le language Dart Oui, mais…
38. Devfest Nantes Le language Dart Génération de code manuelle avec build_runner It works ! A partir d'annotations Soumis à erreur A lancer à la main Performances Lent… à moins de passer du temps
39. Devfest Nantes Le language Dart Un langage, mais plusieurs "sorties" Code Dart VM Dart Flutter Web Site Dart2js AOT Dart2native Windows, Mac, Linux Dev Flutter (Hot Reload) Mobile (release)
40. Devfest Nantes Le language Dart Oui, mais… AngularDart En mode maintenance Aqueduct Plus maintenu Flutter Web Réallocation des ressources Communauté Conduit…
41. Devfest Nantes Le language Dart Dartpad Dans le navigateur Fonctionne avec Dart & Flutter Documentation Exemples testables directement Dépendances Seules certaines autorisées
42. Devfest Nantes Le language Dart Dartpad Dans le navigateur Fonctionne avec Dart & Flutter Documentation Exemples testables directement Dépendances Seules certaines autorisées
43. Sur mobile (Android / iOS)
44. Devfest Nantes Sur mobile Mobile : dans quel état ? Version la plus stable Version prioritaire Android 4.4+ Smartphones, tablettes, ChromeOS… iOS/iPadOS/tvOS 10+ iPhone, iPad (mais pas Apple Watch) Material Support de composants Material YOU Cupertino Bibliothèque en constante évolution
45. Devfest Nantes Sur mobile Support des écrans pliables Microsoft Contribution externe It works Mais personne ne l'utilise… Fork de Flutter Plutôt pour des expérimentations
46. Sur le web
47. Devfest Nantes Sur le web Web : dans quel état ? Version "stable" Mais plutôt bêta++ Déploiement facile GitHub Pages, Firebase… Support des raccourcis Combinaisons de touches Avance vite Autant Flutter, que la communauté Penser au ordinateurs Touch vs souris
48. Devfest Nantes Sur le web Web : dans quel état ? Version "stable" Mais plutôt bêta++ Enlever le # Lib url_strategy Scroll pas naturel Bibliothèques Code à adapter dart:io vs dart:html First frame rendering Il faut patienter
49. Sur desktop
50. Devfest Nantes Sur desktop Desktop : dans quel état ? Version bêta bientôt A la fin de l'année macOS Similaire à iOS Windows Win32 et UWP Linux Support officiel de Canonical
51. Devfest Nantes Sur desktop macOS macOS Très proche d'iOS (Metal) Catalyst iPad -> macOS : pas utilisé Macos_ui Composants graphiques manquants
52. Devfest Nantes Sur desktop Windows Windows Support des apps Win32 UWP (~ abandonné) Fonctionne sur Xbox… Fluent_UI Composants graphiques Windows
53. Devfest Nantes Sur desktop Linux Ubuntu Toutes les apps en Flutter Contributeur "Google tue les projets" Yaru Composants graphiques Ubuntu
54. Devfest Nantes Sur desktop Ubuntu Frame : mode kiosque
55. Outils
56. Devfest Nantes Outils Flutter DevTools
57. Devfest Nantes Outils Solution de "Server driven UI" officielle Remote Flutter Widget (RFW) Expérimentation pour le moment
58. String path = 'assets/sous_dossier/mon_fichier.png'; Image.asset(path); rootBundle.load(path); rootBundle.loadString(path); Projet Flutter lib analysis_options.yaml pubspec.lock pubspec.yaml main.dart android ios linux macos web windows assets sous-dossier mon_fichier.png
59. String path = 'assets/sous_dossier/mon_fichier.png'; Image.asset(path); rootBundle.load(path); rootBundle.loadString(path); Projet Flutter lib analysis_options.yaml pubspec.lock pubspec.yaml main.dart android ios linux macos web windows assets sous-dossier my_file.png Aucune vérification Plantera uniquement à l'exécution Erreur ! Outils tiers (ex: spider) Mais dépendent de build_runner
60. Devfest Nantes Outils Outils "No-code"
61. Autres terminaux
62. Devfest Nantes Autres terminaux Fuchsia Disponible pour tous Nest Hub 1ère génération Fin de CastOS La fin des multiples OS ? Autres devices Offre d'emploi le laissant présager
63. Devfest Nantes Autres terminaux Tizen Extension au SDK Galaxy Watch, Smart TV & RPI 3/4 Complet On peut publier des applications Flop ? Galaxy Watch 4 sur Wear OS
64. Devfest Nantes Autres terminaux Harmony OS Support Flutter Très actif + doc Environnement Compliqué à installer Flop ? Quelle PDM réelle en dehors de la Chine ?
65. Devfest Nantes Autres terminaux Toyota Infotainment Changer facilement d'OS Offres d'emploi Recrutement régulier Aucune visibilité Limité à un git public et des notes d'intention
66. Que choisir ?
67. Aujourd'hui, Flutter… Sur mobile Plateforme la plus stable Quasiment toutes les fonctionnalités Ralentissements Sur iOS ?
68. Aujourd'hui, Flutter… Sur mobile Sur le web "Stable" Performances variables + code Problèmes de SEO Plateforme la plus stable Quasiment toutes les fonctionnalités Ralentissements Sur iOS ?
69. Aujourd'hui, Flutter… Sur mobile Sur desktop Plateforme la plus stable Quasiment toutes les fonctionnalités Ralentissements Sur iOS ? "Stable" Performances variables + code Problèmes de SEO Sur le web It works ! Widgets en cours de création Priorité difficile à déterminer
70. Et maintenant ?
71. Devfest Nantes Et maintenant ? Ebook gratuit A jour Flutter 2.5.x Limité dans le temps Jusqu'au 06/01/2022
72. Merci ! Questions ? Newsletter flutter-digest.com Newsletter flutter-croissants.com Edouard Marquez Freelance Android & Flutter edouard@marquez.cool @g123k