Successfully reported this slideshow.

More Related Content

Backbone and friends

  1. 1. Backbone.js AND FRIENDS
  2. 2. “Programs must be written for people to read and only incidentally for machines to execute.” -H. Abelson and G. Sussman in “The Structure and Interpretation of Computer Programs”
  3. 3. Javascript Essentials JavaScript does not have classes.
  4. 4. Javascript Essentials JavaScript is an Object Oriented language where almost everything is an object, a set of key-value pairs.
  5. 5. Javascript Essentials This lack of Classes makes it easy to follow one of the Gang of Four’s rules; Prefer object composition over class inheritance.
  6. 6. Javascript Essentials JavaScript is now being used to create complex applications. A little bit of thought, and a well planned architecture can help solve all sorts of problems down the line.
  7. 7. Javascript Essentials “The secret to building large apps is to never build large apps. Break your application into small pieces. Then assemble those testable, bite-sized pieces into your application.” -Justin Meyer
  8. 8. Javascript Essentials Software bugs are costly to fix, and the longer that you wait to fix them, the more costly they become.
  9. 9. Javascript Essentials Break the monstrous code up into small, interchangeable modules that can easily be re-used.
  10. 10. jQuery jQuery plays a much smaller role in large JavaScript applications than most developers realize.
  11. 11. Problems from jQuery jQuery is only part of the solution: it does not provide any recommendations on how to structure your code.
  12. 12. I learned to love the Pattern Patterns are proven solutions Patterns can be easily reused Patterns can be expressive Patterns are not exact solutions
  13. 13. Callback Functions var shine = function() { // some action }, rise = function(callback) { // .. do something callback(); // .. do something else } rise(shine);
  14. 14. Immediate Functions (function foo() { alert('Watch Out!!'); }()); This is great, but there’s no privacy.
  15. 15. Immediate Functions var greeting = (function ( name ) { var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], today = new Date(), msg = 'Hello, ' + name + ' Today is ' + days[today.getDay()] + ', ' + today.getDate(); return msg; }('Aaron')); // 'Hello Aaron, Today is Sat, 17'
  16. 16. Observer “A way of notifying change to a number of classes to ensure consistency between classes.”
  17. 17. Module Pattern var yetiModule = (function() { var lunch = ‘noms’; return{ eat: function(){ // om nom nom }, sleep: function(){ // ZZzzzzz } } });
  18. 18. Revealing Module Pattern var yetiModule = (function() { var lunch = ‘noms’, eat = function(){ // om nom nom }; sleep = function(){ // ZZzzzzz }; return{ ‘eat’: eat, ‘sleep’: sleep } });
  19. 19. Namespace Pattern var VAMPIRE = VAMPIRE || {}; VAMPIRE.bite() = function ( food ) { // something groovy }; VAMPIRE.sleep() = function ( ) { // Shhhhhh };
  20. 20. Importing Globals var Module = (function(app, $) { // Code... })(MYAPP, jQuery);
  21. 21. Application Core Manages the module lifecycle, It reacts to events passed to it and starts, stops, or restarts modules when necessary.
  22. 22. Modules. If specific parts of your app fail, can it still function? How much do modules depend on others in the system? How much of this is instantly reusable? Can single modules exist on their own? Can single modules be tested independently? Is your application tightly coupled?
  23. 23. “The more tied components are to each other, the less reusable they will be, and the more difficult it becomes to make changes to one without accidentally affecting another” -Rebecca Murphey
  24. 24. MVC for JavaScript Luckily there are lots of solutions to providing structure.
  25. 25. MV* for JavaScript But let’s not worry about pedantics. Architecture Patterns help define structure for an application
  26. 26. MVC Models -Represent Knowledge and Data -Can be grouped in Collections -Isolated from views and controller -Responds to questions about state
  27. 27. MVC Views In most cases Views are consider the UI Multiple Views can exist for a single model
  28. 28. MVC Controllers Sits between Views and Models Performs business logic
  29. 29. MV* for JavaScript All JavaScript libraries interpret MVC a little differently. Just make sure that you’re aware of it.
  30. 30. Introducing Backbone -Flexible conventions for structuring applications -Event-driven communication between views and models -Supports data bindings through manual events
  31. 31. Introducing Backbone Models: Domain-level data Views: Extended User Interface Objects Collections: Groups of Models Routers: Map URLs to functions
  32. 32. Backbone Model var User = Backbone.Model.extend({ initialize: function(name){ this.set({name: name}); } }); var user = new User("Aaron Maturen"); console.log(user.get('name')); //Aaron Maturen
  33. 33. Backbone Model: Defaults var User = Backbone.Model.extend({ defaults: { suave: true, human: true } });
  34. 34. Backbone Model: Validate var User = Backbone.Model.extend({ validate: function(atts){ if(!atts.email || atts.email.length < 3) { return "email must be at least 3 characters"; } } });
  35. 35. Backbone Collection var Users = Backbone.Collection.extend({ model: User }); users.bind("change", function(user){ console.log("I feel a disturbance in the force."); }); var user = users.get('some-id'); var user = users.getByCid('some-cid');
  36. 36. Backbone Collection: Compare var Users = Backbone.Collection.extend({ model: User, comparator: function(user){ return user.get('name'); } });
  37. 37. Backbone View var UserView = Backbone.View.extend({ model: "User", tagName: "span", className: "users", initialize: function() { //... }, render: function() { //... } });
  38. 38. Backbone View : el var UserView = Backbone.View.extend({ el: $("#users") });
  39. 39. Backbone View: Templates <script type="text/template" class="template" id="user- template"> <h2>Hello <%= name %>,</h2> <p>It's nice to see you again.</p> </script> var UserView = Backbone.View.extend({ template: _.template($("#user-template").html()); render: function(){ $ (this.el).html(this.template(this.model.toJSON())); return this; } });
  40. 40. Backbone View: Events var UserView = Backbone.View.extend({ events:{ "change input[type=checkbox]" : "toggleActive", "click .destroy" : "deleteUser" }, toggleActive: function(e) { // … }, deleteUser: function(e) { // … } });
  41. 41. Backbone View: Context var UserView = Backbone.View.extend({ initialize: function(){ _.bindAll(this, 'render', 'remove'); this.model.bind('change', this.render); this.model.bind('delete', this.remove); }, remove: function(){ $(this.el).remove(); } });
  42. 42. Backbone History Backbone.history.start(); Backbone.history.saveLocation("/page/" + this.model.id);
  43. 43. Backbone Controller var PageController = Backbone.Controller.extend({ routes:{ "": "index", "search/:query": "search", "search/:query/p:page": "search", "file/*path": "file" }, index: function(){ //... }, help: function(){ //... }, search: function(){ //... } });
  44. 44. Backbone Controller: Regex var PageController = Backbone.Controller.extend({ initialize: function(){ this.route(/pages/(d+)/, 'id', function(pageId){ // ... }); } });
  45. 45. Backbone Benefits Easier to maintain, when updates are needed, it’s clear whether the changes are data-centric, or visual. Decoupling models and views makes it easier to right unit tests for business logic. Modularity allows developer teams to work on logic and user interfaces simultaneously.
  46. 46. Backbone Server Verbs var User = Backbone.model.extend({ url: '/users' }); Verb Action create POST /collection read GET /collection[/ update id] /collection/id PUT delete DELETE / collection/id
  47. 47. Backbone Server var user = new User(); user.set({name: "Phillip"}); user.bind('error', function(e){ //the server returns an error } user.save(null, { success: function() { // user saved successfully }, failure: function() { // user save failed } });
  48. 48. Backbone Model : Refresh var user = Users.get(1); user.fetch();
  49. 49. Backbone Collection: Populate var Users = Backbone.Collection.extend({ model: User, url: '/users' }); Users.fetch();
  50. 50. Custom Behavior Backbone.sync = function(method, model, options){ console.log( method, model, options); options.success(model); } https://github.com/jeromegn/ Backbone.localStorage
  51. 51. Always Be Ringo aaron.maturen@gmail.com github.com/aaronmaturen @atmaturen

Editor's Notes

  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • ×