TL;DR: It makes tons of sense.

In the beginning of JS+DOM, it was a common practice to write HTML with DOM events (in JS): (`<button onclick="doSomething()">`). Server rendered most things anyway so you could (`<button onclick="toggle(<%= someId %>)">...<div id="item-<%= someId %>">...`). Problem was tons of global functions all over the place, or many big objects and maintainability issues.

In the "jQuery era", you'd write your initial HTML in .html files and jQuery all the events. It brought infinite amount of ways to write code, which often led to many styles and no conventions.

    <button class="toggle" data-target="item-<%= someId %>">
    <div id="item-<%= someId %>">div</div>
    $('.toggle').click(function () { $($(this).data('target')).toggle() })

or

    <button class="toggle">+</button><div>div</div>
    $('.toggle').click(function () { $(this).next().toggle() })

or worse,

    <button class="show" data-text="hello">+</button>
    $('.show').click(function () {
       var $this = $(this)
       var $div = $('<div>').text($this.data('text'))
       $this.after($div)
    })

etc.

Many problems with this approach:

- You can't tell which element has events bound to it just by looking at it. Any JS file can decide to do that - Usage of a CSS class to find elements is just a hack - Poorly named IDs/classes create collisions - After an action, the initial HTML no longer represents the current state - Server can render some HTML, then client changes it, and if things get out of sync, the only way to reset the state is to reload the entire page. Imagine a user signing in, and many parts of the page need to show things for a signed in user. Doing this manually would probably be error-prone, so it's just easier to reload the page and let the server do that.

And then came the modern front end libraries/frameworks like React, Angular, Ember etc.

The main difference is that now the HTML representation is ALWAYS in sync with the data, AND the functional code that's attached to each element is at the same place.

And the jQuery example becomes this:

    // react

    <button onClick={::this.toggle}>+</button>
    {this.state.isVisible ? <div>div</div> : null}

    toggle() { this.setState({ isVisible: !this.state.isVisible }) }


    // angular 1.x

    <button ng-click="toggle()">+</button>
    <div ng-if="isVisible">div</div>

    scope.toggle = () => scope.isVisible = !scope.isVisible

When you look at this piece of code you immediately understand the ways it can be rendered and what affects it. Super clear, no surprises.