DEV Community

Discussion on: The Web Components journey: wrong ways, lacking parts and promising paths

Collapse
 
ssimontis profile image
Scott Simontis

I tried to use Web Components on my most recent project and failed miserably. Legacy systems was probably the biggest thing holding me back, as I had to support IE11 and not all component libraries were able to provide that support through polyfills, so I sat there confused, trying to figure out the differences between a dozen libraries I had never heard of, and attempting to do some tutorials with each to get a feel for what would work out well.

I was really interested in Svelte, but I haven't ever used Typescript before and that became enough of an issue that I had to choose something else. The site I was making the components for is built off of ASP.NET Web Forms, so it was really difficult to bootstrap data into the pages and I couldn't figure out a reliable build system for my components. I gave up and went back to the site's default jQuery approach because I couldn't waste any more time pllaying around with things. If I had to do it again, I would probably just use Vue with multiple roots instantiated on the page.

At my next job, I won't be stuck with as many legacy systems, but I will be switching to a mainly-backend role and won't have much sway with the front-end team, who is all about React. I see value in Web Components, but I don't have enough experience to validate any of my points. I wasn't able to make any production-grade examples which demonstrated the value of Web Components, in fact, I wasted hours and hours frustrating the hell out of myself.

There were too many options available and I felt overwhelmed. Most of the options provide poor documentation, or none at all. There didn't seem to be a solid community I could rely on if I had questions and overall I got a sense that there wasn't a lot of knowledge to be passed around. I have some time off until my new job begins and I considered looking into Web Components during this time, but it was such a frustrating experience I don't want to re-approach the issue. I think I might learn Haxe or ReasonML instead.

Collapse
 
paulmaly profile image
PaulMaly

Hi, Scott!

I was really interested in Svelte, but I haven't ever used Typescript before and that became enough of an issue that I had to choose something else.

Could you please describe a little bit how exactly Typescript was affected you to use Svelte? Actually, Svelte doesn't support Typescript at all for now.

Collapse
 
ssimontis profile image
Scott Simontis

My bad, I meant to say Stencil. Trying to get a grasp on the concepts behind web components takes a lot of brain cycles for me right now...they make total sense to me and a componentized architecture with communication visa a message bus is how I have been designing Javascript for years. So I understand what they are supposed to accomplish and it excites me, but I have a very informal definition of building components over the years vs doing it in a standardized way. Hand coding components just takes a really long time, so I felt like I would be wasting time if I didn't go with one of these support libraries. Typescript was just one thing more to have to remember on top of everything else, it was information overload and I was super-stressed out already.

I also think it might have been a much better ending to the story if I wasn't working with an ASP.NET Web Forms-based CMS. There is 0 info out there on getting Webpack set up in Web Forms, and it is something I struggle to do in a modern environment already. This project was the breaking point where I realized there was so much technical debt in this company's website that making any productive, major changes was going to be near impossible. It was built by an "expert" agency before I was hired and it was some of the worst code I have ever seen, so glad they "accepted my resignation early" and let me go.

I'd be curious to see them work out on a project I don't actively dread working on.

Thread Thread
 
paulmaly profile image
PaulMaly • Edited

Oh, I see, everything fell into place. So, I definitely advise you to try Svelte. It has pure and neat syntax and a bunch of built-in features under the hood. Shows us great benchmarks metrics and can be compiled as native Web Component by setting a single flag in compiler options. Check out this video for a quick overview: youtube.com/watch?v=Gne762oc7s4

Collapse
 
slashnot profile image
slashnot

Try hyperapp. Its a 1kb alternative to vue.

Collapse
 
webpadawan profile image
Serhii Kulykov • Edited

Thanks for the feedback! As I mentioned, the lack of documentation and best practices is the key, and might become a blocker for many teams. That's why I have started working on "Web Components the Right Way" project.

Svelte and probably other similar "disappearing frameworks" might get attraction once they stabilise and provide clear documentation and smooth developer experience. The popularity which Vue gained is a great illustration.

Hopefully React will gradually update its internals (at least the project announced as "React Fire" sounds promising) to be more compatible with usage of native DOM APIs, but I don't have enough context to make any statements on that.

Collapse
 
ssimontis profile image
Scott Simontis

That's a noble effort. I'm curious about your project, it sounds really cool. Is there anything I could help out with? I'd really love to learn how to do this right and I can see it being something to advocate for at my new job. I will mostly doing backend so it would be cool to have a connection to FE still.

Thread Thread
 
webpadawan profile image
Serhii Kulykov

Thanks for the feedback! At the moment, the list contains a bunch of links to specs, various articles and tutorials, etc. Feel free to hare any feedback on the structure, order of sections or anything that would help to make it more clear and easy to use by newcomers.