Backbone is a most popular JavaScript MV* framework which allow you to create MVC(model-view-controller) like applications and single-page applications. The main components of Backbone.js are Model, View, Collection, Router and Event class objects.
In Backbone, a model stores data retrieved from the server in RESTful JSON manner and it is associated with the view. The view renders the HTML by using JavaScript templating or rendering framework and handles events triggered on elements of itself. The router is like as controller and is responsible for handling a given URL and telling the framework what code to run for that URL. The events is a module that can be mixed with any object to bind and trigger custom named events.
Key Points about Backbone
- It has a hard dependency with Underscore.js to make itself more functional and supporting a range of useful collection-based operations.
- It has a soft dependency with jQuery.
- It can update the HTML of your application automatically when the model changes.
- It use JavaScript templating or client-side rendering framework to render html which avoid you to embed HTML code inside JavaScript code.
- It offers a significantly clean and elegant way for DOM manipulations and UI updates.
Why Backbone?
Backbone allow you to develop a web applications by using JavaScript with the minimal set of data-structuring (models and collections) and user interface (views and URLs) primitives. Backbone is best to develop MVC(model-view-controller) like web applications or single-page web applications or complex JavaScript web applications in a more organized, structured manner without JavaScript code mixing with HTML. Since it decouples your application between models and views that render the model's data.
Getting started with Backbone
To setup a working environment for Backbone, you need following three js files: jQuery, Backbone, Underscore. Put these three files with in js folder of your application and use it in your index.html page.
Example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Backbone.js Tricks</title>
<!--CSS for you application-->
<link rel="stylesheet" href="css/site.css" type="text/css" media="screen" />
<!--Required libraries to setup Backbone-->
http://js/lib/jquery.js
http://js/lib/underscore.js
http://js/lib/backbone.js
<!--Initilizing Backbone components-->
http://js/init.js
<!-- Backbone components-->
http://js/models.js
http://js/collections.js
http://js/views.js
http://js/routers.js
<!--Application related js-->
http://js/application.js
</head>
<body>
<h1>Getting Started with Backbone.js</h1>
</body>
</html>
No comments:
Post a Comment