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)
   

   View Slide

2. Flutter pour le Web Devfest Paris 2020
   Quelles plateformes Flutter supporte-t-il ?
   Framework permettant de concevoir
   
   des applications multiplateforme
   “
   “
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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/
   

   View Slide

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
   

   View Slide

8. Flutter pour le Web Devfest Paris 2020
   La génération d’une “application” Flutter Web
   Code Flutter
   
   (Dart)
   

   View Slide

9. Flutter pour le Web Devfest Paris 2020
   La génération d’une “application” Flutter Web
   Code Flutter
   
   (Dart)
   dart2js
   

   View Slide

10. Flutter pour le Web Devfest Paris 2020
    La génération d’une “application” Flutter Web
    Code Flutter
    
    (Dart)
    main.dart.js
    dart2js
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

16. Flutter pour le Web Devfest Paris 2020
    Qu'en pense Google ?
    PageSpeed Insights
    
    Equivalent à Lighthouse
    Sur ordinateur
    
    Pas de problème
    

    View Slide

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
    

    View Slide

18. Flutter pour le Web Devfest Paris 2020
    Et le SEO ?
    

    View Slide

19. Flutter pour le Web Devfest Paris 2020
    Et le SEO ?
    

    View Slide

20. Les différences
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

24. Communication
    
    avec la page web
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

29. Les plugins
    

    View Slide

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
    

    View Slide

31. Flutter pour le Web Devfest Paris 2020
    Pub affiche maintenant la compatibilité web
    

    View Slide

32. Flutter pour le Web Devfest Paris 2020
    Pub affiche maintenant la compatibilité web
    

    View Slide

33. Flutter pour le Web Devfest Paris 2020
    ⚠ Pub indique que les anciens packages sont forcément compatibles web
    

    View Slide

34. Platform views
    

    View Slide

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/#/
    

    View Slide

36. La navigation
    

    View Slide

37. Flutter pour le Web Devfest Paris 2020
    La barre d'adresse : un nouveau composant à prendre en compte
    

    View Slide

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: {
    '/': (_) => Page1(),
    '/page2': (_) => Page2(),
    '/page3': (_) => Page3(),
    },
    );
    

    View Slide

39. Flutter pour le Web Devfest Paris 2020
    La barre d'adresse : gérer les erreurs
    Avec gestion d'erreur
    

    View Slide

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: {
    '/': (_) => Page1(),
    '/page2': (_) => Page2(),
    '/page3': (_) => Page3(),
    },
    onUnknownRoute: (RouteSettings route) {
    return MaterialPageRoute(
    settings: route,
    builder: (_) => ErrorPage(route.name));
    }
    )
    

    View Slide

41. Mais aussi
    

    View Slide

42. Flutter pour le Web Devfest Paris 2020
    Flutter Web Driver supporté
    

    View Slide

43. Flutter pour le Web Devfest Paris 2020
    On peut l'utiliser les animations Rive
    

    View Slide

44. Flutter pour le Web Devfest Paris 2020
    On peut l'utiliser les animations Rive
    

    View Slide

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
    

    View Slide

46. Et les PWA ?
    

    View Slide

47. View Slide

48. View Slide

49. Faut-il passer à
    Flutter Web ?
    “
    “
    

    View Slide

50. Merci !
    @g123k @FlutterFr
    

    View Slide

51. Et la taille ?
    

    View Slide

52. Flutter pour le Web
    Edouard Marquez
    
    (Développeur freelance Flutter & Android)
    

    View Slide

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

    View Slide

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
    

    View Slide

55. Faut-il passer à
    Flutter Web ?
    “
    “
    

    View Slide

56. Flutter pour le Web Devfest Paris 2020
    La barre d'adresse : gérer les arguments
    Envoi de 42 comme argument
    

    View Slide

57. Flutter pour le Web Devfest Paris 2020
    La barre d'adresse : gérer les arguments
    Envoi de 42 comme argument
    

    View Slide

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

    View Slide

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

    View Slide

60. Flutter pour le Web Devfest Paris 2020
    Plusieurs channels en parallèle
    Remplacer le
    channel existant
    Solution 1
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

64. 1 Créer et copier le fichier manifest.json
    
    hgps://app-manifest.rrebaseapp.com/
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

70. Flutter pour le Web Devfest Paris 2020
    1 plugin = 4 projets !
    

    View Slide

71. Flutter pour le Web Devfest Paris 2020
    1 plugin = 4 projets !
    Interface
    commune
    

    View Slide

72. Flutter pour le Web Devfest Paris 2020
    1 plugin = 4 projets !
    Interface
    commune
    Plugin mobile
    
    Android et iOS
    Plugin MacOS Plugin Web
    

    View Slide

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

    View Slide

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
    

    View Slide