Benefits of React + Web Components
Facebook and the React team are not super keen on Web Components. And the web components community does not seem very interested in embracing or acknowledging the key patterns that define React.
Here is the problem: I want the benefits of React and the benefits of Web Components.
Benefits of web components (that appeal to me): Reusable widgets that work on all browsers and all frameworks. It gets old having to re-invent the date picker every year when your company changes web frameworks. The size of the component ecosystem is directly proportional to the quality and availability of components.
Benefits of React (that appeal to me):
- Distinction between state and props
- Declarative View defined as a function of props and state
- Unidirectional data flow
- Super powerful one-way binding in lieu of two-way binding
Note: I didn’t put virtual DOM in the list because, to me, virtual DOM isn’t really a benefit. It mostly enables the other benefits.
These benefits all combine to make a system that is more predictable, more testable, easier to reason about, and easier to debug. This makes React nice for large, complex apps.
I believe there is demand for something that combines the key benefits of React with the reusability, interop and ecosystem-size of web components. What form that something will take, I’m not quite sure. But I would like it.
Update: This idea seems to be catching on. Since I wrote this post, I have discovered a number of projects that attempt to address this issue:
- SkateJS (this seems to be the most promising)
- Reactive Web Components
- React Standalone
- Using React app techniques at the web component level with Redux, virtual-dom, and JSX (an article by Component Kitchen)