Drupal in the Dark

Offline-ready Decoupled Drupal 8 Using React

@jlongbottom / @emarchak

Justin Longbottom
dgo.to/@jlongbottom

&

Erin Marchak
@emarchak

Myplanet

@myplanetHQ

Heliolytics, a solar company

A technician walking through the fields

Grids of the solar panels

What we are going to cover?

  1. Business Cases & Technical Goals
  2. Technical Toolkit
  3. Build Process
  4. Online & Offline Demo
  5. Security
  6. Afterthoughts & Looking forward

Why Decoupled Drupal 8?

Goals

Business Cases

  • Commuters taking public transit
  • Travellers with intermittent connectivity
  • Technicians that work in remote locations

Technical Goals

Tools

Drupal 8.1.x

React

  • Designed for “building large applications with data that changes over time”
  • Composable, Declarative, Components
  • Proven to work well with Drupal 8

Sunsail.co.uk

pouchDB/couchDB

  • Offline-first ≃ mobile-first
  • All content is available, all the time!
  • Content conflicts are elegantly handled
  • Very dev friendly, very browser friendly 😊

pouchDB Setup

var localDB  = new PouchDB('pouchDBInstance');
var remoteDB = new PouchDB('http://couch-db-instance.com/endpoint');

localDB.sync(remoteDB).on('complete', function () {
  // sync success :)
}).on('error', function (err) {
  // 'sync error :(
});
		          

Build Process & Demo

Build Drupal & Friends

$ composer require drupal/relaxed drupal/cors drupal/deploy
$ composer require drupal/multiversion:8.1.x-dev

Configure Relaxed

Create React App

Security

How secure is RELAXed & PouchDB?

Afterthoughts

Is RELAXed+PouchDB enterprise ready?

IBM Cloudant Envoy

Is RELAXed+PouchDB preferable over any other option?

  • Tie: Document store in the browser that is available offline.
  • Lose: PouchDB doesn't have per-document controls.
  • Win: PouchDB handles all of the syncing for you.

Looking Forward

  • Let the CMS do what it does best
  • Build native with CouchDB for Android and iOS
  • Unleash your front-end devs!

Thank you

@myplanetHQ