Migration from React Native to PWA

Slide 1

Slide 1 text

#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

Slide 2

Slide 2 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 2 Introduction https://2018.stateofjs.com/mobile-and-desktop/react-native/

Slide 3

Slide 3 text

#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/

Slide 4

Slide 4 text

#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が動作する (通称ガワアプリ)

Slide 5

Slide 5 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ React Nativeとは何か ◆ ReactでNative appが開発できるやつ、ぐらいの認識でOK ➔ PWAとは何か ◆ Googleが推進する、モバイルユーザーの体験向上を目的とするプロジェクト・技術のこと、ぐらいの認識でOK ➔ React Native、PWAの先進的な利用方法など話さないこと 5 Introduction

Slide 6

Slide 6 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ クロスプラットフォーム開発フレームワークによるアプリ開発やマルチプラットフォーム対応を考えている方 ➔ すでにネイティブ言語以外でのネイティブアプリ開発・運用をしており、マイグレーションを考えている方 ➔ React Native, PWAの開発経験は問いません想定する聞き手 6 Introduction

Slide 7

Slide 7 text

#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

Slide 8

Slide 8 text

#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

Slide 9

Slide 9 text

#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

Slide 10

Slide 10 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 「開発できる≠運用できる」 ◆ システム特性、メンバーのスキルセット・志向性を考えよう ◆ 状況が変わることはあるが、チームに合わない技術になったら移行を検討しよう ➔ モバイルアプリに近い体験が要求されてもWeb技術でそこそこやれる ➔ PWAはフルに活用しなくても十分なシーンは多分にあるはじめにConclusion 10 Introduction

Slide 11

Slide 11 text

#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

Slide 12

Slide 12 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA What kind of React Native app it was? 01 12

Slide 13

Slide 13 text

#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

Slide 14

Slide 14 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 14

Slide 15

Slide 15 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 15

Slide 16

Slide 16 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 16

Slide 17

Slide 17 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 映像授業だけでなく現役大学生コーチがサポート 17 ➔ オンラインチャットや学習管理機能・宿題配信機能などを通して、スタディサプリを使っている全国の生徒の学習指導を行うサービス ➔ 「一人では勉強が続かない」「教えてもらいたい」「受験の不安を相談したい」等の受験生の悩みに寄り添い、志望校合格を目指す合格特訓コース ➔ 部活と勉強の両立を目指す中学生へスケジュール作成や学習指導を行う個別指導コース

Slide 18

Slide 18 text

#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

Slide 19

Slide 19 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 生徒とコーチのコミュニケーションをより円滑にするためのメッセージ機能をベースとした業務システム ➔ より詳しい事業背景はブログ参照 Characteristics (Business) 19 https://quipper.hatenablog.com/entry/2018/11/20/

Slide 20

Slide 20 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA Characteristics (Features) 20 ➔ 生徒とのチャット ➔ 宿題配信・進捗管理 ➔ コーチ同士のナレッジシェア

Slide 21

Slide 21 text

#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

Slide 22

Slide 22 text

#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

Slide 23

Slide 23 text

#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

Slide 24

Slide 24 text

#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

Slide 25

Slide 25 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 組織的・技術的課題を解決しながらエンドユーザーにも価値を届けることができた ➔ 技術的挑戦もありエンジニアも楽しく開発できた ➔ 当時の同じ状況に自分がいたらReact Nativeを選ぶことに同意した ➔ 詳しくは『QuipperにおけるReact Native活用事例』 https://quipper.hatenablog.com/entry/2017/12/05/114014 参照当時の技術選定を振り返ると 25

Slide 26

Slide 26 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA React Native issues in dev & ops 02 26

Slide 27

Slide 27 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 既存の土台の上にUIをガリガリ書いていくぶんには大変ではない ➔ React (+ Redux, TypeScript) の知識があればだいたい十分 ➔ 当初の目論見どおりWebエンジニアを活用してネイティブアプリの開発ができてよかった ➔ …が、ローンチ後に起きたいくつかの変化により課題が発生 React Nativeの開発 27

Slide 28

Slide 28 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ ローンチ以降に起きた変化 ➔ 浮き彫りになったつらいところ ◆ マルチプラットフォーム対応 ◆ ライブラリ管理、React Native Upgrade ◆ ビルド・デプロイシステム ➔ 状況の分析とまとめ React Native issues in dev & ops 28

Slide 29

Slide 29 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 29 ➔ 端末配布をやめ、BYOD化することに ➔ コーチのエンゲージメント向上とコスト削減が目的 ➔ これに伴いiOSだけでなく Android版の提供を開始 BYOD化 Photo by Hal Gatewood on Unsplash

Slide 30

Slide 30 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 30 ➔ iOS, Android, React Native全てに精通したエンジニアの退職 ➔ 他のプロジェクトを担当するiOS / Android / Webエンジニアそれぞれで協力してメンテナンスをしていくことになった Photo by Katherine Chase on Unsplash 諸事情によりチームメンバー総入れ替え

Slide 31

Slide 31 text

Slide 32

Slide 32 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA マルチプラットフォーム対応 ➔ Android対応を開始した時点から格段に運用コストが高くなった ➔ iOSで動くがAndroidでは動かない既存機能がかなりあった ➔ 自分たちのコードの問題だけではなく、React Native関連のUIライブラリにはiOS / Android両方を完全にサポートしていないものも多い 32

Slide 33

Slide 33 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 33 https://quipper.hatenablog.com/entry/2019/04/10/react-native-from-android

Slide 34

Slide 34 text

#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

Slide 35

Slide 35 text

#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

Slide 36

Slide 36 text

Slide 37

Slide 37 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ NPMの他にiOS / Androidでは各々のパッケージ管理システムがある ➔ React Nativeではパッケージ管理システムをまたいだ暗黙の依存関係が存在することがある ➔ パッケージ管理システムをまたいだ依存関係は定義できないので人間が管理する必要があるライブラリ管理 37

Slide 38

Slide 38 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA Implicit dependencies 38 この間の依存関係はいずれのパッケージ管理システムも関与しないこの依存関係は NPMやYarnで管理される

Slide 39

Slide 39 text

#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 ✅ 大抵コンパイルエラー、ビルド失敗、テスト失敗などで問題に気づくので原因調査が大変

Slide 40

Slide 40 text

#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は未使用だった

Slide 41

Slide 41 text

Slide 42

Slide 42 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ビルド・デプロイシステム 42 ➔ iOS, Androidそれぞれのnative知識が必要 ➔ 先述のライブラリ管理の問題なども絡み、油断すると壊れる ➔ 壊れているのをマシにするレベルの作業をiOS / Androidエンジニアに1ヶ月近くかけてやってもらった ➔ 他案件もあり、このために時間をさらに使うのは厳しかったので撤退判断

Slide 43

Slide 43 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA React Native issues in dev & ops 43 ➔ ローンチ以降に起きた変化 ➔ 浮き彫りになったつらいところ ◆ マルチプラットフォーム対応 ◆ ライブラリ管理、React Native Upgrade ◆ ビルド・デプロイシステム ➔ 状況の分析とまとめ

Slide 44

Slide 44 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 44 マルチプラットフォーム対応に精通したエンジニアの退職推進対応の要請ビルド・デプロイシステムの整備ライブラリ管理に起因する問題チームメンバー入れ替え状況の分析チームの変化ローンチ以降に起きた変化変化にチームが対応できていない…?

Slide 45

Slide 45 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ React Nativeに起因する課題がある ➔ ローンチ以降に起きた変化により各課題が難化するなど、React Native選定時に想定していたより運用が難しい状況になった ➔ 今のチームではReact Nativeの開発はある程度まで出来ても、質と速度を保つ運用が難しい ➔ 技術単体の良し悪しではなく「チームに合っていない」状況をまとめると 45

Slide 46

Slide 46 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 開発できる ≠ 運用できる 46

Slide 47

Slide 47 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA そんな中 47

Slide 48

Slide 48 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 48 マルチプラットフォーム対応に精通したエンジニアの退職推進対応の要請ビルド・デプロイシステムの整備ライブラリ管理に起因する問題チームメンバー入れ替え状況の分析チームの変化ローンチ以降に起きた変化ローンチ以降に起きた変化が色々難しくしている…? このアプリ、ブラウザからも使えるようにならないかな？今後このアプリの位置付けがさらに大事になりそうです！機能αと機能βと機能εを今年度中にはリリースしたい！エンジニアを頼ってくれるステークホルダー達の図

Slide 49

Slide 49 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 49 マルチプラットフォーム対応に精通したエンジニアの退職推進対応の要請ビルド・デプロイシステムの整備ライブラリ管理に起因する問題チームメンバー入れ替え状況の分析チームの変化ローンチ以降に起きた変化ローンチ以降に起きた変化が色々難しくしている…? このアプリ、ブラウザからも使えるようにならないかな？今後このアプリの位置付けがさらに大事になりそうです！機能αと機能βと機能εを今年度中にはリリースしたい！エンジニアを頼ってくれるステークホルダー達の図 Photo by Adam Birkett on Unsplash

Slide 50

Slide 50 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 50 脱React Nativeを決断 Photo by Linh Nguyen on Unsplash

Slide 51

Slide 51 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA Migration design 03 51

Slide 52

Slide 52 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 脱React Nativeの選択肢、技術選定の決め手 ➔ どこまでPWAやるか ➔ Architecture / Traﬃc image ➔ Migration strategy Migration design 52

Slide 53

Slide 53 text

#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

Slide 54

Slide 54 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 54 マルチプラットフォーム対応に精通したエンジニアの退職推進対応の要請ビルド・デプロイシステムの整備ライブラリ管理に起因する問題チームメンバー入れ替え状況の分析チームの変化ローンチ以降に起きた変化ローンチ以降に起きた変化が色々難しくしている…? 今後このアプリの位置付けがさらに大事になりそうです！機能αと機能βと機能εを今年度中にはリリースしたい！エンジニアを頼ってくれるステークホルダー達の図このアプリ、ブラウザからも使えるようにならないかな？＿人人人人人人人＿＞　決定的要件　＜￣￣

Slide 55

Slide 55 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 以下の理由でPWA, Hybrid app for iOSに決定 ◆ Webアプリとして利用したいというニーズ ◆ 3プラットフォームに実装するのに比べてコストが低い ◆ チームにWebエンジニアが多い ◆ SPA, Hybrid app for iOSの経験がある ➔ 「チームで運用可能な技術選定」を中心にした技術選定の決め手 55

Slide 56

Slide 56 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA その他Webフロントエンドの技術選定 56 ➔ 社内で知見があるReact, TypeScript ◆ react-native-webも検討したが旨味が少ないのでやめた ➔ React Nativeのためのライブラリの代替がReact用に存在するか確認 ◆ 大抵はUI componentライブラリだったので問題なし

Slide 57

Slide 57 text

#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

Slide 58

Slide 58 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 脱React Nativeの選択肢、技術選定の決め手 ➔ どこまでPWAやるか ➔ Architecture / Traﬃc image ➔ Migration strategy Migration design 58

Slide 59

Slide 59 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ PWAの構成要素は複数ある ◆ Service worker, client side storage, Push API etc. ➔ 必要に応じて取捨選択ができるどこまでPWAやるか 59

Slide 60

Slide 60 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA どこまでPWAやるか 60 ➔ チャットアプリとして重要な Push通知、カメラ、バッジの実装に絞る ➔ さらにモバイルネイティブアプリに近い体験のための実装もできるが今回は重要な要件ではなかったため Migrationの初期スコープからは削ったの要素を要件に含めるか検討した時の表

Slide 61

Slide 61 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 脱React Nativeの選択肢、技術選定の決め手 ➔ どこまでPWAやるか ➔ Architecture / Traﬃc image ➔ Migration strategy Migration design 61

Slide 62

Slide 62 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 62 Architecture

Slide 63

Slide 63 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA Traﬃc image 開発したPWAのAssetsはここから配信

Slide 64

Slide 64 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 脱React Nativeの選択肢、技術選定の決め手 ➔ どこまでPWAやるか ➔ Architecture / Traﬃc image ➔ Migration strategy Migration design 64

Slide 65

Slide 65 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA Migration strategy 65 React Native 移行のための併存期間を設ける一部の利用者からはフィードバックを募り、併存期間中にPWA, Hybrid appの改善を行う移行に関する問題がなくなり次第クローズ

Slide 66

Slide 66 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA PWA, Hybrid app dev & tests & ops 04 66

Slide 67

Slide 67 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 開発 ◆ 実装方針 ◆ Hybrid appの工夫した点、苦労した点 ◆ PWAの工夫した点、苦労した点 ➔ テスト ➔ 運用2ヶ月経過してみて PWA, Hybrid app dev & tests & ops 67

Slide 68

Slide 68 text

#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/

Slide 69

Slide 69 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 基本的にはReactによるSPA開発、iOSのHybrid app開発、RailsによるAPI 開発 ◆ チームメンバーの馴染みのある技術と領域 ➔ 実装方針、Hybrid appとしての工夫・ハマった点、PWAとしての工夫・ハマった点についていくつか紹介開発にあたって 69

Slide 70

Slide 70 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 開発 ◆ 実装方針 ◆ Hybrid appの工夫した点、苦労した点 ◆ PWAの工夫した点、苦労した点 ➔ テスト ➔ 運用2ヶ月経過してみて PWA, Hybrid app dev & tests & ops 70

Slide 71

Slide 71 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 実装方針 71 ➔ フロントではiOSよりもTypeScriptにロジックを集約する方針 ◆ 問題発生時の切り分けが容易になる ◆ 初期開発以降、iOSの追加開発がほとんど不要になる ● アップデート頻度が減るのでユーザーにメリットがある

Slide 72

Slide 72 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 開発 ◆ 実装方針 ◆ Hybrid appの工夫した点、苦労した点 ◆ PWAの工夫した点、苦労した点 ➔ テスト ➔ 運用2ヶ月経過してみて PWA, Hybrid app dev & tests & ops 72

Slide 73

Slide 73 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ JSから動的にSwift側のAPIを呼ぶシーンがある ◆ バッジを表示する、statusBarの色を変える etc. ➔ ブリッジコードのインタフェースを定義して共有する ◆ 今回はiOS Engineerにdocumentを書いてもらいつつ、TypeScriptの型定義も書いた Hybrid app 73

Slide 74

Slide 74 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 74 1. Swift側にハンドラを実装 3. userAgentで呼び分ける 2. WKWebView内で動作するときのみ windowに関数が生えるのでTypeScriptで型を定義

Slide 75

Slide 75 text

#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

Slide 76

Slide 76 text

#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

Slide 77

Slide 77 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 開発 ◆ 実装方針 ◆ Hybrid appの工夫した点、苦労した点 ◆ PWAの工夫した点、苦労した点 ➔ テスト ➔ 運用2ヶ月経過してみて PWA, Hybrid app dev & tests & ops 77

Slide 78

Slide 78 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 大変そうというイメージだったがFirebaseSDKが便利で助かった ◆ https://ﬁrebase.google.com/docs/cloud-messaging/js/receive ➔ フォアグラウンド・バックグラウンドそれぞれにおいての通知受信時のコールバックを書いていく PWA - Push Notiﬁcations 78 For foreground For background

Slide 79

Slide 79 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ onMessageがAndroid PWAの場合のみ発火しない問題に直面 (未解決) PWA - Push Notiﬁcations 79 ◆ Chrome browserでは動く ➔ バックグラウンド・フォアグラウンドともにPushEventを listenする形だと動いた ➔ https://developer.mozilla.org/en- US/docs/Web/API/PushEvent

Slide 80

Slide 80 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA PWA - Badge 80 設定画面からEnableすることはできるすると以下のコードが動く Android PWAではバッジを表示するAPIはExperimental (Chrome 73からOrigin Trial) 通知が届く今回はバッジは要件から外した

Slide 81

Slide 81 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ Chrome browserでは動くがAndroid PWAでは動かない、など実行環境差異に悩むことはある ➔ 以下の要因で多少コードが複雑になったが許容範囲 ◆ iOSのSwift側でなくTypeScript側にロジックを寄せた ◆ プラットフォーム判定による分岐が多少必要 ➔ 社内外でAndroid PWAに詳しい人を捕まえておければなお良かった PWA側の開発に関する所感 81

Slide 82

Slide 82 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 開発 ◆ 実装方針 ◆ Hybrid appの工夫した点、苦労した点 ◆ PWAの工夫した点、苦労した点 ➔ テスト ➔ 運用2ヶ月経過してみて PWA, Hybrid app dev & tests & ops 82

Slide 83

Slide 83 text

#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

Slide 84

Slide 84 text

#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/ より引用

Slide 85

Slide 85 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ 開発 ◆ 実装方針 ◆ Hybrid appの工夫した点、苦労した点 ◆ PWAの工夫した点、苦労した点 ➔ テスト ➔ 運用2ヶ月経過してみて PWA, Hybrid app dev & tests & ops 85

Slide 86

Slide 86 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ PWA, Hybrid app両方ともリリースすると即時に変更が反映される ◆ React NativeにおけるOTAでも同じことをやっていたが、Nativeコード依存が以前より更に減ったので、ユーザが手動でアプリをアップデートする回数が削減 ◆ Hotﬁxや切り戻しもWeb applicationと同じ ➔ 依存ライブラリの更新も地道に行っている ◆ dependabotを利用 https://dependabot.com/ 運用2ヶ月経過してみて 86

Slide 87

Slide 87 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 05 Review of the migration project 87

Slide 88

Slide 88 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ Outcome ➔ What we learned Review of the migration project 88

Slide 89

Slide 89 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA Outcome ➔ iOS / Android / Webの3プラットフォームに対応するPWA / Hybrid appを無事リリースでき、運用できている ➔ 数ヶ月に1度のリリースから週1のリリースサイクルになり、価値を提供するスピード感を取り戻した ➔ React, Redux, TypeScriptという社内では知見のある安定した技術をベースにしつつPWA周辺の知見を獲得できた 89

Slide 90

Slide 90 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 90 ユーザーの声優秀なコーチに長く働いてもらうために重要な指標を改善できた実際に利用しているコーチから Slackで頂いたフィードバック

Slide 91

Slide 91 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA Review of the migration project ➔ Outcome ➔ What we learned 91

Slide 92

Slide 92 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA 開発できる ≠ 運用できる 92

Slide 93

Slide 93 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ チームメンバーのスキルセットに合った技術選定こそ大事 ◆ 開発できるだけでなく運用できるところまで考える ◆ チームや状況に合わせて技術もアップデートしていく ➔ モバイルアプリに近い体験が要求されてもWeb技術でだいぶやれる ➔ PWAはフルに活用しなくても十分なシーンは多分にある What we learned 93

Slide 94

Slide 94 text

#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!

Slide 95

Slide 95 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA Thank you! 95

Slide 96

Slide 96 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA Digression ➔ React Native時代のComponentをどれぐらい再利用したか ◆ デザインも大幅に変えたため再利用Componentsはゼロ ◆ Hooks未対応時代のコードだったのでロジック周りは参考にしつつも書き直した ➔ Flutterならどうだったのか ◆ 今回は候補から早々に外したのでわかりません 96

Slide 97

Slide 97 text

#jsconfjp #jsconfjp_b Migration from React Native to PWA ➔ React Nativeで利用していたライブラリはどうなったか 97 ◆ すべて代替可能 or 不要 ◆ UI componentを提供するだけのライブラリがほとんど ◆ 一箇所でしか使わないもの、 Androidのためだけに入れているものなどある ◆ 1年以上更新がないものもそこそこあった

Slide 98

Slide 98 text

#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集としても利用する価値は高くないと考えた

Slide 99

Slide 99 text

#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の場合はこの問題に直面しない

Slide 100

Slide 100 text

#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

Slide 101

Slide 101 text

#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

Slide 102

Slide 102 text

#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