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
290
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
270
Making Interactive Web using Framer Motion
sonnylazuardi
0
57
The Story of Making Figma Plugins
sonnylazuardi
4
230
UX Prototyping Tools
sonnylazuardi
5
680
Clean Code in Javascript
sonnylazuardi
5
450
Native Mobile App with Javascript - React Native - Code Push
sonnylazuardi
0
380
Bantu Asap - SS Ceria
sonnylazuardi
0
140
React Native for Mobile App Development
sonnylazuardi
3
490
[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor
sonnylazuardi
0
160
Other Decks in Technology
See All in Technology
期待しすぎずに取り組む両面 TypeScript
shozawa
2
260
『QAという人』が必要ではなく、『QAという技術』が必要
sadonosake
2
450
エバンジェリスト活動を7年やってきて見えてきた、コミュニティとエバンジェリストの関係
soracom
PRO
1
190
10分でわかるfreeeのQA
freee
0
210
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
1.5k
バッチ処理のSLOをどう設計するか
rynsuke
7
530
Skaffoldを用いたGKEアプリケーションの CD(Continuous Development)
kojake_300
1
230
8週連続ウェビナー_イチから学ぶFivetran
cmsuzu
0
160
TCA入門したてなので、自分が馴染みのある実装と比較しながらキャッチアップしてみる
fumiyasac0921
1
370
Azureコストは水道代/The_47th_Tokyo_Jazug
aeonpeople
3
350
Challenges - Open Farming Hackdays 2024
loleg
0
490
私のRSpecの書き方 / How I write RSpec
tmtms
4
810
Featured
See All Featured
The Cult of Friendly URLs
andyhume
72
5.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Clear Off the Table
cherdarchuk
82
310k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
Thoughts on Productivity
jonyablonski
57
3.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
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