Flutter Web : que peut-on faire aujourd'hui ?

Présentation au Devfest Paris 2020

Transcript

1. Flutter pour le Web Edouard Marquez (Développeur freelance Flutter & Android)
2. Flutter pour le Web Devfest Paris 2020 Quelles plateformes Flutter supporte-t-il ? Framework permettant de concevoir des applications multiplateforme “ “
3. Flutter pour le Web Devfest Paris 2020 Quelles plateformes Flutter supporte-t-il ? Framework permettant de concevoir des applications multiplateforme Embarqué Ex : Nest Hub Max “ “ Ordinateurs Windows, Mac, Linux ALPHA Web BETA Smartphones Android et iOS STABLE
4. Flutter pour le Web Devfest Paris 2020 Flutter Web est relativement récent Annonce de Hummingbird Aucun code mis à disposition, juste une note d’intention avec les essais de l’équipe Flutter quant à leurs choix 04 décembre 2018 Flutter Live
5. Flutter pour le Web Devfest Paris 2020 Flutter Web est relativement récent Annonce de Hummingbird Aucun code mis à disposition, juste une note d’intention avec les essais de l’équipe Flutter quant à leurs choix 04 décembre 2018 Flutter Live Hummingbird devient Flutter Web Projet testable par tous, mais en Developer Preview 07 mai 2019 Google I/O 19 Flutter Web passe en bêta Le projet est suffisamment mature pour être qualifié de bêta 11 décembre 2019 Flutter Interact
6. Une démo, une démo ! Site de démo https://g123k.github.io/ flutter_web_showcase/ Invoice Ninja https://hillelcoren.github.io/ invoiceninja/
7. Développer son application Depuis un IDE ou en ligne de commande Déployer son site Firebase Hosting, GitHub pages… Qu’est-ce qui fonctionne ? En Flutter Web Chrome pour développer Mais tous les navigateurs en release Déboguer Chrome Dev Tools + Dart/Flutter Dev Tools
8. Flutter pour le Web Devfest Paris 2020 La génération d’une “application” Flutter Web Code Flutter (Dart)
9. Flutter pour le Web Devfest Paris 2020 La génération d’une “application” Flutter Web Code Flutter (Dart) dart2js
10. Flutter pour le Web Devfest Paris 2020 La génération d’une “application” Flutter Web Code Flutter (Dart) main.dart.js dart2js
11. Flutter pour le Web Devfest Paris 2020 La génération d’une “application” Flutter Web Code Flutter (Dart) Assets main.dart.js dart2js
12. Flutter pour le Web Devfest Paris 2020 La génération d’une “application” Flutter Web Code Flutter (Dart) Assets main.dart.js dart2js index.html main.dart.js assets/
13. Flutter pour le Web Devfest Paris 2020 Un Hello World combien ça pèse ? D'autres outils Chrome DevTools https://g123k.github.io/flutter_web_hello_world/
14. Flutter pour le Web Devfest Paris 2020 Un Hello World combien ça pèse ? D'autres outils Chrome DevTools main.dart.js Fichier de 1 Mo / 300 ko GZippé https://g123k.github.io/flutter_web_hello_world/
15. Flutter pour le Web Devfest Paris 2020 Un Hello World combien ça pèse ? D'autres outils Chrome DevTools main.dart.js Fichier de 1 Mo / 300 ko GZippé JS + assets 408 ko https://g123k.github.io/flutter_web_hello_world/
16. Flutter pour le Web Devfest Paris 2020 Qu'en pense Google ? PageSpeed Insights Equivalent à Lighthouse Sur ordinateur Pas de problème
17. Flutter pour le Web Devfest Paris 2020 Qu'en pense Google ? PageSpeed Insights Equivalent à Lighthouse Sur ordinateur Pas de problème Sur mobile Des améliorations à faire
18. Flutter pour le Web Devfest Paris 2020 Et le SEO ?
19. Flutter pour le Web Devfest Paris 2020 Et le SEO ?
20. Les différences
21. Flutter pour le Web Devfest Paris 2020 Des APIs différentes ui Communes async core collection typed_data developer convert math wasm Mobile / Desktop ffi io isolate js Web js_util html web_audio web_gl indexed_db web_sql svg hgps://github.com/huger/huger/issues/39998
22. Flutter pour le Web Devfest Paris 2020 Toujours du Flutter… mais dans un navigateur Peut s'exécuter sur plusieurs navigateurs Safari, Firefox, Chrome… Set de technologies différentes CSS, Javascript… Usages différents Clavier / souris, layout responsive, mais parfois aussi du tactile CORS Restrictions qui n'existent pas sur mobile (Cross-Origin Resource Sharing)
23. Flutter pour le Web Devfest Paris 2020 Avec quelques limitations (temporaires) Certains composants Flutter ne fonctionnent pas Bugs graphiques, shaders… Locale Pour le moment, retourne toujours 'en' Pas de Hot Reload Uniquement du Hot Restart
24. Communication avec la page web
25. Flutter pour le Web Devfest Paris 2020 Modifier dynamiquement le titre de la page js Web js_util html web_audio web_gl indexed_db web_sql svg
26. Flutter pour le Web Devfest Paris 2020 Modifier dynamiquement le titre de la page js Web js_util html web_audio web_gl indexed_db web_sql svg
27. Flutter pour le Web Devfest Paris 2020 Modifier dynamiquement le titre de la page import 'dart:html' as html; class TestWidget extends StatelessWidget { @override Widget build(BuildContext context) { return OutlineButton( child: Text('Changer le titre de la page'), onPressed: () { html.document.title = 'Nouveau titre'; }, ); } }
28. Flutter pour le Web Devfest Paris 2020 Modifier dynamiquement le titre de la page import 'dart:html' as html; class TestWidget extends StatelessWidget { @override Widget build(BuildContext context) { return OutlineButton( child: Text('Changer le titre de la page'), onPressed: () { html.document.title = 'Nouveau titre'; }, ); } }
29. Les plugins
30. Flutter pour le Web Devfest Paris 2020 Une nouvelle manière de créer les plugins name: url_launcher description: Flutter plugin for launching a URL on Android and iOS. Supports web, phone, SMS, and email schemes. homepage: https://github.com/flutter/plugins/tree/master/packages/url_launcher/url_launcher version: 5.4.1 flutter: plugin: platforms: android: package: io.flutter.plugins.urllauncher pluginClass: UrlLauncherPlugin ios: pluginClass: FLTURLLauncherPlugin web: default_package: url_launcher_web macos: default_package: url_laucher_macos
31. Flutter pour le Web Devfest Paris 2020 Pub affiche maintenant la compatibilité web
32. Flutter pour le Web Devfest Paris 2020 Pub affiche maintenant la compatibilité web
33. Flutter pour le Web Devfest Paris 2020 ⚠ Pub indique que les anciens packages sont forcément compatibles web
34. Platform views
35. Flutter pour le Web Devfest Paris 2020 Utiliser FVM pour gérer les channels de Flutter HtmlElementView Similaire à AndroidView et UiKitView Démo webcam https://flutter- webcam.firebaseapp.com/#/
36. La navigation
37. Flutter pour le Web Devfest Paris 2020 La barre d'adresse : un nouveau composant à prendre en compte
38. Flutter pour le Web Devfest Paris 2020 La barre d'adresse : un nouveau composant à prendre en compte Navigator.of(context).pushNamed('/page2'); return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors.blue), routes: <String, WidgetBuilder>{ '/': (_) => Page1(), '/page2': (_) => Page2(), '/page3': (_) => Page3(), }, );
39. Flutter pour le Web Devfest Paris 2020 La barre d'adresse : gérer les erreurs Avec gestion d'erreur
40. Flutter pour le Web Devfest Paris 2020 La barre d'adresse : gérer les erreurs Avec gestion d'erreur return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors.blue), routes: <String, WidgetBuilder>{ '/': (_) => Page1(), '/page2': (_) => Page2(), '/page3': (_) => Page3(), }, onUnknownRoute: (RouteSettings route) { return MaterialPageRoute( settings: route, builder: (_) => ErrorPage(route.name)); } )
41. Mais aussi
42. Flutter pour le Web Devfest Paris 2020 Flutter Web Driver supporté
43. Flutter pour le Web Devfest Paris 2020 On peut l'utiliser les animations Rive
44. Flutter pour le Web Devfest Paris 2020 On peut l'utiliser les animations Rive
45. Flutter pour le Web Devfest Paris 2020 On peut l'utiliser comme extension Chrome Rody Davis @rodydavis 18:17 - 21 Novembre 2019 Why yes you can make @FlutterDev web Google Chrome Extensions that can execute js on the host page
46. Et les PWA ?
49. Faut-il passer à Flutter Web ? “ “
50. Merci ! @g123k @FlutterFr
51. Et la taille ?
52. Flutter pour le Web Edouard Marquez (Développeur freelance Flutter & Android)
53. Flutter pour le Web Devfest Paris 2020 La stack Flutter Material Cupertino Widgets Rendering Fondation Animation Painting Gestures Framework (Dart) Skia Dart Text Engine (C++)
54. Flutter pour le Web Devfest Paris 2020 La stack Flutter Web Material Cupertino Widgets Rendering Fondation Animation Painting Gestures Framework (Dart) Canvas JS Engine DOM Navigateur
55. Faut-il passer à Flutter Web ? “ “
56. Flutter pour le Web Devfest Paris 2020 La barre d'adresse : gérer les arguments Envoi de 42 comme argument
57. Flutter pour le Web Devfest Paris 2020 La barre d'adresse : gérer les arguments Envoi de 42 comme argument
58. Flutter pour le Web Devfest Paris 2020 La barre d'adresse : gérer les arguments Envoi de 42 comme argument Navigator.of(context) .pushNamed( '/page2', arguments : 42 );
59. Flutter pour le Web Devfest Paris 2020 La barre d'adresse : gérer les arguments Envoi de 42 comme argument return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors.blue), onGenerateRoute: (RouteSettings route) { switch (route.name) { case '/page2': return MaterialPageRoute( settings: route, builder: (_) => Page2()); case '/page3': return MaterialPageRoute( settings: route, builder: (_) => Page3(route.arguments));
60. Flutter pour le Web Devfest Paris 2020 Plusieurs channels en parallèle Remplacer le channel existant Solution 1
61. Flutter pour le Web Devfest Paris 2020 Plusieurs channels en parallèle Remplacer le channel existant Un dossier par channel Modifier le path du SDK Solution 1 Solution 2
62. Flutter pour le Web Devfest Paris 2020 Plusieurs channels en parallèle Warning! The 'flutter' tool you are currently running is from a different Flutter repository than the one last used by this package. The repository from which the 'flutter' tool is currently executing will be used instead. running Flutter tool: /Users/g123k/Documents/flutter_beta previous reference : /Users/g123k/Documents/flutter_stable This can happen when you have multiple copies of flutter installed. Please check your system path to verify that you are running the expected version (run 'flutter --version' to see which flutter is on your path).
63. Hot Restart Faire des modifications en relançant l’application Développer son application Depuis un IDE ou en ligne de commande Déboguer Chrome Dev Tools + Flutter Web Tools Déployer son site Firebase Hosting, GitHub pages… Qu’est-ce qui fonctionne ? En Flutter Web
64. 1 Créer et copier le fichier manifest.json hgps://app-manifest.rrebaseapp.com/
65. 1 Créer et copier le fichier manifest.json hgps://app-manifest.rrebaseapp.com/ 2 Créer les favicons et insérer le code html hgps://app-manifest.rrebaseapp.com/
66. 1 Créer et copier le fichier manifest.json hgps://app-manifest.rrebaseapp.com/ 2 Créer les favicons et insérer le code html hgps://app-manifest.rrebaseapp.com/ 3 Modifier le fichier index.html pour faire référence au service worker </body> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('flutter_service_worker.js'); } </script>
67. Flutter pour le Web Devfest Paris 2020 Disponible en bêta (channel) => flutter channel beta => flutter upgrade => flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel beta, v1.13.6, on Mac OS X 10.15.2 19C57, locale en-FR)
68. Flutter pour le Web Devfest Paris 2020 Utiliser FVM pour gérer les channels de Flutter FVM Flutter Version Management Plusieurs channels Mise à jour simplifiée Par projet Lien vers le bon environnement
69. Flutter pour le Web Devfest Paris 2020 (Uniquement) six packages supportés google_sign_in url_launcher video_player shared_preferences firebase_core firebase_auth
70. Flutter pour le Web Devfest Paris 2020 1 plugin = 4 projets !
71. Flutter pour le Web Devfest Paris 2020 1 plugin = 4 projets ! Interface commune
72. Flutter pour le Web Devfest Paris 2020 1 plugin = 4 projets ! Interface commune Plugin mobile Android et iOS Plugin MacOS Plugin Web
73. Flutter pour le Web Devfest Paris 2020 La barre d'adresse : gérer les arguments Argument dans la barre d'adresse return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors.blue), onGenerateRoute: (RouteSettings route) { switch (route.name) { case '/page2': return MaterialPageRoute( settings: route, builder: (_) => Page2()); case '/page3': return MaterialPageRoute( settings: route, builder: (_) => Page2(route.arguments));
74. Flutter pour le Web Devfest Paris 2020 La barre d'adresse : gérer les arguments Argument dans la barre d'adresse return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors.blue), onGenerateRoute: (RouteSettings route) { switch (route.name) { case '/page2': return MaterialPageRoute( settings: route, builder: (_) => Page2()); case '/page3': return MaterialPageRoute( settings: route, builder: (_) => Page2(route.arguments)); route.name = '/page3?val=2' route.arguments = null