Hacker News new | ask | show | jobs
by jagged-chisel 20 days ago
What’s the Idiomatic Vanilla JavaScript way to bind data and UI in a web browser?
4 comments

The whole thing boils down to creating objects (the constructor is built-in) and using functions on objects. Functions are objects, too. In fact, everything except primitive values are objects.

IMHO knowledge of C++, Python, or pretty much everything that's not a lisp variant, doesn't translate well to JavaScript.

There's such a nice language with its own silly warts, readily available to pretty much anyone with a computer regardless of form factor, being misunderstood by the vast majority of programmers.

Web components, invoker commands API, etc.
With webcomponent each tag is a component instance that can hold data and there are hooks for attributes change
What are you really asking? You use data to populate content or inform your logic.
When the user changes a value in the UI, the data must reflect the change. When a value changes in the data, the UI must reflect the change. That’s “binding.” What’s the idiomatic way to solve this automatically?
I use WebSockets. If the user changes a value you have to send that changed value forward. If the value changes outside the UI you have to send it into the UI.
What does the binding look like in source code?

Do we hand-code every UI field with the code that updates the local model and then transmits it to the backend?

Or is there a way to make the boilerplate as small as possible, relying on one bit of code to handle synchronization between UI, local model, and server?

“Using WebSockets” doesn’t bind an interface element to its source of truth; it’s just the chosen transport to move the data. I’ll be sticking with a RESTy interface. But that doesn’t matter because the question is how is the binding implemented so that fewer mistakes are made synchronizing the data?

Hand coding every field’s binding logic is going to be error-prone.

You are so thinking about this only from a framework perspective, as if you have no imagination. You can answer all your questions yourself by simply writing the code without a framework. Its not that scary.

It is as simple as I am suggesting, but only if you have actually done it yourself more than once. Whether or not your application is error prone is entirely on how you execute regardless of the tools in your toolbox.

And you completely avoided answering the questions I asked. If you don’t know or understand, say so. Don’t act like an LLM that has to keep talking even when you don’t know.