Up and Running with Universal Components
summary
A concrete workflow for shipping a shared UI: build a universal component package, document states in storybook, compile with Babel and publish to npm with semver and CI/CD. Components run in Create React App, Gatsby, Expo/React Native, VR and even import into Sketch; demos show cards and headers rendering across targets. Pitfalls include platform‑specific APIs, overexposed props, styling escape hatches, and the need for version control and coordinated design/product buy‑in.
AI-written summary · about
chapters (25)
- 0:00Start
- 0:57What makes a Universal Component?
- 1:20MUST BE REUSEABLE ACROSS PLATFORMS
- 2:31MUST BE AVAILABLE TO APPS
- 2:55So why not make everything a Universal Component?
- 3:08Harmful to the overall feedback loop
- 3:28Causes bottlenecks
- 4:09Creates unnecessary complexity
- 4:33Forces design and UX to be limited to things supported on all platforms
- 5:41BENEFITS
- 6:07CODE REUSE
- 7:22ISOLATES BUGS
- 8:53CONSISTENCY
- 9:40BETER DEVELOPER EXPERIENCE
- 10:19IMPLEMENTATION
- 10:38SIMILAR COMPONENTS SIMILAR APIs
- 10:51OVERRIDING STYLES
- 11:06DOCUMENTATION
- 11:23OVER EXPOSING
- 11:41THIRD PARTY LIBRARY
- 11:56EVERYONE'S ONBOARD
- 12:21BUYING INTO THE IDEA
- 14:48SETTING UP ENVIRONMENT
- 15:01Isolation
- 18:38ACTION
related talks
29mUniversal React
46mBuilding Reusable Components ... That Are Actually Reusable
07mReact components, atomic design and storybook
26mUniversal Components & Deterministic Rendering
21mBuilding Cross-Platform Component Libraries for Web and Native with React
24mCase Study: Creating a Component Library in React JS
18mIntroducing Universal React Server Components
43mBuilding a component based library with React