Taming Your JavaScript with Backbone.js

TAMING YOUR JAVASCRIPT WITH BACKBONE.JS

ALLOW MYSELF TO INTRODUCE, MYSELF

(SEMI-FAMOUS...) @frockenstein

SO, I'M BACK IN PHP LAND

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

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

JAVASCRIPT STARTS TIPTOEING IN... <html> <head> <script> </script> </head> <body
onLoad="preloader()"> <a href="#" onmouseover="document.img01.src='heavyimagefile.jpg'"> <img name="img01" src="justanotherfile.jpg"></a> </body> </html> function preloader() { heavyImage = new Image(); heavyImage.src = "heavyimagefile.jpg"; }

THEN COMES AJAX

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

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

JUNK DRAWER JS CODE

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

FRAMEWORKS TO TAME THE JS

ENTER BACKBONE

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; } }

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);

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

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

BACKBONE VIEWS var BookView = Backbone.View.extend({ tagName: 'div', className: 'book',
events: { 'click .buyme': 'buyMe' }, render: function() { var template = ' <h3>{{title}}</h3>\ Price: ${{price}}</div>\ <a href="#buy" class="buyme">Buy Me!</a>'; 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);

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')); }); } });

VIEWS IN ACTION

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);

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()

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

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

Taming Your JavaScript with Backbone.js

Taming Your JavaScript with Backbone.js

WordPress Charleston User Group

More Decks by WordPress Charleston User Group

Other Decks in Programming

Featured

Transcript