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