Plug and Play Design: Building Extendable React Applications
summary
Claim: features become addable or removable by dropping a folder, cutting bundle size and source shipped. Implementation uses TypeScript in a monorepo, adapters that wrap components and functions, self-contained plugin folders, a Vite replace-files plugin that supplies fallbacks at build time, and a custom ESLint rule that forbids direct imports from plugins. Demo deletes a plugin folder and the app rebuilds without that feature. Tradeoffs: extra plumbing, tricky plugin boundaries, nesting issues.
AI-written summary · about
chapters (8)
- 0:00Insights on Plug and Play Design
- 1:49Challenges with Feature Flags and Modular Design
- 4:43Flexible Configuration with Plugin Design
- 7:34Plug and Play Design Explanation
- 10:48Adapters and Build Setup for Plugins
- 13:36Enforcing Plugin Import Restrictions
- 15:07Pros and Cons of Self-contained Plugins
- 18:09Managing Plugin Shipments and Scalability
related talks
19mExtensible React
41mArchitecting React plugins
32mWhy Invent a Framework and How to Live with It?
24mA Beginner's Guide to Code Splitting Your React App
42mIntegrating React Into Legacy Projects
37mBuilding Better Components — A Journey to a More Resilient Frontend
25mScaling React.js Applications
28mReact's Odyssey: Harnessing the Titans of Animation and Performance