Hacker News Reader

Comment by cocktailpeanuts | Hacker News Reader

What we need in 2021 is not this site, it's a youmightnotneedreact.com

I've got a toolkit of pure CSS widgets I privately call "You might not need Javascript". Dropdowns, modal/lightbox, concertina, slideovers, toggles, popover, transitions, no problem.

Hacks with :checked are well known, but you can do a ton of stuff with :focus-within, :invalid, :target, :hover, <details>/<summary>/[open], grids/flexbox/visibility, and the adjacent-sibling selector. <dialog> is almost there, although it still needs a JS activation hook.

It feels really good to have a complete application UI that works with JS disabled, and I can still progressively enhance it with JS for necessary perversions of HTML like ARIA etc.

As new web developer, I would LOVE to learn how to do this kind of thing purely in CSS!

My process:

* trial

* error

* reading the HTML, DOM, and CSS standards documents very thoroughly end-to-end

* stackoverflow

* repeat

I would say that this corollary would only be possible once webcomponents have form support in all browsers. In my opinion this is the last major hurdle before there is a native alternative for reusable components in the browser. Firefox is working on it[1] but there's no current roadmap for the work for Safari (though the initial form element proposal was well received by their team).

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1552313

I don't think it will replace React, honestly.

WebComponents can do just a fraction of what React/Vue do, and it's just the least interesting parts. The encapsulation is great, of course, but it was already possible to have "reusable components" back in the jQuery days and before.

All the WebComponents usage I've seen professionally lately were wrapping React/Vue or using some other lightweight framework that does something similar.

Not saying WCs are bad tech: just saying I think there are some great ideas in Vue/React that still don't have a native API. Would LOVE to see a new version of WebComponents adopting some of those ideas (only the good ones though haha)!

We need a better term for front-end-js-frameworks than to keep typing react/vue, or variations of it like react/vue/angular, react/vue/svelte, react/vue/angular/svelte,

The term is Reactive but I wanted to be more specific.

The Shadow DOM spec always seemed like a good idea poorly implemented to me.

As well as the form issue, what made webcomponents untenable for me was that you can't use slots without opting the whole component into CSS encapsulation.

Great if you want to distribute components without fear of the consumer's CSS messing with your styles, absolutely useless if you want to extract common patterns in your own app because now you have to duplicate the relevant CSS in every component.

And of course in 2021 you could build the site using Vue with GraphQL and a CDN deployment pipeline with auto scaling :)

Build it as a single document in pure html + inline css with 20 mb of text on it and lazy loading images.

Kubernetes, docker, nuxtjs, mongo

Doesn't everyone know you don't need React? That it's a choice?

That said, I was once a single page app skeptic but I now think React and Vue are great alternatives to HTML/templates that compile to HTML if you have a reasonably complex front end. Pre-React and Vue, in the Angular.js/Ember.js/Backbone era, SPAs were not in a stage of maturity that made it simple or optimal to use them as a primary front end. Today I'd say for a complex FE go ahead with React or Vue, if you have a very simple FE, definitely consider HTML/template-to-HTML as a serious option.

Even better: youmightnotneedjavascript.com

(and no, I don't mean WebAssembly - bring back static websites!)

Reply on news.ycombinator.com