let's take drupal offline!

42
Let's Take Drupal Offline!

Upload: dick-olsson

Post on 02-Jul-2015

2.018 views

Category:

Technology


1 download

DESCRIPTION

We live in a disconnected and battery powered world, but our technology and best practices are a leftover from the always connected and steadily powered past. In this session we will explore a new web design paradigm called "Offline First" that's been evolving over the past year and how this applies to Drupal 8 and our project's future. There'll be mentions of things like headless Drupal, restful and relaxed web services, content synchronization, distributed systems and other exciting things. This was presented during DrupalCamp Gothenburg November 2014[1] and Drupal Learning Meetup in London December 2014[2] [1]: http://gothenburg.drupalcamp.se/ [2]: http://www.meetup.com/Drupal-London/events/218826091/

TRANSCRIPT

Page 1: Let's Take Drupal Offline!

Let's Take Drupal Offline!

Page 2: Let's Take Drupal Offline!

Dick Olsson

Twitter: @dickolsson

Drupal.org: dixon_

Page 3: Let's Take Drupal Offline!

Agenda

1. How we think about users and connectivity

2. What's an “offline” website?

3. Reasons to design for offline

4. Are we there yet?

5. Where's Drupal 8?

Page 4: Let's Take Drupal Offline!

1. How we think about users and connectivity

Attribution: https://www.flickr.com/photos/kansirnet/

Page 5: Let's Take Drupal Offline!

Users on latest technology and robust connection

People are getting newer faster phones

Connectivity will solve itself over time

Page 6: Let's Take Drupal Offline!

Wrong!

Page 7: Let's Take Drupal Offline!

Geography (e.g. valleys, buildings)

Transportation (e.g. trains, tube)

Over-crowded places (e.g. DrupalCon)

Non-negotiable

Attribution: https://www.flickr.com/photos/footfun/

Page 8: Let's Take Drupal Offline!

“Once out of bed, Internet and apps are used almost constantly, peaking during the daily commute with

around 70 percent usage”

- EricssonTraffic and Market Report, June 2012

Attribution: https://www.flickr.com/photos/59949757@N06/

Page 9: Let's Take Drupal Offline!

Offline is a part of normal life

Page 10: Let's Take Drupal Offline!

2. What's an “offline” website?

Page 11: Let's Take Drupal Offline!

“We live in a disconnected & battery powered world, but our technology and best practices are a leftover

from the always connected & steadily powered past.”

- offlinefirst.org

Page 12: Let's Take Drupal Offline!

It's about putting the user firstand not think about her position or connectivity

as a state of error

Page 13: Let's Take Drupal Offline!
Page 14: Let's Take Drupal Offline!

Offline apps are not new,but the “offline-first” mantra is

Page 15: Let's Take Drupal Offline!

Examples

1. Download all pages in the main menuon first visit

2. Download search results for popular querieson first visit, like php.net

Page 16: Let's Take Drupal Offline!

3. Reasons to design for offline

Page 17: Let's Take Drupal Offline!

Privacy

Users controll their own data, literally

Often no need to share preferences and personal datawith the central database

Decentralization is a good thing

Page 18: Let's Take Drupal Offline!

Security

Do you really need all the data everywhere?

Minimizes the attack vector of your app

Page 19: Let's Take Drupal Offline!

Performance

We put things on CDNs to get closer to the user

Put it in my pocket instead!

Page 20: Let's Take Drupal Offline!

Robustness

In the Tube? Or server maintenance?

Your app doesn't care

Page 21: Let's Take Drupal Offline!

1. How we think about users and connectivity

2. What's an “offline” website?

3. Reasons to design for offline

So far

Page 22: Let's Take Drupal Offline!

4. Are we there yet?

Page 23: Let's Take Drupal Offline!

What's required?

A. The app itself (e.g. html, css, js)

B. Remote database (that syncs over HTTP)

C. Local database (that syncs over HTTP)

D. Runtime (e.g. web browser)

Page 24: Let's Take Drupal Offline!

“Any application that can be written in JavaScript, will eventually be written in JavaScript”

- Jeff Atwood“Atwood's Law”

Page 25: Let's Take Drupal Offline!

A. The app itself

Angular JS

Ember JS

React JS

Hood.ie

etc. etc...

Page 26: Let's Take Drupal Offline!

B. Remote database

CouchDB

Remotestorage.io

both standardizes synchronization over HTTP

Page 27: Let's Take Drupal Offline!

C. Local database

PouchDB (works with CouchDB)

Hood.ie (works with CouchDB)

Page 28: Let's Take Drupal Offline!

“At some point in time recently, the browser transformed from being an awesome interactive

document viewer into being the world's most advanced and widely-distributed application runtime”

- Tom DaleProgressive Enhancement is Dead

Page 29: Let's Take Drupal Offline!

D. Runtime

HTML5

Appcache

Service Workers

Page 30: Let's Take Drupal Offline!

Appcache

Cache manifest for assets (e.g. html, css, js, img etc)

Page 31: Let's Take Drupal Offline!

Service Workers

A background process that can act like a proxybetween your app and databases (local and remote)

Not yet good browser support

Page 32: Let's Take Drupal Offline!

5. Where's Drupal 8 in all of this?

Attribution: https://www.flickr.com/photos/adamnewulm/

Page 33: Let's Take Drupal Offline!

“Headless Drupal” is a step in the right direction

Attribution: https://www.flickr.com/photos/cgc76/

Page 34: Let's Take Drupal Offline!

But “headless” misses the point

We should use the same technologies to build for“offline-first” instead

Page 35: Let's Take Drupal Offline!

Drupal 8 would be your remote DB

Page 36: Let's Take Drupal Offline!

But the REST API in Drupal 8 core is missing

Revisioning

Synchronization

File attachments

Page 37: Let's Take Drupal Offline!

Relaxed Web Serviceshttp://drupal.org/project/relaxed

Replication Web Servicehttp://drupal.org/project/replication

These modules implement the sameHTTP and sync API as CouchDB

Page 38: Let's Take Drupal Offline!

When we standardize the HTTP APIthe frontend app can use standard tools, such as

PouchDB (works with CouchDB)

Hood.ie (works with CouchDB)

Page 39: Let's Take Drupal Offline!

Reimagining best practices and patternswill still be hard

Page 40: Let's Take Drupal Offline!

Offline is a non-negotiable part of normal life

Don't treat offline as an error

Privacy, security, performance, robustness

Possible to build offline capable websiteswith Drupal 8

Conclusions

Page 41: Let's Take Drupal Offline!

Resources

http://offlinefirst.org

http://blog.hood.ie/2013/11/say-hello-to-offline-first

http://alistapart.com/article/offline-first

Page 42: Let's Take Drupal Offline!

Questions?

Twitter: @dickolsson

Drupal.org: dixon_

Thanks!