React Native CodePush in Wantedly

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