Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

dirtystylus
September 12, 2014

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

dirtystylus

September 12, 2014
Tweet

More Decks by dirtystylus

Other Decks in Technology

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