Building Evented Single Page Applications

Building Single Page Applications jQueryConf San Francisco, CA John Nunemaker April 25, 2010 Ordered List

1. Why? 2. What? 3. How?

1. Why?

Because?

Because? NO!

Speed Only retrieve what changes

Perceived Speed

Interactivity Desktop in a browser

But the greatest of these is... Experience

2. What?

http://harmonyapp.com/

3. How?

No reloads

No reloads History/refresh

No reloads History/refresh Easy

The End I kid...

No reloads

<a href="#/items">Items</a>

$("a[href^='#/']").live('click', function (event) { window.location.hash = $(this).attr('href'); $(document).trigger('hashchange'); return false; });

$(document).bind('hashchange', Layout.reload);

var Layout = { reload: function() { Layout.load(window.location.hash); } };

var Layout = { onSuccess: function(json) { Layout.applyJSON(json); // trigger layout success }, };

No reloads

History/refresh

setInterval(function() { var hash_is_new = window.location.hash && window.currentHash != window.location.hash; if (hash_is_new) { window.currentHash = window.location.hash; Layout.handlePageLoad(); } }, 300);

#/org/groups/12/45/new

org groups 12 45 new

$(document).bind('page:loading', function() { $('#harmony_loading').show(); $('#loading_progress').css('width', 0); }); $(document).bind('page:progress', function(e, total, loaded) { if (total != loaded) { var final_width = 114, new_width = (loaded/total) * final_width; $('#loading_progress').animate({width: new_width+'px'}, 200); } }); $(document).bind('page:loaded', function() { $('#loading_progress').animate({width:'114px'}, 300, 'linear', function() { $('#harmony_loading').hide(); }); });

History/refresh

Rule #1 Abuse events for better code separation and easier customization

$('form').live('submit', function(event) { var $form = $(this); $form.ajaxSubmit({ dataType: 'json', beforeSend: function() { // trigger before send }, success: function(json) { // if errors, show them, else apply json }, error: function(response, status, error) { // trigger error }, complete: function() { // trigger complete } }); return false; });

$('form').live('submit', function(event) { var $form = $(this); $form.ajaxSubmit({ dataType: 'json', beforeSend: function() { $form.trigger('form:beforeSend'); }, success: function(json) { if (json.errors) { $form.showErrors(json.errors); } else { Layout.onSuccess(json); $form.trigger('form:success', [json]); } }, error: function(response, status, error) { $form.trigger('form:error', [response, status, error]); }, complete: function() { $form.trigger('form:complete'); } }); return false; });

{ 'html': { '#content': '<h1>Heading</h1><p>Yay!</p>' }, 'replaceWith': { '#post_12': '<div class="post">...</div>' }, 'remove': ['#post_11', '#comment_12'] }

Rule #2 The URL dictates everything

Layout.livePath('loading', //org/([^/]+)([0-9/]+).*/, Groups.loading); Layout.livePath('loading', //sections/([0-9]+)$/, Sections.markCurrent); Layout.livePath('success', '/org/groups', Groups.setup); Layout.livePath('success', '/sections', Sections.makeSortable); Layout.livePath('success', //admin/assets(.*)/, Assets.init); Layout.livePath('success', //admin/items/(d+)/, ItemForm.init); Layout.livePath('success', //admin/items/([0-9/]+)/, Items.manageSidebar);

Rule #3

$('a.field_form_toggler') .live('click', Fields.toggleAddFieldForm); $('form.new_section') .live('form:success', SectionForm.onCreateSuccess); $('form.edit_section') .live('form:success', SectionForm.onUpdateSuccess); $('form.new_field') .live('form:success', Field.onCreateSuccess); $('form.edit_field') .live('form:success', Field.onUpdateSuccess); $('a.field_destroy') .live('destroy:success', Field.onDestroySuccess);

Thank you! john@orderedlist.com @jnunemaker jQueryConf San Francisco, CA John Nunemaker April 25, 2010 Ordered List

Building Evented Single Page Applications

by Steve Smith on Apr 28, 2010

Accessibility

Upload Details

Usage Rights

2 Embeds 441

Statistics

Building Evented Single Page Applications Presentation Transcript

http://speakerrate.com	439
http://www.slideshare.net	2