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!
Top Related