Live data from Hacker News

HTML with Superpowers: An Introduction to Web Components

htmlwithsuperpowers.netlify.app

61–70 of 130 posts

Re: HTML with Superpowers: An Introduction to Web Components

#61
post #15

Why is there no standard/widely used vanilla-js based webcomponent for creating a table with filtering+sorting+pagination? It's such a common and useful thing.

I assume that it's because there's basically no upper scope limit, and it's not obvious where the cut should be done.

Just take filtering - there are so many possibilities of how filters can look like, how can they be combined (AND, OR, nested) etc.

Re: HTML with Superpowers: An Introduction to Web Components

#62
post #47

Earlier quoted context omitted.

> Web components have their place but they're no panacea and the ecosystem is still pretty young. And yet wc proponents keep pushing them as if they were panacea. And "ecosystems is young" is a funny statement for something that is entering its 12th year of development (and fifth year of wide availability in browsers). > The current native feature set is somewhat lacking so you're definitely going to want to augment…

Examine html source of such sites as github, youtube, redhat, adobe — you will find web components either sprinkled there or being a principal building block. They are certainly a workable solution.

> Examine html source of such sites as

Just because someone uses a technology, doesn't mean it's good. I could point to plenty of sites still using first versions of Angular. Is it workable? Yes. Is it good?

Also, I'd skip youtube as an example. No idea what incentives they had internally to re-write everything in web components, but they (and the web) paid dearly for it:

- Youtube was re-written in v0 of Custom Components. Which was deprecated as soon as they re-wrote it. Chrome couldn't remove v0 from the browser until Youtube was re-written (undoubtedly at great expense) with v1 four years later

- The polyfill for v0 was famously extremely slow in Firefox. Given that Youtube is one of the most popular websites (if not the most popular), you can imagine what it did to Firefox's image.

If you have an extra billion of dollars for such shenanigans, sure, knock yourself out (especially if it helps to cripple your competition).

Also IIRC GitHub is using React as well now, but I can't find the relevant link and discussion right now.

Re: HTML with Superpowers: An Introduction to Web Components

#63

It obviously hasn't happened, but I hope that web components eventually make serious inroads. A UI library for React, Vue, Svelte, Solid, whatever... Imagine being able to have a component library that works with any of them (or none of them). Since I really like mithril and there's one UI library, I've been playing with Shoelace and Crayons and they're pretty nice to work with, but I remain a bit puzzled why there's…

> A UI library for React, Vue, Svelte, Solid, whatever... Imagine being able to have a component library that works with any of them (or none of them).

You don't need web components for that. You need https://open-ui.org (started, of all people, by Microsoft). Unfortunately Google et al are too busy sinking hundreds of millions of dollars and countless man-hours into web components (with no final goal in mind and increasingly arcane and complex workarounds for their deficiencies) to be interested in this.

> but I remain a bit puzzled why there's so few players in the space.

In which space?

In UI libs for the web? There are thousands, all busy re-implementing the same dozen-or-so primitive controls.

In UI libs for web components? Because they are a badly designed tech that still requires you to reinvent the same dozen-or-so primitive controls and combat the issues of styling, a11y, no SSR etc. that they bring.

Re: HTML with Superpowers: An Introduction to Web Components

#65
post #24

Earlier quoted context omitted.

What do you mean? There are tons of these around. Are you complaining that none of them are popular enough?

None of them are standard. It should be baked into the cake. It's been a puzzler to me since I started programming over 20 years ago. Every third-party library existed basically just to provide a usable grid because most everything else was good enough. Combo boxes and date pickers too but those were less of a pain to implement.

> None of them are standard.

If there were a standard, you'd probably still complain that it doesn't match your use-case.

Re: HTML with Superpowers: An Introduction to Web Components

#66

Earlier quoted context omitted.

You'll likely still need someone with sufficient JS skills. The key will be for the designers to think in such terms (i.e., components). In nearly every (marketing) agency I've worked at, the designers envisioned themselves as creatives. "Boundaries? Not us. We live outside the box..." Trying to get them to understand you can have the same underlying structure and just bend it with CSS wasn't something they've wanted…

Marketing is one portion of web design. At a lot of BigCos, the designs are supposed to be standard outside of the once in a generation refresh. One of the advantages of a big brand is a consistent, known quantity, and so things have to be harmonious; Starbucks is not out there making crazy new cups for every new drink they sell, every McDonald's location looks more or less the same, etc. A lot of the variation we've…

Yes. To my point and yours, SB's hero or product card can have exactly the same underlying markup as McDee's. Where those brands, and brands, are able to part is the CSS.

The irony is, marketing agencies that do web design work for multiple clients should be looking to leverage web component bricks. The majority I've seen, are not; at least not yet.

Re: HTML with Superpowers: An Introduction to Web Components

#68
post #64

But I just want to be able to specify a header or a footer in vanilla HTML...

Although not vanilla HTML, server side includes are the closest to this that we've got. I use them quite extensively. This is basically what my boilerplate looks like:

  
  

  
    

    
    
  

  

    
      
    

    
    

    
      
    

  

  
I'll put all my favicon, CSS, and other common head data in the /ssi/head.html file. Nice and simple and good enough for me. Can make it even more minimal by moving the and tags into their respective SSI files.

Re: HTML with Superpowers: An Introduction to Web Components

#69
post #22

Just awful. 10 years in the making (if you can call endless bikeshedding committee meetings the "making" of anything) and still barely usable. It offers nothing in way of ensuring that custom elements behave like builtin HTML elements. Half the elements I've come across will break or perform no-ops when you update an attribute or set a propety after it was attached to the DOM. Nevermind detaching and reattaching to t…

>Just awful. 10 years in the making (if you can call endless bikeshedding committee meetings the "making" of anything) and still barely usable.

This seems like the norm for tech now days. A lot of meeting and work and nothing major or significant really gets done. Seems like the the whole industry is about making it easier and simpler for new developers to get develop.

Regarding React, ES should just stick and simplify E4X that would just really make all these front end lib not necessary.

Re: HTML with Superpowers: An Introduction to Web Components

#70
post #22

Just awful. 10 years in the making (if you can call endless bikeshedding committee meetings the "making" of anything) and still barely usable. It offers nothing in way of ensuring that custom elements behave like builtin HTML elements. Half the elements I've come across will break or perform no-ops when you update an attribute or set a propety after it was attached to the DOM. Nevermind detaching and reattaching to t…

I don't get this comment. I don't care if a usable web component is built with stencil, lit or not, what I care about is that I can use that same library WHETHER I'm using React, Vue, Svelte, Solid or whatever.
Post reply on HN