Organizing Code for Cross-Platform Web and Mobile Development

on YouTube ↗29m

" summary

Claims 70% business logic code reuse while keeping platform-specific UI, and organizes modules as a shared business-logic layer plus web and react-native folders with a package.json per target. Uses a babel target alias so imports resolve to web or native builds, demos a telnum input implemented once for formatting and twice for rendering, explains native wrappers that inject UUID references to route singleton native-module calls, and ships a react native toolkit and macros to remove boilerplate.

AI-written summary · about

" chapters (16)

1. 0:00Cross-platform development intro
2. 1:06Code organization importance
3. 5:42Talk structure
4. 6:06Writing apps three times
5. 8:15Merging web and mobile
6. 9:19Shared business logic
7. 11:45Shared folders for code
8. 13:31Cross-platform component
9. 16:21Web component implementation
10. 17:44Publishing as node modules
11. 18:49Native integration strategies
12. 21:41Native wrapper details
13. 23:27Routing to components
14. 27:03Reducing boilerplate
15. 28:28Key takeaways
16. 29:10Q&A

" related talks

• 47mReact Native code reuse: Architecture that worksAaron Greenwald · Mobile Era 2017
• 21mBuilding Cross-Platform Component Libraries for Web and Native with ReactPerttu Lähteenlahtii · React Advanced 2021
• 59mOne Codebase to Rule Them All - Using React Native EverywhereJesse Weigel · NDC Minnesota 2019
• 36mThe sorcery of building a cross platform Design System architectureKamlesh Chandnani · React Alicante 2022
• 35mReact Native & Rails, A Single Codebase for Web & MobileBen Dixon · RailsConf 2017
• 50mBuilding Cross Platform Native Mobile Apps using React NativeWei-Meng Lee · Mobile Era 2017
• 34mMonorepo: React Web & React NativeEugene Zharkov · React Alicante 2019
• 30mJesse Weigel - One Codebase to Rule Them All - Using React Native EverywhereJesse Weigel · React Loop 2019