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 比較

どうやって選ぶか

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

• ???

Architecture#1

Ionic(Cordova)

React native

Architecture#2

React native

Flutter

Hybrid App framework 比較

その他

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

仕組み

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
    • 通常のブラウザでも動作可能