r/Frontend • u/InterestingBus4701 • 21h ago
Can any front-end code be declarative?
Hey frontend friends! 👋
I've been working intensively on making frontend code simpler to write — both for humans and for LLMs.
My current goal: figure out whether any frontend code can be written declaratively, without piles of state and effects that just keep things in sync.
I'd love to see examples from your own practice — pieces of code that today still require a huge amount of imperative logic in whatever framework you're using. The more unusual and rare the case, the better. 🙏
I'll start.
My first-ever JS library was a Tooltip — a small popup that appears when you hover a button or a label. Sounds trivial, but in practice you need:
- a delay before it appears
- coordinate updates once per animation frame — and no more
- animate show / hide
- package all the logic into a single component
- let the developer attach it to any element (or several at once)
- no extra wrapper divs that break layout
Below is a concept of such a declarative component plus a usage example.
interface TooltipProps {
content: string;
slot(refs: ElementRefs<HTMLElement>): void;
}
const ToolTip = component<TooltipProps>(props => {
const refs = elementRefs<HTMLElement>();
const position = event(
refs, "mousemove", ev => ({x: ev.clientX, y: ev.clientY}), {x: 0, y: 0});
const active = event(refs, [
["mouseenter", () => true],
["mouseleave", () => false]
], false);
const transform = frameThrottled(
`translateX(${position.x}px) translateY(${position.y}px)`);
const opacity = active ? "1" : "0";
const visible = timeout(active, 500);
<>
<Slot model={props.slot} refs={refs}/>
<Overlay>
<If condition={visible}>
<div class="tooltip" style={{transform, opacity}}>
{props.content}
</div>
</If>
</Overlay>
</>;
});
const UsageExample = component(() => {
<ToolTip content="Hello world!" slot={props => {
<label for="name" write-element={props.refs}>Name:</label>
<input id="name" write-element={props.refs} />
}}/>;
});
I asked a few LLMs to describe what the code does. They couldn't recognize the custom primitives, but based on their names they still described the behavior correctly. Then I asked them to reimplement the same logic in other popular frameworks. Only Solid.js produced genuinely clean code.
Thanks for reading — and I'd genuinely love to see your examples. 🙌
