Après le mobile, Flutter veut conquérir le PC et le Web !

Talk #2 de l'épisode 02 de Flutter-Rennes

Transcript

1. Moins de code, plus de plateformes Kevin Segaud @kleak_dev Romain Rastel @lets4r 22 janvier 2019 ISTIC
2. 2 Talk #2 Après le mobile, Flutter veut conquérir le PC et le Web !
3. 3 Flutter Desktop Embedding Projet GitHub de Google. Points à retenir : § Pas officiellement supporté § Travail exploratoire § Moins user-friendly que pour iOS ou Android § D’autres travaux en cours comme Flutter on desktop, a real competitor to Electron , Go Flutter Desktop Embedder, et même une implémentation pour raspberry Pi !
4. 4 1) Suivre les instructions ici et là afin d’installer et compiler l’environnement de développement. 2) Créer son application Flutter dans /example/flutter_app (ou modifier le chemin). 3) Surcharger la plateforme dans le code Flutter comme indiqué ici et embarquer les fonts qui ne sont pas présentes sur le système. 4) Lancer l’application Comment démarrer ? import 'package:flutter/foundation.dart' show debugDefaultTargetPlatformOverride; void main() { // Desktop platforms are not recognized as valid targets by // Flutter; force a specific target to prevent exceptions. debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia; runApp(MyApp()); } <parent dir> ├─ flutter └─ flutter-desktop-embedding └─ example └─ flutter_app Exécuter make, puis ./out/flutter_embedder_example Générer puis lancer avec XCode le projet ExampleEmbedder Générer et lancer avec Visual Studio le projet GLFW Example
5. 5 Demo
6. 6 Hummingbird Flutter pour le web Points à retenir : § Pas encore Open Source § Repose sur les standards du Web § Expérimentation § Plus d’infos à la Google I/O § Article technique : Hummingbird: Building Flutter for the Web
7. 7 Architecture de Flutter pour le mobile
8. 8 Prototypes Just widgets Implémentation des widgets Flutter en HTML. 1 class Text extends StatelessWidget { final String value; final TextStyle style; const Text(this.value, {this.style}); @override Node build() { Style textStyle; if (style != null) { var buffer = new StringBuffer(); if (style.color != null) buffer.write('color: ${style.color.toCssRGB()};’); if (style.fontFamily != null) buffer.write('font-family: ${style.fontFamily};’); if (style.fontWeight != null) buffer.write('font-weight: ${style.fontWeight};’); ... textStyle = new Style(buffer.toString()); } return new Element('span', text: value, style: textStyle); } }
9. 9 Prototypes Just widgets Implémentation des widgets Flutter en HTML. Widgets + custom layout Utilisation des Widgets du framework mais couche du Rendu en HTML. 1 2 class RenderText extends RenderObject { RenderText() : super(html.ParagraphElement()); String get text => _text; String _text; set text(String newValue) { if (identical(newValue, _text)) { return; } element.text = newValue; _text = newValue; } }
10. 10 Prototypes Just widgets Implémentation des widgets Flutter en HTML. Widgets + custom layout Utilisation des Widgets du framework mais couche du Rendu en HTML. Flutter Web Engine Implémentation de dart:ui pour le web. 1 2 3
11. 11 Architecture de Flutter pour le Web (Hummingbird)
12. 12 Partie demandant encore beaucoup de recherches. 2 approches explorées en parallèle : § HTML/CSS + Canvas 2D § CSS Paint API Comment Hummingbird dessine à l’écran ? CSS Paint API Nouvelle Web API faisant partie de Houdini Efficace et sans crénelage Ne supporte pas le texte (pour l’instant) Chrome >= 65 & Opera >= 52 HTML/CSS Solution préférée Le browser s’occupe de l’optimisation Support l’accessibilité Canvas 2D Si pas possible avec HTML/CSS Efficace mais représenté en tant qu’image
13. 13 Vers le développement unifié Un seul langage, un seul SDK pour créer des interfaces graphiques sur tous les supports. Conclusion 2 Nouveaux supports : PC et Web. 2019 Continuer à travailler sur Flutter Desktop Embedding Rendre Open Source Hummingbird Flutter Desktop Embedding Manque les binaires Manque d’outillage Expérimentation possible
14. Romain Rastel @lets4r 22 janvier 2019 ISTIC Merci Des questions ?