Hybrid Mobile App を作りたい

-Flutter-

Mobile App

  • Native App
  • Hybrid App
  • PWA

Native App

  • 優れたパフォーマンス
  • 優れたUI・UX
  • 言語
    • iOS:Swift
    • Android:Kotlin

Hybrid App

  • Single Code Base
  • UIやパフォーマンスはフレームワーク依存
  • Native APIの利用
  • 言語
    • HTML/CSS/JavaScript/Dart

PWA

  • Single Code Base
  • Native APIの利用制限
  • ブラウザ依存のパフォーマンス
  • アプリのインストール不要
  • 言語
  • HTML/CSS/JavaScript

Mobile App 比較

Native App Hybrid App PWA
Perfomance ◯ △ ✕
UI/UX ◯ △ △
Hardware Access ◯ △ ✕
Single Code Base ✕ ◯ ◯
Time of market launch ✕ △ ◯

どうやって選ぶか

Mobile App

  • Native App
  • Hybrid App
  • PWA

Hybrid App Framework

  • Ionic
  • React native
  • Flutter

Ionic

  • Cordovaを利用したフレームワーク
  • Angularベース
    • React,Vue.jsも利用可
  • パフォーマンスはJavaScriptに依存
  • 2013年~

React native

  • bridgeを介したNative APIとの通信
    • 高パフォーマンス
    • NativeのUIを利用可能
  • OS毎のUIの調整が必要
  • facebookによるOSS(2015年)
  • 言語:TypeScript

Flutter

  • 独自のEngineによるUIレンダリング
    • 高速
    • OS毎の調整不要
    • iOSもマテリアルデザインに、、、
  • 高速なホットリロード
  • gooleによるOSS(2017年)
  • 言語:Dart

Kotlin native

  • ???

Github star histories

Architecture#1

Ionic(Cordova)

React native

Architecture#2

React native

Flutter

Build speed/size

  • Ionic
    • 必要なプラグインのみをビルドするため高速
    • 軽量
  • React native
    • native機能が標準で含まれるため低速
    • そこそこ重い
  • Flutter
    • React nativeと同程度(?)
    • React native よりも重い場合が多い

Performance

  • Ionic
    • 低速
    • ブラウザレンダリング能力に依存
  • React native
    • 中/高速
    • リソースコスト小（機種に依存）
  • Flutter
    • 高速
    • リソースコスト大（機種に依存）
      • DartVMが原因か？

Hot Reload

  • Ionic
    • 不可（やり方は色々あるそうだが）
  • React native
    • 中速
  • Flutter
    • 高速（VMのおかげ）

Hybrid App framework 比較

Ionic React native Flutter
Github Starts 38,662 79,355 71,185
Build speed ◯ ✕ ✕
Build size ◯ △ ✕
Performance ✕ △ ◯
Hot Reload ✕ △ ◯
UI render WebView Native DartVM

その他

  • タスクキラー問題
    • Androidはバックグラウンドアプリをメモリ確保のためキルする場合がある
      • Ionic/Flutterのアプリは現在キルされる問題を孕んでいる
      • https://github.com/flutter/flutter/issues/6827
  • そもそもそんなに動作速度きになる？

Flutter

仕組み

UI

  • DartVMを利用した独自実装によりOSの差異はない
    • Material/Cupertino(iOSもどき） Widgetを利用
    • 独自実装により高速なレンダリングが可能
  • サードパーティではなくGoogle製のものでほとんど揃う
  • Widgetという概念の理解が必要(stateless/full Widget)

Dart

  • 特徴
  • Dart Native/Web

特徴

  • オブジェクト指向
  • 静的型推論
  • top-level functions
  • public/protected/private宣言の廃止

Dart Native/Web

  • Dart Native
    • JIT+VM
      • 高速な開発
    • AOT+runtime
      • 高パフォーマンス
  • Dart Web
    • dartdevc
      • 高速な開発
    • dart2js
      • 通常のブラウザでも動作可能
Made with Slides.com