Journey From DHTML To Ember.js/Angular.js
AJAX and jQuery
During this time I wrote lots of DOM coupled jQuery spaghetti code. I did not feel it was a problem until I wrote my first “web app”. I ended up with several thousands lines of jQuery code in one file that coupled with DOM. There was no tests, no namespace and no structures. It could break any time and naming conflicts were common. Everytime I modified the file, I had to search the function name (with try and error) and tried not to break everything.
So Backbone.js seemed to be a natural evolution. However, the first I used Backbone.js, I was very frustrated. To achieve a simple task, I had to write far more code than plain jQuery. For example, to display a list of items from JSON, you need a model, a collection, an item view, a list view and a “main” to bootstrap your app. And you can achieve the same in jQuery with a few lines of code. It was when I had my thousands lines of jQuery horror I mentioned above that I realised the value of Backbone.js — paying an upfront cost and getting maintainability in return. It was not easy to transit to Backboke.js. The most difficult thing was the way the code was organised. In jQuery, things are coupled with DOM, so it is direct and straightforward. For Backbone.js, you have to re-organise your code: put the data logic in model and UI bindings in view.
Backbone.js is very lightweight and the code of Backbone.js itself is easy to understand. There is no magic — everything is rather explicit. Especially Backbone.js does not provide a UI binding: you are free to use your own. UI binding is like catalyst to your development. You can survive without it, but you will be way faster with it, kind of like ORM in backend web frameworks. So using Backbone.js is like writing Rails without ActiveRecord.
There is a library that is focused on UI binding - Knockout.js. It uses declarative bindings solves UI binding pain by providing a two-way binding (observable) mechanism. However, Knockout.js itself does not provide an application structure, nor does it provide a model layer. Also, it does not come with routing support. So you have to deal with organisation problem as in jQuery.
If you find Ember.js/Angular.js is difficult (especially Ember.js), Backbone.js is a good way to get started. It is lightweight, explicit and easy to learn. After you understand how Backbone.js works, learning Ember.js is much easier.