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でアプリのアップデートが楽になる話
Search
Hiromasa Ohno
July 14, 2018
Programming
0
460
React Nativeでアプリのアップデートが楽になる話
SonicGarden Tech #2で話したときに使ったスライドです。
Hiromasa Ohno
July 14, 2018
Tweet
Share
More Decks by Hiromasa Ohno
See All by Hiromasa Ohno
「React Nativeで自社サービスのiOS/Androidアプリをリプレイスした話」 から2年経った今何を思うのか/techplay-mobile-cross-platform-lt-2020-07-15
pi_chan
1
290
テレワークデイズ浜松2019発表 ソニックガーデン大野 / Telework Days Hamamatsu 2019
pi_chan
0
140
Other Decks in Programming
See All in Programming
Open source software: how to live long and go far
gaelvaroquaux
0
630
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
320
CI改善もDatadogとともに
taumu
0
110
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
120
Introduction to kotlinx.rpc
arawn
0
670
CNCF Project の作者が考えている OSS の運営
utam0k
6
710
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
340
Writing documentation can be fun with plugin system
okuramasafumi
0
120
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
870
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
240
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
670
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Scaling GitHub
holman
459
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Designing for Performance
lara
604
68k
Site-Speed That Sticks
csswizardry
3
370
It's Worth the Effort
3n
184
28k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Building Your Own Lightsaber
phodgson
104
6.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Designing Experiences People Love
moore
139
23k
Typedesign – Prime Four
hannesfritz
40
2.5k
Transcript
SonicGarden Tech #2 in Hamamatsu
ࣗݾհ • Hiromasa Ohno • aka @pi-chan || @pi_cha_n •
ιχοΫΨʔσϯ • দੜ·Εদҭͪ • ۠ࡏॅ • Rails / iOS / React Native Λੜۀ
ࠓͷςʔϚ
React NativeͰ ΞϓϦͷΞοϓσʔτ͕ ָʹͳΔ
NativeΞϓϦͷϦϦʔε • Ϗϧυ + Ξοϓϩʔυʹ͕͔͔࣌ؒΔ • ৹ࠪʹ͕͔͔࣌ؒΔ • ϨϏϡϫʔʹΑͬͯٸʹϦδΣΫτ͞ΕΔ •
ʢ͍͍ͩͨiOSͷ͔ʣ • ͪΐͬͱ͚ͩ͢ϋʔυϧ͕ߴ͘ͳΔ͠ɺ ຌϛεͰόάͬͨͱ͖ʹ͙͢ʹͤͳ͍͠ɺࠔΔ
React NativeͳΒ Javascriptͷमਖ਼ΛNo৹ࠪͰϦϦʔε
Native App URL ref JS Bundle RNΞϓϦͷ࣮ମ • ϝΠϯͷίʔυJS •
ωΠςΟϒԼճΓ • ωΠςΟϒͱJS͕ಠཱ • JSϑΝΠϧΛURLͰࢀর
৹ࠪͳ͠ͷϧʔτ Native App URL ref JS Bundle JS Bundle
࠷ˍߴ
ৄࡉͳ
RNΞϓϦͷߏʢ֓ཁʣ ※ Bridge ͜ͷͰ྆ऀΛͭͳ͙ͷͱ͍͏ఔͷҙຯ
RNΞϓϦͷߏʢৄࡉʣ
RNΞϓϦͷϏϧυϓϩηε
RNΞϓϦͷϦϦʔεϏϧυᶃ • JSΛϏϧυˠ main.jsbundle
RNΞϓϦͷϦϦʔεϏϧυᶄ • ωΠςΟϒΞϓϦ෦ͷϏϧυ • ᶃͷJS bundleΛಉࠝ
RNΞϓϦͷϦϦʔεϏϧυᶅ • ࠷৽ͷJSΛؚΜͩঢ়ଶͰϏϧυ • ͋ͱ௨ৗͷΞϓϦΞοϓσʔτͱಉ͡ • ී௨ʹΔͱπϥ͞มΘΒͳ͍ Native App URL
ref JS Bundle
͜ͷ෦ JS Bundle
Native App URL ref JS Bundle RNΞϓϦͷ࣮ମ
RNΞϓϦͷ࣮ମ AppDelegate.m jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; RCTBundleURLProvider.m resourceName
= resourceName ?: @"main"; [[NSBundle mainBundle] URLForResource:resourceName withExtension:@"jsbundle"];
JSΛಈతʹஔ͖͑Ε ྑ͍ͷͰ…ʁ Native App JS Bundle Another JS Bundle
ಈతʹஔ͖͑Δͱ • Ͳ͔͜ͷαʔόʔʹJSΛஔ • ΞϓϦىಈ࣌ʹνΣοΫ • ࠷৽͕͋Εμϯϩʔυ • Έ͍ͨͳ͜ͱΛ͍ͨ͠
Code Push (by Microsoft)
Visual Studio AppCenter Build JS & Deploy to AppCenter Native
App JS Bundle Check New Ver. Download & Update JS Bundle
ίʔυͷมߋʢNativeଆʣ AppDelegate.m jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; AppDelegate.m #ifdef
DEBUG jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; #else jsCodeLocation = [CodePush bundleURL]; #endif
CodePushҎલͷϦϦʔεखॱ • Native࣮ͷมߋΛ͏ϦϦʔε • NativeΞϓϦΛϏϧυ • ϓϥοτϑΥʔϜUpload • ৹ࠪఏग़ •
waiting • ϦϦʔε • JSͷΈͷมߋͷϦϦʔε • ಉࠨ
CodePushҎ߱ͷϦϦʔεखॱ • Native࣮ͷมߋΛ͏ϦϦʔε • NativeΞϓϦΛϏϧυ • ϓϥοτϑΥʔϜUpload • ৹ࠪఏग़ •
waiting • ϦϦʔε • ͬͪ͜ಉ͡ʂ • JSͷΈͷมߋͷϦϦʔε • JSΛϏϧυʢjsbundleʣ • AppCenterCLIͰupload • ͓ΘΓ • ৹ࠪͳ͠ʂ
JSͷΈͷมߋͬͯԿͩΖ͏͔ • JSଆόάमਖ਼ • UIͷมߋ • ը໘૿ • ϨΠΞτมߋ •
APIݺͼग़͠मਖ਼ • JSϥΠϒϥϦͷมߋɾՃ • Native࣮͕ແ͍ͷͰ͋ΕOK Native SDK React Native JS API Application & 3rd-party Lib React Native Bridge React Native Native Implementation Native Code
߈ΊͷΞϓϩʔν • কདྷ͍ͦ͏ͳNativeϥΠϒϥϦ ͋Β͔͡ΊΞϓϦʹಥͬࠐΜ্ͩͰϦϦʔε • ΧϝϥɺࣸਅɺPush௨ͳͲͳͲ • ඞཁʹͳͬͨ࣌ͰJS࣮ˠCodePushʂ • ʢAppleʹౖΒΕΔ͔ʁʣ
໔ • ͨ·ʹϦδΣΫτ͞ΕΔͱ͔͞Εͳ͍ͱ͔