Backbone.js vs. Angular.js
Both Backbone.js and Angular.js are similar frameworks that address the same problem–how to simplify the creation of a single page web application. They both have a lot in common, built with open sourced software released under the permissive MIT license. And while they have many similarities, their differences can have major effects on how you build your applications.
Backbone.js
Backbone.js was initially released back in October of 2010 and built with a JavaScript framework, using a RESTful JSON interface and a model-view-controller (MVC) to help display all the interface features with ease. What this does is better automate administration usage during the building of applications. Because it’s so lightweight, it is often used as an alternative to heavy, full-featured MVC frameworks, with popular companies such as Pinterest, Flixster, AirBNB and more using Backbone.
With Backbone, all your data is represented as Models, which keep all your data from looking disorganized and syncs it all between your HTML user interface, your JavaScript logic and the database on your server. When a UI action causes a change in the model, it triggers a change event, which then notifies all the Views to respond with the new information. With Backbone, you don’t have to manually write the code that looks into the DOM to find data; anytime a change occurs, the event is triggered and you are notified.
The MVC does this all automatically, linking the model and the view with a collection that displays all the information. To breakdown how backbone works, let’s look at all the components that make up the MPC.
Model
Beginning with the model, its main function is to manage an internal table of data and triggers “change” events when any data is modified. Models should be able to move through the app and be used anywhere that a specific piece of data is required. One of the biggests features of using Backbone, is the ability to separate business logic from user interface. The Models help to do this by orchestrating all data and business logic. They also load and save all the data from the server and monitor it for when changes occur.
View
The View is the other piece that is necessary in separating business logic and user interface, which it accomplishes by listening for changes and responding to them by adjusting the UI. It handles all the user input and interactivity, in addition to speaking with the Model to send over any input. Once the Model get a piece of data, or data comes in from multiple Models, the View renders it. It is primarily a passive interface that acts mainly as a display for the Model and is responsible for routing user commands to the collection.
Collections
A Collection helps to deal with a group of related models, making sure they all load and save properly to the and from the server. It also provides helper functions for performing aggregations or computations against a list of models.
There are also a couple of variations with it comes to Models that either use Presenters or Controllers. (MVP vs MVC). The main differences between these two is the fact that controllers connect to all the Models and Views at the same time, while a single Presenter is used to speak with a single View at a time. So when it comes to backbone.js, several kinds of Models can be constructed to best suite your application needs.
Angular.js
Another application framework that is popular on the market today is the open-source Angular.js. After being impressed with the speed of GetAngular, an early commercial version of the product released in 2009, Google started sponsoring it, turning them into Angular.js.
Angular works by first reading the HTML page and the tag attributes that are embedded in the page. It then interprets those attributes as directives to bind input or output parts of the page to a Model.
What Angular does best is help you extend HTML vocabulary for you application. HTML falters when it comes to declaring dynamic views in web application. Angular addresses these issues in a framework that is adjustable and suitable to all forms of application development.
The Comparison
To break down a side by side, we formulated a pros and cons list here, comparing the potential benefits or possible detractors of each framework, given our research and online debate. The list is not wholly inclusive, but should give a good starting point for what to look at when deciding what product to use.
Angular Pros:
- Templating engine is simply HTML with binding expressions baked-in
- Two-way data binding saves on writing boilerplate code
- Largest community and much more online content
- Backed, promoted and monitored by Google
- Categorizes application building blocks into several typers:
- Controllers: work out the logic behind the UI
- Directives: create reusable components and extend HTML by defining new elements
- Factories and Filters
- Services: take care of communication with the backend and holds together pieces of common and related functionality
- Views (templates): manage the UI
- DIrty Checking: can modify any piece of data and Angular will automatically detect the change and notify all the watchers for that data
Angular Cons:
- Criticized for complexity of directives API and transclusion
- Angular Expression in the View layer are sometimes too powerful, putting logic inside the templates, which makes it harder to test or find even the smallest coding errors
- Digest cycle has caused problems for developers in the past, causing slow watches or infinite digest loops
Backbone Pros:
- Lightweight, fast and has a small memory footprint
- Simple to grasp with their model-views-collection set up
- The code is simple with a lot of documentation on it
- Good foundation since it is small and easy to understand, less complex
- A lot easier to adjust the framework, as opposed to Angular, where you have to use the framework decided upon by the developers
Backbone Cons:
- Does not provide structure, just the tools to create it
- You must decided how to structure an application
- Must make decisions on memory management: prone to memory leaks
- 3rd party plugins required to get all the functions
- Lacks support for two-way data binding, which means you have to write a lot of boilerplate code to update the view whenever your model changes
- Also must do this to update your model when the view changes
