Save 37% off PRO during our Black Friday Sale! »

Flutter en 2021

Flutter en 2021

081b06f3d680a58d45bf672c0dfa0a6a?s=128

Edouard Marquez

October 24, 2021
Tweet

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