https://www.youtube.com/watch?v=cmRtKpNP8WA 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

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