Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native for Unified Codebase

React Native for Unified Codebase

Facebook Developer Circle Malang, React Native Meetup

C918bcbfa8df32567636c2d125a34fa1?s=128

Sonny Lazuardi

December 14, 2016
Tweet

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