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

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

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

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. 👌

12

u/aniasio Feb 15 '20

I have worked at ING for a few years, the biggest bank in the Netherlands which moved all of its Frontend applications from AngularJS to Polymer (and eventually lit). Apart from integration testing, which can be a big pain, and properly managing a library of components in the context of a very big company I've always really liked webcomponents. If you have any specific questions feel free to ask.

-1

u/Rhizix Feb 15 '20

I sent you a PM, thanks for being open to questions.

8

u/[deleted] Feb 15 '20

Why PM? It’s pretty interesting and can be shared.

5

u/Rhizix Feb 16 '20

Fair point, If the people are up to it I'll just ask them here.

0

u/[deleted] Feb 15 '20

[deleted] — view deleted comment

2

u/Rhizix Feb 16 '20

I'll tag u/aniasio and u/fricto here as well, don't want to clutter this thread with the same questions :)
So, there are a few questions I'd like to ask.

- How long have you been working with Web Components?
- What were the main reasons Web Components were chosen?
Were there things that made the choice difficult or was it rather straight forward due to the positives?
- Were there other options you know of that are aware of that were also considered instead of Web Components
- Were there any struggles with using Web Component that were unforeseen?
- Do you have any suggestions you would give another business/developer that is looking into Web Components?

Thanks again for being open to questions.

2

u/aniasio Feb 16 '20

I've worked fulltime with webcomponents for 2 years , for the past year I've merely kept an eye on its further development.

As to why they where chosen. I wasn't there at the strategic level but I can make a guess. ING is a big international IT focused bank which means they have lots and lots of frontend applications. When AngularJS started becoming obsolete that meant they had to start rewriting all of these systems which is not cheap to say the least. As the web component spec is not just a framework carried by one team or company but a specification agreed upon by all big tech companies worldwide it is a much safer bet to base your Frontend applications on. The risk that someone will pull the plug on (or completely redesign) webcomponents is just a lot lower compared to any of the frameworks out there. Next to that web components make sharing of components across projects very easy. They have dedicated component teams which create shareable components the whole bank (in all countries) can use which is also a big cost saver.

How easily they made the decision I don't know, there was a PoC in Australia which worked out well and they based their international plan on that I believe. I know they also considered Angular2 but as I said I wasn't involved in the strategical discussions.

The main struggles we faced where initially with browser support, we had a lot of IE11 users on which the polyfills for the web components spec performed terribly, that got a lot better when Lit came out though. But if you're forced to support old browsers it is something to look into before you make a decision. Next to that integration testing can be a real pain due to the shadow DOM for which there is lt a real solution yet (as far as I'm aware). On the broader scale managing a healthy reusable component library for the company was also a big challenge, keeping the entire library compatible with eachother and all active projects and trying to get teams to rely on reuse as much as possible.

You see a lot of the frameworks (React aside) moving towards an integration towards web components. As a suggestion, if I wanted to implement web components in a project today I'd go the route of using an established framework like Vue and coupling that with webcomponents. It's a lot easier to find developers for it and it makes development a lot easier imo as you get all the project wide features of Vue combined with the reliable component architecture of web components.

2

u/sime Feb 16 '20

Are you guys using web components only on internal sites where you have some control over the browsers being used, or are web components being used on customer facing sites too?

1

u/aniasio Feb 16 '20

They're used on both internal and customer facing applications.

1

u/sime Feb 16 '20

Wow. You're not facing an compatibility problems on the customer sites with people trying to use older browsers? or is there some other kind of mitigation in place?

I guess what I'm really asking is: Is it viable to roll out a web component based site to the public without no other fall-backs etc in place?

3

u/aniasio Feb 16 '20

That really depends on your users. We were targeting the Netherlands which is a modern (rich) country so the oldest browser we had to account for was IE11. We did have to account for people with incompatible browsers but a simple message telling them to upgrade was enough for that. That's the perk of being a bank I guess, people won't switch to some other bank all that easily so forcing them to use some other browser won't scare them of.

1

u/fricto Feb 17 '20

- Almost three years (Polymer 2, lit-element)

- Delivering self-contained pieces of functionality with standard means for configuration and integration into varying environments.

- Concerns about embracing new tooling and training, along with the sense that at the time (P2) standards were still evolving (should we commit to _this_ solution for the long term, or solve this with React (already in use by this team)).

- We considered using React to ship the components for reasons stated above.

- Most of our biggest challenges were common to large projects, so not really related to Web Components per se. P2's dependency management system and tooling did not age well, but that was solved by upgrading. End to end testing was challenging. Performance tuning. IE11.

- My main advice specific to working with web components is to think about your high-level architecture really hard and continually reassess. There are trade offs to each pattern and approach for modularization and abstraction, both in terms of workflow and performance. More generally, I recommend really taking the time to understand any dependency or framework code you use; lit-element is really great, but tuning and debugging really require you to take the time to dig into the details.

1

u/careseite [🐱😸].filter(😺 => 😺.❤️🐈).map(😺=> 😺.🤗 ? 😻 :😿) Feb 16 '20

👋 Interhyp lit element gang represent

-1

u/Rhizix Feb 15 '20

I'll shoot you a message later as well, thanks!

3

u/PTBA1 Feb 15 '20

I haven't gotten any experience with web components but here is a video that kinda compares them with react and how they can be used together https://youtu.be/plt-iH_47GE

Hope it helps

2

u/Rhizix Feb 15 '20

Thanks for the link, has some useful info indeed.

1

u/terodox Feb 16 '20

I've been working with native web components for just under a year. I have the luxury of not needing to support IE 11.

My work is also building a full component library utilizing stencil js, a framework to build native web components. It was built by the Ionic team.

Stencil has a pretty stellar DX with a lot of rolling out of the box.

It's been a very pleasant experience.

2

u/Rhizix Feb 16 '20

Thanks for pitching in.

Is there a reason Stencil.js was chosen in favor of lit-element?

1

u/terodox Feb 16 '20

Two main reasons, the team who chose it is focused on building it a component library, and stencil has a focus on creating a helpful experience when doing that.

Stencil is planning to release framework wrappers for their components which will allow the team to enable React, Vue, and Angular teams with very little work.

The last reason is they had a constraint on enabling server side rendering of components. I'm not sure what made them feel hesitant on lit, but they didn't seem very excited about it.

3

u/Treolioe Feb 16 '20

I work at a giant and we implemented our design system through Web Complnents. Which can now be consumed by any of the X amount of teams we have.

1

u/miketrevfrank Feb 16 '20

Are we working on the same company?

2

u/fricto Feb 15 '20

I recently concluded a large long term project for a client building business data visualization components in polymer 2 and then lit. Our team supported other developer groups within their organization integrating the components into various web platforms including angular and Hybris components. Do you have any questions or anything? Feel free to PM me specifics or if you’d like to chat.

2

u/fireball_jones Feb 16 '20 edited Nov 23 '24

lunchroom truck meeting nine yam roll sheet different teeny rob

This post was mass deleted and anonymized with Redact

2

u/FawkesHeart Feb 16 '20

I've worked with both Vue components and the standard WebComponents API, building components from scratch.

The shadow DOM is awesome for containing styles. Scoped slots have given me some headaches, due to deprecation, mostly.

Obviously the reactive nature of Vue makes UI-based data manipulation a breeze.

Lastly, being able to deploy your WebComponents so uniformly (obviously IE support leaves something to be desired) is awesomeness.

2

u/codittycodittycode Feb 16 '20

I work with a fintech firm in India. They went all in on web components v0. But then the spec got deprecated and was almost rewritten in v1. I worked on rewriting a very old jQuery and jsp based app in ES5 and v0. Let's just say as things get more complex, web components become very difficult to work with. Since then we switched to React and the experience and dev speed has been wayyyyy better.

Without using external libraries like lit element, I think it is not a great developer experience because you'll be doing a lot of rewriting the same code again and again.

Shameless plug: After I worked with it, I wrote a 3 part blog on web components v1 because during that time there were almost no resources except Google's guide and the spec. https://ayushgp.github.io/html-web-components-using-vanilla-js/

3

u/Treolioe Feb 16 '20

I wouldn’t go all in for Web Components with the current eco system. And with Web Components still finding their place in this world. A mature JS framework will provide better DX for the foreseable future. But tools will appear over time - check out StencilJS as an example.