React Native for Unified Codebase

Facebook Developer Circle Malang, React Native Meetup

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