Upload
radu-vunvulea
View
243
Download
4
Embed Size (px)
DESCRIPTION
Backbone.js - Dragos Andronic, Codecamp Cluj-Napoca http://codecamp-cluj-sept2013.eventbrite.com/
Citation preview
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/