Hash Signaling Made Easy
   Implementing Hash Signaling on
      Existing Django Projects


            David Gouldin
    ...
What is hash signaling?

    /foo/bar/ ➛ /baz/

  /#/foo/bar/ ➛ /#/baz/
Why would you do that?!

 • Continuous media playback
 • Transport efficiency
 • Seamless page transitions
 • Page render s...
First Cut Goals

• Use existing views and templates
• No-JS graceful fallback
• SEO friendly
• No impact on DOM structure
Solution
 HTML Comments!
<!-- block foo -->
<div>content here</div>
<!-- endblock foo -->
{% ajaxblock %}
• Subclass of {% block %}
• Emits HTML comments
• Comments include:
 • The name of the block
 • The block’...
{% ajaxblock %}
   my_app/foo.html
      {% ajaxblock foo %}
      <div>content here</div>
      {% endblock %}

         ...
But there’s a catch ...

• Javascript is normally developed with the
  intention of a a single page lifespan
• Global stat...
jQuery.lifecycle.js
A helper plugin to deal with the effects of an
       unnaturally long page lifespan

$.lifecycle.regi...
jQuery.lifecycle.js
  Cycles provide utility functions which perform
     symmetric load and unload operations

cycle.bind...
Hijacking page rendering
Hook all events which request a new page
   $('a:not(.no-ajax)').live('click', function(){
     v...
lifecycle.replaceBlocks
• Get all blocks from the old and new
  documents
• Compare block hashes to determine which
  ones...
Clean URLs
/lorem/ipsum/dolor/sit/amet/#/foo/   BAD

            /a/#/foo/                GOOD
Clean URLs
direct_to_template view from base template
   url(r'^a/$',
   'django.views.generic.simple.direct_to_template',...
To be released soon

github.com/dgouldin/django-hashsignal




   (Contingent upon the approval of my employer)
Upcoming SlideShare
Loading in …5
×

Hash Signaling Made Easy

1,687 views
1,635 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,687
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Hash Signaling Made Easy

  1. 1. Hash Signaling Made Easy Implementing Hash Signaling on Existing Django Projects David Gouldin @dgouldin
  2. 2. What is hash signaling? /foo/bar/ ➛ /baz/ /#/foo/bar/ ➛ /#/baz/
  3. 3. Why would you do that?! • Continuous media playback • Transport efficiency • Seamless page transitions • Page render speed
  4. 4. First Cut Goals • Use existing views and templates • No-JS graceful fallback • SEO friendly • No impact on DOM structure
  5. 5. Solution HTML Comments! <!-- block foo --> <div>content here</div> <!-- endblock foo -->
  6. 6. {% ajaxblock %} • Subclass of {% block %} • Emits HTML comments • Comments include: • The name of the block • The block’s base template name • A hash of the block’s content
  7. 7. {% ajaxblock %} my_app/foo.html {% ajaxblock foo %} <div>content here</div> {% endblock %} ↓ <!-- block foo:my_app/foo.html 57a29c950da45a470d382a679b9b4abf --> <div>content here</div> <!-- endblock foo:my_app/foo.html -->
  8. 8. But there’s a catch ... • Javascript is normally developed with the intention of a a single page lifespan • Global state is implicitly unloaded by the browser on navigation • Hash signaling abnormally prolongs the life of a page
  9. 9. jQuery.lifecycle.js A helper plugin to deal with the effects of an unnaturally long page lifespan $.lifecycle.register( ‘a_cycle’, [‘foo’], { load: function(cycle) { ... }, unload: function(cycle) { ... } });
  10. 10. jQuery.lifecycle.js Cycles provide utility functions which perform symmetric load and unload operations cycle.bind ! $.bind cycle.setTimeout ! window.setTimeout cycle.setInterval ! window.setInterval cycle.addScript ! <script></script>
  11. 11. Hijacking page rendering Hook all events which request a new page $('a:not(.no-ajax)').live('click', function(){ var href = $(this).attr('href'); window.location.hash = '#' + href; return false; }); Replace old blocks with new content $(window).bind('hashchange', function(){ $.get(location.hash.substr(1), function(html) { $.lifecycle.replaceBlocks(html); } });
  12. 12. lifecycle.replaceBlocks • Get all blocks from the old and new documents • Compare block hashes to determine which ones need replacement • Run unloader for all cycles registered in blocks to be replaced • Replace block contents (which registers new cycles) and run loaders for replaced blocks
  13. 13. Clean URLs /lorem/ipsum/dolor/sit/amet/#/foo/ BAD /a/#/foo/ GOOD
  14. 14. Clean URLs direct_to_template view from base template url(r'^a/$', 'django.views.generic.simple.direct_to_template', {'template': 'base.html'}) redirect to your base view in javascript <script> var ajaxExemptPaths = ['/a/']; if (ajaxExemptPaths.indexOf (window.location.pathname) === -1) { window.location = '/a/#' + window.location.pathname + window.location.search; } </script>
  15. 15. To be released soon github.com/dgouldin/django-hashsignal (Contingent upon the approval of my employer)

×