Upgrade to Pro — share decks privately, control downloads, hide ads and more …

about_flutter.pdf

 about_flutter.pdf

Flutterの特徴の紹介。

384e4d8bab8ac2a5e6f64dab1300c491?s=128

glassmonenkey

April 12, 2020
Tweet

Transcript

  1. Flutter入門 永野 峻輔

  2. 自己紹介 略歴 • サーバーサイド / フロントエンド 4年 • Swift 3ヶ月

    • Flutter 3ヶ月  名前 : エターナルフィールド (永野) Twitter: @ glassmonekey
  3. エアプ含みます。 補足などありましたら気軽にご意 見ください

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

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

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

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

  8. 宣言的UIフレームワーク 独自レンダリングエンジン ネイティブはプラグイン * 基本機能は公式が用意 * 最終奥義 * 厚くなりそうならFlutterは微妙? *

    ネイティブ機能をUI描画で使用せず * ネイティブから見ると1枚のビュー * React Nativeとの差別化ポイント
  9. Dartについて • いわゆるAlter JS の1つ ◦ Type Scriptに押され気味だった • Google製

    ◦ Googleの新モバイルOSで採用 • 新バージョンではnull安全 • JSが書けるならほぼ書ける。 • 詳しくは右記のサイトで検証 https://dartpad.dev/
  10. 2種類のコンパイル JIT (Just In Time) AOT (Ahead of Time )

    * 差分コンパイル * ホットリロードが速い理由 * 開発用 * ウェブアプリと同じ開発体験 * 事前コンパイル * 本番時に全てネイティブ化 * 本番用 * 高パフォーマンスの理由 厳密にはDartの特徴
  11. エコシステム • ライブラリ関係 ◦ https://pub.dev/ ◦ スターとかgithubの更新状況から使用を検討。 ◦ プラグインの場合はネイティブの実装状況も念の為確認しておいたほうがよい •

    静的解析 (Analyzer for dart) ◦ https://pub.dev/packages/analyzer ◦ 設定はFlutter公式のものをコピって始めるのが良さそう ◦ https://github.com/flutter/flutter/blob/master/analysis_options.yaml
  12. 個人的所感 • ホットリロードが幸せ ◦ UIの調整がすごく楽。 • Android・iOSのデザインはどちらかに寄せことが吉 ◦ Google系コミュニティなのでMaterialデザインが今は良さそう。 •

    純粋なDart系ライブラリの充実が待たれる ◦ ユニットテストでネイティブ依存がある機能のモック化が必須 ◦ Flutter for Webの弊害になりそう。
  13. 宣言的UIの時代です。 ぜひFlutterに入門しましょう!! 一緒にOSS貢献始めてみませんか?

  14. 参考 基礎から学ぶ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