BACKBONE.JS

Dragos Andronic , TxtFeedback

DE CE AI AVEA NEVOIE DE O LIBRARIE JS?

Pentru ca SPA (sau aplicatiile web interactive) sunt greu de tinut sub control

Pentru ca vrei structura, scalabilitate si mentenanta

CUPRINS

Backbone.js – ce este/ce nu este backbone.js

Backbone.js – privire de ansamblu asupra tipurilor oferite

Exemplu

Sfaturi si referinte

CE ESTE VS CE NU ESTE

Backbone = librarie de tipuri ce te ajuta sa iti organizezi codul

Backbone != framework (a se vedea Marionette)

Backbone != Model View Something…

DE CE BACKBONE.JS?

Groveshark

Foursquare

Khan Academy

AirBnb

Trello

LinkedIn Mobile

TIPURI

SERVER

Models

Collections

Views

DOM

Router

REST (JSON)

MODELEapp.MyModel = Backbone.Model.extend({

defaults: {}, id: "", //isNew attributes: {}, //get, set validate: function(attrs, options) {},//invalid event initialize: function() {}, parse: function(response, options) {} }); toJSON

save

COLECTII

fetch

add/remove

push/pop

where, findWhere

sort

var MyCollection = Backbone.Collection.extend({ model: app.MyModel, url: “” });

VIEWS

el, $el

app.MyView = Backbone.View.extend({ tagName: 'div', model: app.MyModel, template: _.template($('#view-template').html()), events: {}, render: function() { this.$el.html(this.template(this.model.toJSON())); }, initialize: functin () {} });

TEMPLATING

Generare elemente DOM

Underscore template <% %> <%= %> <%- %>

ROUTERvar MyRouter= Backbone.Router.extend({ routes: { "help": "help", // #help "search/:query": "search", // #search/kiwis "search/:query/p:page": "search" // #search/kiwis/p7 }, help: function() {}, search: function(query, page) {} });

EXEMPLU

TODOMVC

SFATURI SI REFERINTE

Sfaturi

Default values – folositi o functie

Aveti grija la this (folositi listenTo, events, _.bind si _.bindAll)

SFATURI SI REFERINTE

Referinte: http://backbonejs.org/ http://ricostacruz.com/backbone-patterns/ http://

pluralsight.com/training/Courses/TableOfContents/backbone-fundamentals

http://addyosmani.github.io/backbone-fundamentals/ http://todomvc.com/

INTREBARI SI (POATE) RASPUNSURI

dragos@txtfeedback.net

@dandronic

INTREBARI

dragos@txtfeedback.net

@dandronic