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
62
The Story of Making Figma Plugins
sonnylazuardi
4
240
UX Prototyping Tools
sonnylazuardi
5
740
Clean Code in Javascript
sonnylazuardi
5
470
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
500
[Sidang] Layanan Basis Data Real Time NoSQL untuk Kolaborasi Web Audio Editor
sonnylazuardi
0
190
Other Decks in Technology
See All in Technology
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
150
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
470
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
530
AWS CodePipelineでコンテナアプリをデプロイした際に、古いイメージを自動で削除する
smt7174
1
100
ガバメントクラウド先行事業中間報告を読み解く
sugiim
1
1.4k
バクラクにおける可観測性向上の取り組み
yuu26
3
420
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
130
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
130
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
分布で見る効果検証入門 / ai-distributional-effect
cyberagentdevelopers
PRO
4
700
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Rails Girls Zürich Keynote
gr2m
93
13k
The World Runs on Bad Software
bkeepers
PRO
65
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
A designer walks into a library…
pauljervisheath
202
24k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Writing Fast Ruby
sferik
626
61k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
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