- for what kind of project
So let’s start with Backbone.
The documentation of Backbone is available under the following link. The complete documentation is written on a single page. Its very easy to search for topics you are interested in. After a short introduction you’ll find one or more code examples for each topic. These examples are nicely short and well described. Some of them are testable right away. Everything is easy to understand. The only thing missing is a short demonstration how all parts of Backbone work together. But if you search for Backbone snippets on Google you will find lots of examples because it has a wide acceptance among frontend developers.
Compared to other implemented MVC patterns, the Backbone.View is a kind of controller. It dispatches events that originate from the UI, with the HTML template serving as the true view. They called it “view” because it represents a logical chunk of UI, responsible for the contents of a single DOM element. Backbone’s main structure exists of Backbone.Model, Backbone.View, Backbone.Collection and Backbone.Router.
It wraps a row of data into business logic. The backbone.Model provides a basic set of functionality for managing changes.
An easy model could look like this:
In this piece of code we extend Backbone.Model with our domain-specific method “promptName”. The “this.set” function sets a hash of attributes on the model and triggers a “change” event. It’s one of the base functions in Backbone.Model and really handy for updating your view if something changed. You easily bind a “change“ listener to the instance of your model to observe any changes. Within the callback of your binding you can place your view changes or whatever you like. Let’s have a look at an example.
The general idea of Backbone.View is to organize the interface to logical views. Backed by models each view can be updated independently when the model changes. As well as the model, the view comes along with basic methods like (initialize, render, remove, …).
In the example we overwrite the function “initialize“ which is the constructor of the view class. It is always invoked if an instance is created. Within this constructor we bind the “change:name” listener to the instance of the PersonModel and bind a callback. This callback would be invoked if the name in the model changes. If this happens the new name would be rendered between the body tags.
Backbone.Collections are ordered sets of models. Like the model you can bind “change” events as well, so the collection get notified if any model changes. It provides a full suite of underscore.js methods to improve the collection handling.
Backbone.Router maps URLs to functions and connects them to actions and events. For history routing it uses the history API. So you can use standard URLs like “/page” instead of “#page”. Backbone provides a graceful fallback for browsers without support of the history API.
To compare the complexity of each library I built a simple wish list application. This application should be able to add wishes, remove them and count all added wishes. An implementation with Backbone could look like this:
The website of Knockout is well organized and the key concepts are visible at first sight. It teasers “Declarative Bindings”, “Automatic UI Refresh”, “Dependency Tracking” and “Templating”. The documentation is well written and easy to read. It’s pretty short and lots of code examples are provided. The best way to get through the documentation is to read and try the examples. With only reading the documentation it could be difficult to understand Knockout. Have a look at the impressive 20-minute demo video from Steve Sanderson. It gives you a good roundup of knockout. After reading and testing a little while you are able to start programming applications. Awesome.
The view represents the state of the view model. It displays information from the view model, delegates commands (i.e. click events) to the view model and updates itself if the state of the view model changes. A short example will demonstrate that.
In the view (HTML) the “text” binding clause will associate the DOM element with our view model parameter “personName”. After Knockout is activated via “ko.applyBindings(viewModel)” the view reads the content of this parameter and renders the text between the span tags. So the result of executing this code looks like:
You’ve seen how to create a basic view model and how to display its property via binding. But more interesting is how to update the view automatically. It’s pretty simple and achieved with so called observables. Just change the previous code into this:
Now I’d like to demonstrate Knockout with the same wish list example like I used in Backbone. So it could look like this:
I think knockoutJS is absolutely worth a try. It’s a good decision if you have to implement rich user interfaces. If you organize your code well, it’s possible to build bigger applications. But I think the best use case is in small to medium projects.
This awesome component is a “code manager” to keep your code beautiful and well organized. It’s a collection of command line and browser based utilities to do things like:
- build all files into a single production file
- generate a file and folder structure with tests and documentation scripts
- install third party dependencies
- check your code with JSLint and beautify it with steal’s clean
- make your AJAX application crawlable
- log messages in development mode
To generate an application simply execute the following command:
This will generate your application structure with everything you need.
The scaffold generator helps you to create a model quickly. It creates fixtures to simulate a service, widgets with basic actions and all dependencies are automatically included. You can just start editing the widgets for your purpose. All you have to do is to execute the following command:
There are lots of awesome commands to simplify the developing process.
FuncUnit is a web application testing framework. It provides automated unit and functional testing. You can run these tests practically on every browser or system.
You can start your tests easily within the browser with:
or run your tests in Envjs with the command:
This component generates a documentation application of your application. The only thing you have to do is to run the following command:
JMVC is so modular you can easily install all the components or just the ones you need.