Modern UI Explained in 4 Paragraphs (and 2 Pictures)

Matthew Tyson
Mar 4 · 2 min read
Vue, Angular, React

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.

Framework Managed Binding

VS.

Developer Managed Binding

Update: Check out this VERY neat resource on building modern JS UI: https://pentacledev.com/principles/declare-what-instead-of-how

From fellow medium-er Jason Awbrey!

React, Angular, Vue.js

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade