Backbone.js

PLAN

1. Introduction.
2. MVC and other models in JavaScript.
3. Third party library for Backbone.
4. Model with Backbone.
5. Collection with Backbone.
6. View with Backbone.
7. Demo.
8. Question and Answer?

INTRODUCTION

• JavaScript found in 1995(stable 1.8.5 in 2011).
• JavaScript frameworks:
• MochiKit(2008).
• Rico(2009).
• YUI(2011).
• Ext JS(2011).
• Dojo(2011).
• Echo3(2011).
• jQuery(2012).
• …and other frameworks here.

COMPARISON

jQuery Ext JS YUI
Files 1 1 1
.js (LOC) 9047 13471 10526

• Is it easy to read?
• Is it easy to upgrade?
• How can I add a new feature?
• Does these library support OOP?
• 3 layers?
• MVC?
•  ‘spaghetti ’ code

COMPARISON( CONT. )

• jQuery, Ext JS, YUI…write code focus on functions,
these library provides api and the users use these
functions to achieve what they want.
• YUI API.
• jQuery API.
• Ext JS API.

WHY USE THIS?

• A MVC like pattern to keep code clean.
• A templating language to easily render view
element.
• A better way to manage events and callbacks.
• A way to preserver back button.
• Easy for testing.

MVC AND OTHER MODELS IN
JAVASCRIPT.

• MV*
• MVC
• MVP
• MVVM
• …

FRAMEWORKS

• Backbone.js
• Sprout Core 1.x
• Sammy.js
• Spine.js
• Cappuccino
• Knockout.js
• JavaScript MVC
• Google Web Toolkit
• Batman.js

THIRD PARTY LIBRARY FOR BACKBONE.

• Selector:
• jQuery
• YUI
• Zepto
• Template:
• Underscore(hard dependency)
• Handlebar
• Tempo
• Mustache

ARCHITECT OF A BACKBONE PROJECT

• Assets: CSS, images, third party JavaScript library…
• Modules: Our source, view.js, model.js
• Have more directories when project come
larger…

HTML
1. <!doctype html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8">
5. <meta http-equiv="X-UA-Comptatible" content="IE=edge,chrome=1">
6. <title>Backbone.js</title>
7. <link rel="stylesheet" href="assets/css/main.css">
8. </head>
9. <body>
10. <div id="content">
11. 
12. </div>
13. 
14. <script type="text/javascript" src="assets/js/libs/jquery.min.js"></script>
15. <script type="text/javascript" src="assets/js/libs/underscore-min.js"></script>
16. <script type="text/javascript" src="assets/js/libs/backbone-min.js"></script>
17. 
18. <script type="text/javascript" src="src/app.js"></script>
19. </body>
20. </html>

NAMESPACE
1. var app = {
2. // Classes
3. Collections: {},
4. Models: {},
5. Views: {},
6. // Instances
7. collections: {},
8. models: {},
9. views: {},
10. init: function () {
11. // Constructor
12. }
13. };
14. $(document).ready(function () {
15. // Run on the first time the document has been loaded
16. app.init();
17. });

MODULES

• src/modules/views.js :
1. app.Views.main = Backbone.View.extend({
2. initialize: function () {
3. // View init
4. console.log('Main view initialized !');
5. }
6. });
• Add view in app.js
• src/app.js :
1. init: function () {
2. // Init
3. this.views.main = new this.Views.main();
4. }

MODEL

• Manage data(CVDP).
• Change the data of a model  notify changes to
view
1. var Photo = Backbone.Model.extend({
2. // Default attributes for the photo
3. defaults: {
4. src: "placeholder.jpg",
5. caption: "A default image",
6. viewed: false
7. },
8. // Ensure that each photo created has an `src`.
9. initialize: function () {
10. this.set({ "src": this.defaults.src });
11. }
12. });

MODEL(CONT.)

• Validation data.
• Persistence data on server.
• Allow multiple views on a model.
• …

COLLECTION

• Group models .
• Trigger events like add/remove/refresh.
• Can fetch models from a given URL.
• Can keep the model sorted.
• Write application logic based on notifications from
the group should any model it contains be
changed.
needn’t to watch every individual model instance.

COLLECTION(CONT.)

1.var PhotoGallery = Backbone.Collection.extend({
2. // Reference to this collection's model.
3. model: Photo,
4. // Filter down the list of all photos
5. // that have been viewed
6. viewed: function() {
7. return this.filter(function(photo){
8. return photo.get('viewed');
9. });
10. },
11. // Filter down the list to only photos that
12. // have not yet been viewed
13. unviewed: function() {
14. return this.without.apply(this, this.viewed());
15. }
16.});

VIEW

• Visual representation of models .
• Observes a model and is notified when the model
changes  update accordingly.
• View in Backbone isn’t a CONTROLLER , it just can
add an event listener to delegate handling the
behavior to the controller.

1.var buildPhotoView = function( photoModel, photoController ){
2. var base = document.createElement('div'),
3. photoEl = document.createElement('div');
4. base.appendChild(photoEl);
5. var render= function(){
6. // We use a templating library such as Underscore
7. // templating which generates the HTML for our photo entry
8. photoEl.innerHTML = _.template('photoTemplate', {src: photoModel.getSrc()});
9. }
10. photoModel.addSubscriber( render );
11. photoEl.addEventListener('click', function(){
12. photoController.handleEvent('click', photoModel );
13. });
14. var show = function(){
15. photoEl.style.display = '';
16. }
17. var hide = function(){
18. photoEl.style.display = 'none';
19. }
20. return{
21. showView: show,
22. hideView: hide
23. }
24.}

CONTROLLER

• Backbone didn’t actually provide a Controller.
• In Backbone, View and Router does a little similar to
a Controller.
• Router binds the event for a Model and have View
for respond to this event.
1. var PhotoRouter = Backbone.Router.extend({
2. routes: { "photos/:id": "route" },
3. route: function(id) {
4. var item = photoCollection.get(id);
5. var view = new PhotoView({ model: item });
6. something.html( view.render().el );
7. }
8. }):

BENEFITS OF MVC

1. Easier overall maintenance.
2. Decoupling models and views  easy to write unit
test and business logic.
3. Duplication of low-level model and controller
code is eliminated across the application.
4. Work simultaneously between core logic and user
interface.

NOTES

• Core components: Model, View, Collection, Router.
• Complete documentation.
• Used by large companies such as SoundCloud and
Foursquare.
• Event-driven communication.
• No default templating engine.
• Clear and flexible conventions for structuring
applications.
• …

PLUGIN

• Deeply nested models:
• Backbone Relational
• Ligament
• Store data:
• Backbone localStorage
• Small Backbone ORM
• View:
• LayoutManager
• Backbone.Marionette
• More at here.

DEMO

• Other demo can view here:
• Todos
• Backbone Google Book
• Todos of Niquet
• …

THANK YOU FOR YOUR ATTENTIONS

!

Backbone.js

More Related Content

What's hot (20)

Similar to Backbone.js (20)

Recently uploaded (20)

Backbone.js

Editor's Notes