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
280
Making Interactive Web using Framer Motion
sonnylazuardi
0
65
The Story of Making Figma Plugins
sonnylazuardi
4
240
UX Prototyping Tools
sonnylazuardi
5
750
Clean Code in Javascript
sonnylazuardi
5
480
Native Mobile App with Javascript - React Native - Code Push
sonnylazuardi
0
380
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
190
Other Decks in Technology
See All in Technology
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
アジャイル開発とスクラム
araihara
0
160
2.5Dモデルのすべて
yu4u
2
610
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
High Performance PHP
cmuench
0
140
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
5.8k
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
A better future with KSS
kneath
238
17k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Writing Fast Ruby
sferik
628
61k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Optimizing for Happiness
mojombo
376
70k
Practical Orchestrator
shlominoach
186
10k
Thoughts on Productivity
jonyablonski
69
4.5k
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