Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native CodePush in Wantedly

React Native CodePush in Wantedly

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

Yuki YAMADA

May 29, 2018
Tweet

More Decks by Yuki YAMADA

Other Decks in Technology

Transcript

  1. ©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.
  2. ©2018 Wantedly, Inc. 1. React Native / CodePush ͱ͸ 2.

    CodePush ͷಋೖഎܠɾํ๏ 3. CodePush ͷத਎ͷ͸ͳ͠ ໨࣍
  3. ©2018 Wantedly, Inc. React Native React Ͱهड़Ͱ͖Δ View ϥΠϒϥϦ iOS

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

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

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

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

    Studio App Center ʹσϓϩΠͨ͠Βɺ CodePush Λಋೖͨ͠ React Native ΞϓϦ͕֬ೝ ͯ͠৽͍͠ίʔυΛऔಘ͢ΔΑ͏ʹͳ͍ͬͯΔ
  8. ©2018 Wantedly, Inc. CodePush ͷಋೖഎܠ Feed νʔϜͱͯ͠ Wantedly ͷ iOS

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

    moduleɻ `ios/CodePush/CodePush.m` ͱ͔ʹͦΕͧΕ ͷϓϥοτϑΥʔϜͷ࣮૷͕͋ΔɻͦΕ͕ React Native ͷ NativeModule ͱ͍͏ػೳͰ OS ͷڍ ಈΛJS ଆ͔Βݺ΂ΔΑ͏ʹ expose ͞Ε͍ͯΔɻ ࠷৽ͷϏϧυΛ֬ೝ͢Δͱ͖ͱ͔ʹར༻͞ΕΔɻ