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