Backbone.js - Dragos Andronic
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Backbone.js - Dragos Andronic

on

  • 280 views

Backbone.js - Dragos Andronic, Codecamp Cluj-Napoca

Backbone.js - Dragos Andronic, Codecamp Cluj-Napoca
http://codecamp-cluj-sept2013.eventbrite.com/

Statistics

Views

Total Views
280
Views on SlideShare
280
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Backbone.js - Dragos Andronic Presentation Transcript

  • 1. Dragos Andronic , TxtFeedback
  • 2.  Pentru ca SPA (sau aplicatiile web interactive) sunt greu de tinut sub control  Pentru ca vrei structura, scalabilitate si mentenanta
  • 3.  Backbone.js – ce este/ce nu este backbone.js  Backbone.js – privire de ansamblu asupra tipurilor oferite  Exemplu  Sfaturi si referinte
  • 4.  Backbone = librarie de tipuri ce te ajuta sa iti organizezi codul  Backbone != framework (a se vedea Marionette)  Backbone != Model View Something…
  • 5.  Groveshark  Foursquare  Khan Academy  AirBnb  Trello  LinkedIn Mobile
  • 6. SERVER Models Collections Views DOM Router REST (JSON)
  • 7. app.MyModel = Backbone.Model.extend({ defaults: {}, id: "", //isNew attributes: {}, //get, set validate: function(attrs, options) {},//invalid event initialize: function() {}, parse: function(response, options) {} });  toJSON  save
  • 8.  fetch  add/remove  push/pop  where, findWhere  sort var MyCollection = Backbone.Collection.extend({ model: app.MyModel, url: “” });
  • 9.  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 () {} });
  • 10.  Generare elemente DOM  Underscore template  <% %>  <%= %>  <%- %>
  • 11. var 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) {} });
  • 12.  TODOMVC
  • 13.  Sfaturi  Default values – folositi o functie  Aveti grija la this (folositi listenTo, events, _.bind si _.bindAll)
  • 14.  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/
  • 15. dragos@txtfeedback.net @dandronic
  • 16. dragos@txtfeedback.net @dandronic