Thoughts
A short (mostly incorrect) history of web development:
Source-of-truth is HTML, nothing's interactive
<div>Content</div>
Problem: Nothing's interactive
Source-of-truth is HTML, augmented with in-line JS
<div onclick="myFunction()">Content</div>
Problem: JavaScript lives in an HTML attribute string. It doesn't know where it's being called from. You need to remember to escape any quotes in your JS. All JS functions are in the global scope
Source of truth is HTML, JS is separate
document.getElementById("myDiv").addEventListener("onclick", myFunction);
...
<div id="myDiv">Content</div>
Problem: Verbose, annoying to work with. Also JS is now far from the HTML
Source of truth is HTML, jQuery baby!
$("#myDiv").click(myFunction);
...
<div id="myDiv">Content</div>
Problem: Doesn't solve any other problems but look at how few characters there are.
Source of truth is JS, React class components, OOP!
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myFunction = this.myFunction.bind(this);
}
myFunction () {}
render () {
<div onClick={myFunction}>Content</div>
};
}
Problems: No one except me likes .bind. OOP hasn't been cool for like a year. Verbose.
Source of truth is JS, functional React
function MyComponent (props) => {
const myFunction = useCallback(() => {}, []);
return <div onClick={myFunction}>Content</div>;
}
Problems: mumble mumble memoization, mumble mumble rule of hooks. No one (not even me) likes `useCallback`.
Source of truth is on the server side. React 19 with Next.js. Compiler magic solves everything
???
Problems: doesn't exist
You can do this for a bunch of other technologies as well. Elm, Rails. They all have very simple examples that also demonstrate the issue that they have.