Flutter or React Native

Transcript

1. Flutter
   と React Native
   2020/11/17
   沼⽥
   1 / 32
   

   View Slide

2. 回のお
   カミナシではReact Native + Expo
   を利⽤してる
   Flutter
   はReact Native
   と すると何が しいか知りた
   い
   開発・ ⽤ 点でまとめてみた
   2 / 32
   

   View Slide

3. 論
   Flutter
   はエコシステムが していてアプリ開発に必
   な が っている
   ⽇ の事例が ないが も えてきそう
   3 / 32
   

   View Slide

4. React Native
   で えない はExpo
   と してお します
   4 / 32
   

   View Slide

5. ポイント
   .
   基 情
   .
   開発
   . UI
   .
   状 理
   .
   テスト
   5 / 32
   

   View Slide

6. 基 情
   6 / 32
   

   View Slide

7. Flutter React Native
   業 Google Facebook
   Dart JavaScript
   GitHub
   スター 107k 91.3k
   7 / 32
   

   View Slide

8. 開発
   8 / 32
   

   View Slide

9. React Native
   パッケージ 理は npm or yarn
   Lint + Formatter
   は ESLint + Prettier
   ホットリロード
   開発、リリースはExpo CLI
   が便利
   9 / 32
   

   View Slide

10. Flutter
    パッケージ 理は pub(Yaml)
    開発 構築、Lint
    は Flutter CLI
    アプリ向けビルドできる
    ホットリロード
    10 / 32
    

    View Slide

11. pubspec.yaml
    の例
    name: flutter_sample
    environment: # Flutter SDK
    のバージョンを指
    sdk: ">=2.7.0 <3.0.0"
    dependencies: #
    flutter:
    sdk: flutter
    dev_dependencies:
    flutter_test:
    sdk: flutter
    flutter: #
    アプリの基 Theme
    、フォントの情 を できる
    uses-material-design: true
    11 / 32
    

    View Slide

12. 開発
    Flutter CLI
    はExpo CLI
    相当の を提供している
    開発、リリース周りは とも はない
    12 / 32
    

    View Slide

13. UI
    レンダリング
    13 / 32
    

    View Slide

14. React Native
    React
    のコア を利⽤してレンダリング
    React Native
    のコンポーネントがネイティブ
    のUI
    と⼀ している
    React Native
    のView
    は Android
    の
    android.view
    であり iOS
    の UIView
    14 / 32
    

    View Slide

15. Flutter
    Flutter
    は FW
    のAPI
    を担うflutter/flutter
    と描
    周りの flutter/engine
    がある
    flutter/engine
    は独⾃のレンダリングエンジ
    ンになっている
    15 / 32
    

    View Slide

16. Flutter
    の構成
    16 / 32
    

    View Slide

17. UI
    17 / 32
    

    View Slide

18. React Native
    JSX
    を使ってHTML Like
    にかける
    Style
    を使ってCSS Like
    にレイアウト、⾒た
    ⽬を えられる
    的な
    React Native
    ⾃体は のコンポーネント
    のみ
    UI
    ライブラリを利⽤することが い
    18 / 32
    

    View Slide

19. Flutter
    React
    にインスパイアされてるので 的
    は⼀
    Widget
    を使って する
    ⽤ されているWidget
    の種 が い
    Material Design
    はpackage
    なしで使え
    る
    19 / 32
    

    View Slide

20. class MyAppBar extends StatelessWidget {
    MyAppBar({this.title});
    final Widget title;
    @override
    Widget build(BuildContext context) {
    return Container(
    height: 56.0,
    padding: const EdgeInsets.symmetric(horizontal: 8.0),
    decoration: BoxDecoration(color: Colors.blue[500]),
    child: Row(
    children: [
    IconButton(
    icon: Icon(Icons.menu),
    tooltip: 'Navigation menu',
    onPressed: null
    ),
    Expanded(
    child: title,
    ),
    IconButton(
    icon: Icon(Icons.search),
    tooltip: 'Search',
    onPressed: null,
    )
    ],
    )
    );
    }
    } 20 / 32
    

    View Slide

21. UI
    React Native, Flutter
    共に 的UI
    で す
    ることは⼀
    UI
    コンポーネントの 度はFlutter
    が上
    21 / 32
    

    View Slide

22. 状 理
    22 / 32
    

    View Slide

23. React Native
    ローカルはhooks
    を利⽤
    Global
    にはRedux, Mobx, Recoil, Rx
    が 択 に
    上がる
    Store
    を⼀つ持って各コンポーネントが
    照、更 する
    23 / 32
    

    View Slide

24. Flutter
    ローカルはFlutter
    向けのhooks
    を利⽤（パッ
    ケージ）
    Global State
    は の がある
    Redux, RxDart
    block
    Riverpod + Freezed + state_notifier
    24 / 32
    

    View Slide

25. 状 理
    React Native, Flutter
    共に の⼿ がある
    Flutter
    はまだまだメインの を い って
    いる
    mono
    さんは の Riverpod +
    Freezed + state_notifier
    をおすす
    めしてる
    25 / 32
    

    View Slide

26. テスト
    26 / 32
    

    View Slide

27. React Native
    Unit Test: Jest
    Integration Test: Jest snapshot test or Storybook
    E2E Test: Cypress, Selenium
    27 / 32
    

    View Slide

28. Flutter
    Unit Test: flutter_test
    Integration Test: WidgetTest in flutter_test
    E2E Test: flutter_driver
    28 / 32
    

    View Slide

29. テスト
    React Native
    はJest
    や のライブラリに
    している
    Flutter
    は 式パッケージ内で各レイヤのテ
    ストが する
    29 / 32
    

    View Slide

30. React Native
    との み けは
    エコシステムの 点だとFlutter
    に 配が上がりそ
    う
    JavaScript
    をWeb
    と共有したい場 はReact
    Native
    が良さそう
    Flutter for web
    に期待
    30 / 32
    

    View Slide

31. まとめ
    Flutter
    はアプリ開発に必 な 、 ⽤フローが
    っている
    Flutter
    の不採⽤理由に 不⾜が ることは な
    い
    31 / 32
    

    View Slide

32. 式ドキュメント
    著 なFlutter
    エンジニアのTwitter
    @_mono
    さん
    @razokulover
    さん
    mono
    さんのMedium
    https://medium.com/flutter-jp/
    32 / 32
    

    View Slide