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
Agentic Workflowという選択肢を考える
tkikuchi1002
1
390
Prox Industries株式会社 会社紹介資料
proxindustries
0
210
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
2
1k
IAMのマニアックな話 2025を執筆して、 見えてきたAWSアカウント管理の現在
nrinetcom
PRO
4
660
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
4
520
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
490
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
2
360
知識を整理して未来を作る 〜SKDとAI協業への助走〜
yosh1995
0
150
AI技術トレンド勉強会 #1MCPの基礎と実務での応用
nisei_k
1
240
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
pal4de
3
1.1k
ObsidianをMCP連携させてみる
ttnyt8701
2
140
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
220
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Automating Front-end Workflow
addyosmani
1370
200k
How to train your dragon (web standard)
notwaldorf
92
6.1k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Speed Design
sergeychernyshev
31
1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Agile that works and the tools we love
rasmusluckow
329
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Bash Introduction
62gerente
614
210k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
BBQ
matthewcrist
89
9.7k
Raft: Consensus for Rubyists
vanstee
140
7k
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