$30 off During Our Annual Pro Sale. View Details »

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.
    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