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
270
テレワークデイズ浜松2019発表 ソニックガーデン大野 / Telework Days Hamamatsu 2019
pi_chan
0
130
Other Decks in Programming
See All in Programming
イベントストーミングによるオブジェクトモデリング・オブジェクト指向プログラミングの適用・開発プロセスの変遷・アーキテクチャの変革 / Object modeling with Event Storming.
nrslib
12
2.3k
とにかくHTTP3をライトニングに話す / Anyway, I'll talk to Lightning about HTTP3.
seike460
PRO
0
120
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
370
DocC Tutorial と TCA におけるテスト機能の紹介
kalupas226
1
330
自動テスト実行結果の目的を整理する / Organizing objectives of automated test results
twada
PRO
10
2.1k
15分間でふんわり理解するDocker @ Matsuriba MAX
ukwhatn
PRO
1
330
孤独のCTOグルメという やや奇抜な企画をやった目的と効果
shoheimitani
3
1k
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
110
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
25
13k
PHPアプリケーションのスケーラビリティと 信頼性を革新する nginx+ngx_mrubyとGoの融合
pyama86
2
240
PHP 8.3で追加されたjson_validate()を徹底的に深掘りしてみよう
mashirou1234
1
720
プロンプトエンジニアリング入門
tomokusaba
2
960
Featured
See All Featured
Building Adaptive Systems
keathley
29
1.8k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
Fireside Chat
paigeccino
19
2.6k
YesSQL, Process and Tooling at Scale
rocio
160
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
The Invisible Customer
myddelton
114
12k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
Optimizing for Happiness
mojombo
369
69k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Mobile First: as difficult as doing things right
swwweet
215
8.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ʹౖΒΕΔ͔ʁʣ
໔ • ͨ·ʹϦδΣΫτ͞ΕΔͱ͔͞Εͳ͍ͱ͔