Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Taming Your JavaScript with Backbone.js

Taming Your JavaScript with Backbone.js

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

More Decks by WordPress Charleston User Group

Other Decks in Programming

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