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

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
19. • giant expanse of nothing • menus don’t work
20. (Image © A List Apart)
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
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
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
63. To recap: • A simple unordered List is progressively enhanced to an image slideshow • List is perfectly understandable content without JavaScript
64. Image Gallery
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