Ben Vinegar - 5 Tips For Better Javascript Applications

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

Beneﬁts • 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 });

Ben Vinegar - 5 Tips For Better Javascript Applications

by Refresh Events on Sep 21, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 2

Statistics

Ben Vinegar - 5 Tips For Better Javascript Applications — Presentation Transcript

http://localhost:4002	1
http://www.slideshare.net	1