tech_hills 20220727

Transcript

1. 1 React NativeエンジニアがFlutterに入門してわかった こと menu株式会社　林晃一郎 (@yasahhi1127) Tech Hills
2. 2 自己紹介
3. 林晃一郎 @yasahhi1127 menu株式会社 モバイルアプリ開発（React Native / TypeScript） 好きな食べ物 WithGreenさんの「砂肝ともやしナムルのサラダ」 最近気づいたこと 親知らずの抜歯より痛風の方が痛い ▪自己紹介 3
4. ▪ menu? 4
5. ▪ menu? 5
6. 6 前提〜menu開発の歴史〜
7. ▪前提：なぜ今RNを使っているのか 2018〜2019：Cordova + React + TS
8. ▪前提：なぜ今RNを使っているのか 2019〜：RN + TypeScript + Expo
9. ▪前提：なぜ今RNを使っているのか Cordova + Reactをやめた理由 • WebViewだと表現やパフォーマンスに制約が多かった 移行先の選定基準 • エンジニアリソースが限られる状態 ◦ クロスプラットフォーム開発は引き続き行う
10. 状態管理 • Dart ◦ 推奨の状態管理がなく、またこれから変更が多そう • RN ◦ 事実上Redux一択（2019当時） UIについて • Flutter ◦ アニメーション系を楽に作れる（けど全部Pixelっぽい） • RN ◦ 一定工数がかかる ▪前提：なぜ今RNを使っているのか ~Flutter vs RN~
11. ▪前提：なぜ今RNを使っているのか と、言いつつ、、、 • 自分が当時在籍してなかったので全部伝聞 • そもそも3年以上前の事なので、各FWともに状況変わってそう • 自分がFlutterのことを何も知らない →自分でFlutterを勉強してみる →Flutterと比較してみて、menuでのRNを用いた開発について改めて感 じたことを共有してみる
12. ▪前提：Flutter勉強してみた 勉強したこと https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2#0 • 環境構築 • Dartの基礎 • Widgetの扱い • ローカルの状態管理 • ナビゲーションの基礎 • Unit test / Widget testの書き方
13. ▪話すこと・話さないこと 話すこと • 前提の説明 • Flutterの基礎を学んだ上での 両者の比較 ◦ menu開発での事例・考え 方などを含めて • まとめ 話さないこと • パフォーマンス面での比較 • それぞれのアーキテクチャ・内 部実装について →特にFlutter側について十分理 解出来てない
14. 14 保険
15. ▪保険 • 特にFlutterについては初学者なのでよろしくお願いします🙇 ◦ 発言は基本https://docs.flutter.dev/などの公式を参照しているの で嘘はつかないと思いますが、( 勘違い || 古い )などはあるか も...
16. 16 どっちも（そこまで）変わらんな と思ったポイント
17. ▪どっちでも良いなと思ったポイント • 学習コスト（React開発者から見て） ◦ どっちも宣言的UI ◦ 割とDartとJSが似てる • 基本的な開発体験 ◦ どっちも当たり前にhot reload • どちらもコミュニティが大きいので、ある程度必要なものは既に誰か が作っていて、利用させてもらえる状態
18. どっちでも良いや 18 どちらでも開発をするのに大きくは困らなさそう。。
19. どっちでも良いや 19 長期間の積み重ね
20. 20 Flutter良いなと思ったポイント
21. ▪Flutter良いなと思ったポイント • Dartが意外と簡単 ◦ というか色々とJS寄りな面が多い • 環境構築の体験が良い ◦ 色々な面の公式ツールがあるので細かい選定で基準になる • Flutter VSCode Extensionsが地味にめちゃくちゃ気が利く ◦ 地味に感動した→
22. menuで使っているライブラリ(ごく一部抜粋) • Jest(テストランナー) • react-native-debugger(devtools) • ESLint(静的検証) • Prettier(自動フォーマット) • day.js(日付管理) • TypeScript vs Flow … ▪Flutter良いなと思ったポイント ~公式が充実~
23. menuで使っているライブラリ(ごく一部抜粋) • Jest(テストランナー) vs mocha / vitest / … • react-native-debugger(devtools) vs Flipper • ESLint(静的検証) vs TSLint • Prettier(自動フォーマット) vs ESLint • day.js(日付管理) vs date-fns / Luxon / … • TypeScript vs Flow ▪Flutter良いなと思ったポイント ~公式が充実~
24. 仮に、Flutterで開発をすると、、？ • Jest(テストランナー) → Flutter • react-native-debugger(devtools) → Flutter • ESLint(静的検証) →Flutter • Prettier(自動フォーマット) → エディタの拡張（公式） • day.js(日付管理) → FlutterのAPIで十分そう • TypeScript → Dartが静的型付け言語 ▪Flutter良いなと思ったポイント ~公式が充実~
25. • RNに比べてFlutterは公式ライブラリ群が充実しており、多くの分野で 「安定して選べる」ライブラリがある ◦ RN（に限らずReact開発全般）は、選択肢が多い一方でどうしても 3rd partyのライブラリに頼る必要が出てくる ▪ JSの歴史が長いこともあり、ライブラリが乱立していることも、、 ◦ もちろん、必要に応じて3rd partyのライブラリを選ぶことも ▪Flutter良いなと思ったポイント ~公式が充実~
26. 26 RNで良かったポイント
27. ▪RNで良かったポイント • ”Reactであること”（Webエンジニアなので） ◦ JS / Reactのツール・ライブラリは大体RNでも使える ◦ こわくない • UIがGoogleっぽくならない ◦ iOS / Androidでよく見るUIが随所に出てくれる ◦ 好みは分かれそう • Expo ◦ OTA update
28. ▪Expo？ RNの開発をあらゆる面でサポートするツール群 Expo SDKが提供する機能を使えるだけでなく、開発環境の整備までこ れがサポートしてくれる > Expo is an open-source platform for making universal native apps that run on Android, iOS, and the web. It includes a universal runtime and libraries that let you build native apps by writing React and JavaScript. https://github.com/expo/expo
29. ▪RNで良かったポイント ~expo-updates~ expo-updates *を用いたOTA（over-the-air）アップデートの仕組みで、ア プリのビルド〜申請が不要 な事が多い *https://docs.expo.dev/versions/latest/sdk/updates/
30. ▪RNで良かったポイント ~OTAアップデートについて~ React Nativeの中身（ざっくり） React Component JS実装 JS部分 Native実装 Native部分 layout yoga Bridge
31. ▪RNで良かったポイント ~OTAアップデートについて~ React Nativeの中身（ざっくり） React Component JS実装 JS部分←自由に差し替え可能 Native実装 Native部分 layout yoga Bridge
32. ▪RNで良かったポイント ~OTAアップデートについて~ 良いところ ある程度の開発要件であればストア申請をせずに反映ができる →開発サイクルをより早く回すことが可能
33. menuでは？ 実装要件的に必要な時のみアプリ更新し、基本OTAでアプリ更新 ▪RNで良かったポイント ~OTAアップデートについて~ OTA update OTA update OTA update アプリ更新（Native） OTA update アプリ更新（Native）
34. 34 まとめ
35. ▪まとめ • （ベーシックな部分はどちらも満たしている） • 個人でさっと作る場合はFlutterで作ると環境構築がラクかも？ ◦ expoのmanaged workflowもおすすめ（機能の制限が多い） • マテリアルデザイン全開のUIをどう思うか • RNの場合Expoはセットで導入したい ◦ OTA以外にもメリット多いです （パフォーマンスの面はOmakeも参照してみてください）
36. 36 採用情報
37. ▪採用情報 React Nativeやっていきたいエンジニア募集し てます！！！！！！！！ 直接応募 https://open.talentio.com/r/1/c/reazon/pages/25716 カジュアルにもっと内情を知りたい方 • 林のtwitter(@yasahhi1127)にDMください • テックブログ ◦ https://techblog.reazon.jp/
38. 38 ありがとうございました！！！
39. 39 Omake
40. ▪Omake Flutter vs RNみたいな比較記事でたまに見るやつ 「RNは内部アーキテクチャ上の問題でパフォーマンスが悪い」
41. ▪Omake →RNの新しいアーキテクチャを導入することで解消できそう （menuでも導入予定） https://reactnative.dev/docs/next/new-architecture-intro
42. ▪Omake React Nativeの中身（ざっくり） React Component JS実装 JS部分←自由に差し替え可能 Native実装 Native部分 layout yoga Bridge 主にこの辺の話
43. ▪Omake React Nativeの中身（ざっくり） React Component JS実装 JS部分 Native実装 Native部分 layout yoga こうなる Fabric Turbo Modules