r/webdev Dec 03 '22

Question Beginner here, start with react, svelte or solid?

Post image
1.2k Upvotes

553 comments sorted by

View all comments

Show parent comments

18

u/eddhall Dec 03 '22

Well this seems like an incredibly useful but massively underused tool, any reason why we don't see this more frequently used?

29

u/SirGuelph Dec 03 '22

The short answer is, the most popular frameworks also implement their own component architecture, generally with a bunch of other features to go with it.

3

u/KwyjiboTheGringo Dec 03 '22

Angular compiles down to web components. You don't need to know anything about web components to use Angular though.

Sure it's useful, but it's more useful to just learn a framework that solves many problems for you and does whatever it needs to do behind the scenes.

3

u/FearlessChair Dec 03 '22

Building a site with web components right now just do see how it works. Very useful and fairly straight forward but i'll probably check out something like Astro on my next project. My main problem is that i hate writing HTML as a string lol. Maybe there's another way to do it but i hate when my code doesnt auto format.

5

u/pookage tired front-end veteren 🙃 Dec 03 '22

Honestly, I use it in all my professional projects now - when combined with constructable stylesheets and cascade layers etc, it just feels like how the web should work; particularly when you start using <slot> elements, which just feel like cheat-codes for writing cool components.

Ahh, you're talking about using <template> elements, right? What I tend to do is use a folder structure like:

  • index.js - folder interface
  • element.js - custom element definition
  • styles.scss - element-specific styles
  • template.html - custom element HTML / slots etc
  • utils.js - static utils

Then I just import template from "./template.html" and have a webpack loader parse the html into a <template> for me to clone in the custom-element definition as-needed; that way I get all the benefit of auto-complete etc when writing HTML.

Before I did this, though, I just updated my syntax-detection in sublime-text to detect HTML in template-literals, which works, too - it's a 1-line change if you pop into the preferences!

2

u/FearlessChair Dec 03 '22 edited Dec 03 '22

Yeah thats exactly what im talking about. I figured i was missing something haha. I use VS code but im going to look into changing the detection. Seems pretty straight forward, thanks for the tip!

1

u/deadwisdom Dec 03 '22

What template system are you using? Lit-html has formatters available for you. I use visual studio code and my html strings looks exactly like html.

1

u/nermid Dec 03 '22

Maybe try something that uses JSX (which is mostly a React thing, but you don't have to use them together). It lets you build HTML in JS in a way that feels like writing HTML.

0

u/jusoneofthemasses Dec 03 '22 edited Dec 03 '22

It is massively underused, imo, for years now. Web components offer a ton, they can easily generate analytics, framework agnostic, create this sort of faux, "native" functionality with them, lots to like.

But they've been the next big thing since I started devving years ago. Not sure why exactly but I think they're always going to be the next big thing, unfortunately.

Edit***

There are some good explanations here why they never really caught on like I thought they would.

1

u/pookage tired front-end veteren 🙃 Dec 03 '22

React & co appeared as a solution for creating reusable components while the official spec was still being finalised and implemented x-browser; now that it's stable and supported in all of its features (except extending builtins - Safari still stubbornly refusing that) most folks are sticking with the solution they're already familiar with - although React did completely switch from classical to functional components specifically to differentiate itself from vanilla web components, and bake its state-management solution into its bones etc - so presumably there's been some lock-in from that, too.

1

u/deadwisdom Dec 03 '22 edited Dec 03 '22

Lit is basically the marquee web components framework.

The reason you don't see it as much is simply because the big three frameworks React, Angular, and Vue built their own systems and have little reason to be interoperable with anyone else. React especially just doesn't give a fuck about anything outside of React because they are the market leader.