React Native CodePush in Wantedly

React Native CodePush in Wantedly

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

Febd813a64ed871a144f4947d57ba156?s=128

Yuki YAMADA

May 29, 2018
Tweet

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