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

Transcript

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

   View Slide

2. Mark Llobrera
   Senior Developer @bluecadet
   @dirtystylus
   

   View Slide

3. Some
   groundwork.
   

   View Slide

4. What is
   Progressive
   Enhancement?
   

   View Slide

5. Philosophy, not
   technique
   

   View Slide

6. Content First
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. Design and build
    for everybody.
    

    View Slide

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

    View Slide

12. Components
    

    View Slide

13. • Semantic HTML Markup
    

    View Slide

14. • Semantic HTML Markup
    • CSS
    

    View Slide

15. HTML and CSS
    are fault-tolerant
    

    View Slide

16. • Semantic HTML Markup
    • CSS
    • JavaScript
    

    View Slide

17. JavaScript is not
    fault-tolerant
    

    View Slide

18. View Slide

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

    View Slide

20. (Image © A List Apart)
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. Why?
    

    View Slide

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

    View Slide

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

    View Slide

29. • Accessibility
    

    View Slide

30. • Accessibility
    • Older Browsers
    

    View Slide

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

    View Slide

32. BostonGlobe.com on
    Apple Newton
    

    View Slide

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

    View Slide

34. View Slide

35. Thaaanks, Apple.
    

    View Slide

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

    View Slide

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

    View Slide

38. Some Scenarios
    

    View Slide

39. • A list of headlines
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

43. Techniques
    

    View Slide

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

    View Slide

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)
    

    View Slide

46. No Pattern
    Related Articles
    

    View Slide

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

    View Slide

48. Data Attribute Pattern
    • data-before
    • data-after
    • data-replace
    • data-interaction
    href="/path/to/content">Related Articles
    

    View Slide

49. Example:
    Temple Computer
    Services
    

    View Slide

50. Service catalog:
    • Over 100 articles covering topics such as
    Internet/Phone Access, Security, Email.
    • Each article can contain multiple sub-sections.
    

    View Slide

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
    

    View Slide

52. View Slide

53. View Slide

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
    

    View Slide

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
    

    View Slide

56. How?
    URL Pattern (node template)
    data-after=""
    href=""
    rel="bookmark">
    >
    
    
    

    View Slide

57. data-interaction
    data-after="/topic/applicant?is_ajax=1"
    href="/topic/applicant">
    Applicant
    
    

    View Slide

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
    

    View Slide

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;
    });
    });
    }
    };
    

    View Slide

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();
    }
    }
    

    View Slide

61. Result
    

    View Slide

62. View Slide

63. To recap:
    • A simple unordered List is progressively
    enhanced to an image slideshow
    • List is perfectly understandable content
    without JavaScript
    

    View Slide

64. Image Gallery
    

    View Slide

65. View Slide

66. We worked backwards
    here, which is harder
    

    View Slide

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

    View Slide

68. DEMO
    

    View Slide

69. 1. Basic site
    

    View Slide

70. 2. Site with
    ajaxinclude.js
    

    View Slide

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

    View Slide

72. 4. Loading a
    view via Ajax
    

    View Slide

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
    

    View Slide

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
    

    View Slide

75. Don’t break the
    URL.
    

    View Slide

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

    View Slide

77. Thank you.
    

    View Slide

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

    View Slide

79. Mark Llobrera
    @bluecadet
    @dirtystylus
    

    View Slide