MVVM with no data binding: Libraries such as jQuery and d3.js provide a wrapper over DOM manipulation, but they do not offer guidance for structuring single-page web apps. The classic model-view-controller (MVC) pattern was brought over to the web with revised terminology: model-view-view model (MVVM). A view model distinguishes that it exists in a web browser rather on a server. Backbone.js first introduced a popular MVVM to front-end web apps. Backbone.js offers a simple view model and synchronization to a web server’s REST API. On the other hand, Backbone.js offers no guidance in manipulating the DOM other than to use jQuery.
MVVM with two-way data binding: MVVM frameworks such as Backbone still require jQuery to manipulate the DOM. Two-way data binding was introduced to synchronize the view model with the DOM. Two popular frameworks for two-way data binding are Angular.js and Ember.js. Both are used in production for single-page web apps. As I see it presently, these are the state of the art technologies that every developer should know.
In summary, I’ve categorized 5 major approaches for building single-page web apps. Each approach attempts to solve unnecessary engineering effort and complexity of a previous approach. If you have something new to share, please write to me and I’ll include it in another blog post.