Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Devfest Nantes Hello World :) Qui suis-je ? Edouard Marquez Freelance Android & Flutter [email protected] @g123k Slack francophone slack.flutter-france.fr Newsletter flutter-digest.com YouTube Flutter France youtube.flutter.paris Newsletter flutter-croissants.com

Slide 3

Slide 3 text

Flutter : késako ?

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Devfest Nantes Introduction Applications Flutter récentes : BMW

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Comment ça marche ?

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Devfest Nantes Comment ça marche ? Embedder Render Surface Setup Native Plugins Packaging Thread setup Event Loop Interop Embedder Web HTML / CSS Canvas WebGL WebAssembly

Slide 19

Slide 19 text

Comment code-t-on ?

Slide 20

Slide 20 text

Devfest Nantes Comment code-t-on ? Le concept de "declarative UI" SwiftUI iOS / iPad OS / Mac OS / TV OS / Watch OS Jetpack Compose Android

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

En Flutter Tout est un Widget “ “

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Le langage (Dart)

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Devfest Nantes Le language Dart Oui, mais…

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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)

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Sur mobile (Android / iOS)

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Sur le web

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Sur desktop

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Devfest Nantes Sur desktop Ubuntu Frame : mode kiosque

Slide 55

Slide 55 text

Outils

Slide 56

Slide 56 text

Devfest Nantes Outils Flutter DevTools

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Devfest Nantes Outils Outils "No-code"

Slide 61

Slide 61 text

Autres terminaux

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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 ?

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Que choisir ?

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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 ?

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

Et maintenant ?

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Merci ! Questions ? Newsletter flutter-digest.com Newsletter flutter-croissants.com Edouard Marquez Freelance Android & Flutter [email protected] @g123k