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
1.1k
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
5
38k
Actor Model in Reason
yamadayuki
0
1.2k
React with Reason
yamadayuki
1
700
Wantedlyの新卒研修
yamadayuki
1
3.5k
Introduction to Flow
yamadayuki
0
490
Other Decks in Technology
See All in Technology
Reflections of AI: A Trilogy in Four Parts (GOTO; Copenhagen 2025)
ondfisk
0
110
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
160
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.9k
自動テストのコストと向き合ってみた
qa
1
220
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.2k
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
100
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.2k
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
630
実装で解き明かす並行処理の歴史
zozotech
PRO
1
700
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
210
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
79k
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
2
230
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Unsuck your backbone
ammeep
671
58k
A better future with KSS
kneath
239
18k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Music & Morning Musume
bryan
46
6.8k
For a Future-Friendly Web
brad_frost
180
9.9k
A designer walks into a library…
pauljervisheath
209
24k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
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