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
290
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
60
The Story of Making Figma Plugins
sonnylazuardi
4
240
UX Prototyping Tools
sonnylazuardi
5
720
Clean Code in Javascript
sonnylazuardi
5
460
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
検索結果の品質向上
recruitengineers
PRO
1
550
多すぎる!! 気づくと増えてるAmazon CloudWatch大家族、クラウド初心者にも分かりやすく整理しました
minorun365
PRO
3
350
大規模データに集まるみんなの負債!との付き合い方
masatoshi0205
3
510
React Server Components の疑問を解き明かす
mizdra
PRO
18
3.3k
データドリブン経営への転換 / transforming-to-data-driven
pei0804
7
790
Kaggle LEAP Competition Solution解説&振り返り
abeja
2
240
Trace Queriesの活用でfreee会計のDB負荷削減のきっかけとした話
ryuuuuma
0
160
見てわかるテスト駆動開発
recruitengineers
PRO
4
1.9k
ラクスCTOが語る顧客視点を重視したプロダクト開発 / RAKUSTechCon2024_Kude
rakus_dev
0
180
A/Bテスト概論
recruitengineers
PRO
4
1.8k
Ai Workforceを支える技術
layerx
PRO
1
160
2年目の技術系編集者が勝手に日本の編集者を代表して、若手エンジニアのみなさんに伝えたいこと/wakate-funwari-study_codezine.editor
yukiogawara
1
420
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
179
21k
Intergalactic Javascript Robots from Outer Space
tanoku
267
26k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Fantastic passwords and where to find them - at NoRuKo
philnash
47
2.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
156
14k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
21
1.7k
BBQ
matthewcrist
83
9.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
46
47k
Mobile First: as difficult as doing things right
swwweet
220
8.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
32
1.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