jenna

Why Judging APIs by Syntax is Misleading You APIs often behave very differently underneath. What matters is not just how an API looks on the surface, but also the abstraction layer it belongs to.

jjenzz.com/judging-apis...

as web devs i think we all have an element of head up ass in us tbf

things browser natively supports yet ppl rebuild, but tbh mostly ppl just slap directive at top of large comps instead of abstracting piece that needs it.

import helps here—simpler to abstract piece & import as client into original than change all imports for original.

from my perspective tho “flipping” things just isn’t that common, and if we do, part of that flip is to refactor imports, like any refactor, you clean up. eslint cld flag redundant client imports

i agree with everything you are saying tho re imports getting stuck in client, no solution is perfect here.

i actually love RSC so our switch bk to SPA makes me a bit sad 😅

i mean ppl reach for client features immediately cos it’s easier to add directive than consider how to achieve it w/o client features.

app becomes unnecessarily client heavy again, at which point the mental overhead of RSC becomes less worth dealing with. we moving bk to SPA for this reason.

yeh i understood the intent here but in practice i have found it bumpy, even for code i have written entirely myself.

we add directive as soon as we want (not need) state. becomes a client app again bcos ppl comfortable there, instead of being deliberate. rsc feels redundant at that stage

exactly

ppl tend to resort to client features prematurely (myself incl.) so i found the plugin helps minimise that, which in my mind is a main benefit of RSC

i found that framing a bit awkward tbh. i don’t rlly want comp author to decide what’s in my client bundle. it wld ideally be my choice when i consume it. for example, if i import and it fails, i might rebuild it myself 1/2

i'll probably be the only that finds this useful but just in case—i've published a plugin for nextjs to declare a server/client boundary w/ import attributes ✨

github.com/jjenzz/next-...

oh okay, i take it back 😉

~12 years in one spot 😳 that’s unheard of. impressive. congrats on the new gig 🎉🥂

yeah, i get your concern 😞 i can’t imagine you fading into obscurity tho, ariakit is awesome. i’ve recommended your lib often since radix went stale. realistically tho i doubt we’d have yet another dialog to choose from if the aim wasn’t one-to-rule-them-all

i’d be surprised if they didn’t take inspo here tho tbh, but ariakit is competition for them so it prolly wldn’t be the smartest business move to mention it front & centre in such a saturated comp market—the USPs are limited haha

reality is, we don’t _know_ if our work was the inspo. render prop has been around forever & ppl often reach same conclusions through their own exploration. reach ui tried to claim credit for radix compound design for ex, but i’d built comps that way for years and had no idea reach even existed lol

i hear you, ppl replace the word radix in their vocab with shadcn, even when they completely restyle it. others copied impl details we spent ages on, but i learnt to find it flattering. the swedish have a great word for this and it contributes to why they rank so high on global happiness—Jantelagen

similar vibes 😅

mine thinks i am matt so we’re off to a bad start

100%. i really feel it might contribute to why ppl love CSR + RQ so much. they can't reach into hoisted loaders/server easily so can't comprehend the alternative—no option but to colocate granular queries everywhere (thick clients)

const Page = () => <Chat />; const Chat = () => ( <div> <Header /> <div> <Sidebar /> <Main /> </div> </div> ); const Header = () => ( <header> <Logo /> <Heading /> </header> ); const Sidebar = () => ( <aside> <ChatMenu /> </aside> ); const ChatMenu = () => ( <ul> {items.map(item => <ChatMenuItem />)} </ul> ); const ChatMenuItem = () => <li />; const Main = () => ( <main> <ChatMessages /> </main> ) const ChatMessages = () => ( <div> {messages.map(message => <ChatMessagesItem />)} </div> ); const ChatMessagesItem = () => <div />

const Page = () => ( <Chat> <Header> <Logo /> <Heading>Title</Heading> </Header> <div> <Sidebar> <ChatMenu> {items.map(item => <ChatMenuItem />)} </ChatMenu> </Sidebar> <Main> <ChatMessages> {messages.map(message => <ChatMessagesItem />)} </ChatMessages> </Main> </div> </Chat> ); const Header = () => <header>{children}</header>; const Sidebar = () => <aside>{children}</aside>; const Main = () => <main>{children}</main>; const Chat = () => <div>{children}</div>; const ChatMenu = () => <ul>{children}</ul>; const ChatMenuItem = () => <li>{children}</li>; const ChatMessages = () => <div>{children}</div>; const ChatMessagesItem = () => <div />

ppl tend to do left instead of right so it's obvious why RSC is a struggle there. makes it harder to reach into server so you're inevitably fighting that friction. context is our friend here tbh—`Chat` can be a client comp w/o making `Header`, `Logo`, `Heading` one too etc.

i feel the hurdle is indeed education. i wasn’t keen on them initially or on hoisted loaders, but like both now. a huge issue today is that ppl don’t do composition well so it seems painful. when we do tho (flat owner trees), RSC is a no brainer. we need to start there w/ education imo

this “thick” vs “thin” terminology is fab. i keep calling it “smart” vs “dumb”. thin is the dream but tricky when optimistic updates are needed—shifts “thickness” back into client. i’m desperate for realtime RSCs 🥹

haha amazing 🥳

i believe this is what react-party was doing and no, tmk no one has "done" it already as far as making something available we can toy with 😳

i have just learned that Sunil parked work on it due to other commitments. tis a shame bcos it seems an obvious hole in the market that's screaming for the taking haha

snap, my thinking precisely

ah i see what you mean. yeh, doesn't make sense if you want local-first but i have issue w/ client-as-source-of-truth (+ other aspects). zerosync.dev is solving those but Sunil's react-party is what i'm really after—server-as-source-of-truth + dumb client, w/o sacrificing perf. diff levers right

curious how a reactive db makes HATEOAS redundant?

i dno, @threepointone.bsky.social has impressive demos that’d be very different, and cld eliminate a whole host of day-to-day maintenance headaches. no need to maintain RPCs, optimistic updates, client-side state, or RQ caches—realtime JSX as the HATEOAS is an area i’d love to see explored more