The sorcery of building a cross platform Design System architecture
summary
A concrete recipe for one codebase across web and React Native claims a single API that actually builds two isolated bundles by using dot.web and .native file extensions together with Metro and webpack resolution alignment tests run with Jest plus platform-specific React Testing Library setups bundles produced by Rollup with environment-driven Babel configs and types emitted via rollup plugin dts TypeScript module suffixes handle platform types accessibility props map to aria vs accessibility props and this setup runs in production for over a year without bloating bundle size
AI-written summary · about
chapters (25)
- 0:00Introduction
- 1:58Cross-platform design system problem
- 3:44Architectural approaches
- 5:54Desired state checklist
- 6:57Typography component
- 8:41Abstracting common styles
- 10:04Bundler file extensions
- 11:51File renaming and setup
- 13:17TypeScript module resolution
- 15:01Cross-platform testing setup
- 16:25Tests for web and native
- 17:30Running tests and snapshots
- 18:39Rollup bundling config
- 20:06Bundling JS and types
- 23:20Bundling TypeScript definitions
- 24:25Verifying output and types
- 26:11Accessibility across platforms
- 27:36Platform-specific accessibility
- 28:18Bundle size and isolation
- 29:01Platform-dependent properties
- 30:22Higher-level components
- 31:25Platform-dependent types
- 32:31Scaling architecture
- 33:36Recap
- 35:01Closing and resources
related talks
21mBuilding Cross-Platform Component Libraries for Web and Native with React
29mOrganizing Code for Cross-Platform Web and Mobile Development
01h 14mHow to Build a Cross-Platform Design System in React
59mOne Codebase to Rule Them All - Using React Native Everywhere
28mCross-Platform React
36mCross-platform DS in React Native: Musixmatch’s case study
23mThe State of One Codebase For All The Platforms
34mMonorepo: React Web & React Native