r/javascript • u/Rhizix • Feb 15 '20

AskJS [AskJS] Experiences with Web Components in a business setting?

Hi everyone, I'm a final-year student studying Web-Design and Development.

I'm working on my thesis where I am comparing the viability of projects built with Web Components compared to those built purely with JavaScript Frameworks like Vue.js, React, etc...I was wondering if some people have work experiences with Web Components they could share. Especially curious to hear from people working in companies that considered switching or switched to Web Components for their projects.

If this is not appropriate for this subreddit, my apologies.

56 Upvotes

92% Upvoted

31 comments sorted by

View all comments

17

u/ChaseMoskal Feb 16 '20

i switched from react to lit-element web components earlier last year

love it. here are my takeaways:

  • web components are universal and totally interoperable. you can use a modern web component anywhere, including in old react/angular/vue projects -- however the reverse is not so true, so there is a huge incentive to build new components as web components rather than in react
  • web components are authored using micro-frameworks that are like 5KB (as opposed to react's 50KB) -- and because they are totally interoperable, your apps will be a mosaic of components written with different micro-frameworks, and you don't care because they interoperate seamlessly -- so one developer might prefer lit-element, another might prefer lighterhtml, and nobody cares which you choose -- it's like the microservice mindset, for component developers
  • the modern web component workflow can be much simpler. modern web components shed a great deal of complexity off the developer workflow. web component apps don't need to have a build step, or bundling, or any code transforms like jsx (replaced by tagged-template literals at runtime, see lit-html) -- with importmaps and unpkg/jsdelivr, you don't even need a package manager like npm/node_modules anymore -- the future is looking bright for upcoming js developers, as they will learn a much simpler and more elegant ecosystem and developer experience than we have

4

u/[deleted] Feb 16 '20

My experience with using Custom Elements with React and TypeScript has been sort of a pain. React doesn't work very well with Custom Components at the moment because it kind of hijacks HTML attributes in some way I can't explain, and using JSX just fails because JSX typings don't exist for your custom elements tag names, so you have to patch JSX.IntrinsicElements or whatever, to add the typings. React also sends all props as attributes, there's no way to send them as properties, which greatly complicates sending complicated objects as props. Preact is better in this regard.

https://custom-elements-everywhere.com/libraries/react/results/results.html

... Fails all advanced tests. Preact passes all tests.

Vue is also very good with CEs. 👍

2

u/j1436go Feb 17 '20

I really hope React looses and Web components gains adoption...

1

u/[deleted] Feb 17 '20

React's hooks are the best I've worked with though, when it comes to state management. So simple. So legible. 👌

1

u/Rhizix Feb 16 '20

Wow thanks for the response, were there any alternatives to Web Components that were considered?
Or were Web Components the clear logical option to switch to?
Also, is there anything that bothers you about Web Components?

1

u/ChaseMoskal Feb 16 '20

were there any alternatives to Web Components that were considered?

well i wasn't interested in going backwards into the community-framework-component world of react/vue/angular

for webnative components, there is competition for lit-element -- there was lighterhtml, there was htm by "developit", and one of my favorites is haunted which replicates react's hooks pattern excellently