Hacker News Reader

Comment by outsidetheparty | Hacker News Reader

I'm very curious how do people feel about the "headless component" UI strategy? First came across the concept at a conference recently -- React Table was one of the key examples the speaker gave, in fact -- and I find the idea intriguing, but I'm not quite sure yet whether I want to subscribe to the newsletter.

Is it a useful way to separate look-and-feel concerns from functional concerns, or is it just another layer of indirection?

View on HN

I'm a fan. It's so refreshing to have all the HTML and CSS in your own codebase, under your control, instead of reading through a list of 50 sparsely-documented props only to realize that none of them quite do what you need.

Another example of this pattern is `downshift`, which is a headless autocomplete library: https://github.com/downshift-js/downshift

I would love to see a datepicker component that used this design. I have some choice words for the various datepicker libs I've used over my career and none of them are friendly.

I've never used one, but it sounds like a great idea. 3rd party React components are a huge pain in the ass to work with. People do all sorts of bullshit like re-implement half of CSS in their component's API and half the time it's easier to just build the fucking thing yourself than learn all the arbitrary rules around customisation the author has conjured up.

The best reusable components are the ones that have exactly one look, which you're fine with, and are just plug in and go.

None of that is a problem with the logic behind the component though, just the display. So for something complex that has a bunch of logic behind it, it's a real nice idea to just be able to reuse that logic and whack some html and css over the top of it instead of having to read some 6 page doc every time you want to increase the width of a border or something.

I am extremely excited about it. I think of it as a form of IOC for front-end development. Almost constantly we run into a problem where a third party React library gets us 80% of what we want, but that last 20% is where we spend most of our time and where the most bugs are introduced. By taking full control of the front-end we can minimize the API wrangling and CSS hacks we need to get the component to play nice with our UI/UX spec.

I find it very useful, It works like a "backend" for components

Actually, many people do has same idea, but they don't call it 'headless component'. They instead call it 'renderless component'. Means the component itself render no ui element and delegate every ui part to something else. Google this word will give you a lot of similar ideas.

I love this, I mostly do backend and the frontend work I do is usually making things like this so the frontend guy can just work on look and feel while I do the logic.

Reply on news.ycombinator.com