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
Domain-Driven Transformation
hschwentner
2
1.9k
テストをしないQAエンジニアは何をしているか?
nealle
0
130
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
180
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
Featured
See All Featured
Designing for Performance
lara
604
68k
The Pragmatic Product Professional
lauravandoore
32
6.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Docker and Python
trallard
44
3.3k
Git: the NoSQL Database
bkeepers
PRO
427
64k
How STYLIGHT went responsive
nonsquared
98
5.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Optimizing for Happiness
mojombo
376
70k
Designing Experiences People Love
moore
139
23k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
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ʹౖΒΕΔ͔ʁʣ
໔ • ͨ·ʹϦδΣΫτ͞ΕΔͱ͔͞Εͳ͍ͱ͔