React Nativeでアプリのアップデートが楽になる話

SonicGarden Tech #2で話したときに使ったスライドです。

Transcript

1. SonicGarden Tech #2 in Hamamatsu
2. ࣗݾ঺հ • Hiromasa Ohno • aka @pi-chan || @pi_cha_n • ιχοΫΨʔσϯ • ඿দੜ·Ε඿দҭͪ • ඿๺۠ࡏॅ • Rails / iOS / React Native Λੜۀ
3. ࠓ೔ͷςʔϚ
4. React NativeͰ ΞϓϦͷΞοϓσʔτ͕ ָʹͳΔ࿩
5. NativeΞϓϦͷϦϦʔε • Ϗϧυ + Ξοϓϩʔυʹ͕͔͔࣌ؒΔ • ৹ࠪʹ͕͔͔࣌ؒΔ • ϨϏϡϫʔʹΑͬͯ͸ٸʹϦδΣΫτ͞ΕΔ • ʢ͍͍ͩͨiOSͷ࿩͔΋ʣ • ͪΐͬͱ͚ͩ௚͢ϋʔυϧ͕ߴ͘ͳΔ͠ɺ
 ຌϛεͰόάͬͨͱ͖ʹ͙͢ʹ௚ͤͳ͍͠ɺࠔΔ

6. React NativeͳΒ Javascriptͷमਖ਼ΛNo৹ࠪͰϦϦʔε
7. Native App URL ref JS Bundle RNΞϓϦͷ࣮ମ • ϝΠϯͷίʔυ͸JS • ωΠςΟϒ͸ԼճΓ • ωΠςΟϒͱJS͕ಠཱ • JSϑΝΠϧΛURLͰࢀর
8. ৹ࠪͳ͠ͷϧʔτ Native App URL ref JS Bundle JS Bundle
9. ࠷ˍߴ
10. ৄࡉͳ࿩
11. RNΞϓϦͷߏ੒ʢ֓ཁʣ ※ Bridge ͜ͷ৔Ͱ͸྆ऀΛͭͳ͙΋ͷͱ͍͏ఔ౓ͷҙຯ
12. RNΞϓϦͷߏ੒ʢৄࡉʣ
13. RNΞϓϦͷϏϧυϓϩηε
14. RNΞϓϦͷϦϦʔεϏϧυᶃ • JSΛϏϧυˠ main.jsbundle
15. RNΞϓϦͷϦϦʔεϏϧυᶄ • ωΠςΟϒΞϓϦ෦෼ͷϏϧυ • ᶃͷJS bundleΛಉࠝ
16. RNΞϓϦͷϦϦʔεϏϧυᶅ • ࠷৽ͷJSΛؚΜͩঢ়ଶͰϏϧυ • ͋ͱ͸௨ৗͷΞϓϦΞοϓσʔτͱಉ͡ • ී௨ʹ΍Δͱπϥ͞͸มΘΒͳ͍ Native App URL ref JS Bundle
17. ͜ͷ෦෼ JS Bundle
18. Native App URL ref JS Bundle RNΞϓϦͷ࣮ମ
19. RNΞϓϦͷ࣮ମ AppDelegate.m jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; RCTBundleURLProvider.m resourceName = resourceName ?: @"main"; [[NSBundle mainBundle] URLForResource:resourceName withExtension:@"jsbundle"];
20. JSΛಈతʹஔ͖׵͑Ε͹ ྑ͍ͷͰ͸…ʁ Native App JS Bundle Another JS Bundle
21. ಈతʹஔ͖׵͑Δͱ͸ • Ͳ͔͜ͷαʔόʔʹJSΛ഑ஔ • ΞϓϦىಈ࣌ʹνΣοΫ • ࠷৽͕͋Ε͹μ΢ϯϩʔυ • Έ͍ͨͳ͜ͱΛ͍ͨ͠
22. Code Push (by Microsoft)
23. Visual Studio AppCenter Build JS & Deploy to AppCenter Native App JS Bundle Check New Ver. Download & Update JS Bundle
24. ίʔυͷมߋ఺ʢNativeଆʣ AppDelegate.m jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; AppDelegate.m #ifdef DEBUG jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; #else jsCodeLocation = [CodePush bundleURL]; #endif
25. CodePushҎલͷϦϦʔεखॱ • Native࣮૷ͷมߋΛ൐͏ϦϦʔε • NativeΞϓϦΛϏϧυ • ϓϥοτϑΥʔϜ΁Upload • ৹ࠪఏग़ • waiting • ϦϦʔε • JSͷΈͷมߋͷϦϦʔε • ಉࠨ
26. CodePushҎ߱ͷϦϦʔεखॱ • Native࣮૷ͷมߋΛ൐͏ϦϦʔε • NativeΞϓϦΛϏϧυ • ϓϥοτϑΥʔϜ΁Upload • ৹ࠪఏग़ • waiting • ϦϦʔε • ͬͪ͜͸ಉ͡ʂ • JSͷΈͷมߋͷϦϦʔε • JSΛϏϧυʢjsbundleʣ • AppCenter΁CLIͰupload • ͓ΘΓ • ৹ࠪͳ͠ʂ
27. JSͷΈͷมߋͬͯԿͩΖ͏͔ • JSଆόάमਖ਼ • UIͷมߋ • ը໘૿ • ϨΠΞ΢τมߋ • APIݺͼग़͠मਖ਼ • JSϥΠϒϥϦͷมߋɾ௥Ճ • Native࣮૷͕ແ͍΋ͷͰ͋Ε͹OK Native SDK React Native JS API Application & 3rd-party Lib React Native Bridge React Native Native Implementation Native Code
28. ߈ΊͷΞϓϩʔν • কདྷ࢖͍ͦ͏ͳNativeϥΠϒϥϦ͸
 ͋Β͔͡ΊΞϓϦʹಥͬࠐΜ্ͩͰϦϦʔε • ΧϝϥɺࣸਅɺPush௨஌ͳͲͳͲ • ඞཁʹͳͬͨ࣌఺ͰJS࣮૷ˠCodePushʂ • ʢAppleʹౖΒΕΔ͔΋ʁʣ
29. ໔੹ • ͨ·ʹϦδΣΫτ͞ΕΔͱ͔͞Εͳ͍ͱ͔