Why Modern Front‑End Frameworks Exist: Declarative vs Imperative and Rendering

The author, a W3C Performance Working Group member and senior front‑end engineer at 360 Navigation, introduces his perspective on modern JavaScript frameworks, noting that their core purpose is to keep UI and state synchronized.

He observes that three major frameworks—Vue, React, and Angular—dominate today’s front‑end landscape, creating a dilemma for newcomers who must choose which to learn, a contrast to earlier days when jQuery alone sufficed for static pages.

The shift stems from increasingly complex runtime interactions; simple static pages no longer require a framework, but applications that constantly update state at runtime do.

He contrasts the imperative style of jQuery, where developers directly manipulate the DOM, with the declarative style of modern frameworks that describe a mapping between state and view, allowing the framework to handle DOM updates.

Example of imperative code:

$('.box')
  .append('<p>Test</p>')
  .xxx()
  .yyy()
  .jjj()
  ...

In a declarative approach, a template expresses the state‑to‑DOM relationship; changing a state variable automatically updates the view without explicit DOM commands.

He explains that rendering is the process of converting state into DOM, and modern frameworks achieve efficient partial updates through techniques such as virtual DOM, change detection, and binding granularity. Vue initially used fine‑grained bindings, later adopted a medium granularity combined with virtual DOM to balance performance and overhead.

Finally, he cautions against chasing every new feature without understanding the underlying principles, emphasizing that all technical solutions aim to solve problems and that grasping their fundamentals helps avoid being misled by superficial trends.