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 Beyond Prototype
Search
Seiji Takahashi
September 18, 2018
Programming
2
1.6k
React Native Beyond Prototype
The presentation slides at Roppongi.js #6
Seiji Takahashi
September 18, 2018
Tweet
Share
More Decks by Seiji Takahashi
See All by Seiji Takahashi
Go Backends for frontends with GraphQL and gRPC
timakin
6
3.8k
Design Pattern for Image and Text Composition in Go
timakin
5
6.5k
Golang API Testing the HARD way
timakin
13
6.4k
Head First Golang Image Package
timakin
2
10k
Performance Optimization on Google AppEngine
timakin
5
6.2k
testcache.pdf
timakin
1
130
How Go cache
timakin
1
68
How Go cache tests
timakin
1
3k
A/Bテスト機構がもたらす 大胆な開発体制及び ゆるやかなアプリ体験の変化 / Architecture and benefits of AB-test allocation system.
timakin
4
7.6k
Other Decks in Programming
See All in Programming
AWS re:Invent 2024個人的まとめ
satoshi256kbyte
0
100
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
360
はてなにおけるfujiwara-wareの活用やecspressoのCI/CD構成 / Fujiwara Tech Conference 2025
cohalz
3
2.7k
混沌とした例外処理とエラー監視に秩序をもたらす
morihirok
13
2.2k
Внедряем бюджетирование, или Как сделать хорошо?
lamodatech
0
940
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
420
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
1.2k
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.4k
20241217 競争力強化とビジネス価値創出への挑戦:モノタロウのシステムモダナイズ、開発組織の進化と今後の展望
monotaro
PRO
0
280
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう?知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.7k
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
430
Flatt Security XSS Challenge 解答・解説
flatt_security
0
730
Featured
See All Featured
Unsuck your backbone
ammeep
669
57k
How STYLIGHT went responsive
nonsquared
96
5.3k
RailsConf 2023
tenderlove
29
970
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Become a Pro
speakerdeck
PRO
26
5.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
3
180
Speed Design
sergeychernyshev
25
740
Adopting Sorbet at Scale
ufuk
74
9.2k
Designing Experiences People Love
moore
139
23k
Transcript
React Native beyond Prototype Roppongi.js #6 Seiji Takahashi |
@__timakin__
Seiji Takahashi 所属:Gunosy, Inc. メディア事業本部 ⾔語:Go, JavaScript(React), Swift etc timakin
@__timakin__ __timakin__
None
None
ΞδΣϯμ ʼ3FBDU/BUJWFຊ൪ӡ༻ʹର͢Δݟํ ʼͲΜͳػೳͰෆ҆ʹͳΓ͍͔͢ͱɺ֤࣮ํ๏
3FBDU/BUJWFຊ൪ӡ༻ʹର͢Δݟํ@
ʮReact Native͍·ͤΜ͔ʁʯ
React Nativeͷݟํ w ϓϩτλΠϓɾݸਓϓϩμΫτʹ͍͍͔͠Εͳ͍͚Ͳ ۀͰʜ w 3FBDUͷֶशίετɺϝϯςφϯείετ w ωΠςΟϒͰ͔࣮͠ݱͰ͖ͳ͍ػೳ͕ग़͖ͯͨΒʁ w
·ͩະख़ͷίϛϡχςΟͰɺϥΠϒϥϦἧͬͯͳ͍ͷ Ͱʁ
気持ちはわかる。 (´・_・`)
? で も A i r b n b と
か F a c e b o o k が 本 番 採 用 し て た の に 、 い ま さ ら プ ロ ト タ イ プ で し か 採 用 で き な い と 考 え る の は ち ょ っ と 違 う の で は ?
「プロトタイプ」と本番運⽤の境⽬ • 中⻑期的に、ユーザーの要求に応じて柔軟に機能を追加・ 削除できるか(メンテナンス) • ⼩規模では可能だが、⼤規模・複雑な要件だと開発不可能 な機能がないか(技術的な天井) • 学習コストを加味した上で、⼈員追加は容易か(採⽤⾯)
「プロトタイプ」と本番運⽤の境⽬ • メンテナンス • React Native⾃体のバージョン上げとかはきついけど、基本問題なし • JSとしてのメンテナンスコストはある。(コンポーネントが細分化されてな いとか) •
技術的な天井 • リアルタイム通信、ARKitとかそのあたりはネイティブとのブリッジが発⽣し てちょっと渋い • 採⽤⾯ • ネイティブ経験者なら1週間あればできる(てかそのくらいやりましょう)
「プロトタイプ」と本番運⽤の境⽬ • メンテナンス • React Native⾃体のバージョン上げとかはきついけど、基本問題なし • JSとしてのメンテナンスコストはある。 (コンポーネントが細分化されてないとか) •
技術的な天井 • リアルタイム通信、ARKitとかそのあたりはネイティブとのブリッジが発⽣して ちょっと渋い • 採⽤⾯ • ネイティブ経験者なら1週間あればできる(てかそのくらいやりましょう)
ͲΜͳػೳͰෆ҆ʹͳΓ͍͔͢@
本番のプロダクトで必要になってくる要件 • UIの機微 • プッシュ通知対応 • ディープリンク対応 • 課⾦処理 とか、ちょっと⼀歩踏み込んだ機能は、⼤変なのでは?という不安があった。
(結果、⼤丈夫だった。)
前提条件 • 開発環境 • スタックはTypeScript, MobX • デプロイはFastlane • Expoは動画周りとか課⾦周りとか、ちょっとネイティブモジュール絡んでき
そうで不安だったので利⽤せず。 • スキルセット • もともとSwift経験あり。Kotlinとかは皆無。 • Reactは超苦⼿意識あったがなんとかなった。
UIの機微 ⼤変だった機能はそんなにない。 けど、以下は調整が必要なことが多かった。 • ナビゲーション表⽰幅のズレ • シャドウ • 画像の⾮同期読み込み •
フォーム⼊⼒
ナビゲーションバー AndroidとiPhoneで表⽰域が違う。 いつもキモいなと思ってる。
シャドウの調整 シャドウを適⽤したい要素に対して、 影を表⽰したときのmarginの調整や、 iOS⽤にshadowOffset, Radius Android⽤にelevation など、異なるパラメーターが必要。
画像の⾮同期読み込み 絶対やりますよね。 読み込み速度を常に早くしたい場合、ImageBackgroundではなく、 キャッシュが有効なFastImageを使いたい。 が、背景画像として読み込むとき、FastImageだと プレースホルダーの設定に難があったりする。 読み込み完了イベントを元にstateを愚直に切り替える。
愚直なコード
フォーム⼊⼒ ⽇本語⼊⼒がv0.56.0とかまで バグってて、変換ができなかった。 v0.54.0くらいまで落とすか、 v0.57.0に上げるかで対応できる。 正直これはマジかよという感じ。
プッシュ通知対応 react-native-firebase使えば恐ろしく早く実装できる。 TokenもFCMTokenで共通化できるし、よほど送信を 意図的に遅延したい場合を除いてFCMで送ればよさそう。 前までFCMはreact-native-fcmで実装するのがデファクトっぽかったけど、 今は公式のreact-native-firebaseで⼗分できる。
復帰時と 初期起動時の リスナーは分ける。
ディープリンク対応 react-navigationがdeep-linkingの機構を持ってくれてる。 参考: https://reactnavigation.org/docs/en/deep-linking.html#docsNav XCode, Android Studioそれぞれでスキーマ設定をした後、 トップのStackNavigatorにURLPrefixを指定して、 Screenごとにパスを設定すれば、意図したところに⾶べる。
ディープリンク対応 す ご く 実 装 が 少 な い
。 本 当 に こ れ で い い の か 心 配 に な る 。
課⾦処理 定期購読型課⾦だけ実装経験あり。 ⾊々ライブラリはあるけど、今はreact-native-iapが良い。 他のライブラリだと⽚⽅のOSしか対応してない、とかがある。
事前処理 起動時にIAPのインスタンスも 初期化しておく。 購⼊可能なアイテム⼀覧を 最初に取得しておかないと、 あとでエラーになるのが罠。 レシート検証は 個別にAPI実装が必要。
購⼊処理 buyItemとか buySubscriptionとか 直感的なインターフェースで iOS/Android共に アイテム購⼊ができる。
本番のプロダクトで必要になってくる要件 • UIの機微 • プッシュ通知対応 • ディープリンク対応 • 課⾦処理 とか、ちょっと⼀歩踏み込んだ機能は、⼤変なのでは?という不安があった。
(結果、⼤丈夫だった。) だいたい できたのでは?
·ͱΊ ʼ͍͍ͩͨຊ൪Ͱෆ҆ʹͳΔΑ͏ͳػೳ֦ு࣮ݱՄೳ ʼ3FBDU/BUJWFͰදݱՄೳͳػೳΛ͑ͨෳࡶੑʹΜͰΔͷ͔ɺ୯ʹ3FBDU/BUJWFΘ ͔ΒΜ͔Β͍ͨͭͯΔͷ͔ɺ͖ͬΓ۠ผ͠·͠ΐ͏ɻ ʼϓϩτλΠϓͱ͔ͪͬͪΌ͍ΞϓϦͱ͔࡞ͬͯ͠ΐ͏͕ͳ͍ͷͰྗΛݟͤΔͷ͕ྑͦ͞͏ ʼӡ༻͋Μ·ਏ͘ͳ্͍ʹ͍͍ͩͨͷΞϓϦͷػೳ࣮ݱՄೳͳͷͰɺϓϩτλΠϓͰ͔͠ ͑ͳ͍ͱ͍͏ݴઆ͕ྲྀ͢Δͷମແ͍ɻ ʼӡ༻Մೳͳຊ൪ϨϕϧͷϓϩμΫτΛ࡞ͬͯྗͰݴઆΛΑ͍ͯ͘͘͠ͱྑͦ͞͏ɻ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ