Roppongi.js #3 で発表しました。Microsoft の提供する React Native CodePush についてです。
©2018 Wantedly, Inc.React Native CodePushRoppongi.js #329.Mar.2018 - Yamada Yuki
View Slide
©2018 Wantedly, Inc.Yuki Yamada@yamadayukiI’m an Engineer @ WantedlyI write JS, Golang, Ruby … etc.Now I focus on Frontend Engineering at Feed squad.
©2018 Wantedly, Inc.React Native CodePush ͷΛ͠·͢
©2018 Wantedly, Inc.1. React Native / CodePush ͱ2. CodePush ͷಋೖഎܠɾํ๏3. CodePush ͷதͷͳ࣍͠
©2018 Wantedly, Inc.React Native / CodePush ͱ
©2018 Wantedly, Inc.React NativeReact Ͱهड़Ͱ͖Δ View ϥΠϒϥϦiOS / Android ͷදࣔͷ෦Λ React ͷදݱํ๏Λ͍͍ͬͯײ͡ʹهड़Ͱ͖ΔϥΠϒϥϦɻදࣔͷ෦͚ͩͰͳ͘ɺϩδοΫͷ෦JSͰهड़Ͱ͖ΔͷͰɺॏཁͳϏδωεϩδοΫͷ෦Λ iOS /Android ྆ํͰڞ௨ԽͰ͖Δ͜ͱ͕Մೳʹͳͬͨੌ͍ͭɻؤுΕΣϒͱͷڞ௨ԽՄೳɻ
©2018 Wantedly, Inc.CodePushReact Native ෦Λૉૣ͘ఏڙͰ͖ΔMicrosoft ͕ఏڙ͢Δ Visual Studio App Center ͷػೳͷҰͭɻReact Native Cordova ͷ JS ෦ΛϓϥοτϑΥʔϜͷ৹ࠪແ͠ͰมߋͰ͖ΔπʔϧɻReact Native ༻ͷ HOC ༻ҙ͞Ε͍ͯͯɺҰಋೖͯ͠ϨʔϧΛෑ͚ૉૣ͍ΠςϨʔγϣϯͰ։ൃΛਐΊΔ͜ͱ͕Ͱ͖Δͣɻ
©2018 Wantedly, Inc.CodePush ͷಋೖഎܠɾํ๏
©2018 Wantedly, Inc.CodePush ͷಋೖഎܠFeed νʔϜͱͯ͠ Wantedly ͷ iOS ΞϓϦʹ৽͍͠ػೳΛ࡞Γ͔ͨͬͨɻ-> Ͱ User Growth νʔϜผͷػೳ։ൃΛ͍ͯ͠ΔͷͰ iOS ΤϯδχΞ͕͍ͳ͍ɻ-> ͔͠৽͍͠ػೳ࣮ݧΛ͍Ζ͍Ζ͍͖͍ͯͨ͠ɻReact Native / CodePush ΛͬͨΒղܾͰ͖ͦ͏
©2018 Wantedly, Inc.CodePush ಋೖํ๏Πϯετʔϧ`yarn add react-native-code-push`ࠓճطଘΞϓϦʹಋೖ͢Δ͜ͱʹͳ͍ͬͯͨͷͰɺnode module ΛΠϯετʔϧͨ͠ͷͪɺCocoaPods Ͱཧ͢Δඞཁ͕͋ͬͨɻ
©2018 Wantedly, Inc.CodePush ಋೖํ๏codePush HOCCodePush appcenter ʹରͯ͠৽͍͠Ϗϧυ͕ଘࡏ͢Δ͔Λ֬ೝͯ͠ɺ͋ͬͨΒμϯϩʔυ͖͍͍ͯͯ͠λΠϛϯάͰ jsbundle ϑΝΠϧΛஔ͖͑ΔɻͦΕΛఏڙ͢ΔHOC ͰίϯϙʔωϯτΛ wrap͢Δɻ
©2018 Wantedly, Inc.CodePush ಋೖํ๏σϓϩΠappcenter CLI ΛͬͯσϓϩΠ͢ΔɻVisual Studio App Center ʹσϓϩΠͨ͠ΒɺCodePush Λಋೖͨ͠ React Native ΞϓϦ͕֬ೝͯ͠৽͍͠ίʔυΛऔಘ͢ΔΑ͏ʹͳ͍ͬͯΔ
©2018 Wantedly, Inc.CodePush ͷಋೖഎܠFeed νʔϜͱͯ͠ Wantedly ͷ iOS ΞϓϦʹ৽͍͠ػೳΛ࡞Γ͔ͨͬͨɻ-> Ͱ User Growth νʔϜผͷػೳ։ൃΛ͍ͯ͠ΔͷͰ iOS ΤϯδχΞ͕͍ͳ͍ɻ-> ͔͠৽͍͠ػೳ࣮ݧΛ͍Ζ͍Ζ͍͖͍ͯͨ͠ɻReact Native / CodePush ΛͬͨΒղܾͰ͖ͦ͏ -> ߦ͚ͦ͏
©2018 Wantedly, Inc.CodePush ͷதͷͳ͠
©2018 Wantedly, Inc.CodePush தͷͳ͠Ͳ͏ͬͯಈ͍ͯΔͷ͔https://github.com/Microsoft/react-native-code-push/blob/dea708813f14f1aba6d464f46e7a1883d1a491da/CodePush.jsΛಡΜͰΈΔ`codePushfy` ͱ `NativeCodePush` ͕ॏཁɻ
©2018 Wantedly, Inc.CodePush தͷͳ͠
©2018 Wantedly, Inc.CodePush தͷͳ͠NativeCodePushNative ͷ bridge ͕٧·ͬͨ moduleɻ`ios/CodePush/CodePush.m` ͱ͔ʹͦΕͧΕͷϓϥοτϑΥʔϜͷ࣮͕͋ΔɻͦΕ͕ ReactNative ͷ NativeModule ͱ͍͏ػೳͰ OS ͷڍಈΛJS ଆ͔ΒݺΔΑ͏ʹ expose ͞Ε͍ͯΔɻ࠷৽ͷϏϧυΛ֬ೝ͢Δͱ͖ͱ͔ʹར༻͞ΕΔɻ
©2018 Wantedly, Inc.NativeCodePush ͷதJS͡Όͳ͍ͷͰͳ͠·ͤΜ Feed ʹϒϩάΛॻ͖·͢ɻCodePush தͷͳ͠
©2018 Wantedly, Inc.·ͱΊWebΤϯδχΞͰ CodePush ͷಋೖͳΜͱ͔Ͱ͖ͨCodePush ӡ༻͑͞Ͱ͖Ε͍͍πʔϧʹͳΔReact Native Λͬͯૉૣ࣮͘ݧΛ͢Δ͕Ͱ͖ͨ
©2018 Wantedly, Inc.Enjoy