Backbone.JS Logo

Backbone.JS Logo

Backbone.js is a lightweight JavaScript library that allows to develop and structure client-side applications that run in a web browser. It offers an MVC framework which abstracts data into models, DOM (Document Object Model) into views and binds these two using events. This tutorial covers most of the topics required for a basic understanding of BackboneJS and to get a feel of how it works.

BackboneJS gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Your client-side JavaScript is starting to world, To Resemble, bad spaghetti code, it’s time to add structure, but don’t take too long, gotta get your truth, out of the DOM, take your data into DOM, and you cannot lose. well render out your models with the help of the views, you don’t want your JavaScript to end up a mess, its time for the anatomy of backbone.js

Backbone.js enforces that communication to the server should be done.

entirely through a RESTful API. The web is currently trending such that all data/content will be exposed through a Web API.

This is because the browser is no longer the only client, we have mobile devices, tablet devices, Google Goggles and electronic fridges etc.

What is Backbone.JS

  • Clean, efficient code = Organize code
  • base on Model View Controller [MVC]

Why Backbone.JS

  • Building Single Page Web Applications [SPA]
  • Complicated User Interfaces (UI)
  • Large Scale Project
  • Avoid Repeat JS Codes
  • Separation to Data Presentation
  • MVC Framework [code modular = reusable module]

Backbone.JS Benefits

  • Highly Customization = lots of flexibility
  • Lightweight MVC JS
  • highly developer community/plugin support

Backbone.js is MVC library, which is a huge turn in the front end[UI] as well JavaScript.

Model is part of your code that retrieves and populates the data,

View is the HTML representation of this model(views change as models change, etc)

Controller that in this case allows you to save the state of your JavaScript application via a hashbang URL, for example, http://twitter.com/#search?q=backbone.js

MVC Architecture

MVC Architecture

Some pros that I discovered with Backbone:

  • No more Javascript Spaghetti: code is organized and broken down into semantically meaningful .js files which are later combined using JAMMIT
  • No more jQuery.data(blah, blah): no need to store data in DOM, store data in models instead
  • event binding just works
  • extremely useful underscore utility library
  • the backbone.js code is well documented and a great read. opened my eyes to a number of JS code techniques.

Contact/Consult/Hire Dedicated BackboneJS Developer

Related Technologies Skillsets Posts & Articals