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

Sonny Lazuardi

December 14, 2016
Tweet

More Decks by Sonny Lazuardi

Other Decks in Technology

Transcript

  1. 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
  2. Routing • Custom Router based on https://github.com/mjackson/history • Support Code

    Splitting on web • Save current scrolling position based on route
  3. Native Modules • One Signal Push Notification • Facebook &

    Google Sign In • Google Smart Lock • Google Analytics • Image Picker, Image Zoom • Appsflyer, Crashlytics
  4. 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
  5. 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.
  6. 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
  7. 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
  8. 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
  9. Split Build • universalApk = false • ARM & X86

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