DEV Community

Discussion on: Create Reusable Web Components in HTML

Collapse
 
mjgs profile image
Mark Smith

Thanks for the well written article.

Why is it better to use web components than just vanilla javascript?

Collapse
 
bennypowers profile image
Benny Powers ๐Ÿ‡ฎ๐Ÿ‡ฑ๐Ÿ‡จ๐Ÿ‡ฆ

Web components are vanilla JavaScript

Collapse
 
mjgs profile image
Mark Smith • Edited

Yes indeed they are. But why are web components better than just using other existing javascript primitives like functions / classes etc ?

Thread Thread
 
bennypowers profile image
Benny Powers ๐Ÿ‡ฎ๐Ÿ‡ฑ๐Ÿ‡จ๐Ÿ‡ฆ

Well, "better" for what? If you want to calculate a sum from a list - don't write a web component, use reduce or loop. But if you want to create reusable custom HTML elements to progressively enhance your content, web components are spot on.

Alternately, if you're building a single-page web app and want to organize your code into UI components, I believe you'd be hard pressed to find a better primitives to build on than custom elements, shadow DOM, and es modules.

Why build with components? It's the state-of-the-art and a well regarded UI engineering technique in many systems not just on the web.

Thread Thread
 
mjgs profile image
Mark Smith

Thanks for your reply.

Yes thatโ€™s sort of what I am asking. Lots of things are โ€˜state-of-the-artโ€™, but that doesnโ€™t tell me anything. Certainly feels like they could be a great primitive, yet there isnโ€™t much uptake from the dev community. Itโ€™s not a criticism, just describing what I see.

Iโ€™m trying to get a handle on what type of situations are well suited to web components. Reusability is a clear benefit. That sounds great.

Iโ€™m also interested to see how they enable/promote progressive enhancement. Anything there would be awesome.

Thread Thread
 
bennypowers profile image
Benny Powers ๐Ÿ‡ฎ๐Ÿ‡ฑ๐Ÿ‡จ๐Ÿ‡ฆ • Edited

there isnโ€™t much uptake from the dev community.

Apple, Aqovia, EA, Forter, GitHub, Google, IBM, ING, Maersk, Microsoft, Mozilla, Nintendo, Rabobank, Red Hat, Salesforce, SpaceX, VMware, Williams-Sonoma and others all ship web components.

chromestatus.com/metrics/feature/p...

10% of all Chrome page loads used custom elements

just describing what I see.

The perception among developers that React is king and web components aren't at all used is just twitter noise, nothing more.

Thread Thread
 
mjgs profile image
Mark Smith • Edited

I wouldnโ€™t be a good developer and engineer if I didnโ€™t point out the irony of you brushing off the โ€˜common viewโ€™ on frontend frameworks as Twitter noise, right after justifying your point of view using a Twitter thread.

However having said that, I do note that the fellow you quoted does have a very well written and convincing blog post covering reasons to use web components:

log.rockerest.com/post/why-i-use-w...

Iโ€™d like to see some articles from the engineering teams of these companies that are apparently using web components. Why arenโ€™t they talking about it?

Itโ€™s odd that so many big companies are using them, yet there are close to zero job adverts looking for devs with web components experience. I have been looking at A LOT of job adverts recently so I know that to be the case.

Thread Thread
 
scott_yeatts profile image
Scott Yeatts

I've used them for about 2 years and LOVE them (to the point I'm getting self-concious that all of my comments are about web components... It's NOT a silver bullet! Sometimes old-school frameworks are useful too, just like sometimes you might find a reason to use jQuery in this day and age)

The problem may be that they're all using web components under the hood in various helpers: Stencil is my flavor of component compiler (built by the Ionic team... The reason Ionic v4+ is multi-framework and not just Angular? Web components)

Salesforce has been using web components for almost 6 years: Lightning Web Components.

Apple used Stencil in part of Apple Music (among other things), but it's just a part of the app. Github's components are called Catalyst, and the web components re-imagining of Bootstrap is called shoelace.

This stuff is all over the place, but sometimes it's realizing the tech being used behind the scenes, because the selling point isn't necessarily the tech involved, but the flexibility, and in some cases the creator's intent is to supplement the current status quo of frameworks, not upend it, so in some instances they might not even make it clear it's built on the Web Components spec. So the job post might SAY "Ionic" or "Salesforce" or what have you, but what that MEANS is web components.

That said, the Ionic team has been very active on Twitter and blogs talking about how important their decision to run with web components was.

I don't build Ionic apps, but man have I loved Stencil.

Thread Thread
 
bennypowers profile image
Benny Powers ๐Ÿ‡ฎ๐Ÿ‡ฑ๐Ÿ‡จ๐Ÿ‡ฆ

That's a great point! Not many devs write blog posts about querySelector, but that doesn't mean it's "unpopular" or to be avoided.

Thread Thread
 
mjgs profile image
Mark Smith

Perhaps we should just start calling them secret web components from now on.

These secret web components sure sound great.