React Native CodePush in Wantedly

Roppongi.js #3 で発表しました。Microsoft の提供する React Native CodePush についてです。

Transcript

1. ©2018 Wantedly, Inc. React Native CodePush Roppongi.js #3 29.Mar.2018 - Yamada Yuki
2. ©2018 Wantedly, Inc. Yuki Yamada @yamadayuki I’m an Engineer @ Wantedly I write JS, Golang, Ruby … etc. Now I focus on Frontend Engineering at Feed squad.
3. ©2018 Wantedly, Inc. React Native CodePush ͷ࿩Λ͠·͢
4. ©2018 Wantedly, Inc. 1. React Native / CodePush ͱ͸ 2. CodePush ͷಋೖഎܠɾํ๏ 3. CodePush ͷத਎ͷ͸ͳ͠ ໨࣍
5. ©2018 Wantedly, Inc. React Native / CodePush ͱ͸
6. ©2018 Wantedly, Inc. React Native React Ͱهड़Ͱ͖Δ View ϥΠϒϥϦ iOS / Android ͷදࣔͷ෦෼Λ React ͷදݱํ๏Λ ࢖͍͍ͬͯײ͡ʹهड़Ͱ͖ΔϥΠϒϥϦɻදࣔͷ෦ ෼͚ͩͰ͸ͳ͘ɺϩδοΫͷ෦෼΋JSͰهड़Ͱ͖Δ ͷͰɺॏཁͳϏδωεϩδοΫͷ෦෼Λ iOS / Android ྆ํͰڞ௨ԽͰ͖Δ͜ͱ͕Մೳʹͳͬͨੌ ͍΍ͭɻؤுΕ͹΢Σϒͱͷڞ௨Խ΋Մೳɻ
7. ©2018 Wantedly, Inc. CodePush React Native ෦෼Λૉૣ͘ఏڙͰ͖Δ Microsoft ͕ఏڙ͢Δ Visual Studio App Center ͷ ػೳͷҰͭɻReact Native ΍ Cordova ͷ JS ෦෼ ΛϓϥοτϑΥʔϜͷ৹ࠪແ͠ͰมߋͰ͖Δπʔϧɻ React Native ༻ͷ HOC ΋༻ҙ͞Ε͍ͯͯɺҰ౓ಋ ೖͯ͠ϨʔϧΛෑ͚͹ૉૣ͍ΠςϨʔγϣϯͰ։ൃ ΛਐΊΔ͜ͱ͕Ͱ͖Δ͸ͣɻ
8. ©2018 Wantedly, Inc. CodePush ͷಋೖഎܠɾํ๏
9. ©2018 Wantedly, Inc. CodePush ͷಋೖഎܠ Feed νʔϜͱͯ͠ Wantedly ͷ iOS ΞϓϦʹ৽͍͠ػೳΛ࡞Γ͔ͨͬͨɻ -> Ͱ΋ User Growth νʔϜ͸ผͷػೳ։ൃΛ͍ͯ͠ΔͷͰ iOS ΤϯδχΞ͕͍ͳ͍ɻ -> ͔͠΋৽͍͠ػೳ͸࣮ݧΛ͍Ζ͍Ζ͍͖͍ͯͨ͠ɻ React Native / CodePush Λ࢖ͬͨΒղܾͰ͖ͦ͏
10. ©2018 Wantedly, Inc. CodePush ಋೖํ๏ Πϯετʔϧ `yarn add react-native-code-push` ࠓճ͸طଘΞϓϦʹಋೖ͢Δ͜ͱʹͳ͍ͬͯͨͷͰɺ node module ΛΠϯετʔϧͨ͠ͷͪɺ CocoaPods Ͱ΋؅ཧ͢Δඞཁ͕͋ͬͨɻ
11. ©2018 Wantedly, Inc. CodePush ಋೖํ๏ codePush HOC CodePush ͸ appcenter ʹରͯ͠৽͍͠Ϗϧυ͕ ଘࡏ͢Δ͔Λ֬ೝͯ͠ɺ͋ͬͨΒμ΢ϯϩʔυ͖ͯ͠ ͍͍ͯλΠϛϯάͰ jsbundle ϑΝΠϧΛஔ͖׵͑ ΔɻͦΕΛఏڙ͢Δ
    HOC ͰίϯϙʔωϯτΛ wrap ͢Δɻ
12. ©2018 Wantedly, Inc. CodePush ಋೖํ๏ σϓϩΠ appcenter CLI Λ࢖ͬͯσϓϩΠ͢Δɻ Visual Studio App Center ʹσϓϩΠͨ͠Βɺ CodePush Λಋೖͨ͠ React Native ΞϓϦ͕֬ೝ ͯ͠৽͍͠ίʔυΛऔಘ͢ΔΑ͏ʹͳ͍ͬͯΔ
13. ©2018 Wantedly, Inc. CodePush ͷಋೖഎܠ Feed νʔϜͱͯ͠ Wantedly ͷ iOS ΞϓϦʹ৽͍͠ػೳΛ࡞Γ͔ͨͬͨɻ -> Ͱ΋ User Growth νʔϜ͸ผͷػೳ։ൃΛ͍ͯ͠ΔͷͰ iOS ΤϯδχΞ͕͍ͳ͍ɻ -> ͔͠΋৽͍͠ػೳ͸࣮ݧΛ͍Ζ͍Ζ͍͖͍ͯͨ͠ɻ React Native / CodePush Λ࢖ͬͨΒղܾͰ͖ͦ͏ -> ߦ͚ͦ͏
    
14. ©2018 Wantedly, Inc. CodePush ͷத਎ͷ͸ͳ͠
15. ©2018 Wantedly, Inc. CodePush த਎ͷ͸ͳ͠ Ͳ͏΍ͬͯಈ͍ͯΔͷ͔ https://github.com/Microsoft/react-native- code-push/blob/ dea708813f14f1aba6d464f46e7a1883d1a491da/ CodePush.js ΛಡΜͰΈΔ
    `codePushfy` ͱ `NativeCodePush` ͕ॏཁɻ
16. ©2018 Wantedly, Inc. CodePush த਎ͷ͸ͳ͠
17. ©2018 Wantedly, Inc. CodePush த਎ͷ͸ͳ͠
18. ©2018 Wantedly, Inc. CodePush த਎ͷ͸ͳ͠
19. ©2018 Wantedly, Inc. CodePush த਎ͷ͸ͳ͠
20. ©2018 Wantedly, Inc. CodePush த਎ͷ͸ͳ͠
21. ©2018 Wantedly, Inc. CodePush த਎ͷ͸ͳ͠ NativeCodePush Native ͷ bridge ͕٧·ͬͨ moduleɻ `ios/CodePush/CodePush.m` ͱ͔ʹͦΕͧΕ ͷϓϥοτϑΥʔϜͷ࣮૷͕͋ΔɻͦΕ͕ React Native ͷ NativeModule ͱ͍͏ػೳͰ OS ͷڍ ಈΛ
    JS ଆ͔Βݺ΂ΔΑ͏ʹ expose ͞Ε͍ͯΔɻ
    ࠷৽ͷϏϧυΛ֬ೝ͢Δͱ͖ͱ͔ʹར༻͞ΕΔɻ
22. ©2018 Wantedly, Inc. NativeCodePush ͷத਎͸ JS͡Όͳ͍ͷͰ͸ͳ͠·ͤΜ Feed ʹϒϩάΛॻ͖·͢ɻ CodePush த਎ͷ͸ͳ͠
23. ©2018 Wantedly, Inc. ·ͱΊ WebΤϯδχΞͰ΋ CodePush ͷಋೖ͸ͳΜͱ͔Ͱ͖ͨ CodePush ͸ӡ༻͑͞Ͱ͖Ε͹͍͍πʔϧʹͳΔ
    React Native Λ࢖ͬͯૉૣ࣮͘ݧΛ͢Δ౔୆͕Ͱ͖ͨ
24. ©2018 Wantedly, Inc. Enjoy