Tom MacWright wrote a short post wondering why we don’t see prominent applications using web components On Web Components macwright.com/2024/01/24/on-web-components .
That’s a fair question! It’s easy to see the success of frameworks like React and Rails: just look at the thousands of websites built with them. What does the web component success story look like?
Contrary to some people, I don’t see web components on their own as a huge productivity boon for individual websites. Once you’ve bought into a particular set of technologies, it makes sense to use it for as much as you can. If you have a React app, you’d be justifiably skeptical of introducing a second way to build components!
I know that’s an audacious pitch, but bear with me.
That switching cost stunts framework innovation by heavily favoring incumbents with large ecosystems. It’s hard to create new frameworks, because each one has to start its own ecosystem from scratch. We keep rebuilding the same set of primitives over and over and over again.
There’s a famous Joel Spolsky blog post about why capitalistic tech companies contribute to open source Strategy Letter V When I was in college I took two intro economics courses: macroeconomics and microeconomics. Macro was full of theories like “low unemployment causes inflation” that never quite stood u… www.joelonsoftware.com/2002/06/12/strategy-letter-v/ . Briefly: every product has substitutes (products that can replace it) and complements (products that can be used alongside it). The big takeaway is that ”smart companies try to commoditize their products’ complements”. In other words, they try to make it so that their own product has a proprietary advantage, while the products used alongside it are all cheap and interchangeable.
Here’s a concrete example. xyflow Node Based UIs for React and Svelte – xyflow Powerful open source libraries for building node-based UIs with React or Svelte. Ready out-of-the-box and infinitely customizable. www.xyflow.com is an excellent library for making flow charts. It was originally called React Flow, but the maintainers renamed it when they added Svelte support. They had to put in a ton of work just to support that one extra framework Why Svelte Flow? – xyflow xyflow - Customizable library for rendering workflows, diagrams and node-based UIs. www.xyflow.com/blog/why-svelte-flow ! And if you use Vue, Angular, Solid, Qwik or Ember, you’re still out of luck.
React has enjoyed continued success because it has a moat of fantastic third-party libraries: Radix, React Aria, React Three Fiber, Framer Motion and xyflow, among many others. Web components have the potential to give us that same ecosystem — but for every framework.
Islands of Interactivity
Many websites like this still incorporate highly dynamic elements. Often, these take the form of rich widgets that are missing from HTML, like menus and combo boxes. Sometimes they’re even more complicated, like interactive diagrams in articles. The modern term for these dynamic regions within an otherwise static page is “islands of interactivity”, but the pattern has existed for a long time.
Web components invert that process. They allow islands to be instantiated in the same way as any other element: by writing a tag name in the page’s markup. As I wrote in The Website vs. Web App Dichotomy Doesn’t Exist The Website vs. Web App Dichotomy Doesn't Exist | jakelazaroff.com A one-dimensional spectrum can't sufficiently capture the tradeoffs involved in web development. jakelazaroff.com/words/the-website-vs-web-app-dichotomy-doesnt-exist/ , web components allow developers to declaratively add dynamic behavior to HTML itself.
As an example, here’s a TIL I wrote on using htmx and the Shoelace web component library to load the content of a dialog when it opens [htmx] Load modal content when a Shoelace dialog opens | Today I Learned A collection of useful things I've learned. til.jakelazaroff.com/htmx/load-modal-content-when-shoelace-dialog-opens/ . Notice how the whole process — from instantiating the dialog component, to requesting the content when the modal opens, to inserting it into the appropriate place in the DOM — is controlled declaratively via markup.
No More Silos
What web components will do — at least, I hope — is let us collectively build a rich ecosystem of dynamic components that work with any web stack. No more silos. That’s the web component success story.
Meta understands this, which is why they built React Native. Frameworks are a complement of platforms, and the way to commoditize platforms is to make your framework run on as many of them as possible. ↩