This content originally appeared on Bits and Pieces - Medium and was authored by Fernando Doglio
Until recently I thought Web Components were a failed attempt by the industry to develop a new technology that had failed years ago. I’ve been working on web-related projects for almost 20 years now, in different roles, companies and with different technologies, and I remember reading about them years ago, and then nothing.
It was like one of those short-lived frameworks that make a lot of noise and then they’re either eaten by the current market leader or simply die off because their maintainer can’t keep up with the speed of changes in our industry.
I thought Web Components had suffered a similar fate, but boy was I wrong.
While recording a recent episode of 20MinJS (a JavaScript-focused podcast I host), I interviewed 2 of the maintainers of Fast UI, a Web Components component library being actively developed by Microsoft. And they told me why, after more than 10 years of being a “thing”, Web Components were just now, starting to be useful and a technology worth investing time on.
So let’s dive into the reason and why I think you should too, give Web Components an opportunity.
Listen to what they had to say
If you like, you can directly listen to the episode yourself and make your own conclusions, here is the full part 1 episode where we discussed the “Why” and “How” of web components:
Episode 14 - Web Components with Chris Holt and Rob Eisenberg - 20minJS
The reason why you haven’t heard more about Web Components
The idea of Web Components was born circa 2011, which makes it over 10 years old, however, we’ve heard a lot more about React, Vue, and even Angular, which are far younger technologies, than from Web Components themselves.
Why do you think that is?
The answer to that is actually quite simple: Marketing.
But to understand that answer we need to understand the scope of Web Components vs these other alternatives that have been far superior in catching our eyes and our attention for the last 10 or so years.
Why am I comparing Web Components to the likes of React and Vue?
Web Components were designed to be the building blocks of the Web in the sense that they would allow us to develop a better, more semantic and extensible language on top of HTML and JavaScript.
And React, Vue and other frameworks were developed to simplify the process of building web applications. So to an extent, they’re related, although I would place the scope of the latter a bit higher than the scope of Web Components, at least if we’re talking about abstraction layers.
In that sense, if things would’ve worked much faster, React, Vue and similar frameworks would have been designed on top of Web Components. However, they were not. Instead, each one implemented its own version of an extended markup language on top of HTML. Some of them even went as far as to implement their own DOM models.
And that is why I’m comparing these 2, seemingly unrelated technologies: because they aren’t unrelated. If WC (I’m calling Web Components WC from now on, deal with it) would’ve succeeded back in the day, the current state of these frameworks would be quite different.
What does Marketing have anything to do with it though?
And here comes the interesting bit, Web Components were designed to be a ubiquitous technology across the web, meaning, every single company developing a web browser would have to agree on that standard.
Because yes, WC are a standard. That means you’re given a set of rules to follow when implementing them in your platform (i.e your browser) and you have to follow them, or else, you simply don’t support WC.
That meant Microsoft, Opera, Apple, Mozilla and even Google would have to agree on a single standard. Consider that back in 2011, Internet Explorer 9 was the latest version of I.E and you’ll understand how hard the goal of a single, unified, standard across all browsers would’ve seemed to all major decision-makers back then.
I mean, by the time the standard arrived at their desks, I would’ve expected a few laughs from some of those people. The browser wars were a thing back then, all of them fighting to push their own idea of what a “perfect web” would be like, instead of working together towards the same unified standards.
Agreeing on something took time. Everyone had to be happy about it.
And on top of that, because this was meant to be a communal effort that would benefit everyone, there was no Marketing machine pushing this forward. Nobody wanted to help the rest, why would they?!
And in the meantime, the development community saw the need for better standards. Thus companies pushed their teams for homebred solutions.
- Facebook released the first version of React in 2013.
- Google actually released AngularJS in 2010, although it would migrate to Angular 2, 6 years later, in 2016.
- In the meantime, VueJS would be released circa 2014.
- And Rich Harris released Svelte’s first version in 2016 as well.
And none of them were using WC! But the standard had already been proposed several years before its first release. However, the lack of push from an active community meant no real progress would be made in those few years.
Each of these alternatives had something that WC didn’t: a big Marketing machine behind them. Companies like Google and Facebook were open sourcing their internal frameworks, and that made a huge amount of noise.
If they were using it, that meant they were good frameworks, right? At least that was the reasoning of the dev community. And who can blame them?! Those frameworks shaped the current state of the industry, we haven’t strayed that far away from them in the last 8–9 years, have we?
On top of that, the inherent “cult to personality” (like Rob Eisenberg mentions in the podcast episode) from the dev community, also helped influence which frameworks we would pay attention to and which ones we would ignore. After all, if you’re “nobody” to the dev community, you’ll have a much harder time releasing and making viral the next big framework (even if it’s a fantastic new idea!) than someone like Dan Abramov or Rich Harris tweeting about their next “big idea”.
And don’t get me wrong, it’s not their fault, they were in the right place at the right time, and their contributions (and the contributions of all others working with them) are very valuable. However, it’s really hard to compete when you also have to build an audience if you want your product to have a chance to succeed.
But what does it all mean? Are WC dead then? Has the marketing machine buried them so much underneath the current framework’s solutions that we’ll never get a unified standard to build the next web on top of?
Let’s answer that question.
Who’s working on Web Components right now?
Web Components were never dead to begin with. They’ve been slowly gaining traction and slowing growing and waiting for all major browsers to implement them at the same level.
And believe it or not, the last “big player” they were all waiting for was Edge, or rather, Microsoft. With the release of the Chromium-powered Edge in 2020 (almost 9 years later!) all major browsers had support for WC, which meant a unified standard (albeit an early one at that) had been finally reached.
And now, the picture looks like this:
As long as those 5 players keep up the good work, we’ll have some very interesting developments soon.
That said, we already have companies like:
- Microsoft pushing WC forward with Fast UI, a component library built with WC. They not only provide you with basic building blocks but there is also a full design system behind it.
- Adobe has released its own library called Spectrum Web Components built on top of LitElement, which is a lightweight framework used to build WC. They’ve released their entire design system using WC.
- Salesforce has released its own library called Lightning Web Components.
- Google, of course, could not be left out of this list. They have their Polymer project which is one of the first ones out there to push WC forward, however, in 2018 they released the LitElement, a lightweight library you can use to build web components. It provides reactive behavior, scoped styles and a templating system — in other words, everything you’d need to get started.
And I’m sure other companies are working on their own projects either trying to build on top of the WC standard, or using them to build some cool projects.
The point is that WC are far from dead, in fact, I’d argue that they’ve never been more alive, and this is just getting started!
Now the question remains: if you aren’t using them right now, should you get started? Why would you want to learn about them instead of simply sticking to the current status quo of the web?
Why would you want to try Web Components?
The answer is simple: the industry changes, like constantly and while it is true that the major web frameworks have remained the same over the last few years, many alternatives have popped up.
It’s only a matter of time before the next React comes along and breaks the mold.
The actual question you should be asking yourself is: why would you only focus on a single framework that could be replaced anytime soon instead of focusing on the standard the entire industry is setting for the future?
Remember, WC are a standard to build on top of, they’ve been approved by the major leaders of this industry and are being actively implemented and pushed forward. You’ll be using WC in the future whether you know it or not, better get started understanding them now and get a head start
Learning about Web Components now is an investment for the future.
What do you think? Will you give Web Components a chance? They’re not a dead piece of technology. Instead, you can think of WC as a slowly blooming flower. It’s taken them some years, but they’re coming and they’ll be part of all major frameworks we get to use pretty soon!
Get started now by reading the MDN docs (a very updated source of information about WC!).
Have you used WC in the past? What’s your take on them? Share it in the comments!
Bit: Build Better UI Component Libraries
Say hey to Bit. It’s the #1 tool for component-driven app development.
With Bit, you can create any part of your app as a “component” that’s composable and reusable. You and your team can share a toolbox of components to build more apps faster and consistently together.
- Create and compose “app building blocks”: UI elements, full features, pages, applications, serverless, or micro-services. With any JS stack.
- Easily share, and reuse components as a team.
- Quickly update components across projects.
- Make hard things simple: Monorepos, design systems & micro-frontends.
Learn more
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- Painless monorepo dependency management with Bit
Web Components are Dead: Long Live Web Components was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Fernando Doglio
Fernando Doglio | Sciencx (2022-07-28T06:18:53+00:00) Web Components are Dead: Long Live Web Components. Retrieved from https://www.scien.cx/2022/07/28/web-components-are-dead-long-live-web-components/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.