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 for Unified Codebase
Search
Sonny Lazuardi
December 14, 2016
Technology
0
310
React Native for Unified Codebase
Facebook Developer Circle Malang, React Native Meetup
Sonny Lazuardi
December 14, 2016
Tweet
Share
More Decks by Sonny Lazuardi
See All by Sonny Lazuardi
Artificial Intelligence & Design Plugin
sonnylazuardi
0
300
Making Interactive Web using Framer Motion
sonnylazuardi
0
72
The Story of Making Figma Plugins
sonnylazuardi
4
250
UX Prototyping Tools
sonnylazuardi
5
760
Clean Code in Javascript
sonnylazuardi
5
490
Native Mobile App with Javascript - React Native - Code Push
sonnylazuardi
0
390
Bantu Asap - SS Ceria
sonnylazuardi
0
150
React Native for Mobile App Development
sonnylazuardi
3
520
[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor
sonnylazuardi
0
200
Other Decks in Technology
See All in Technology
【CEDEC2025】『ウマ娘 プリティーダービー』における映像制作のさらなる高品質化へ!~ 豊富な素材出力と制作フローの改善を実現するツールについて~
cygames
PRO
0
230
Tableau API連携の罠!?脱スプシを夢見たはずが、逆に依存を深めた話
cuebic9bic
3
210
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
850
Strands Agents & Bedrock AgentCoreを1分でおさらい
minorun365
PRO
6
230
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
170
Mambaで物体検出 完全に理解した
shirarei24
2
210
Unson OS|48時間で「売れるか」を判定する AI 市場検証プラットフォーム
unson
0
170
猫でもわかるQ_CLI(CDK開発編)+ちょっとだけKiro
kentapapa
0
3.4k
dipにおけるSRE変革の軌跡
dip_tech
PRO
1
230
Google Cloud で学ぶデータエンジニアリング入門 2025年版 #GoogleCloudNext / 20250805
kazaneya
PRO
11
2.8k
LLM 機能を支える Langfuse / ClickHouse のサーバレス化
yuu26
3
220
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
160
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Navigating Team Friction
lara
188
15k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Balancing Empowerment & Direction
lara
1
530
Designing for Performance
lara
610
69k
Building an army of robots
kneath
306
45k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Transcript
React Native for Unified Codebase Dec 14th, 2016
@sonnylazuardi
Sale Stock 1 Codebase 3 Platforms Web Cordova Android iOS
UI-Kit & Styling • Based on Primitive Component (like: github.com/lelandrichardson/react-p
rimitives) • Include Text, View, Image, Button, TextInput • No gradient • Flexbox vs CSS
Routing • Custom Router based on https://github.com/mjackson/history • Support Code
Splitting on web • Save current scrolling position based on route
Native Modules • One Signal Push Notification • Facebook &
Google Sign In • Google Smart Lock • Google Analytics • Image Picker, Image Zoom • Appsflyer, Crashlytics
Prototyping • Apollo Client to get rid of reducers •
Exponent allows developing app without Android SDK, XCode. • Exponent allows direct deploy to ios and android devices
Performance Tuning
Startup Memory Usage
Scrolling Memory Usage • Get an infinite scroll on our
app, 25000++ live products to show. • https://github.com/brentvatne/fixed- height-windowed-list-view-experime nt • Solve the dynamic height listview by preprocessing items’ height array.
Scrolling Memory Usage Comparison
Faster Startup • Batch initial bootstrap requests • Prefetch Initial
Data on Native Side • (-) Slow Transition Between Tabs Up to 10 secs faster on low-end devices under 2G
GraphQL Batching getCart() getCatalogue() getFoo() getBar() [getCart(), getCatalogue(), getFoo(), getBar()]
Start App Start App
GraphQL Batching • Faster time-to-render on slower networks, like 2G
Connections. • Cut down 6 different HTTP calls into 1 call to render the homepage
Versioner • Custom Versioner based on github.com/Microsoft/code-push • Hosted on
our own server (S3) • Update directly to client devices without Play Store approval
Split Build • universalApk = false • ARM & X86
build • Before Split Build: 13 MB • After Split Build ◦ ARM: 6.9 MB ◦ X86: 8 MB
APK File Size
@sonnylazuardi