Building Evented Single Page Applications
8 likes883 views
The document presents a talk by John Nunemaker at jQueryConf, focusing on building single-page applications (SPAs) using jQuery. It covers the importance of enhancing user experience by avoiding page reloads, utilizing AJAX for content retrieval, and implementing event-driven strategies for efficient code management. Key concepts include managing application state through URL changes and ensuring smooth transitions between components without interrupting user interaction.
![$("a[href^='#/']").live('click', function (event) {
window.location.hash = $(this).attr('href');
$(document).trigger('hashchange');
return false;
});](https://image.slidesharecdn.com/buildingeventedsinglepageapplications-100428170239-phpapp02/85/Building-Evented-Single-Page-Applications-25-320.jpg)
![var Layout = {
load: function(path, options) {
path = path.replace(/^#/, '');
$(document).trigger('path:loading', [path]);
$(document).trigger('path:loading:' + path);
$.ajax({
url: path,
dataType: 'json',
success: function(json) {
Layout.onSuccess(json);
$(document).trigger('path:success', [path, json]);
$(document).trigger('path:success:' + path, [json]);
if (options && options.success) {
options.success();
}
},
complete: function() {
if (options && options.complete) {
options.complete();
}
}
});
}
};](https://image.slidesharecdn.com/buildingeventedsinglepageapplications-100428170239-phpapp02/85/Building-Evented-Single-Page-Applications-29-320.jpg)
![var Layout = {
handlePageLoad: function() {
var segments = window.location.hash.replace(/^#//, '').split('/'),
total = segments.length,
path = '';
$(document).trigger('page:loading');
function loadSectionsInOrder() {
var segment = segments.shift();
path += '/' + segment;
var onComplete = function() {
var loaded = total - segments.length,
finished = loaded == total;
$(document).trigger('page:progress', [total, loaded]);
if (finished) {
$(document).trigger('page:loaded');
} else {
loadSectionsInOrder();
}
};
Layout.load(path, {complete: onComplete});
}
loadSectionsInOrder();
}
};](https://image.slidesharecdn.com/buildingeventedsinglepageapplications-100428170239-phpapp02/85/Building-Evented-Single-Page-Applications-42-320.jpg)
![$('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;
});](https://image.slidesharecdn.com/buildingeventedsinglepageapplications-100428170239-phpapp02/85/Building-Evented-Single-Page-Applications-48-320.jpg)
![{
'html': {
'#content': '<h1>Heading</h1><p>Yay!</p>'
},
'replaceWith': {
'#post_12': '<div class="post">...</div>'
},
'remove': ['#post_11', '#comment_12']
}](https://image.slidesharecdn.com/buildingeventedsinglepageapplications-100428170239-phpapp02/85/Building-Evented-Single-Page-Applications-51-320.jpg)
![var Layout = {
livePath: function(event, path, callback) {
if (typeof(test) === 'string') {
$(document).bind('path:' + event + ':' + path, callback);
} else {
Layout.live_path_regex[event].push([path, callback]);
}
}
};](https://image.slidesharecdn.com/buildingeventedsinglepageapplications-100428170239-phpapp02/85/Building-Evented-Single-Page-Applications-53-320.jpg)
![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);](https://image.slidesharecdn.com/buildingeventedsinglepageapplications-100428170239-phpapp02/85/Building-Evented-Single-Page-Applications-54-320.jpg)
Building Evented Single Page Applications
- 1. Building Single Page Applications jQueryConf San Francisco, CA John Nunemaker April 25, 2010 Ordered List
- 2. 1. Why? 2. What? 3. How?
- 3. 1. Why?
- 4. Because?
- 5. Because? NO!
- 6. Speed Only retrieve what changes
- 8. Interactivity Desktop in a browser
- 9. But the greatest of these is... Experience
- 10. 2. What?
- 12. 3. How?
- 13. Goals
- 14. No reloads
- 17. #
- 22. The End I kid...
- 23. No reloads
- 25. $("a[href^='#/']").live('click', function (event) { window.location.hash = $(this).attr('href'); $(document).trigger('hashchange'); return false; });
- 27. var Layout = { reload: function() { Layout.load(window.location.hash); } };
- 28. var Layout = { load: function(path, options) { path = path.replace(/^#/, ''); // trigger path loading events $.ajax({ url : path, dataType : 'json', success : function(json) { Layout.onSuccess(json); // trigger path success events if (options && options.success) { options.success(); } }, complete : function() { if (options && options.complete) { options.complete(); } } }); } };
- 29. var Layout = { load: function(path, options) { path = path.replace(/^#/, ''); $(document).trigger('path:loading', [path]); $(document).trigger('path:loading:' + path); $.ajax({ url: path, dataType: 'json', success: function(json) { Layout.onSuccess(json); $(document).trigger('path:success', [path, json]); $(document).trigger('path:success:' + path, [json]); if (options && options.success) { options.success(); } }, complete: function() { if (options && options.complete) { options.complete(); } } }); } };
- 30. var Layout = { onSuccess: function(json) { Layout.applyJSON(json); // trigger layout success }, };
- 31. No reloads
- 32. History/refresh
- 33. 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);
- 35. org groups 12 45 new
- 36. org groups 12 45 new
- 37. org groups 12 45 new
- 38. org groups 12 45 new
- 39. org groups 12 45 new
- 40. org groups 12 45 new
- 41. var Layout = { handlePageLoad: function() { var segments = window.location.hash.replace(/^#//, '').split('/'), total = segments.length, path = ''; function loadSectionsInOrder() { var segment = segments.shift(); path += '/' + segment; var onComplete = function() { var loaded = total - segments.length, finished = loaded == total; if (!finished) { loadSectionsInOrder(); } }; Layout.load(path, {complete: onComplete}); } loadSectionsInOrder(); } };
- 42. var Layout = { handlePageLoad: function() { var segments = window.location.hash.replace(/^#//, '').split('/'), total = segments.length, path = ''; $(document).trigger('page:loading'); function loadSectionsInOrder() { var segment = segments.shift(); path += '/' + segment; var onComplete = function() { var loaded = total - segments.length, finished = loaded == total; $(document).trigger('page:progress', [total, loaded]); if (finished) { $(document).trigger('page:loaded'); } else { loadSectionsInOrder(); } }; Layout.load(path, {complete: onComplete}); } loadSectionsInOrder(); } };
- 43. $(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(); }); });
- 44. History/refresh
- 45. Easy
- 46. Rule #1 Abuse events for better code separation and easier customization
- 47. $('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; });
- 48. $('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; });
- 49. var Site = { onCreateSuccess: function(event, json) { Sidebar.highlight($('#site_' + json.id)) Layout.updateHashWithoutLoad(window.location.hash.replace(/new$/, json.id)); }, onUpdateSuccess: function(event, json) { Sidebar.highlight($('#site_' + json.id)) } }; $('form.new_site').live('form:success', Site.onCreateSuccess); $('form.edit_site').live('form:success', Site.onUpdateSuccess);
- 50. var Field = { onCreateSuccess: function(event, json) { $('#list_section_' + json.section_id) .addSectionField(json.field_title.toLowerCase()); }, onUpdateSuccess: function(event, json) { $('#list_section_' + json.section_id) .removeSectionField(json.old_title.toLowerCase()) .addSectionField(json.new_title.toLowerCase()); } }; $('form.new_field') .live('form:success', Field.onCreateSuccess); $('form.edit_field').live('form:success', Field.onUpdateSuccess);
- 51. { 'html': { '#content': '<h1>Heading</h1><p>Yay!</p>' }, 'replaceWith': { '#post_12': '<div class="post">...</div>' }, 'remove': ['#post_11', '#comment_12'] }
- 52. Rule #2 The URL dictates everything
- 53. var Layout = { livePath: function(event, path, callback) { if (typeof(test) === 'string') { $(document).bind('path:' + event + ':' + path, callback); } else { Layout.live_path_regex[event].push([path, callback]); } } };
- 54. 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);
- 55. Rule #3
- 56. $('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);
- 57. Easy
- 58. Thank you! john@orderedlist.com @jnunemaker jQueryConf San Francisco, CA John Nunemaker April 25, 2010 Ordered List