UI as Code

Transcript

1. UI as Code and some Flutter / Dart topics from io19 2019-05-28 koyachi
2. Flutterとは？ via flutter.dev 参考: 既存AndroidアプリにFlutterを導入して12.5倍速で開発する - Qiita
3. io19でのFlutter / Dart関連トピック ・From Mobile to Multi-Platform Mobile, Web, Desktop, Embedded (includes Google Home Hub) ・Product Quality Packages by Google (WebView, Google Maps, Firebase ML Vision, IAP) 　・https://github.com/firebase/mlkit-custom-image-classifier ・UI as Code ・Working now via https://developers.googleblog.com/2019/05/Flutter-io19.html
4. UI as Code import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: "Simple Material App", home: Scaffold( appBar: AppBar( title: Text("Simple Material App"), ), body: Container( child: Center( child: Text("Hello World!"), ), ), ))); }
5. UI as Code Flutter: 汎用プログラミング言語DartでUIを実装 - Dartだけを学べばよい(JSX等のテンプレート言語を別途覚える必要は無い) - UIを作るときに汎用プログラミング言語を使える - 宣言的言語に比べて表現できることの壁が無い（汎用プログラミング言語な ので）
6. UI as Code: Dart language updates - 表示内容の条件分岐があると汎用言語的に書く必要があって残念。。。 - <Sample code> - 幾つかの選択肢の中から、今回はCollection literalの改善を行った - Spreads - (Elements) - Collection If - Collection For
7. Spreads var a = [2, 3]; var b = [5, 6]; var c = [1, ...a, 4, ...b]; // [1, 2, 3, 4, 5, 6]. JavascriptのSpread Operator(...), rubyの配列展開(*)と同じ
8. Spreads Widget build(BuildContext context) { var conversation = buildTab2Conversation(); var listItems = [Tab2Header()]; listItems.addAll(conversation); listItems.add(buildFooter()); return CupertinoPageScaffold( child: ListView(children: listItems), ); } これが
9. Spreads Widget build(BuildContext context) { return CupertinoPageScaffold( child: ListView(children: [ Tab2Header(), ...buildTab2Conversation(), buildFooter() ]), ); } こう書ける
10. Collection If Widget build(BuildContext context) { var children = [ IconButton(icon: Icon(Icons.menu)), Expanded(child: title) ]; if (!isAndroid) { children.add(IconButton(icon: Icon(Icons.search))); } return Row(children: children); } 従来のコード例 1
11. Collection If 従来のコード例 2 Widget build(BuildContext context) { return Row( children: [ IconButton(icon: Icon(Icons.menu)), Expanded(child: title), !isAndroid ? IconButton(icon: Icon(Icons.search)) : null, ].where((widget) => widget != null).toList(), ); }
12. Collection If Widget build(BuildContext context) { return Row( children: [ IconButton(icon: Icon(Icons.menu)), Expanded(child: title), if (!isAndroid) IconButton(icon: Icon(Icons.search)), ], ); } こう書ける
13. Collection For var command = [ engineDartPath, frontendServer, ]; for (var root in fileSystemRoots) { command.add("--filesystem-root=$root"); } for (var entryPoint in entryPoints) { command.add("$entryPoint.json"); } command.add(mainPath); 従来のコード例 1
14. Collection For var command = [ engineDartPath, frontendServer, ...fileSystemRoots.map((root) => "--filesystem-root=$root"), ...entryPoints .where((entryPoint) => fileExists("lib/$entryPoint.json")) .map((entryPoint) => "lib/$entryPoint.json"), mainPath ]; 従来のコード例 2
15. Collection For var command = [ engineDartPath, frontendServer, for (var root in fileSystemRoots) "--filesystem-root=$root", for (var entryPoint in entryPoints) if (fileExists("lib/$entryPoint.json")) "lib/$entryPoint.json", mainPath ]; こう書ける
16. Collection内部はElements - Spread, Collection If, Collection Forは式なのか？ - 式 (Expression) でも宣言 (Statement) でもない。 - Genarator. (Iconという言語でいうところの ) - Generatorという言葉はすでにDart内にあるので、Elementsと呼ぶことにした - 今回の変更でcollection内にelementsを保持するように変更し、elementsとして spreadsとexpression elementsを定義した - Collection literal評価方法: 要素それぞれを評価し、そのオブジェクトを連結する
17. UI as Code: demo
18. Working now - Non-nullable type - コンパイル時に検出可能になるらしい - Extension method - New Concurrency primitives - New FFI int? number = int.tryParse('not int'); print(number.isEven); // ^^^^^^ // Error: Variable 'number' might be null.
19. 参考 - Making Dart a Better Language for UI – Dart – Medium - https://dart.dev/guides/language/language-tour#spread-operator - https://dart.dev/guides/language/language-tour#collection-operators - Announcing Dart 2.3: Optimized for building user interfaces - Dart: Productive, Fast, Multi-Platform - Pick 3 - Google Developers Blog: Flutter: a Portable UI Framework for Mobile, Web, Embedded, and Desktop - Beyond Mobile: Building Flutter Apps for iOS, Android, Chrome OS, and Web - A roundup of Flutter news at Google I/O – Flutter – Medium