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
290
Making Interactive Web using Framer Motion
sonnylazuardi
0
69
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
Contract One Dev Group 紹介資料
sansan33
PRO
0
6k
Roo Codeにすべてを委ねるためのルール運用
pharma_x_tech
1
230
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
ohmori_yusuke
2
120
カンファレンスのつくりかた / The Conference Code: What Makes It All Work
tomzoh
8
930
MCP で繋ぐ Figma とデザインシステム〜LLM を使った UI 実装のリアル〜
kimuson
2
1.3k
やさしいClaude Code入門
minorun365
PRO
32
25k
GigaViewerにおけるMackerel APM導入の裏側
7474
0
460
いまさら聞けない Git 超入門 〜Gitって結局なに?から始める第一歩〜
devops_vtj
0
170
技術書典18結果報告
mutsumix
2
180
OTel meets Wasm: プラグイン機構としてのWebAssemblyから見る次世代のObservability
lycorptech_jp
PRO
1
300
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
25k
データプレーンプログラミングとは? DPU&スイッチASICの開発経験から語る
ebiken
PRO
1
270
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Git: the NoSQL Database
bkeepers
PRO
430
65k
For a Future-Friendly Web
brad_frost
178
9.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
750
KATA
mclloyd
29
14k
BBQ
matthewcrist
88
9.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
We Have a Design System, Now What?
morganepeng
52
7.6k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
How to Ace a Technical Interview
jacobian
276
23k
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