5 Tips for Better
Javascript Applications
Ben Vinegar, FreshBooks

Forewarning
• Most examples in jQuery
• But applicable to every other framework
• 5 Tips ... 5 Minutes
• Brief topic introductions
• Apologies for speaking fast
• Wish me luck!

1. Javascript Templates

Dynamic Content
$('table').append('
<tr>'
<td>' + first_name + '</td>'
<td>' + last_name + '</td>'
</tr>'
');

Another Approach
jsontemplate.Template('
<tr>
<td>{first_name}</td>
<td>{last_name}</td>
</tr>
').expand({
first_name: 'Lindsay',
last_name: 'Funke'
});

Embedded Template
• <table>
<tr>
<th>First</th>
<th>Last</th>
</tr>
<script type="text/html" id="row-template">
<tr>
<td>{first_name}</td>
<td>{last_name}</td>
</tr>
</script>
</table>
jsontemplate.Template($('#row-template').html()).expand(templateArgs);

2. Classical Inheritance
(think Java)

Base Class
var Dialog = Class.extend({
constructor: function() {
// common setup
},
open: function() { /* open dialog */ },
close: function() { /* close dialog */ }
});

Concrete Class
var EditTaxesDialog = Dialog.extend({
constructor: function() {
this.super();
// setup specific to Edit Taxes
},
});
var editTaxesInstance = new FancyWidget();

Libraries
• Standalone solutions
• inheritence.js, John Resig
• base.js, Dean Edwards
• Framework solutions
• prototype.js

3. debugger keyword

4. Custom Events
Like click, change, focus, blur ...
but you name them

The Use Case

Traditionally
$('input').click(function() {
disableSubmitButtons();
doSomeAjax(function() {
success: function() { closeWindow(); },
error: function() { enableSubmitButtons(); }
});
});

Declare Events
$('input').click(function() {
$(document).trigger('dialog:busy');
doSomeAjax(function() {
success: function() { $
(document).trigger('dialog:closed'); },
error: function() { $
(document).trigger('dialog:idle'); }
});
});

Capture Events
• $(document).bind('dialog:busy', function() {
// disable buttons
});
$(document).bind('dialog:idle', function() {
// enable buttons
});

Why Bother?
• It’s gonna hurt me
• One sender, many receivers
• Decoupled
• Sender doesn’t care who listens
• Exposes hooks, plugin-able

5. Hash Marks (#)

Benefits
• Bookmarkable
• Preserves back button
• Single page apps (GMail)
• Easier than it sounds

Url Routing
*Magic url-handling library
$(document).bind('hash:load', function(hash) {
// load state identified by hash
// like, say, opening a particular dialog
});