Flutter or React Native

Transcript

1. Flutter と React Native 2020/11/17 沼⽥ 1 / 32
2. 回のお カミナシではReact Native + Expo を利⽤してる Flutter はReact Native と すると何が しいか知りた い 開発・ ⽤ 点でまとめてみた 2 / 32
3. 論 Flutter はエコシステムが していてアプリ開発に必 な が っている ⽇ の事例が ないが も えてきそう 3 / 32
4. React Native で えない はExpo と してお します 4 / 32
5. ポイント . 基 情 . 開発 . UI . 状 理 . テスト 5 / 32
6. 基 情 6 / 32
7. Flutter React Native 業 Google Facebook Dart JavaScript GitHub スター 107k 91.3k 7 / 32
8. 開発 8 / 32
9. React Native パッケージ 理は npm or yarn Lint + Formatter は ESLint + Prettier ホットリロード 開発、リリースはExpo CLI が便利 9 / 32
10. Flutter パッケージ 理は pub(Yaml) 開発 構築、Lint は Flutter CLI アプリ向けビルドできる ホットリロード 10 / 32
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
12. 開発 Flutter CLI はExpo CLI 相当の を提供している 開発、リリース周りは とも はない 12 / 32
13. UI レンダリング 13 / 32
14. React Native React のコア を利⽤してレンダリング React Native のコンポーネントがネイティブ のUI と⼀ している React Native のView は Android の android.view であり iOS の UIView 14 / 32
15. Flutter Flutter は FW のAPI を担うflutter/flutter と描 周りの flutter/engine がある flutter/engine は独⾃のレンダリングエンジ ンになっている 15 / 32
16. Flutter の構成 16 / 32
17. UI 17 / 32
18. React Native JSX を使ってHTML Like にかける Style を使ってCSS Like にレイアウト、⾒た ⽬を えられる 的な React Native ⾃体は のコンポーネント のみ UI ライブラリを利⽤することが い 18 / 32
19. Flutter React にインスパイアされてるので 的 は⼀ Widget を使って する ⽤ されているWidget の種 が い Material Design はpackage なしで使え る 19 / 32
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: <Widget>[ IconButton( icon: Icon(Icons.menu), tooltip: 'Navigation menu', onPressed: null ), Expanded( child: title, ), IconButton( icon: Icon(Icons.search), tooltip: 'Search', onPressed: null, ) ], ) ); } } 20 / 32
21. UI React Native, Flutter 共に 的UI で す ることは⼀ UI コンポーネントの 度はFlutter が上 21 / 32
22. 状 理 22 / 32
23. React Native ローカルはhooks を利⽤ Global にはRedux, Mobx, Recoil, Rx が 択 に 上がる Store を⼀つ持って各コンポーネントが 照、更 する 23 / 32
24. Flutter ローカルはFlutter 向けのhooks を利⽤（パッ ケージ） Global State は の がある Redux, RxDart block Riverpod + Freezed + state_notifier 24 / 32
25. 状 理 React Native, Flutter 共に の⼿ がある Flutter はまだまだメインの を い って いる mono さんは の Riverpod + Freezed + state_notifier をおすす めしてる 25 / 32
26. テスト 26 / 32
27. React Native Unit Test: Jest Integration Test: Jest snapshot test or Storybook E2E Test: Cypress, Selenium 27 / 32
28. Flutter Unit Test: flutter_test Integration Test: WidgetTest in flutter_test E2E Test: flutter_driver 28 / 32
29. テスト React Native はJest や のライブラリに している Flutter は 式パッケージ内で各レイヤのテ ストが する 29 / 32
30. React Native との み けは エコシステムの 点だとFlutter に 配が上がりそ う JavaScript をWeb と共有したい場 はReact Native が良さそう Flutter for web に期待 30 / 32
31. まとめ Flutter はアプリ開発に必 な 、 ⽤フローが っている Flutter の不採⽤理由に 不⾜が ることは な い 31 / 32
32. 式ドキュメント 著 なFlutter エンジニアのTwitter @_mono さん @razokulover さん mono さんのMedium https://medium.com/flutter-jp/ 32 / 32