Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native CodePush in Wantedly
Search
Yuki YAMADA
May 29, 2018
Technology
1
950
React Native CodePush in Wantedly
Roppongi.js #3 で発表しました。Microsoft の提供する React Native CodePush についてです。
Yuki YAMADA
May 29, 2018
Tweet
Share
More Decks by Yuki YAMADA
See All by Yuki YAMADA
Frontend Engineering at Wantedly
yamadayuki
4
34k
Actor Model in Reason
yamadayuki
0
1.1k
React with Reason
yamadayuki
1
610
Wantedlyの新卒研修
yamadayuki
1
3.1k
Introduction to Flow
yamadayuki
0
420
Other Decks in Technology
See All in Technology
Developer Productivity is Waste
cote
PRO
0
110
20240619 PLATEAU LT 06 Babylon.jsとPLATEAU
limes2018
0
380
Fintech事業部流・爆速開発
layerx
PRO
0
130
アウトプット エンジニアリング 〜 インプット偏重から脱却して飛躍するための発想 /20240621-AWS-Summit-hatano-output
opelab
5
390
OpenTelemetry Meetup 2024-06 - ABEMA と分散トレーシングのあゆみ
tetsuya28
0
190
Oracle Modern Data Platform Reference Architecture (Autonomous Data Warehouse編)
oracle4engineer
PRO
0
480
CentOS 7サポート終了直前!次はどうする?
koedoyoshida
1
100
カード発行会社(イシュア)を 支えるシステム解説
yutadayo
0
160
ベイジアンABテストってありなの? / Is Bayesian AB Testing Truly Effective?
ak_iyama
1
390
Columinity (旧Scrum Team Survey) を使ってチームの継続的な改善活動を始めよう / Scrum Fest Osaka 2024
ama_ch
1
120
iPaaS入門&自社サービスで利用してみた
ippei2480
0
140
WebサーバーとPHP実行方式を きちんと理解してPHPランタイムを 適切に使い分ける - PHPカンファレンス福岡2024
ysknsid25
2
120
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
505
110k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
7.1k
Six Lessons from altMBA
skipperchong
22
3.2k
Done Done
chrislema
178
15k
Design by the Numbers
sachag
276
18k
Agile that works and the tools we love
rasmusluckow
325
20k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
The Invisible Customer
myddelton
115
12k
Side Projects
sachag
451
41k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
359
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Transcript
©2018 Wantedly, Inc. React Native CodePush Roppongi.js #3 29.Mar.2018 -
Yamada Yuki
©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.
©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 Native React Ͱهड़Ͱ͖Δ View ϥΠϒϥϦ iOS
/ Android ͷදࣔͷ෦Λ React ͷදݱํ๏Λ ͍͍ͬͯײ͡ʹهड़Ͱ͖ΔϥΠϒϥϦɻදࣔͷ෦ ͚ͩͰͳ͘ɺϩδοΫͷ෦JSͰهड़Ͱ͖Δ ͷͰɺॏཁͳϏδωεϩδοΫͷ෦Λ iOS / Android ྆ํͰڞ௨ԽͰ͖Δ͜ͱ͕Մೳʹͳͬͨੌ ͍ͭɻؤுΕΣϒͱͷڞ௨ԽՄೳɻ
©2018 Wantedly, Inc. CodePush React 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 HOC CodePush 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 தͷͳ͠
©2018 Wantedly, Inc. CodePush தͷͳ͠
©2018 Wantedly, Inc. CodePush தͷͳ͠
©2018 Wantedly, Inc. CodePush தͷͳ͠
©2018 Wantedly, Inc. CodePush தͷͳ͠ NativeCodePush Native ͷ bridge ͕٧·ͬͨ
moduleɻ `ios/CodePush/CodePush.m` ͱ͔ʹͦΕͧΕ ͷϓϥοτϑΥʔϜͷ࣮͕͋ΔɻͦΕ͕ React Native ͷ NativeModule ͱ͍͏ػೳͰ OS ͷڍ ಈΛJS ଆ͔ΒݺΔΑ͏ʹ expose ͞Ε͍ͯΔɻ ࠷৽ͷϏϧυΛ֬ೝ͢Δͱ͖ͱ͔ʹར༻͞ΕΔɻ
©2018 Wantedly, Inc. NativeCodePush ͷத JS͡Όͳ͍ͷͰͳ͠·ͤΜ Feed ʹϒϩάΛॻ͖·͢ɻ CodePush தͷͳ͠
©2018 Wantedly, Inc. ·ͱΊ WebΤϯδχΞͰ CodePush ͷಋೖͳΜͱ͔Ͱ͖ͨ CodePush ӡ༻͑͞Ͱ͖Ε͍͍πʔϧʹͳΔ React
Native Λͬͯૉૣ࣮͘ݧΛ͢Δ͕Ͱ͖ͨ
©2018 Wantedly, Inc. Enjoy