A Year With React Native

Transcript

1. Flare in Production A Year with React Native Connor McEwen @connormcewen
2. About Me cmcewen @connormcewen Lead Engineer, Emerging Products Using React Native since the beta
3. Flare • Small business community app • 100% React Native • Featured in App Store + Google Play Store
4. Why RN? • React Component model for UI • OTA Updates • JS everywhere • Cross-platform
5. The Cross Platform Dream
6. Reality
7. Platform Differences • Design choices - material design • Phone features - hardware back button • Different APIs - permissions • Performance • Layout
8. Our stats • ~30k LOC in project (client + server) • 169 total files in client directory • 4 .android.js + 4.ios.js = 4.7% • 41 .js use the Platform API = 24% imageContainer: { paddingTop: Platform.OS === 'ios' ? 5 : 10 },
9. Tips to my past self
10. Flow • Static type annotations • Catch errors at “compile” time • Refactoring is much easier
11. Modern JS syntax • Use async/await, classes, etc. • This + flow help buy-in from native devs
12. Nuclide • IDE for RN • Flow + ESLint erros
13. CodePush • OTA Updates • OSS alternatives you can host yourself
14. Redux/Redux-persist • State management • Logging much easier • Auto-sync/rehydrate from disk
15. Node • Reduces mental overhead • Team is more multi-functional • React for web apps is easier
16. Monorepo • New features usually require client + server side change • Encourages everyone to review PRs
17. GraphQL • Client specifies the shape + data it needs • Say goodbye to /api/v1 + /api/v2 • Especially helpful since mobile doesn’t guarantee updates
18. ESLint • Enforce a common style • Code maintainability
19. npm • Open source ecosystem is strong, but it’s a double edged sword • Use npm shrinkwrap
20. React Native Versions • Stay a release or two behind bleeding edge for stability • Forking may be necessary for specific features or bugfixes, but try to avoid it • Forking on iOS/making JS changes is much easier than Android
21. Team • Team should be fullstack - features, not layers • You probably still need 1 iOS and 1 Android expert • Get involved in the open source community
22. New stuff • GraphQL clients: Apollo/Relay • Yarn • Exponent • Native Animations
23. Stay informed • Release Notes • Reactiflux/Exponent Slack • RN crew on Twitter
24. Overall • React Native was definitely the right choice for us, and it’s only growing in popularity
25. Thanks! @connormcewen connor.mcewen@gmail.com