Thorben Primke - Leavering Your Android Knowledge To Boost Your Team’s Velocity With React Native

Transcript

2. Leavering Your Android Knowledge To Boost Your Team’s Velocity With 
 React Native 6/27/2018 Thorben Primke Droidcon Berlin
3. Thorben Primke
 
 Product Engineer
 Pinterest
 
 @tprimke
4. Agenda Background Technical Aspects Current State & What’s Next 1 2 3
5. React Native React for building mobile application • Developed by Facebook • Uses JavaScriptCore for processing the JS • Renders natively • Extensible
6. Our Interest What sparked the exploration • Product Engineering • Growth Engineering • Business value • Piece wise adoption
7. Build Times Almost no more waiting • Android - 30sec to multiple minutes • RN - Instant reloads
8. Context Less Lost In Translation • Efficient communication • One Engineer for Web & Mobile • PM, design and engineer • Fewer inconsistencies
9. Foundation Starting Fresh vs Extending • Greenfield • Brownfield
10. But really… …is there no other way • Server Driven UI • Hire more mobile engineers • Adds complexity to infrastructure
11. The Team Thorben Primke
 
 Product Engineer @tprimke Vivian Qu
 
 Growth Engineer
 
 
 @vivqu
 Michael Schneider
 
 Core Experience Engineer
 
 @maicki
12. Agenda Background Technical Aspects Current State & What’s Next 1 2 3
13. New Home Where to keep the shared code • Android and iOS in separate repositories • Separate repository for RN • Symlink into mobile repositories
14. Dependencies Frictionless integration • Leverage Maven • React Native is already in local maven • Every other library needs the same
15. Dependencies Frictionless integration • Leverage Maven • React Native is already in local maven • Every other library needs the same
16. Dependencies Frictionless integration • Leverage Maven • React Native is already in local maven • Every other library needs the same
17. But APK Size …let’s take a look • Split APK by arch • Multi dex • Fresco already in codebase • Only armv7 and x86
18. Let’s Render …how to render your React • Fragment based architecture • Full screen • One React screen / module, one fragment
19. Let’s Render …how to render your React • Fragment based architecture • Full screen • One React screen / module, one fragment
20. Dynamic Typing …but we like static languages • Flow • TypeScript • Typeahead & refactoring
21. Native <-> RN …how does it work? • JavaScriptCore • React Native Bridge • Delayed initialization React Native Native Bridge
22. API Client …no duplicate networking logic • Expose the REST methods • No auth token to pass around • Reuse logging
23. API Client …no duplicate networking logic • Expose the REST methods • No auth token to pass around • Reuse logging
24. UI Components …how does it work? • Pinterest Design System • Gestalt on web • Ported the majority to React Native
25. Images …sharing between RN and native • Bridge your native ImageView • Share the same cache
26. Navigation Leave it to native • JS vs Native navigation • Single screen approach • Flexible router
27. Navigation Leave it to native • JS vs Native navigation • Single screen approach • Flexible router
28. Navigation Leave it to native • JS vs Native navigation • Single screen approach • Flexible router
29. Localization Nothing out of the box • JS Libs • ICU format • Modeled after Android strings.xml
30. Localization Nothing out of the box • JS Libs • ICU format • Modeled after Android strings.xml
31. Localization Nothing out of the box • JS Libs • ICU format • Modeled after Android strings.xml
32. Localization Nothing out of the box • JS Libs • ICU format • Modeled after Android strings.xml
33. More Bridging …for all the important pieces • Context Logging • Experiment Framework
34. Agenda Background Technical Aspects Current State & What’s Next 1 2 3
35. Ensuring Success …one screen at a time • A/A NUX performance experiment • Pre-build meetings • Always frictionless
36. Ensuring Success …one screen at a time • 4+ screens live in the app • Continued support • Technology supported
37. More Work …supporting non-fullscreen • Asynchronous JS layout • iOS has support RCTSurfaceView • Starting work for Android • Next version of React Native
38. OTA Updates …or known as code push • Considered but delayed • Useful even with weekly releases • Requires UI to be fully JS
39. © Copyright, All Rights Reserved, Pinterest Inc. 2018 Thorben Primke - @tprimke