Drupaldelphia 2014: Progressive Enhancement in Drupal 7, Using Ajax-Include Patterns

D74c365206652832a56fd9ba1fb61d99?s=47 dirtystylus
September 12, 2014

Drupaldelphia 2014: Progressive Enhancement in Drupal 7, Using Ajax-Include Patterns

D74c365206652832a56fd9ba1fb61d99?s=128

dirtystylus

September 12, 2014
Tweet

Transcript

  1. Progressive Enhancement in Drupal 7 Using Ajax-Include Patterns

  2. Mark Llobrera Senior Developer @bluecadet @dirtystylus

  3. Some groundwork.

  4. What is Progressive Enhancement?

  5. Philosophy, not technique

  6. Content First

  7. “Understanding Progressive Enhancement” - by Aaron Gustafson http://alistapart.com/article/ understandingprogressiveenhancement

  8. “Progressive enhancement is a philosophy aimed at crafting experiences that

    serve your users
  9. by giving them access to content without technological restrictions.”

  10. Design and build for everybody.

  11. The same content for everybody. (Not necessarily the same experience.)

  12. Components

  13. • Semantic HTML Markup

  14. • Semantic HTML Markup • CSS

  15. HTML and CSS are fault-tolerant

  16. • Semantic HTML Markup • CSS • JavaScript

  17. JavaScript is not fault-tolerant

  18. None
  19. • giant expanse of nothing • menus don’t work

  20. (Image © A List Apart)

  21. None
  22. None
  23. None
  24. None
  25. None
  26. Why?

  27. “It’s good for you.” -Mom & Dad

  28. “It’s good for your users.” -Mom & Dad

  29. • Accessibility

  30. • Accessibility • Older Browsers

  31. Photo by Grant Hutchinson: https:// www.flickr.com/photos/splorp/6141775264/in/ set-72157624225682388

  32. BostonGlobe.com on Apple Newton

  33. • Accessibility • Older Browsers • Newer “Browsers”: game consoles,

    wearables
  34. None
  35. Thaaanks, Apple.

  36. • Accessibility • Older Browsers • Newer “Browsers”: game consoles,

    wearables • Users of assistive devices: browsers for sight/mobility impaired users
  37. • Accessibility • Older Browsers • Newer “Browsers”: game consoles,

    wearables • Users of assistive devices: browsers for sight/mobility impaired users • Performance • mobile (cell) networks
  38. Some Scenarios

  39. • A list of headlines

  40. • A list of headlines + thumbnails loaded after inital

    load
  41. • A list of headlines + thumbnails loaded after inital

    load • A list of topics, each topic loaded on click.
  42. • A list of headlines + thumbnails loaded after inital

    load • A list of topics, each topic loaded on click. • An image gallery, loaded on click
  43. Techniques

  44. Ajax-Include Patterns “An Ajax-Include Pattern for Modular Content” by The

    Filament Group
  45. • Lazy-load non-essential content: create data attribute patterns for JavaScript

    to target based on certain rules • Hyperlinks to content can be enhanced • Load can be done in a staggered fashion, or on demand (click)
  46. No Pattern <h2><a href="/path/to/content">Related Articles</a></h2>

  47. Data Attribute Pattern • data-before • data-after • data-replace •

    data-interaction
  48. Data Attribute Pattern • data-before • data-after • data-replace •

    data-interaction <h2><a data-after="/path/to/content?ajax=1" href="/path/to/content">Related Articles</a></h2>
  49. Example: Temple Computer Services

  50. Service catalog: • Over 100 articles covering topics such as

    Internet/Phone Access, Security, Email. • Each article can contain multiple sub-sections.
  51. Wireless Access Article • Instructions for numerous OSes • Two

    issues: bandwidth and accessibility. Wide range of devices with many capabilities • Loading every subsection would be wasteful in terms of time/bandwidth • Loading every subsection would be problematic for devices without JavaScript, like some screenreaders
  52. None
  53. None
  54. Solution • Hyperlinks to subsections, progressively enhanced with JavaScript •

    Users without JavaScript can click on the hyperlink and go to the subsection, loaded as a separate node page • Users with JavaScript would have the subsection loaded via Ajax
  55. Fulfills accessibility and performance goals: • Users of devices that

    don’t use JavaScript can get to content • Users on slower networks don’t wait for entire page to load
  56. How? URL Pattern (node template) <a data-interaction data-after="<?php print $node_url

    . '?is_ajax=1' ?>" href="<?php print $node_url; ?>" rel="bookmark"> <h3<?php print $title_attributes; ?>> <?php print (render($content['field_display_title'])); ?> </h3></a>
  57. <a data-interaction data-after="/topic/applicant?is_ajax=1" href="/topic/applicant"> <h3>Applicant</h3> </a>

  58. How? JavaScript • Include ajaxinclude.js in theme .info file https://github.com/filamentgroup/Ajax-Include-

    Pattern • On click make request to URL in data-after attribute
  59. Drupal.behaviors.computer_servicesLoadInstructionSet = { attach: function (context, settings) { $( "a[data-interaction]"

    ).once( "instructionajax", function() { $( "a[data-interaction]" ).unbind().bind( "click", function() { $( this ).removeAttr( "data-interaction" ).ajaxInclude(); $( this ).on( "ajaxInclude", function () { // … do some things after load here }); return false; }); }); } };
  60. How? Drupal theme_preprocess_html hook (template.php) function computer_services_preprocess_html(&$variables) { if (!empty($_REQUEST['is_ajax']))

    { print render($variables['page']['content']); die(); } }
  61. Result

  62. None
  63. To recap: • A simple unordered List is progressively enhanced

    to an image slideshow • List is perfectly understandable content without JavaScript
  64. Image Gallery

  65. None
  66. We worked backwards here, which is harder

  67. Progressive Enhancement is easier when you’re adding complexity gradually

  68. DEMO

  69. 1. Basic site

  70. 2. Site with ajaxinclude.js

  71. 3. Site with ajaxinclude.js and template overrides

  72. 4. Loading a view via Ajax

  73. Conclusion • We want our content to reach the widest

    possible audience • We want to be able to scale the user’s experience to their device’s capabilities
  74. Conclusion • Think of layers: HTML can be rendered/ understood

    by almost everything • Layer on CSS for presentation • Layer on JavaScript as an enhancement • If you rely on JavaScript pause and ask why
  75. Don’t break the URL.

  76. This is hard work, and it takes time to get

    it right.
  77. Thank you.

  78. Github • Presentation: https://github.com/dirtystylus/ drupaldelphia-2014 • Demo Site: https://github.com/dirtystylus/ drupaldelphia-2014-demo

  79. Mark Llobrera @bluecadet @dirtystylus