Slide 1

Slide 1 text

Flutter入門 永野 峻輔

Slide 2

Slide 2 text

自己紹介 略歴 ● サーバーサイド / フロントエンド 4年 ● Swift 3ヶ月 ● Flutter 3ヶ月  名前 : エターナルフィールド (永野) Twitter: @ glassmonekey

Slide 3

Slide 3 text

エアプ含みます。 補足などありましたら気軽にご意 見ください

Slide 4

Slide 4 text

なぜFlutterか? ● 宣言的UIの時代 ● 学習コスト低い ● ホットリロードで幸せな開発者体験 ● 次期モバイルOSに採用

Slide 5

Slide 5 text

Flutterの特徴 ● クロスプラットフォーム向け ● 宣言的UIフレームワーク ● 言語はDart ● 2種類のコンパイル

Slide 6

Slide 6 text

クロスプラットフォーム Android iOS Web β版なのでこれからに 期待

Slide 7

Slide 7 text

宣言的UIフレームワーク 少ない記述量で高度な表現 https://github.com/flutter/gallery

Slide 8

Slide 8 text

宣言的UIフレームワーク 独自レンダリングエンジン ネイティブはプラグイン * 基本機能は公式が用意 * 最終奥義 * 厚くなりそうならFlutterは微妙? * ネイティブ機能をUI描画で使用せず * ネイティブから見ると1枚のビュー * React Nativeとの差別化ポイント

Slide 9

Slide 9 text

Dartについて ● いわゆるAlter JS の1つ ○ Type Scriptに押され気味だった ● Google製 ○ Googleの新モバイルOSで採用 ● 新バージョンではnull安全 ● JSが書けるならほぼ書ける。 ● 詳しくは右記のサイトで検証 https://dartpad.dev/

Slide 10

Slide 10 text

2種類のコンパイル JIT (Just In Time) AOT (Ahead of Time ) * 差分コンパイル * ホットリロードが速い理由 * 開発用 * ウェブアプリと同じ開発体験 * 事前コンパイル * 本番時に全てネイティブ化 * 本番用 * 高パフォーマンスの理由 厳密にはDartの特徴

Slide 11

Slide 11 text

エコシステム ● ライブラリ関係 ○ https://pub.dev/ ○ スターとかgithubの更新状況から使用を検討。 ○ プラグインの場合はネイティブの実装状況も念の為確認しておいたほうがよい ● 静的解析 (Analyzer for dart) ○ https://pub.dev/packages/analyzer ○ 設定はFlutter公式のものをコピって始めるのが良さそう ○ https://github.com/flutter/flutter/blob/master/analysis_options.yaml

Slide 12

Slide 12 text

個人的所感 ● ホットリロードが幸せ ○ UIの調整がすごく楽。 ● Android・iOSのデザインはどちらかに寄せことが吉 ○ Google系コミュニティなのでMaterialデザインが今は良さそう。 ● 純粋なDart系ライブラリの充実が待たれる ○ ユニットテストでネイティブ依存がある機能のモック化が必須 ○ Flutter for Webの弊害になりそう。

Slide 13

Slide 13 text

宣言的UIの時代です。 ぜひFlutterに入門しましょう!! 一緒にOSS貢献始めてみませんか?

Slide 14

Slide 14 text

参考 基礎から学ぶFlutter https://www.amazon.co.jp/dp/B082XQ81FH/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1 Why Flutter Users Dart https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf