Let's Take Drupal Offline!

Dick Olsson

Twitter: @dickolsson

Drupal.org: dixon_

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?

1. How we think about users and connectivity

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

Users on latest technology and robust connection

People are getting newer faster phones

Connectivity will solve itself over time

Wrong!

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/

“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/

Offline is a part of normal life

2. What's an “offline” website?

“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

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

as a state of error

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

Examples

1. Download all pages in the main menuon first visit

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

3. Reasons to design for 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

Security

Do you really need all the data everywhere?

Minimizes the attack vector of your app

Performance

We put things on CDNs to get closer to the user

Put it in my pocket instead!

Robustness

In the Tube? Or server maintenance?

Your app doesn't care

1. How we think about users and connectivity

2. What's an “offline” website?

3. Reasons to design for offline

So far

4. Are we there yet?

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)

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

- Jeff Atwood“Atwood's Law”

A. The app itself

Angular JS

Ember JS

React JS

Hood.ie

etc. etc...

B. Remote database

CouchDB

Remotestorage.io

both standardizes synchronization over HTTP

C. Local database

PouchDB (works with CouchDB)

Hood.ie (works with CouchDB)

“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

D. Runtime

HTML5

Appcache

Service Workers

Appcache

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

Service Workers

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

Not yet good browser support

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

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

“Headless Drupal” is a step in the right direction

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

But “headless” misses the point

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

Drupal 8 would be your remote DB

But the REST API in Drupal 8 core is missing

Revisioning

Synchronization

File attachments

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

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

These modules implement the sameHTTP and sync API as CouchDB

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

PouchDB (works with CouchDB)

Hood.ie (works with CouchDB)

Reimagining best practices and patternswill still be hard

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

Resources

http://offlinefirst.org

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

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

Questions?

Twitter: @dickolsson

Drupal.org: dixon_

Thanks!