Backbone.jsAND FRIENDS
“Programs must be written for people toread and only incidentally for machinesto execute.”-H. Abelson and G. Sussman in “T...
Javascript EssentialsJavaScript does not have classes.
Javascript Essentials    JavaScript is an Object Orientedlanguage where almost everything is an    object, a set of key-va...
Javascript Essentials This lack of Classes makes it easy tofollow one of the Gang of Four’s rules; Prefer object compositi...
Javascript Essentials   JavaScript is now being used to createcomplex applications. A little bit of thought,  and a well p...
Javascript Essentials“The secret to building large apps isto never build large apps. Break yourapplication into small piec...
Javascript EssentialsSoftware bugs are costly to fix, and the longer that you wait to fix them, the      more costly they be...
Javascript EssentialsBreak the monstrous code up into small,interchangeable modules that can easily             be re-used.
jQuery  jQuery plays a much smaller role inlarge JavaScript applications than most          developers realize.
Problems from jQuery jQuery is only part of the solution:     it does not provide anyrecommendations on how to structure  ...
I learned to love the Pattern         Patterns are proven solutions         Patterns can be easily reused          Pattern...
Callback Functionsvar shine = function() {    // some action},rise = function(callback) {     // .. do something     callb...
Immediate Functions(function foo() {    alert(Watch Out!!);}());   This is great, but there’s no privacy.
Immediate Functionsvar greeting = (function ( name ) {    var days = [Sun, Mon, Tue, Wed, Thu, Fri,Sat],        today = ne...
Observer“A way of notifying change to a  number of classes to ensure consistency between classes.”
Module Patternvar yetiModule = (function() {  var lunch = ‘noms’;  return{    eat: function(){       // om nom nom    },  ...
Revealing Module Patternvar yetiModule = (function() {  var lunch = ‘noms’,        eat = function(){ // om nom nom };     ...
Namespace Patternvar VAMPIRE = VAMPIRE || {};VAMPIRE.bite() = function ( food ) {   // something groovy};VAMPIRE.sleep() =...
Importing Globalsvar Module = (function(app, $) {    // Code...})(MYAPP, jQuery);
Application CoreManages the module lifecycle, It reacts  to events passed to it and starts,  stops, or restarts modules wh...
Modules. If specific parts of your app fail, can it still function?How much do modules depend on others in the system?     ...
“The more tied components are toeach other, the less reusable they willbe, and the more difficult it becomesto make change...
MVC for JavaScriptLuckily there are lots of solutions to         providing structure.
MV* for JavaScriptBut let’s not worry about pedantics. Architecture Patterns help define   structure for an application
MVC Models-Represent Knowledge and Data-Can be grouped in Collections-Isolated from views and controller-Responds to quest...
MVC ViewsIn most cases Views are consider the UI Multiple Views can exist for a single                model
MVC ControllersSits between Views and Models    Performs business logic
MV* for JavaScriptAll JavaScript libraries interpret MVC a            little differently.Just make sure that you’re aware ...
Introducing Backbone-Flexible conventions for structuringapplications-Event-driven communication between viewsand models-S...
Introducing BackboneModels: Domain-level dataViews: Extended User Interface ObjectsCollections: Groups of ModelsRouters: M...
Backbone Modelvar User = Backbone.Model.extend({    initialize: function(name){        this.set({name: name});    }});var ...
Backbone Model: Defaultsvar User = Backbone.Model.extend({    defaults: {        suave: true,        human: true    }});
Backbone Model: Validatevar User = Backbone.Model.extend({    validate: function(atts){        if(!atts.email || atts.emai...
Backbone Collectionvar Users = Backbone.Collection.extend({    model: User});users.bind("change", function(user){    conso...
Backbone Collection: Comparevar Users = Backbone.Collection.extend({    model: User,    comparator: function(user){       ...
Backbone Viewvar UserView = Backbone.View.extend({    model: "User",    tagName: "span",    className: "users",    initial...
Backbone View : elvar UserView = Backbone.View.extend({    el: $("#users")});
Backbone View: Templates<script type="text/template" class="template" id="user-template">    <h2>Hello <%= name %>,</h2>  ...
Backbone View: Eventsvar UserView = Backbone.View.extend({    events:{        "change input[type=checkbox]" : "toggleActiv...
Backbone View: Contextvar UserView = Backbone.View.extend({    initialize: function(){        _.bindAll(this, render, remo...
Backbone HistoryBackbone.history.start();Backbone.history.saveLocation("/page/" + this.model.id);
Backbone Controllervar PageController = Backbone.Controller.extend({    routes:{        "":                     "index",  ...
Backbone Controller: Regexvar PageController = Backbone.Controller.extend({    initialize: function(){        this.route(/...
Backbone BenefitsEasier to maintain, when updates areneeded, it’s clear whether the changes aredata-centric, or visual.Dec...
Backbone Server Verbsvar User = Backbone.model.extend({  url: /users});               Verb                  Action      cr...
Backbone Servervar user = new User();user.set({name: "Phillip"});user.bind(error, function(e){    //the server returns an ...
Backbone Model : Refreshvar user = Users.get(1);user.fetch();
Backbone Collection: Populatevar Users = Backbone.Collection.extend({    model: User,    url: /users});Users.fetch();
Custom BehaviorBackbone.sync = function(method, model, options){    console.log( method, model, options);    options.succe...
Always Be Ringo           aaron.maturen@gmail.com           github.com/aaronmaturen                        @atmaturen
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Backbone and friends
Upcoming SlideShare
Loading in...5
×

Backbone and friends

628

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
628
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \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
  • Backbone and friends

    1. 1. Backbone.jsAND FRIENDS
    2. 2. “Programs must be written for people toread and only incidentally for machinesto execute.”-H. Abelson and G. Sussman in “The Structure and Interpretation of Computer Programs”
    3. 3. Javascript EssentialsJavaScript does not have classes.
    4. 4. Javascript Essentials JavaScript is an Object Orientedlanguage where almost everything is an object, a set of key-value pairs.
    5. 5. Javascript Essentials This lack of Classes makes it easy tofollow one of the Gang of Four’s rules; Prefer object composition over class inheritance.
    6. 6. Javascript Essentials JavaScript is now being used to createcomplex 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 isto never build large apps. Break yourapplication into small pieces. Thenassemble those testable, bite-sizedpieces into your application.”-Justin Meyer
    8. 8. Javascript EssentialsSoftware bugs are costly to fix, and the longer that you wait to fix them, the more costly they become.
    9. 9. Javascript EssentialsBreak the monstrous code up into small,interchangeable modules that can easily be re-used.
    10. 10. jQuery jQuery plays a much smaller role inlarge JavaScript applications than most developers realize.
    11. 11. Problems from jQuery jQuery is only part of the solution: it does not provide anyrecommendations 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 Functionsvar 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 Functionsvar 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 Patternvar yetiModule = (function() { var lunch = ‘noms’; return{ eat: function(){ // om nom nom }, sleep: function(){ // ZZzzzzz } }});
    18. 18. Revealing Module Patternvar yetiModule = (function() { var lunch = ‘noms’, eat = function(){ // om nom nom }; sleep = function(){ // ZZzzzzz }; return{ ‘eat’: eat, ‘sleep’: sleep }});
    19. 19. Namespace Patternvar VAMPIRE = VAMPIRE || {};VAMPIRE.bite() = function ( food ) { // something groovy};VAMPIRE.sleep() = function ( ) { // Shhhhhh};
    20. 20. Importing Globalsvar Module = (function(app, $) { // Code...})(MYAPP, jQuery);
    21. 21. Application CoreManages 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 toeach other, the less reusable they willbe, and the more difficult it becomesto make changes to one withoutaccidentally affecting another”-Rebecca Murphey
    24. 24. MVC for JavaScriptLuckily there are lots of solutions to providing structure.
    25. 25. MV* for JavaScriptBut 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 ViewsIn most cases Views are consider the UI Multiple Views can exist for a single model
    28. 28. MVC ControllersSits between Views and Models Performs business logic
    29. 29. MV* for JavaScriptAll JavaScript libraries interpret MVC a little differently.Just make sure that you’re aware of it.
    30. 30. Introducing Backbone-Flexible conventions for structuringapplications-Event-driven communication between viewsand models-Supports data bindings through manualevents
    31. 31. Introducing BackboneModels: Domain-level dataViews: Extended User Interface ObjectsCollections: Groups of ModelsRouters: Map URLs to functions
    32. 32. Backbone Modelvar 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: Defaultsvar User = Backbone.Model.extend({ defaults: { suave: true, human: true }});
    34. 34. Backbone Model: Validatevar 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 Collectionvar 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: Comparevar Users = Backbone.Collection.extend({ model: User, comparator: function(user){ return user.get(name); }});
    37. 37. Backbone Viewvar UserView = Backbone.View.extend({ model: "User", tagName: "span", className: "users", initialize: function() { //... }, render: function() { //... }});
    38. 38. Backbone View : elvar 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>Its 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: Eventsvar UserView = Backbone.View.extend({ events:{ "change input[type=checkbox]" : "toggleActive", "click .destroy" : "deleteUser" }, toggleActive: function(e) { // … }, deleteUser: function(e) { // … }});
    41. 41. Backbone View: Contextvar 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 HistoryBackbone.history.start();Backbone.history.saveLocation("/page/" + this.model.id);
    43. 43. Backbone Controllervar 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: Regexvar PageController = Backbone.Controller.extend({ initialize: function(){ this.route(/pages/(d+)/, id, function(pageId){ // ... }); }});
    45. 45. Backbone BenefitsEasier to maintain, when updates areneeded, it’s clear whether the changes aredata-centric, or visual.Decoupling models and views makes iteasier to right unit tests for business logic.Modularity allows developer teams to workon logic and user interfaces simultaneously.
    46. 46. Backbone Server Verbsvar 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 Servervar 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 : Refreshvar user = Users.get(1);user.fetch();
    49. 49. Backbone Collection: Populatevar Users = Backbone.Collection.extend({ model: User, url: /users});Users.fetch();
    50. 50. Custom BehaviorBackbone.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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×