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
66
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
Amazon Aurora のバージョンアップ手法について
smt7174
2
150
EDRの検知の仕組みと検知回避について
chayakonanaika
12
4.9k
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
180
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
3
6.1k
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
190
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
650
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
Охота на косуль у древних
ashapiro
0
100
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
170
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
83k
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
130
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
250
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
22
1.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
GitHub's CSS Performance
jonrohan
1030
460k
Thoughts on Productivity
jonyablonski
69
4.5k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Side Projects
sachag
452
42k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Code Review Best Practice
trishagee
67
18k
Site-Speed That Sticks
csswizardry
4
410
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
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