Taming Your JavaScript with Backbone.js

A presentation by Jason Finneyfrock at the May meetup of the Charleston WordPress User Group.

Transcript

1. View Slide

2. TAMING YOUR JAVASCRIPT
   WITH BACKBONE.JS
   

   View Slide

3. ALLOW MYSELF TO
   INTRODUCE, MYSELF
   

   View Slide

4. (SEMI-FAMOUS...)
   @frockenstein
   

   View Slide

5. SO, I'M BACK IN PHP LAND
   

   View Slide

6. BUT FIRST, A BRIEF, SORDID HISTORY
   OF WEB PROGRAMMING...
   

   View Slide

7. IN THE BEGINNING THERE
   WAS THE SERVER
   AND IT WAS SLOOOOOOW
   (BUT EASY)
   

   View Slide

8. JAVASCRIPT STARTS
   TIPTOEING IN...
   
   
   <br/>
   
   
   
   
   
   
   function preloader() {
   heavyImage = new Image();
   heavyImage.src = "heavyimagefile.jpg";
   }
   

   View Slide

9. THEN COMES AJAX
   

   View Slide

10. View Slide

11. EMBRACE OUR CLIENT-SIDE
    OVERLORDS
    But how to deal with mountains of JavaScript, browser
    quirks, etc...
    

    View Slide

12. JQUERY
    Helps smooth out the browser problems, makes Ajax
    much easier, makes client-side apps a reality for mortals
    (ie: not Google), but...
    

    View Slide

13. JUNK DRAWER JS CODE
    

    View Slide

14. COLLISIONS WITH JS BAD
    PARTS
    var that = this;
    '1' == true; // depends on what "is" is...
    return
    a + b; // whoops semi-colon insertion means no a + b
    

    View Slide

15. FRAMEWORKS TO TAME
    THE JS
    

    View Slide

16. ENTER BACKBONE
    

    View Slide

17. AN INTERLUDE ON
    JAVASCRIPT EVOLUTION
    // kindergarten JS
    function kissButt(who) {
    switch (who) {
    case 'boss': puckerUp('big'); break;
    case 'meter maid': puckerUp('just a little'); break;
    default: takeAHike(); break;
    }
    }
    

    View Slide

18. GETTIN' JIGGY
    // object literal pattern
    var protocol = {
    kissButt: function(who) {
    ...
    }, // don't forget!!
    takeAHike: function() {
    ...
    }
    }; // forget this and you're DOA
    // module pattern
    (function(root, $) {
    var protocol = {
    init: function() {
    $('body').whatever();
    },
    kissButt: function(who) { ... },
    takeAHike: function() { ... },
    };
    // explicitly attach to global namespace
    root.protocol = protocol;
    })(this, jQuery);
    

    View Slide

19. SO BACKBONE...
    Pretty simple system: Views, Models, Events,
    Collections
    Sprinkle in as little or as much as you like
    Some needed structure to mountains of JS
    Very agnostic about DOM util libs, template libs, code
    patterns
    Backbone != jQuery
    Examples of using it
    big players
    

    View Slide

20. BACKBONE MODELS
    var Book = Backbone.Model.extend({
    defaults: {
    'inStock': true
    },
    initialize: function() {
    // runs when model constructed
    },
    validate: function(attrs) {
    if (attrs.inStock === false)
    return 'No can do buddy-ro!'
    if (attrs.price <= 0)
    return "We're not running a charity here."
    }
    });
    var fiftyShadesOfJavascript = new Book({
    price: 14.99,
    title: '50 Shades of Javascript'
    });
    fiftyShadesOfJavascript.set('price', -5); // validation error
    

    View Slide

21. BACKBONE VIEWS
    var BookView = Backbone.View.extend({
    tagName: 'div',
    className: 'book',
    events: {
    'click .buyme': 'buyMe'
    },
    render: function() {
    var template = '
    {{title}}\
    Price: ${{price}}\
    Buy Me!';
    var html = Mustache.render(template, this.model.attributes);
    this.$el.append(html);
    return this;
    },
    buyMe: function(e) {
    ...
    }
    });
    var bookview = new BookView({ model: fiftyShadesOfJavascript });
    $('.content').append(bookview.render().$el);
    

    View Slide

22. BACKBONE VIEWS & EVENTS
    var BookView = Backbone.View.extend({
    initialize: function() {
    // when title, changes, update DOM
    this.model.on('change:title', function(model) {
    this.$('.title').text(model.get('title'));
    });
    }
    });
    

    View Slide

23. VIEWS IN ACTION
    

    View Slide

24. View Slide

25. BACKBONE COLLECTIONS AND
    EVENTS
    var BookCollection = Backbone.Collection.extend({
    model: Book
    });
    var library = new BookCollection();
    library.on('add', function(book) {
    var bookview = new BookView({ model: book });
    $('.content').append(bookview.render().$el);
    });
    library.add(fiftyShadesOfJavascript);
    

    View Slide

26. BACKBONE & APIS
    var Book = Backbone.Model.extend({
    ...
    url: function() {
    if (this.id) return '/books/' + this.id; // HTTP PUT
    return '/books/'; // HTTP POST
    }
    });
    var fifty = new Book({
    price: 14.99,
    title: '50 Shades of Javascript'
    });
    fifty.set('title', '50 Shades: Improved With 1 More Shade!');
    fifty.save(); // triggers ajax POST to model.url()
    

    View Slide

27. BACKBONE & APIS
    var BookCollection = Backbone.Collection.extend({
    model: Book,
    url: '/books/'
    });
    var library = new BookCollection();
    library.fetch(); // HTTP GET all books
    

    View Slide

28. SUMMARY
    JS & client-side dev is here to stay
    Dev and maintenance of that JS is here to stay
    LET BACKBONE GIVE YOUR JS SOME
    MUCH-NEEDED STRUCTURE
    

    View Slide

29. View Slide