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
300
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
70
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
510
[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor
sonnylazuardi
0
200
Other Decks in Technology
See All in Technology
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
4
1.3k
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
310
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
1
130
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
330
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
590
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
310
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
300
rubygem開発で鍛える設計力
joker1007
2
270
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
240
Model Mondays S2E03: SLMs & Reasoning
nitya
0
240
OPENLOGI Company Profile
hr01
0
67k
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
1
450
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
For a Future-Friendly Web
brad_frost
179
9.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Designing for humans not robots
tammielis
253
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Fireside Chat
paigeccino
37
3.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Faster Mobile Websites
deanohume
307
31k
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