Flutterでやっていくアプリケーション開発

CAMPHOR- DAY 2020の登壇資料です。
https://camphor.connpass.com/event/167947/

Flutterは1つのソースコードから複数のプラットフォームのアプリを作ることができるクロスプラットフォームのフレームワークです。最近GitHubではReact Nativeのスター数を抜き、急速に開発が進められ注目を集めています。Flutterの特徴、Flutterの開発言語であるDartの良さみについてお話します。

Transcript

1. でやっていく アプリケーション開発
2. Flutter Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. “ “
3. Googleが開発している クロスプラットフォームUI開発フレームワーク Flutter
4. Googleが開発している クロスプラットフォームUI開発フレームワーク Android, iOS, Web, desktop Flutter
5. 言語: Dart Googleが開発している クロスプラットフォームUI開発フレームワーク Android, iOS, Web, desktop Flutter
8. https://octoverse.github.com/ The State of the Octoverse | GitHub
9. Keywords 効率的な開発 パフォーマンス
10. Keywords 効率的な開発 パフォーマンス
11. 余計なことを考えずに開発に集中できる 効率的な開発
12. Dart
13. Dart client-optimized language for fast apps on any platform “ “
14. “ あらゆるプラットフォームで高速に動作する、クライア ントサイドに最適化された言語 Dart “ https://dart.dev/
15. • 2011年にJavaScriptを代替する目的でGoogleが開発 • DartVMをChromeに統合しようとしていたが、2015年に断念 • 2018年にFlutter1.0の登場とともにもう一度注目を集めている https://news.dartlang.org/2015/03/dart-for-entire-web.html Dartの変遷
16. Dartのシンタックス
17. Flutterを使ったことがない人を対象に Flutterで開発してもらう調査を実施 https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf
18. Flutterを使ったことがない人を対象に Flutterで開発してもらう調査を実施 https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf →言語が何か知らずに書いていた！
19. シンタックス Java + JS (と言われることが多い)
20. Dart class Box<T> implements AbstractBox { T contents; Box(this.contents); Box<R> rebox<R>(R callback(T)) { return Box<R>(callback(contents)); } } オブジェクト指向
21. Dart Box<String> box = new Box<String>('1'); Box<num> newBox = box .rebox<num>(toInt); num value = newBox.contents;
22. Dart Box<String> box = Box<String>('1'); Box<num> newBox = box .rebox<num>(toInt); num value = newBox.contents;
23. Dart var box = Box<String>('1'); var newBox = box .rebox<num>(toInt); var value = newBox.contents; 少ない記述
24. Dart var box = Box('1'); var newBox = box .rebox(toInt); var value = newBox.contents; 少ない記述
25. Dart fetchPosts() async { final res = await http.get(url); return res.body; } 非同期処理
26. Dart var text = ['hoge']; assert(text is String); // Failed assertion: line 2 pos 10: 'text is String': is not true. assert
27. UI構築の方法
28. UI class Title extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text( 'Hello CAMPHOR- DAY!', style: TextStyle(fontSize: 36), ), ); } } クラスでWidgetを表現する
29. UI Padding( padding: EdgeInsets.all(30), child: Text( 'item$num', style: TextStyle(fontSize: 36), ), ) すべてWidget
30. UI BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text("Home")), BottomNavigationBarItem( icon: Icon(Icons.settings), title: Text("Setting")), ], ) Materialデザインならシュッと作れる
31. UI ListView( children: <Widget>[ title('Talks'), ...listItems, if (condition) someWidget(), ], ), シンプルに書けるDart
32. 開発環境
33. ホットリロード
34. めちゃくちゃ速い ホットリロード
35. 公式ドキュメント
36. YouTube 日本語字幕もある！
37. flutter doctor
38. flutter doctor
39. IDEが親切 コメントみたいなもの
40. IDEが親切 ポチポチするとWidgetでラップできる
41. • Dartの親しみやすいシンタックス • UI構築の方法 • ホットリロードやIDEのデバッグツールの充実 効率的な開発
42. Keywords 効率的な開発 パフォーマンス
43. https://medium.com/swlh/flutter-vs-native-vs-react-native-examining-performance-31338f081980
44. コンパイルと実行
45. Dart マシンコードに
 AOTコンパイル
 コンパイルと実行 JITコンパイル dart2native Dart VM JSにコンパイル dart2js
46. Dartコンパイルと実行 JITコンパイル dart2native Dart VM JSにコンパイル dart2js マシンコードに
 AOTコンパイル

47. AOT(Ahead of Time) プログラムの実行前にコンパイルする プログラムに変更を加えてから実行するまでの時間が長い プログラムの実行速度は速い
48. JIT(Just in Time) プログラムの実行中にコンパイルする プログラムに変更を加えてから実行するまでの時間は短い プログラムの実行速度は遅い
49. 爆速のホットリロード 高いパフォーマンス デバッグ中
 リリースビルド dart2native Dart VM
50. レンダリング
51. レンダリング FlutterではAndroid / iOS問わず全く同じUI
52. レンダリング どうやって描画しているのか
53. レンダリング (React Native) Activity/UIViewController/window
 (プラットフォームの元となるView)
 React Nativeの世界 プラットフォーム プラットフォームのView/dom React NativeのView

54. レンダリング (React Native) Activity/UIViewController/window
 (プラットフォームの元となるView)
 プラットフォームのView/dom React Nativeの世界 プラットフォーム React NativeのView
 JSとネイティブコードとの通 信がボトルネック
 (Bridge)

55. レンダリング (Flutter) Activity/UIViewController/window
 (プラットフォームの元となるView)
 Flutterの世界 プラットフォーム FlutterView/canvas FlutterのWidget 自前でGPUを 使ったレンダリング Bridgeがいらない高速
56. レンダリング ネイティブのViewを使うときは
57. PlatformView (Developer Preview) ネイティブのViewをFlutterのWidgetとして使う仕組み
58. PlatformView (Developer Preview) Activity/UIViewController FlutterView PlatformView VirtualDisplay/UIView 一度仮想的に描画したものをコピー
59. パフォーマンス • ネイティブのマシンコードにコンパイル • プラットフォームのViewを使わない 独自のレンダリング
60. Flutterで効率的に ハイパフォーマンスな アプリケーションを開発しよう
61. Thanks :)