$30 off During Our Annual Pro Sale. View Details »

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

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

Présentation au Devfest Paris 2020

Edouard Marquez

February 14, 2020
Tweet

More Decks by Edouard Marquez

Other Decks in Programming

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