Backbone the Good Parts
- 2. Renan Carvalho Carioca U2 fan Frustrated musician Beer Appreciator King of age of empires Love agile methods Front end developer at Chute Blog : rcarvalhojs.com Github : renancarvalho Twitter : rcarvalhojs Hate who says bad things about JS
- 3. The examples will be based on blogMv project https://github.com/blogmv/backbone-browserify More info http://blogmv.github.io
- 4. What’s the problem? What’s backbone? Keep data synchronized Complex code Spaghetti code Manage callbacks Ajax, XHR? (Impossible to remember the syntax) How to test it? :( - TDD? http://www.tddunlocked.com.br/
- 5. “Backbone is a mindset change.” Renan Carvalho What’s backbone?
- 6. And it’s also… Javascript library Based on MV* concept Lightweight (production version has 6.5kb) Depends on underscore Trust me, it’s awesome! What’s backbone?
- 7. What are you building?
- 10. For complex users interface Reusable code Build single page apps When you don’t know what kind of “helicopter” When to use? When to use it? Complex systems Good Integration with legacy code Simple systems Really performatic system If you’re under 18 (Flying lollipop)
- 11. Router Url routing using (#home or /home) Application history
- 13. Backbone.history.start(), to start to track url (hashChanges) If you’d like to use html5 push state, just use Backbone.history.start({pushState: true}) Backbone router More examples : http://backbonejs.org/#Router
- 14. View Represents models data Handle user interaction (input events)
- 15. View render() - Convenction function for render view. Be careful with SRP el - Dom object, that will be used as the view reference (default is a <div>) $el - Jquery object that keeps the reference to el. initialize() - “Constructor” function for every backbone class events - Handle view events like ( click, change…) Backbone view
- 18. Example of bad implementation Backbone view
- 19. Example of good implementation Backbone view
- 20. Model Manage data. Validate data know where to send/get data Should be thin and beautiful
- 21. Model fetch() - get data from server save() - post/put data on server If the model has an id attribute, backbone will perform a put. get/set - get/set attributes on model parse - function called before backbone merge the server content with the model. validate - perform custom validations on model. Fired when save(), set or invoked. url - server endpoint (api), where model will perform the request More about backbone models: http://backbonejs.org/#Model Backbone model
- 22. Example of bad implementation Backbone model
- 24. Collection Basically “a lot of models together"
- 25. Collection fetch() - Exactly like model, get data from server. create() - Create a new model instance within a collection (save on server). push() - add a model at the end of the collection add - add a model into a collection, you can specify the position where the model will be added ( this.collection.add(new model(), {at : 8}); ) reset() - sets the collection with an array of models. More about backbone collection: http://backbonejs.org/#Collection Backbone collection
- 26. comment.js Backbone collection article.js
- 27. Events NOT CALLBACKS !!
- 28. Catalog of Events Backbone events
- 29. listenTo - Tell an object to listen to a particular event on another object. on - Bind a callback function to an object. stopListening - Tell an object to stop listening to events. Backbone events
- 30. Events on model Backbone events
- 31. Events on collection Backbone events
- 32. Events on View Backbone events
- 33. Trigger you own event Backbone events This way you can unbind the function to the object using “off"
- 34. Obrigado!