Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,817 views

Published on

  • Be the first to comment

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)

×