Code Sharing Between React Web and React Native Applications

https://www.youtube.com/watch?v=cmRtKpNP8WA&feature=youtu.be

In this talk we will explore how the Lambda Consulting team was able to achieve close to 70% code reusability in a complex React + Redux application between web/mobile/tablet through the use of shared reducers, utility functions, higher order components, dynamic requires, Expo, and react native for web. Along the way there were many potential pitfalls and gotchas so we hope that our experiences will serve as a good starting place for anyone who is looking to share code between web and mobile applications.

www.lambdaconsulting.co

Presenters: Colin Young and Tyson Kunovsky

Transcript

1. https://www.linkedin.com/in/colinyoung10/ https://www.linkedin.com/in/tyson-kunovsky-3922a341 Code Sharing Between React Web And React Native Applications
2. Lambda Consulting • Chicago based software consultancy that does web/app/desktop dev for both enterprise and startup clients. • We create our own SAAS products that we sell to enterprise clients around town. • lambdaconsulting.co
3. The Problem • Our client needed a complex multi platform application (iOS, Android, Web, Tablet, Desktop) for construction workers to track information in the field. • App needed to be highly configurable by company and by role. • Needed to be optimized for construction worker’s excavator sized thumbs with 100px click targets.
4. The Solution • Use modern JS tools and techniques (i.e. React Native Web, HOC’s...etc) in order to share code between platforms • All configuration lives on the client (a ‘CMS’ for modules) • Front end simply renders the configuration
6. Article On Sharing Code ‘Este’ Framework
7. API – Configuration Files
8. Dynamically Select Actions To Dispatch
9. FE Project Structure
10. How The App Is Bootstrapped For Web
11. Continued…
12. Safety Observation
13. Universal and Common Components
14. We aliased react-native-web to react-web in our Webpack config @universal (i.e. native) Components
15. Common Components
16. Higher Order Components (HOC’s)
17. HOC’s In Practice
18. How Styling Works - stylesKeys
19. Applying Styles From stylesKeys
20. In Closing • Use HOC’s as connected components to massage props and pass down data into child components since they are platform agnostic. • API configuration for modules • Front end just renders the module configuration • Use common components written in react-native-web to share code
21. Mobile (React Native/Expo)
22. Developing in Expo This is the config being loaded (exp.json), then app logs Starts on all devices and simulators (use Genymotion for the love of god) XDE Easy handoff to QA
23. publish-on-expo-<env> branches Expo Publishing • Hosted on their server • Private and “wrapped” in a Play Store/iTunes Store App
24. “Nuts” server Github releases Publishing Electron Auto-updates
25. react- native-web <View> = <div> <Text> = <span>
26. Gotchas
27. No SCSS for you base native ios (But you can cascade styles) Gotchas
28. Performance is harder to profile - You have to be more proactive - Doesn’t always differ uniformly iOS Android (?!!?!) Gotchas
29. Tests Sharing code for: Unit tests: Easy-peasy (use utils in components!) Functional tests: harder Integration: Oh god Gotchas