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

React Native + Expo のバージョンアップと互換性の維持に関する運用と絶技

Hiroaki KARASAWA
October 08, 2022
550

React Native + Expo のバージョンアップと互換性の維持に関する運用と絶技

React Native Matsuri 2022 Session Talk

ExpoのOTA (Over-the-Air) Updateはストアでの申請を通さなくてもアプリの動作を変更することができる素晴らしい機能です。次世代の飲食インフラを開発するdiniiでも、プロダクトの改善を高速に実行していくためにOTA Updateを活用しています。非常に便利なOTA Updateですが、アップデートに際して遥か昔から開発者を悩ませてきたある問題も内包しています。そう、互換性です。このセッションでは、一般的なAPIとクライアントの間の互換性の問題に加え、OTA Updateによって生じる基盤部分とバンドル部分の互換性の問題をdiniiではどのように解決しているかをご紹介します。

Hiroaki KARASAWA

October 08, 2022
Tweet

Transcript

  1. React Native + Expo
    dinii aka karszawa
    React Native Matsuri 2022
    2022/10/08

    View full-size slide

  2. ࣗݾ঺հ

    ほ aka @karszawa
    ま dinii

    ほ karszawa
    ま JavaScript TypeScript

    2

    View full-size slide

  3. ͜ͷൃදͷείʔϓ
    3

    View full-size slide

  4. ࣮ࡍͷλΠϜϥΠϯ
    4

    View full-size slide

  5. ʲେલఏʳ
    גࣜձࣾ dinii ࣾͰ͸
    5

    View full-size slide

  6. ҿ৯ళͷ All in One Platform
    “μΠχʔ”

    View full-size slide

  7. All in One SaaS “μΠχʔ”
    7
    All in One = to B + to C
    to B
    to C

    View full-size slide

  8. ࢼߦճ਺Λ૿΍͢ʹ͸ʁ 🤔
    8

    View full-size slide

  9. ࢼߦճ਺Λ૿΍͢ʹ͸ʁ
    9
    ϢʔβʔώΞϦϯά
    εΫϥϜ
    ϦϦʔεϊʔτ
    ίʔυ


    ΫΦϦ
    ςΟ
    ϦϦʔε


    Ϛωδϝϯτ
    Ξοϓσʔτ


    खஈ
    ϞχλϦϯά

    View full-size slide

  10. Ξοϓσʔτखஈ
    10
    Web React Native App

    ま CDN

    ま Expo OTA Update
    ま OTA = Over The Air




    View full-size slide

  11. ิ଍આ໌ɿExpo ͕͍͢͝
    11


    ま Push
    ま OTA Update

    ほ Expo

    View full-size slide

  12. ิ଍આ໌ɿExpo's OTA Update ֓ཁ
    12
    ま Managed Workflow Bare Workflow
    ま 1 5~10 min


    ま JS

    View full-size slide

  13. ิ଍આ໌ɿExpo's OTA Update ֓ཁ ͦͷ̎
    13
    ま dinii 10

    ま Expo
    Bundle
    Native

    View full-size slide

  14. جຊతʹ͸ศརͳٕज़͕ͩ…
    14

    View full-size slide

  15. ͕ͭ͜͜Β͍Α OTA Update 🤧
    15
    ま 20~30 MB



    View full-size slide

  16. ໰୊̍ ྼѱωοτϫʔΫͰͷΞοϓσʔτ໰୊
    16
    Bundle

    View full-size slide

  17. ໰୊ͷ؍࡯ɿྼѱωοτϫʔΫͰͷΞοϓσʔτ໰୊
    17
    1.
    a.

    2. SDK
    a.

    3.

    View full-size slide

  18. ରࡦɿྼѱωοτϫʔΫͰͷΞοϓσʔτ໰୊
    18
    N
    a. SDK
    b.

    View full-size slide

  19. ରࡦɿྼѱωοτϫʔΫͰͷΞοϓσʔτ໰୊
    19

    ま Cloud Logging BigQuery & Redash

    View full-size slide

  20. ໰୊̎ ޓ׵ੑ
    21

    API
    Q.

    View full-size slide

  21. ΞϓϦέʔγϣϯͷαϙʔτظݶɿ΋ͪΖΜਖ਼ղ͸Ϗδωε࣍ୈ
    22
    Twitter ?
    Windows ? Office ?

    View full-size slide

  22. ޓ׵ੑͷ໰୊
    23
    Bundle Native
    Expo Native vs Bundle

    Bundle
    Native
    OK
    Native
    NG
    Native

    View full-size slide

  23. ໰୊ͷ؍࡯ɿޓ׵ੑͷ໰୊
    24
    1. Native
    a.
    2. Managed Workflow Native Expo
    a. Expo Bundle
    b. Managed Workflow Eject PJ

    View full-size slide

  24. ରࡦɿޓ׵ੑͷ໰୊
    25
    OTA Update SDK
    Native

    Info.plist ExUpdatesRuntimeVersion
    Bundle

    app.config.js runtimeVersion

    View full-size slide

  25. dinii Ͱͷӡ༻
    26

    ほ ios / android
    ほ app.config.js
    ま SDK

    Native

    View full-size slide

  26. dinii Ͱͷӡ༻
    27
    ま Native


    View full-size slide

  27. Ξοϓσʔτ؂ࢹ
    28
    ま Native Bundle


    😆 < AppStore
    < ☺ 👊

    View full-size slide

  28. to B αʔϏεͷσόΠε؅ཧʹ͸՝୊͕ͨ͘͞Μʂ
    29
    ま dinii
    ま Apple dinii MDM
    Apple ID & Password
    OS

    View full-size slide

  29. dinii Ͱͷӡ༻
    30
    ま N
    ほ toB

    View full-size slide

  30. ຊ೔ͷ·ͱΊ
    31
    ま Expo OTA Update


    API
    😺

    View full-size slide