Flutter en 2021

Transcript

1. Flutter en 2021
   Est-ce le bon moment de s'y intéresser ?
   
   (Points forts & faiblesses)
   

   View Slide

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
   

   View Slide

3. Flutter : késako ?
   

   View Slide

4. Devfest Nantes Introduction
   Qu'est-ce que Flutter ?
   OpenSource
   
   100% du code
   

   View Slide

5. Devfest Nantes Introduction
   Qu'est-ce que Flutter ?
   OpenSource
   
   100% du code
   Compatibilité
   
   Mobile + web + desktop…
   

   View Slide

6. Devfest Nantes Introduction
   Qu'est-ce que Flutter ?
   OpenSource
   
   100% du code
   Compatibilité
   
   Mobile + web + desktop…
   Inspiré du web
   
   Hot Reload, équipe…
   

   View Slide

7. Devfest Nantes Introduction
   Qu'est-ce que Flutter ?
   Compatibilité
   
   Mobile + web + desktop…
   Inspiré du web
   
   Hot Reload, équipe…
   Performant
   
   Code natif sur mobile
   

   View Slide

8. Devfest Nantes Introduction
   Qu'est-ce que Flutter ?
   Inspiré du web
   
   Hot Reload, équipe…
   Performant
   
   Code natif sur mobile
   Dart
   
   Langage de programmation
   

   View Slide

9. Devfest Nantes Introduction
   Qu'est-ce que Flutter ?
   Données Statista 2021
   

   View Slide

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
    

    View Slide

11. Devfest Nantes Introduction
    Flutter : ça marche ?
    150 000 applications
    
    Sur le Google Play (mars 2021)
    

    View Slide

12. Devfest Nantes Introduction
    Applications Flutter récentes : BMW
    

    View Slide

13. Devfest Nantes Introduction
    Applications Flutter récentes : Philips Hue (Signify)
    

    View Slide

14. Comment ça marche ?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

19. Comment code-t-on ?
    

    View Slide

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
    

    View Slide

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)
    
    
    }
    
    
    }
    
    
    }
    
    
    }
    

    View Slide

22. En Flutter
    
    
    Tout est un Widget
    “
    “
    

    View Slide

23. Devfest Nantes Comment code-t-on ?
    Imbriquer des Widgets
    260
    Total Posts
    26.84%
    Container
    Column (÷)
    Icon
    Text
    Text
    Row (㲗)
    Icon Text
    

    View Slide

24. class TotalPosts extends StatelessWidget {
    
    
    
    
    @override
    
    
    Widget build(BuildContext context) {
    
    
    return Container(
    
    
    decoration: ShapeDecoration(shape: RoundedRectangleBorder()),
    
    
    child: Column(children: [
    
    
    Icon(Icons.photo_album),
    
    
    Text('260'),
    
    
    Text('Total posts'),
    
    
    Row(children: [
    
    
    Icon(Icons.trending_up),
    
    
    Text('26.84%')
    
    
    ]),
    
    
    ]),
    
    
    );
    
    
    }
    
    
    
    
    }
    

    View Slide

25. View Slide

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
    

    View Slide

27. Devfest Nantes Comment code-t-on ?
    Les solutions de State Management
    @RydMike
    
    

    View Slide

28. Devfest Nantes Comment code-t-on ?
    Les solutions de State Management
    @RydMike
    
    Quelle solution
    
    
    dois-je utiliser ?
    “
    “
    

    View Slide

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
    

    View Slide

30. Devfest Nantes Comment code-t-on ?
    Changer d'écran avec le Navigator
    @RydMike
    Résultat
    

    View Slide

31. Devfest Nantes Comment code-t-on ?
    Le problème du Navigator 2.0
    

    View Slide

32. Devfest Nantes Comment code-t-on ?
    Changer d'écran avec le Navigator
    @RydMike
    

    View Slide

33. Devfest Nantes Comment code-t-on ?
    Changer d'écran avec le Navigator
    @RydMike
    Dois-je utiliser
    
    
    une lib ?
    “
    “
    Quelle version
    
    
    dois-je prendre ?
    “
    “
    

    View Slide

34. Le langage (Dart)
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

37. Devfest Nantes Le language Dart
    Oui, mais…
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

40. Devfest Nantes Le language Dart
    Oui, mais…
    AngularDart
    
    En mode maintenance
    Aqueduct
    
    Plus maintenu
    Flutter Web
    
    Réallocation des ressources
    Communauté
    
    Conduit…
    

    View Slide

41. Devfest Nantes Le language Dart
    Dartpad
    Dans le navigateur
    
    Fonctionne avec Dart & Flutter
    Documentation
    
    Exemples testables directement
    Dépendances
    
    Seules certaines autorisées
    

    View Slide

42. Devfest Nantes Le language Dart
    Dartpad
    Dans le navigateur
    
    Fonctionne avec Dart & Flutter
    Documentation
    
    Exemples testables directement
    Dépendances
    
    Seules certaines autorisées
    

    View Slide

43. Sur mobile (Android / iOS)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

46. Sur le web
    

    View Slide

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
    

    View Slide

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
    

    View Slide

49. Sur desktop
    

    View Slide

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
    

    View Slide

51. Devfest Nantes Sur desktop
    macOS
    macOS
    
    Très proche d'iOS (Metal)
    Catalyst
    
    iPad -> macOS : pas utilisé
    Macos_ui
    
    Composants graphiques manquants
    

    View Slide

52. Devfest Nantes Sur desktop
    Windows
    Windows
    
    Support des apps Win32
    UWP (~ abandonné)
    
    Fonctionne sur Xbox…
    Fluent_UI
    
    Composants graphiques Windows
    

    View Slide

53. Devfest Nantes Sur desktop
    Linux
    Ubuntu
    
    Toutes les apps en Flutter
    Contributeur
    
    "Google tue les projets"
    Yaru
    
    Composants graphiques Ubuntu
    

    View Slide

54. Devfest Nantes Sur desktop
    Ubuntu Frame : mode kiosque
    

    View Slide

55. Outils
    

    View Slide

56. Devfest Nantes Outils
    Flutter DevTools
    

    View Slide

57. Devfest Nantes Outils
    Solution de "Server driven UI" officielle
    Remote Flutter Widget (RFW)
    
    Expérimentation pour le moment
    

    View Slide

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
    

    View Slide

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
    

    View Slide

60. Devfest Nantes Outils
    Outils "No-code"
    

    View Slide

61. Autres terminaux
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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 ?
    

    View Slide

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
    

    View Slide

66. Que choisir ?
    

    View Slide

67. Aujourd'hui, Flutter…
    Sur mobile
    Plateforme la
    
    plus stable
    Quasiment toutes
    
    les fonctionnalités
    Ralentissements
    
    Sur iOS ?
    

    View Slide

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 ?
    

    View Slide

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
    

    View Slide

70. Et maintenant ?
    

    View Slide

71. Devfest Nantes Et maintenant ?
    Ebook gratuit
    A jour
    
    Flutter 2.5.x
    Limité dans le temps
    
    Jusqu'au 06/01/2022
    

    View Slide

72. Merci !
    
    
    Questions ?
    Newsletter
    
    flutter-digest.com
    Newsletter
    
    flutter-croissants.com
    Edouard Marquez
    Freelance Android & Flutter edouard@marquez.cool
    @g123k
    

    View Slide