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

Flutter or React Native

8fb8810e5e06a997bc13831b9b51007f?s=47 keinuma
November 17, 2020

Flutter or React Native

8fb8810e5e06a997bc13831b9b51007f?s=128

keinuma

November 17, 2020
Tweet

More Decks by keinuma

Other Decks in Programming

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