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
   

   View Slide

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.
   

   View Slide

3. ©2018 Wantedly, Inc.
   React Native CodePush ͷ࿩Λ͠·͢
   

   View Slide

4. ©2018 Wantedly, Inc.
   1. React Native / CodePush ͱ͸
   2. CodePush ͷಋೖഎܠɾํ๏
   3. CodePush ͷத਎ͷ͸ͳ͠
   ໨࣍
   

   View Slide

5. ©2018 Wantedly, Inc.
   React Native / CodePush ͱ͸
   

   View Slide

6. ©2018 Wantedly, Inc.
   React Native
   React Ͱهड़Ͱ͖Δ View ϥΠϒϥϦ
   iOS / Android ͷදࣔͷ෦෼Λ React ͷදݱํ๏Λ
   ࢖͍͍ͬͯײ͡ʹهड़Ͱ͖ΔϥΠϒϥϦɻදࣔͷ෦
   ෼͚ͩͰ͸ͳ͘ɺϩδοΫͷ෦෼΋JSͰهड़Ͱ͖Δ
   ͷͰɺॏཁͳϏδωεϩδοΫͷ෦෼Λ iOS /
   Android ྆ํͰڞ௨ԽͰ͖Δ͜ͱ͕Մೳʹͳͬͨੌ
   ͍΍ͭɻؤுΕ͹΢Σϒͱͷڞ௨Խ΋Մೳɻ
   

   View Slide

7. ©2018 Wantedly, Inc.
   CodePush
   React Native ෦෼Λૉૣ͘ఏڙͰ͖Δ
   Microsoft ͕ఏڙ͢Δ Visual Studio App Center ͷ
   ػೳͷҰͭɻReact Native ΍ Cordova ͷ JS ෦෼
   ΛϓϥοτϑΥʔϜͷ৹ࠪແ͠ͰมߋͰ͖Δπʔϧɻ
   React Native ༻ͷ HOC ΋༻ҙ͞Ε͍ͯͯɺҰ౓ಋ
   ೖͯ͠ϨʔϧΛෑ͚͹ૉૣ͍ΠςϨʔγϣϯͰ։ൃ
   ΛਐΊΔ͜ͱ͕Ͱ͖Δ͸ͣɻ
   

   View Slide

8. ©2018 Wantedly, Inc.
   CodePush ͷಋೖഎܠɾํ๏
   

   View Slide

9. ©2018 Wantedly, Inc.
   CodePush ͷಋೖഎܠ
   Feed νʔϜͱͯ͠ Wantedly ͷ iOS ΞϓϦʹ৽͍͠ػೳΛ࡞Γ͔ͨͬͨɻ
   -> Ͱ΋ User Growth νʔϜ͸ผͷػೳ։ൃΛ͍ͯ͠ΔͷͰ iOS ΤϯδχΞ͕͍ͳ͍ɻ
   -> ͔͠΋৽͍͠ػೳ͸࣮ݧΛ͍Ζ͍Ζ͍͖͍ͯͨ͠ɻ
   React Native / CodePush Λ࢖ͬͨΒղܾͰ͖ͦ͏
   

   View Slide

10. ©2018 Wantedly, Inc.
    CodePush ಋೖํ๏
    Πϯετʔϧ
    `yarn add react-native-code-push`
    ࠓճ͸طଘΞϓϦʹಋೖ͢Δ͜ͱʹͳ͍ͬͯͨͷͰɺ
    node module ΛΠϯετʔϧͨ͠ͷͪɺ
    CocoaPods Ͱ΋؅ཧ͢Δඞཁ͕͋ͬͨɻ
    

    View Slide

11. ©2018 Wantedly, Inc.
    CodePush ಋೖํ๏
    codePush HOC
    CodePush ͸ appcenter ʹରͯ͠৽͍͠Ϗϧυ͕
    ଘࡏ͢Δ͔Λ֬ೝͯ͠ɺ͋ͬͨΒμ΢ϯϩʔυ͖ͯ͠
    ͍͍ͯλΠϛϯάͰ jsbundle ϑΝΠϧΛஔ͖׵͑
    ΔɻͦΕΛఏڙ͢ΔHOC ͰίϯϙʔωϯτΛ wrap
    ͢Δɻ
    

    View Slide

12. ©2018 Wantedly, Inc.
    CodePush ಋೖํ๏
    σϓϩΠ
    appcenter CLI Λ࢖ͬͯσϓϩΠ͢Δɻ
    Visual Studio App Center ʹσϓϩΠͨ͠Βɺ
    CodePush Λಋೖͨ͠ React Native ΞϓϦ͕֬ೝ
    ͯ͠৽͍͠ίʔυΛऔಘ͢ΔΑ͏ʹͳ͍ͬͯΔ
    

    View Slide

13. ©2018 Wantedly, Inc.
    CodePush ͷಋೖഎܠ
    Feed νʔϜͱͯ͠ Wantedly ͷ iOS ΞϓϦʹ৽͍͠ػೳΛ࡞Γ͔ͨͬͨɻ
    -> Ͱ΋ User Growth νʔϜ͸ผͷػೳ։ൃΛ͍ͯ͠ΔͷͰ iOS ΤϯδχΞ͕͍ͳ͍ɻ
    -> ͔͠΋৽͍͠ػೳ͸࣮ݧΛ͍Ζ͍Ζ͍͖͍ͯͨ͠ɻ
    React Native / CodePush Λ࢖ͬͨΒղܾͰ͖ͦ͏
    -> ߦ͚ͦ͏
    

    View Slide

14. ©2018 Wantedly, Inc.
    CodePush ͷத਎ͷ͸ͳ͠
    

    View Slide

15. ©2018 Wantedly, Inc.
    CodePush த਎ͷ͸ͳ͠
    Ͳ͏΍ͬͯಈ͍ͯΔͷ͔
    https://github.com/Microsoft/react-native-
    code-push/blob/
    dea708813f14f1aba6d464f46e7a1883d1a491da/
    CodePush.js
    ΛಡΜͰΈΔ
    `codePushfy` ͱ `NativeCodePush` ͕ॏཁɻ
    

    View Slide

16. ©2018 Wantedly, Inc.
    CodePush த਎ͷ͸ͳ͠
    

    View Slide

17. ©2018 Wantedly, Inc.
    CodePush த਎ͷ͸ͳ͠
    

    View Slide

18. ©2018 Wantedly, Inc.
    CodePush த਎ͷ͸ͳ͠
    

    View Slide

19. ©2018 Wantedly, Inc.
    CodePush த਎ͷ͸ͳ͠
    

    View Slide

20. ©2018 Wantedly, Inc.
    CodePush த਎ͷ͸ͳ͠
    

    View Slide

21. ©2018 Wantedly, Inc.
    CodePush த਎ͷ͸ͳ͠
    NativeCodePush
    Native ͷ bridge ͕٧·ͬͨ moduleɻ
    `ios/CodePush/CodePush.m` ͱ͔ʹͦΕͧΕ
    ͷϓϥοτϑΥʔϜͷ࣮૷͕͋ΔɻͦΕ͕ React
    Native ͷ NativeModule ͱ͍͏ػೳͰ OS ͷڍ
    ಈΛJS ଆ͔Βݺ΂ΔΑ͏ʹ expose ͞Ε͍ͯΔɻ
    ࠷৽ͷϏϧυΛ֬ೝ͢Δͱ͖ͱ͔ʹར༻͞ΕΔɻ
    

    View Slide

22. ©2018 Wantedly, Inc.
    NativeCodePush ͷத਎͸
    JS͡Όͳ͍ͷͰ͸ͳ͠·ͤΜ
    Feed ʹϒϩάΛॻ͖·͢ɻ
    CodePush த਎ͷ͸ͳ͠
    

    View Slide

23. ©2018 Wantedly, Inc.
    ·ͱΊ
    WebΤϯδχΞͰ΋ CodePush ͷಋೖ͸ͳΜͱ͔Ͱ͖ͨ
    CodePush ͸ӡ༻͑͞Ͱ͖Ε͹͍͍πʔϧʹͳΔ
    React Native Λ࢖ͬͯૉૣ࣮͘ݧΛ͢Δ౔୆͕Ͱ͖ͨ
    

    View Slide

24. ©2018 Wantedly, Inc.
    Enjoy
    

    View Slide