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

Migration from React Native to PWA

Masato Ohba
December 01, 2019

Migration from React Native to PWA

JSConf JP 2019 "Migration from React Native to PWA"

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

Masato Ohba

December 01, 2019
Tweet

More Decks by Masato Ohba

Other Decks in Technology

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

    View Slide

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

    View Slide

  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/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  14. #jsconfjp #jsconfjp_b Migration from React Native to PWA 14

    View Slide

  15. #jsconfjp #jsconfjp_b Migration from React Native to PWA 15

    View Slide

  16. #jsconfjp #jsconfjp_b Migration from React Native to PWA 16

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. #jsconfjp #jsconfjp_b Migration from React Native to PWA 44
    マルチプラットフォーム
    対応

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

    View Slide

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

    View Slide

  46. #jsconfjp #jsconfjp_b Migration from React Native to PWA
    開発できる

    運用できる
    46

    View Slide

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

    View Slide

  48. #jsconfjp #jsconfjp_b Migration from React Native to PWA 48
    マルチプラットフォーム
    対応

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

    View Slide

  49. #jsconfjp #jsconfjp_b Migration from React Native to PWA 49
    マルチプラットフォーム
    対応

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  54. #jsconfjp #jsconfjp_b Migration from React Native to PWA 54
    マルチプラットフォーム
    対応

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  63. #jsconfjp #jsconfjp_b Migration from React Native to PWA
    Traffic image
    開発したPWAのAssetsはここから配信

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  92. #jsconfjp #jsconfjp_b Migration from React Native to PWA
    開発できる

    運用できる
    92

    View Slide

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

    View Slide

  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!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide