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

Flutter or React Native

keinuma
November 17, 2020

Flutter or React Native

keinuma

November 17, 2020
Tweet

More Decks by keinuma

Other Decks in Programming

Transcript

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

    View full-size slide

  2. 回のお
    カミナシではReact Native + Expo
    を利⽤してる
    Flutter
    はReact Native
    と すると何が しいか知りた

    開発・ ⽤ 点でまとめてみた
    2 / 32

    View full-size slide


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 基 情
    6 / 32

    View full-size slide

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

    View full-size slide

  8. 開発
    8 / 32

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  14. React Native
    React
    のコア を利⽤してレンダリング
    React Native
    のコンポーネントがネイティブ
    のUI
    と⼀ している
    React Native
    のView
    は Android

    android.view
    であり iOS
    の UIView
    14 / 32

    View full-size slide

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

    View full-size slide

  16. Flutter
    の構成
    16 / 32

    View full-size slide

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

    View full-size slide

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

    19 / 32

    View full-size slide

  19. 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 full-size slide

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

    View full-size slide

  21. 状 理
    22 / 32

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. テスト
    26 / 32

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. React Native
    との み けは
    エコシステムの 点だとFlutter
    に 配が上がりそ

    JavaScript
    をWeb
    と共有したい場 はReact
    Native
    が良さそう
    Flutter for web
    に期待
    30 / 32

    View full-size slide

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

    31 / 32

    View full-size slide

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

    View full-size slide