Boneless UI

Had to sneak out a spooky one to wrap up the month. We talk about headless UI all of the time, but there's more to it than that.

S/O Ph4seOn3 for the awesome edit 🙏

[lalit]

Skinless -> just HTML (structure)
Boneless -> just CSS (style)
Lifeless -> just JS (functionality)
Headless -> HTML + JS
.
.
.
Some combos are just waiting to be coined

[itsMapleLeaf]

i'm just thinking about "boneless pizza" now

[orterves]

Taking all these separate libraries and mashing them together is Frankenstein UI.

[MadsterV]

So headless is like a styled component, but unstyled. What a concept! I've been doing this since day 1 with React. Why people couple their style to the component is beyond me.
Boneless is just CSS.
Skinless is JSX/HTML,
Bodyless is the C in MVC,
Lifeless is just the V in MVC.
I've been doing MVC in React for a couple of years, with very good results. Nothing amazes people like interchanging compatible views and controllers live.

[Dylan_thebrand_slayer_Mulveiny]

I can just imagine how much fun it would be to debug this. And how great it must be to write unit tests for them.

[marsharbour]

"Boostrap" typo or Halloween pun

[liviumitrofan]

Thank Theo for UploadThing. So good and useful. Keep working

[akam]

I like my UI how I like my pizza: *B* *O* *N* *E* *L* *E* *S* *S*

[zaneflow]

Nice to have a clear separation between library behavior classes, but this is more jargon to remember... Nice vid!

[luizgrocco]

So, let me see if I got that straight:

Headless -> no skin (styles). Just functionality (hooks, etc...) and bones (HTML)
Boneless -> no bones (HTML), no functionality (hooks, etc...). Just skin (styles)
Skinless -> no skin (styles), no functionality (hooks, etc...). Just bones (HTML)
Lifeless -> no bones (HTML), no skin (styles). Just functionality (hooks, etc...)

[penguindrummaster]

I know Theo tried his best to stay on topic, but that tangent about skateboarding really solidifies part of why I like his takes. In general, he is still very human and personal, despite the semi-professional exterior. The polish makes it easy to think he's just a shill for w/e new tech is in the headlines, but moments like this really add charm and personality to his opinions.

[darian.rosebrook]

lol one of my favorite things about the eBay code libraries is that they had "bones" and "skin" as component blocks before it was cool

[Skuiggly]

I love the flavour of the words! Definitely a cool perspective on things.

Only thing im not a big fan of is describing something based on what it’s not. Like when requirements are described as functional and non-functional, so the functional requirements and then the rest of it??

I would rather just categorise them as they are.
- Structure
- Styling
- Behaviour
Headless = Behaviour + Structure
Boneless = ONLY Styles
Skinless = ONLY Structure
Bodyless = ONLY Behaviour
(Which funnily enough just mirror HTML, CSS and JS)

PS: I do realise they are just fun terms related to the Halloween occasion, but I wanted to point out the flaw of naming stuff based on what they aren’t. Pretty sure I’m not the only one feeling “boneless” would be an unintuitive term for a styling library

[MrAdnan]

"Good colouring."

"That's bone"

[matthew_bub]

5 seconds til completion is crazy for any setup!!

[YuvrajSingh-hrrh]

Yo, Theo! On a side note, what are your views on Elm. I have been learning Elm and find it quite intuitive and super easy to use. I have tried to learn frontend with things like react, vue, and svelte and got very bored or overwhelmed by them. But for Elm, it is fun!

[k-yo]

Just gotta love Adam's family of quirks. Rad dude!

[wlockuz]

Good lord, how much more jargon do we need.

[KevinVandyTech]

Honestly, think that "bodyless" UI would be a better term for the TanStack libraries than "lifeless" or "headless". TanStack supplies the logic/brains, and you build out the body yourself.

[salvehn]

all of them fits nicely with Mantine UI, thankfully Prometheus recently migrated to it, so it makes easier for me to do PromQL query input integration