React Native for Unified Codebase

Transcript

1. React Native for Unified Codebase Dec 14th, 2016

2. @sonnylazuardi

3. Sale Stock 1 Codebase 3 Platforms Web Cordova Android iOS

4. 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

5. Routing • Custom Router based on https://github.com/mjackson/history • Support Code

   Splitting on web • Save current scrolling position based on route

6. Native Modules • One Signal Push Notification • Facebook &

   Google Sign In • Google Smart Lock • Google Analytics • Image Picker, Image Zoom • Appsflyer, Crashlytics

7. 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

8. Performance Tuning

9. Startup Memory Usage

10. 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.

11. Scrolling Memory Usage Comparison

12. 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

13. GraphQL Batching getCart() getCatalogue() getFoo() getBar() [getCart(), getCatalogue(), getFoo(), getBar()]

    Start App Start App

14. 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

15. 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

16. Split Build • universalApk = false • ARM & X86

    build • Before Split Build: 13 MB • After Split Build ◦ ARM: 6.9 MB ◦ X86: 8 MB

17. APK File Size

18. @sonnylazuardi