While attending web meetups over the past several months, I identified several approaches for building single-page web apps. Single-page web apps are websites that load dynamic content without refreshing the web browser. The 5 approaches for single-page web apps are direct DOM manipulation, abstract DOM manipulation, MVVM without data binding, MVVM with data binding, and isomorphic JavaScript.
Direct DOM manipulation/AJAX: JavaScript code can be written to modify the DOM (a website’s HTML) directly. JavaScript can also fetch content asynchronously from a web server after it has loaded, the AJAX approach. This led to the first single-page web apps around 2005.
Abstract DOM manipulation: Given the difficulties of direct DOM manipulation using JavaScript, two JavaScript libraries make it easier for DOM manipulation. The original and most popular library is jQuery with a few drop-in replacements. These libraries encapsulate the complexity of the DOM tree into simpler queries. A newer library, D3.js, enables DOM manipulation for creating visualizations. D3.js can completely replace jQuery for DOM manipulation.
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.
Isomorphic JavaScript: Existing MVVMs still require separate business logic on the client and server. The client-side business logic is written in JavaScript and the server logic is written in another language such as Ruby on Rails, Python Django, or Java Struts. Instead of duplicating this logic, isomorphic JavasScript shares the same business logic and JavaScript code between server and client. Both Airbnb and Meteor are exploring this relatively new frontier in single-page web apps.
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.
I would like to thank Victor Powell, Debo Olaosebikan, and Justin Hardin for giving me ideas that write this blog article.