Member-only story
Modern UI Explained in 4 Paragraphs (and 2 Pictures)
What’s at the heart of Vue, Angular and React?
Vue, Angular and React have almost completely replaced the previous generation of javascript frameworks, in a great tidal-wave of change over the last few years.
Why?
It’s not just that these newer frameworks do the same thing as jQuery and Backbone, but in a better way. No, there is something essentially different at the heart of these frameworks: they automatically derive the UI from the application “state.”
I call this “state-driven” UI architecture. The essence of the idea is to keep the developers hands out of managing the interaction of the applications data with the actual widgets that we see on the screen: instead, let the framework provide consistent and powerful ways to “manifest” the state onscreen. We call this binding the state to the view.
there is something essentially different at the heart of these frameworks
This turns out to be a very powerful way to not only code things, but to think about things.Once you start writing UI this way, it becomes very difficult to give up the mental clarity that goes along with looking at the UI as an expression of the app state. Below is a visualization of this difference.
