Migration from React Native to PWA

JSConf JP 2019 "Migration from React Native to PWA"

https://jsconf.jp/2019/talk/masato-ohba

Transcript

1. #jsconfjp #jsconfjp_b Migration from React Native to PWA Migration from React Native to PWA @ohbarye JSConf JP 2019-12-01 Photo by Harshil Gudka on Unsplash
2. #jsconfjp #jsconfjp_b Migration from React Native to PWA 2 Introduction https://2018.stateofjs.com/mobile-and-desktop/react-native/
3. #jsconfjp #jsconfjp_b Migration from React Native to PWA 3 Introduction https://2018.stateofjs.com/mobile-and-desktop/overview/ https://2018.stateofjs.com/mobile-and-desktop/other-libraries/
4. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ React Native appからPWAに移行するに至った経緯 ➔ 以下の開発・運用、および1から2への移行で学んだこと 1. iOS / Androidの2プラットフォームに対応するReact Native app 2. iOS / Android / Webの3プラットフォームに対応するPWA / Hybrid app ➔ 移行時の技術選定の判断基準 この発表の目的、価値、参加者に届けたいこと 4 Introduction What's Hybrid app? ブラウザ上でなくNative appの WebView上でHTML, JS, CSSが動作する (通称ガワアプリ)
5. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ React Nativeとは何か ◆ ReactでNative appが開発できるやつ、ぐらいの認識でOK ➔ PWAとは何か ◆ Googleが推進する、モバイルユーザーの体験向上を目的とするプロ ジェクト・技術のこと、ぐらいの認識でOK ➔ React Native、PWAの先進的な利用方法など 話さないこと 5 Introduction
6. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ クロスプラットフォーム開発フレームワークによるアプリ開発やマルチプラット フォーム対応を考えている方 ➔ すでにネイティブ言語以外でのネイティブアプリ開発・運用をしており、マイグ レーションを考えている方 ➔ React Native, PWAの開発経験は問いません 想定する聞き手 6 Introduction
7. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ サーバサイド寄りのWeb engineer ◆ React, TypeScript (1.5 years) ◆ Ruby on Rails (4 years) ➔ iOS / Android対応しているReact Nativeアプリの開発・運用に途中から参 加 ➔ Migration from React Native to PWA projectを担当 登壇者（どの目線から語るのか） 7 Introduction
8. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ React Native採用・運用事例は多く聞くが移行事例はまだ少ない ➔ React Native to Native appsはAirbnbを始めにいくつか観測できた ➔ Migration from React Native to PWAの事例は少ない Migration中に感じた最近の潮流 8 Introduction https://medium.com/airbnb-engineering/react-native-at-airbnb-f95aa460be1c
9. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 「React Native vs PWA」「React Native vs Swift / Kotlin」のような2項対立 で「どちらを選ぶべきか」の観点でメリット・デメリットが語られることは多い ➔ 両方を経験した立場やMigrationという観点で語るものは多くない ➔ 今回実施したMigration from React Native to PWAの事例は誰かの役に 立つかもしれないと思ってやって来ました Migration中に感じた最近の潮流 9 Introduction
10. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 「開発できる≠運用できる」 ◆ システム特性、メンバーのスキルセット・志向性を考えよう ◆ 状況が変わることはあるが、チームに合わない技術になったら移行を検 討しよう ➔ モバイルアプリに近い体験が要求されてもWeb技術でそこそこやれる ➔ PWAはフルに活用しなくても十分なシーンは多分にある はじめにConclusion 10 Introduction
11. #jsconfjp #jsconfjp_b Migration from React Native to PWA Agenda | What kind of React Native app it was? React Native issues in dev & ops Migration design PWA, Hybrid app dev & tests & ops Review of the migration project 01 02 03 04 05 11
12. #jsconfjp #jsconfjp_b Migration from React Native to PWA What kind of React Native app it was? 01 12
13. #jsconfjp #jsconfjp_b Migration from React Native to PWA What kind of React Native app it was? ➔ Introduction of our products and the app ➔ Characteristics of the React Native app ◆ Business ◆ Features, Usage ◆ Technical aspects ➔ Why was it React Native? 13
14. #jsconfjp #jsconfjp_b Migration from React Native to PWA 14
15. #jsconfjp #jsconfjp_b Migration from React Native to PWA 15
16. #jsconfjp #jsconfjp_b Migration from React Native to PWA 16
17. #jsconfjp #jsconfjp_b Migration from React Native to PWA 映像授業だけでなく現役大学生コーチがサポート 17 ➔ オンラインチャットや学習管理機能・宿題配信機能などを通して、スタディサ プリを使っている全国の生徒の学習指導を行うサービス ➔ 「一人では勉強が続かない」「教えてもらいたい」「受験の不安を相談したい」 等の受験生の悩みに寄り添い、志望校合格を目指す合格特訓コース ➔ 部活と勉強の両立を目指す中学生へスケジュール作成や学習指導を行う個 別指導コース
18. #jsconfjp #jsconfjp_b Migration from React Native to PWA What kind of React Native app it was? ➔ Introduction of our product ➔ Characteristics of the React Native app ◆ Business ◆ Features, Usage ◆ Technical aspects ➔ Why was it React Native? 18
19. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 生徒とコーチのコミュニケーションをより 円滑にするためのメッセージ機能をベー スとした業務システム ➔ より詳しい事業背景はブログ参照 Characteristics (Business) 19 https://quipper.hatenablog.com/entry/2018/11/20/
20. #jsconfjp #jsconfjp_b Migration from React Native to PWA Characteristics (Features) 20 ➔ 生徒とのチャット ➔ 宿題配信・進捗管理 ➔ コーチ同士のナレッジシェア
21. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 約500名のアルバイト社員と業務委託のスタッフが利用する ➔ BYOD (Bring Your Own Devices) ➔ スタッフだけが使用するアプリなので App Store / Google Play Storeで公 開せず、DeployGateでアプリを配信 ◆ Apple / Googleのアプリ審査はなし Characteristics (Usage) 21
22. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ React NativeでiOS / Android両プラットフォーム対応 ◆ iOS版は約2年運用 ◆ Android版は約1年運用 ➔ 画面数15、利用するバックエンドのAPIは約40 ◆ フロントのすべての機能がReactで実装されている Characteristics (Technical aspects) 22
23. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ Introduction of our product ➔ Characteristics of the React Native app ◆ Business ◆ Features, Usage ◆ Technical aspects ➔ Why was it React Native? What kind of React Native app it was? 23
24. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 生徒とのチャットを促進させるPush通知活用は必須だったため、2017年当 初はSwiftによるiOSアプリ開発を試していたが方針転換 ➔ 組織面: ネイティブエンジニア不足で、Webエンジニアを巻き込んで開発・運 用する体制を作りたかった ➔ 技術面: Apple Developer Enterprise Programを利用して配布するため App Storeの自動アップデート機能が使えずアプリの更新を都度手動で実 施するオペレーションが必要になっていたのをCodePushで解決 Why was it React Native? 24
25. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 組織的・技術的課題を解決しながらエンドユーザーにも価値を届けることが できた ➔ 技術的挑戦もありエンジニアも楽しく開発できた ➔ 当時の同じ状況に自分がいたらReact Nativeを選ぶことに同意した ➔ 詳しくは『QuipperにおけるReact Native活用事例』 https://quipper.hatenablog.com/entry/2017/12/05/114014 参照 当時の技術選定を振り返ると 25
26. #jsconfjp #jsconfjp_b Migration from React Native to PWA React Native issues in dev & ops 02 26
27. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 既存の土台の上にUIをガリガリ書いていくぶんには大変ではない ➔ React (+ Redux, TypeScript) の知識があればだいたい十分 ➔ 当初の目論見どおりWebエンジニアを活用してネイティブアプリの開発がで きてよかった ➔ …が、ローンチ後に起きたいくつかの変化により課題が発生 React Nativeの開発 27
28. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ ローンチ以降に起きた変化 ➔ 浮き彫りになったつらいところ ◆ マルチプラットフォーム対応 ◆ ライブラリ管理、React Native Upgrade ◆ ビルド・デプロイシステム ➔ 状況の分析とまとめ React Native issues in dev & ops 28
29. #jsconfjp #jsconfjp_b Migration from React Native to PWA 29 ➔ 端末配布をやめ、BYOD化す ることに ➔ コーチのエンゲージメント向上 とコスト削減が目的 ➔ これに伴いiOSだけでなく Android版の提供を開始 BYOD化 Photo by Hal Gatewood on Unsplash
30. #jsconfjp #jsconfjp_b Migration from React Native to PWA 30 ➔ iOS, Android, React Native全 てに精通したエンジニアの退職 ➔ 他のプロジェクトを担当するiOS / Android / Webエンジニアそれぞ れで協力してメンテナンスをしてい くことになった Photo by Katherine Chase on Unsplash 諸事情によりチームメンバー総入れ替え
31. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ ローンチ以降に起きた変化 ➔ 浮き彫りになったつらいところ ◆ マルチプラットフォーム対応 ◆ ライブラリ管理、React Native Upgrade ◆ ビルド・デプロイシステム ➔ 状況の分析とまとめ React Native issues in dev & ops 31
32. #jsconfjp #jsconfjp_b Migration from React Native to PWA マルチプラットフォーム対応 ➔ Android対応を開始した時点から格段に運用コストが高くなった ➔ iOSで動くがAndroidでは動かない既存機能がかなりあった ➔ 自分たちのコードの問題だけではなく、React Native関連のUIライブラリに はiOS / Android両方を完全にサポートしていないものも多い 32
33. #jsconfjp #jsconfjp_b Migration from React Native to PWA 33 https://quipper.hatenablog.com/entry/2019/04/10/react-native-from-android
34. #jsconfjp #jsconfjp_b Migration from React Native to PWA Androidエンジニアの気持ち 最初はTypeScriptやReact/Reduxの考え方に新しく触れ、修正したものがすぐア プリに反映される感覚に興奮していた気がします。Androidのみで起こる問題に 携わっていくにつれ、だんだんビルド周りの設定の調査や改修する時間が長く なっていった (中略) React Nativeアプリで起こる不具合は、通常のNative開発で感じるような「あっこ こがこうなってバグっているんだな」となんとなく推測できる不具合は少なく、調査 する箇所を絞り込むことができない苦しさを感じることも多かった https://quipper.hatenablog.com/entry/2019/04/10/react-native-from-android 34
35. #jsconfjp #jsconfjp_b Migration from React Native to PWA iOSエンジニアの気持ち バグ修正などを行う際にJavaScriptレイヤーで起きているのか、Nativeレイヤー で起きているのかの切り分けをする必要があります。また、iOSとAndroidのどちら かでしか発生しない不具合があるなど、アプリとWebフロントエンドの総合的な知 識が求められるように感じました。 アプリを構成する要素がTypeScript, React+Redux, レイアウトはJSXなどフロント寄 りの知識が開発の際には求められます。普段SwiftやKotlinに慣れ親しんでいる Nativeエンジニアにとって、想定通りに開発が進まず、もどかしい気持ちになるこ ともありました https://quipper.hatenablog.com/entry/2019/03/11/react-native-pro-con 35
36. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ ローンチ以降に起きた変化 ➔ 浮き彫りになったつらいところ ◆ マルチプラットフォーム対応 ◆ ライブラリ管理、React Native Upgrade ◆ ビルド・デプロイシステム ➔ 状況の分析とまとめ React Native issues in dev & ops 36
37. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ NPMの他にiOS / Androidでは各々のパッケージ管理システムがある ➔ React Nativeではパッケージ管理システムをまたいだ暗黙の依存関係が存 在することがある ➔ パッケージ管理システムをまたいだ依存関係は定義できないので人間が管 理する必要がある ライブラリ管理 37
38. #jsconfjp #jsconfjp_b Migration from React Native to PWA Implicit dependencies 38 この間の依存関係はいずれの パッケージ管理システムも関与しない この依存関係は NPMやYarnで管理 される
39. #jsconfjp #jsconfjp_b Migration from React Native to PWA Implicit dependencies 39 2.0.0 C, Dもupgradeしないといけないが、そのことにパッ ケージ管理システムではなく人間が気づく 2.0.0 $ yarn upgrade A A 2.0.0 depends on - B 2.0.0 - C 2.0.0 - D 2.0.0 It upgrades B ✅ 大抵コンパイルエラー、ビルド失敗、テスト失敗などで 問題に気づくので原因調査が大変
40. #jsconfjp #jsconfjp_b Migration from React Native to PWA React Native Upgrade 40 ➔ iOSのバージョンアップデートに伴って必須となる ➔ Need to upgrade Xcode => Need to upgrade React Native => Need to upgrade React etc. ➔ 0.49.0 -> 0.57.4になるまで1年近く放置してしまった ◆ モブプロしたりしたが、アップグレードに至らなかった ➔ ちなみにExpoは未使用だった
41. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ ローンチ以降に起きた変化 ➔ 浮き彫りになったつらいところ ◆ マルチプラットフォーム対応 ◆ ライブラリ管理、React Native Upgrade ◆ ビルド・デプロイシステム ➔ 状況の分析とまとめ React Native issues in dev & ops 41
42. #jsconfjp #jsconfjp_b Migration from React Native to PWA ビルド・デプロイシステム 42 ➔ iOS, Androidそれぞれのnative知識が必要 ➔ 先述のライブラリ管理の問題なども絡み、油断すると壊れる ➔ 壊れているのをマシにするレベルの作業をiOS / Androidエンジニアに1ヶ月 近くかけてやってもらった ➔ 他案件もあり、このために時間をさらに使うのは厳しかったので撤退判断
43. #jsconfjp #jsconfjp_b Migration from React Native to PWA React Native issues in dev & ops 43 ➔ ローンチ以降に起きた変化 ➔ 浮き彫りになったつらいところ ◆ マルチプラットフォーム対応 ◆ ライブラリ管理、React Native Upgrade ◆ ビルド・デプロイシステム ➔ 状況の分析とまとめ
44. #jsconfjp #jsconfjp_b Migration from React Native to PWA 44 マルチプラットフォーム 対応 に 精通した エンジニアの退職 推進 対応の要請 ビルド・デプロイ システムの整備 ライブラリ管理 に起因する問題 チームメンバー 入れ替え 状況の分析 チームの変化 ローンチ以降に起きた変化 変化にチームが対応で きていない…?
45. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ React Nativeに起因する課題がある ➔ ローンチ以降に起きた変化により各課題が難化するなど、React Native選 定時に想定していたより運用が難しい状況になった ➔ 今のチームではReact Nativeの開発はある程度まで出来ても、質と速度を 保つ運用が難しい ➔ 技術単体の良し悪しではなく「チームに合っていない」 状況をまとめると 45
46. #jsconfjp #jsconfjp_b Migration from React Native to PWA 開発できる ≠ 運用できる 46
47. #jsconfjp #jsconfjp_b Migration from React Native to PWA そんな中 47
48. #jsconfjp #jsconfjp_b Migration from React Native to PWA 48 マルチプラットフォーム 対応 に 精通した エンジニアの退職 推進 対応の要請 ビルド・デプロイ システムの整備 ライブラリ管理 に起因する問題 チームメンバー 入れ替え 状況の分析 チームの変化 ローンチ以降に起きた変化 ローンチ以降に起き た変化が色々難しく している…? このアプリ、ブラウザからも使えるよ うにならないかな？ 今後このアプリの位置付けがさらに 大事になりそうです！ 機能αと機能βと機能εを今年度中 にはリリースしたい！ エンジニアを頼ってくれる ステークホルダー達の図
49. #jsconfjp #jsconfjp_b Migration from React Native to PWA 49 マルチプラットフォーム 対応 に 精通した エンジニアの退職 推進 対応の要請 ビルド・デプロイ システムの整備 ライブラリ管理 に起因する問題 チームメンバー 入れ替え 状況の分析 チームの変化 ローンチ以降に起きた変化 ローンチ以降に起き た変化が色々難しく している…? このアプリ、ブラウザからも使えるよ うにならないかな？ 今後このアプリの位置付けがさらに 大事になりそうです！ 機能αと機能βと機能εを今年度中 にはリリースしたい！ エンジニアを頼ってくれる ステークホルダー達の図 Photo by Adam Birkett on Unsplash
50. #jsconfjp #jsconfjp_b Migration from React Native to PWA 50 脱React Nativeを決断 Photo by Linh Nguyen on Unsplash
51. #jsconfjp #jsconfjp_b Migration from React Native to PWA Migration design 03 51
52. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 脱React Nativeの選択肢、技術選定の決め手 ➔ どこまでPWAやるか ➔ Architecture / Traffic image ➔ Migration strategy Migration design 52
53. #jsconfjp #jsconfjp_b Migration from React Native to PWA 1. PWA for Android, Hybrid app for iOSで書き直す ◆ SPAならいくつも開発・運用しており、知見がある ◆ PWA経験はないがキャッチアップ可能と判断 2. Native言語で書き直す ◆ iOS, Android開発者は社内にいるが希少人材 ◆ 運用においてずっと両方に対応し続けるコストは高い 3. Flutterなど別のマルチプラットフォーム対応技術を使う ◆ 社内に知見なし 脱React Native時の選択肢 53
54. #jsconfjp #jsconfjp_b Migration from React Native to PWA 54 マルチプラットフォーム 対応 に 精通した エンジニアの退職 推進 対応の要請 ビルド・デプロイ システムの整備 ライブラリ管理 に起因する問題 チームメンバー 入れ替え 状況の分析 チームの変化 ローンチ以降に起きた変化 ローンチ以降に起き た変化が色々難しく している…? 今後このアプリの位置付けがさらに 大事になりそうです！ 機能αと機能βと機能εを今年度中 にはリリースしたい！ エンジニアを頼ってくれる ステークホルダー達の図 このアプリ、ブラウザからも使えるよ うにならないかな？ ＿人人人人人人人＿ ＞　決定的要件　＜ ￣ ￣
55. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 以下の理由でPWA, Hybrid app for iOSに決定 ◆ Webアプリとして利用したいというニーズ ◆ 3プラットフォームに実装するのに比べてコストが低い ◆ チームにWebエンジニアが多い ◆ SPA, Hybrid app for iOSの経験がある ➔ 「チームで運用可能な技術選定」を中心にした 技術選定の決め手 55
56. #jsconfjp #jsconfjp_b Migration from React Native to PWA その他Webフロントエンドの技術選定 56 ➔ 社内で知見があるReact, TypeScript ◆ react-native-webも検討したが旨味が少ないのでやめた ➔ React Nativeのためのライブラリの代替がReact用に存在するか確認 ◆ 大抵はUI componentライブラリだったので問題なし
57. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ モバイル端末におけるPush NotificationsはMUST要件 ➔ Android向けはPWAとして開発 ➔ iOSはPWAをWebViewで表示するHybrid appとして使う ◆ JSからはNotification Tokenを渡し、通知を受けたあとのハンドリング はSwiftでやる ◆ iOS appのWebView上で、サーバが返すHTML, JSが動作する（通称、 ガワアプリ） Push Notifications実現のために 57
58. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 脱React Nativeの選択肢、技術選定の決め手 ➔ どこまでPWAやるか ➔ Architecture / Traffic image ➔ Migration strategy Migration design 58
59. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ PWAの構成要素は複数ある ◆ Service worker, client side storage, Push API etc. ➔ 必要に応じて取捨選択ができる どこまでPWAやるか 59
60. #jsconfjp #jsconfjp_b Migration from React Native to PWA どこまでPWAやるか 60 ➔ チャットアプリとして重要な Push通知、カメラ、バッジの 実装に絞る ➔ さらにモバイルネイティブア プリに近い体験のための実 装もできるが今回は重要な 要件ではなかったため Migrationの初期スコープか らは削った の要素を要件に含めるか検討した時の表
61. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 脱React Nativeの選択肢、技術選定の決め手 ➔ どこまでPWAやるか ➔ Architecture / Traffic image ➔ Migration strategy Migration design 61
62. #jsconfjp #jsconfjp_b Migration from React Native to PWA 62 Architecture
63. #jsconfjp #jsconfjp_b Migration from React Native to PWA Traffic image 開発したPWAのAssetsはここから配信
64. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 脱React Nativeの選択肢、技術選定の決め手 ➔ どこまでPWAやるか ➔ Architecture / Traffic image ➔ Migration strategy Migration design 64
65. #jsconfjp #jsconfjp_b Migration from React Native to PWA Migration strategy 65 React Native 移行のための併存期間を設ける 一部の利用者からはフィードバックを募り、 併存期間中にPWA, Hybrid appの改善を行う 移行に関する問題が なくなり次第クローズ
66. #jsconfjp #jsconfjp_b Migration from React Native to PWA PWA, Hybrid app dev & tests & ops 04 66
67. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 開発 ◆ 実装方針 ◆ Hybrid appの工夫した点、苦労した点 ◆ PWAの工夫した点、苦労した点 ➔ テスト ➔ 運用2ヶ月経過してみて PWA, Hybrid app dev & tests & ops 67
68. #jsconfjp #jsconfjp_b Migration from React Native to PWA チームメンバー 68 Product Manager @shohei-mitsuoka Frontend Engineer @nanoShinji iOS Engineer @stNamco VP of Design @daitorii UI/UX Designer @h3dc Web Engineer @ohbarye From nanomedia inc. https://www.nanomedia.jp/
69. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 基本的にはReactによるSPA開発、iOSのHybrid app開発、RailsによるAPI 開発 ◆ チームメンバーの馴染みのある技術と領域 ➔ 実装方針、Hybrid appとしての工夫・ハマった点、PWAとしての工夫・ハ マった点についていくつか紹介 開発にあたって 69
70. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 開発 ◆ 実装方針 ◆ Hybrid appの工夫した点、苦労した点 ◆ PWAの工夫した点、苦労した点 ➔ テスト ➔ 運用2ヶ月経過してみて PWA, Hybrid app dev & tests & ops 70
71. #jsconfjp #jsconfjp_b Migration from React Native to PWA 実装方針 71 ➔ フロントではiOSよりもTypeScriptにロジックを集約する方針 ◆ 問題発生時の切り分けが容易になる ◆ 初期開発以降、iOSの追加開発がほとんど不要になる • アップデート頻度が減るのでユーザーにメリットがある
72. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 開発 ◆ 実装方針 ◆ Hybrid appの工夫した点、苦労した点 ◆ PWAの工夫した点、苦労した点 ➔ テスト ➔ 運用2ヶ月経過してみて PWA, Hybrid app dev & tests & ops 72
73. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ JSから動的にSwift側のAPIを呼ぶシーンがある ◆ バッジを表示する、statusBarの色を変える etc. ➔ ブリッジコードのインタフェースを定義して共有する ◆ 今回はiOS Engineerにdocumentを書いてもらいつつ、TypeScriptの 型定義も書いた Hybrid app 73
74. #jsconfjp #jsconfjp_b Migration from React Native to PWA 74 1. Swift側にハンドラを実装 3. userAgentで呼び分ける 2. WKWebView内で動作するときのみ windowに関 数が生えるのでTypeScriptで型を定義
75. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ iOSアプリのWebViewで動作するアプリはXCodeでビルドして実機にインス トールし、Remote debugが可能 ➔ 通常のWeb開発で利用するdeveloper toolsの知識の延長 ◆ これはReact Nativeでも同様 ➔ 発生するエラーがReact Nativeに比べて馴染みがあるものばかり ◆ Web engineerがdebugしやすい Debug for Hybrid app 75
76. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ キャッシュのレイヤーが増えることに注意 ➔ WebViewのキャッシュを無効化するブリッジメソッド、UserDefaultsをクリア するブリッジメソッドを用意する ◆ Hybrid appでもdebugしやすくなったり、キャッシュの罠を避けられる Debug for Hybrid app 76 There are only two hard things in Computer Science: cache invalidation and naming things. -- Phil Karlton
77. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 開発 ◆ 実装方針 ◆ Hybrid appの工夫した点、苦労した点 ◆ PWAの工夫した点、苦労した点 ➔ テスト ➔ 運用2ヶ月経過してみて PWA, Hybrid app dev & tests & ops 77
78. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 大変そうというイメージだったがFirebaseSDKが便利で助かった ◆ https://firebase.google.com/docs/cloud-messaging/js/receive ➔ フォアグラウンド・バックグラウンドそれぞれにおいての通知受信時のコール バックを書いていく PWA - Push Notifications 78 For foreground For background
79. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ onMessageがAndroid PWAの場合のみ発火しない問題に直面 (未解決) PWA - Push Notifications 79 ◆ Chrome browserでは 動く ➔ バックグラウンド・フォアグラ ウンドともにPushEventを listenする形だと動いた ➔ https://developer.mozilla.org/en- US/docs/Web/API/PushEvent
80. #jsconfjp #jsconfjp_b Migration from React Native to PWA PWA - Badge 80 設定画面からEnableすることはできる すると以下のコードが動く Android PWAではバッジを表示するAPIはExperimental (Chrome 73からOrigin Trial) 通知が届く 今回はバッジは要件 から外した
81. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ Chrome browserでは動くがAndroid PWAでは動かない、など実行環境差 異に悩むことはある ➔ 以下の要因で多少コードが複雑になったが許容範囲 ◆ iOSのSwift側でなくTypeScript側にロジックを寄せた ◆ プラットフォーム判定による分岐が多少必要 ➔ 社内外でAndroid PWAに詳しい人を捕まえておければなお良かった PWA側の開発に関する所感 81
82. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 開発 ◆ 実装方針 ◆ Hybrid appの工夫した点、苦労した点 ◆ PWAの工夫した点、苦労した点 ➔ テスト ➔ 運用2ヶ月経過してみて PWA, Hybrid app dev & tests & ops 82
83. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ Snapshot testing中心 ➔ React component testingはreact-test-rendererで書いていた ➔ E2E/Integration testingは無し ➔ Unit testはPASSするが動かすと壊れているという事態が多くあった React Native時代のテスト 83
84. #jsconfjp #jsconfjp_b Migration from React Native to PWA PWA移行後のテスト方針 ➔ Integration Testing with Cypress ◆ https://www.cypress.io ➔ Bridge周りや複雑なロジックをUnit Testでカ バー ➔ Snapshot testingはやらない方向 ➔ Hybrid app、マルチプラットフォーム対応は手 動テストでカバーしているのが課題 84 右図は https://testingjavascript.com/ より引用
85. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 開発 ◆ 実装方針 ◆ Hybrid appの工夫した点、苦労した点 ◆ PWAの工夫した点、苦労した点 ➔ テスト ➔ 運用2ヶ月経過してみて PWA, Hybrid app dev & tests & ops 85
86. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ PWA, Hybrid app両方ともリリースすると即時に変更が反映される ◆ React NativeにおけるOTAでも同じことをやっていたが、Nativeコード 依存が以前より更に減ったので、ユーザが手動でアプリをアップデート する回数が削減 ◆ Hotfixや切り戻しもWeb applicationと同じ ➔ 依存ライブラリの更新も地道に行っている ◆ dependabotを利用 https://dependabot.com/ 運用2ヶ月経過してみて 86
87. #jsconfjp #jsconfjp_b Migration from React Native to PWA 05 Review of the migration project 87
88. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ Outcome ➔ What we learned Review of the migration project 88
89. #jsconfjp #jsconfjp_b Migration from React Native to PWA Outcome ➔ iOS / Android / Webの3プラットフォームに対応するPWA / Hybrid appを 無事リリースでき、運用できている ➔ 数ヶ月に1度のリリースから週1のリリースサイクルになり、価値を提供する スピード感を取り戻した ➔ React, Redux, TypeScriptという社内では知見のある安定した技術をベー スにしつつPWA周辺の知見を獲得できた 89
90. #jsconfjp #jsconfjp_b Migration from React Native to PWA 90 ユーザーの声 優秀なコーチに長く働いてもらう ために重要な指標を改善できた 実際に利用しているコーチから Slackで頂いたフィードバック
91. #jsconfjp #jsconfjp_b Migration from React Native to PWA Review of the migration project ➔ Outcome ➔ What we learned 91
92. #jsconfjp #jsconfjp_b Migration from React Native to PWA 開発できる ≠ 運用できる 92
93. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ チームメンバーのスキルセットに合った技術選定こそ大事 ◆ 開発できるだけでなく運用できるところまで考える ◆ チームや状況に合わせて技術もアップデートしていく ➔ モバイルアプリに近い体験が要求されてもWeb技術でだいぶやれる ➔ PWAはフルに活用しなくても十分なシーンは多分にある What we learned 93
94. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ Engineering Manager in ➔ Engineering Manager Meetup Organizer ➔ Twitter @ohbarye / GitHub @ohbarye ➔ https://ohbarye.hatenablog.jp/ @ohbarye (Masato Ohba) 94 I'm really looking forward to getting feedbacks from you!
95. #jsconfjp #jsconfjp_b Migration from React Native to PWA Thank you! 95
96. #jsconfjp #jsconfjp_b Migration from React Native to PWA Digression ➔ React Native時代のComponentをどれぐらい再利用したか ◆ デザインも大幅に変えたため再利用Componentsはゼロ ◆ Hooks未対応時代のコードだったのでロジック周りは参考にしつつも書 き直した ➔ Flutterならどうだったのか ◆ 今回は候補から早々に外したのでわかりません 96
97. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ React Nativeで利用していたライブラリはどうなったか 97 ◆ すべて代替可能 or 不要 ◆ UI componentを提供するだけ のライブラリがほとんど ◆ 一箇所でしか使わないもの、 Androidのためだけに入れてい るものなどある ◆ 1年以上更新がないものもそこ そこあった
98. #jsconfjp #jsconfjp_b Migration from React Native to PWA 98 ➔ React Native for Webはどうですか ◆ 検討したが見送った ◆ React Nativeが提供するcomponentのほとんどについては互換性の あるcomponentを提供している。しかし3td partyのUI componentラ イブラリをカバーしているわけではない。ライブラリが対応してない限り は自前で実装する事になる ◆ Bootstrapのように「ある程度仕上がったUI component集」としての価 値もある。しかし今回はデザインも大きく変更し、自前で大部分を書くこ とになった。component集としても利用する価値は高くないと考えた
99. #jsconfjp #jsconfjp_b Migration from React Native to PWA 99 ➔ Android PWAでリリース前の審査を避ける ◆ Google Play Storeの審査に時間がかかるようになった ◆ "一部のアプリで審査時間が長くなる可能性があります（最大で 7 日程 度ですが、例外的にもっとかかる場合があります）。" https://support.google.com/googleplay/android-developer/answer/6334282 ◆ Webサイトにアクセスしてから「Add to Home Screen」するPWAの場 合はこの問題に直面しない
100. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ Android対応から見つめるReact Native https://quipper.hatenablog.com/entry/2019/04/10/react-native-from-android ➔ ReactNativeに入門して感じたこと https://quipper.hatenablog.com/entry/2019/03/11/react-native-pro-con ➔ 合格特訓コースの大学生コーチの業務用アプリ爆速開発で生徒が幸せになった話 https://quipper.hatenablog.com/entry/2018/11/20/ ➔ QuipperにおけるReact Native活用事例 https://quipper.hatenablog.com/entry/2017/12/05/114014 ➔ Google Developers - Progressive Web Apps https://developers.google.com/web/progressive-web-apps References 100
101. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ JSConf 2019 Proposal https://scrapbox.io/ohbarye/JSConf_2019_Proposal ➔ ネイティブアプリWEBViewでRemote Debug まとめ https://qiita.com/ryurock/items/4a6198e8bc64e268ac2e ➔ Badging for app icons https://web.dev/badging-api/ ➔ Badging API Explainer https://github.com/WICG/badging/blob/master/explainer.md ➔ Static vs Unit vs Integration vs E2E Testing for Frontend Apps https://kentcdodds.com/blog/unit-vs-integration-vs-e2e-tests ➔ Why I Never Use Shallow Rendering https://kentcdodds.com/blog/why-i-never-use-shallow-rendering 101
102. #jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ PWA 入門 〜iOS SafariでPWAを体験するまで〜 https://qiita.com/umamichi/items/0e2b4b1c578e7335ba20 ➔ ガワネイティブアプリを作るときに必要な技術 https://qiita.com/noboru_i/items/bc39d95638e9e55437fa ➔ Progressive web apps - MDN web docs https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps ➔ 社内勉強会TechLunchで Badging API について発表しました https://developer.medley.jp/entry/2019/08/27/174256 102