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%') ]), ]), ); } }
25. None

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