Slide 1

Slide 1 text

Progressive Enhancement in Drupal 7 Using Ajax-Include Patterns

Slide 2

Slide 2 text

Mark Llobrera Senior Developer @bluecadet @dirtystylus

Slide 3

Slide 3 text

Some groundwork.

Slide 4

Slide 4 text

What is Progressive Enhancement?

Slide 5

Slide 5 text

Philosophy, not technique

Slide 6

Slide 6 text

Content First

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

by giving them access to content without technological restrictions.”

Slide 10

Slide 10 text

Design and build for everybody.

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Components

Slide 13

Slide 13 text

• Semantic HTML Markup

Slide 14

Slide 14 text

• Semantic HTML Markup • CSS

Slide 15

Slide 15 text

HTML and CSS are fault-tolerant

Slide 16

Slide 16 text

• Semantic HTML Markup • CSS • JavaScript

Slide 17

Slide 17 text

JavaScript is not fault-tolerant

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

• giant expanse of nothing • menus don’t work

Slide 20

Slide 20 text

(Image © A List Apart)

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Why?

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

• Accessibility

Slide 30

Slide 30 text

• Accessibility • Older Browsers

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

BostonGlobe.com on Apple Newton

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Thaaanks, Apple.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Some Scenarios

Slide 39

Slide 39 text

• A list of headlines

Slide 40

Slide 40 text

• A list of headlines + thumbnails loaded after inital load

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Techniques

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

• 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)

Slide 46

Slide 46 text

No Pattern

Related Articles

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Related Articles

Slide 49

Slide 49 text

Example: Temple Computer Services

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

How? URL Pattern (node template) >

Slide 57

Slide 57 text

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Result

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Image Gallery

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

We worked backwards here, which is harder

Slide 67

Slide 67 text

Progressive Enhancement is easier when you’re adding complexity gradually

Slide 68

Slide 68 text

DEMO

Slide 69

Slide 69 text

1. Basic site

Slide 70

Slide 70 text

2. Site with ajaxinclude.js

Slide 71

Slide 71 text

3. Site with ajaxinclude.js and template overrides

Slide 72

Slide 72 text

4. Loading a view via Ajax

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Don’t break the URL.

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

Thank you.

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

Mark Llobrera @bluecadet @dirtystylus