You are here

Drupal Decoupled | Terse Track

seans's picture

Drupal rendering down in Sleepy Hollow - 2016 Q1 Update

Fuse IQ Labs Terse Tracks are outlines of key articles related to a specific topic. For techy types to onboard information quickly. Please comment on any discussions that really informed you not listed below, errors, omissions, other searches to scan, important keywords, other metadata to include, or layout improvement suggestions.

Headless/Decoupled Drupal

This topic really picked up in December 2015 with Dries Buytaert's call for dialog on the topic. The latest flowchart proffered by Dries maps out the 

Note: Not a resource for REST with Drupal, which is a piece of this issue. Some pointers provided to REST topics below.

Parent Domain

Yet another cycle of the Thick client vs. Thin client debate

Domain

When appropriate, Bypassing Drupal for content rendering

Searches

{"headless Drupal" OR "drupal decoupled" OR "decoupled drupal"}, {drupal isomorphic}, {drupal REST}

Keywords

Isomorphic (in math), MV* Frameworks (comparison), AngularJS, BackboneJS, ReactJSProgressive Decoupling, Pseudo-decoupling, REST, Single Page Web AppBigPipeBigPipe ModuleRESTful Web Services ModuleServices Module

Concepts

Progressively Decouple

Progressive decoupling

Image Source: http://buytaert.net/the-future-of-decoupled-drupal
  • From concepts described in "Assembled Web"
  • Don't decouple entire page, decouple only portions like individual blocks
  • Solves SEO problem

Issues/Questions

  • How to do security?
  • Decoupled components don't leverage the Drupal render pipeline
  • How to support the framework du jour?
  • Frame to support first?
  • Problem with previewing
  • Challenge: In Place Editing (see Headless Drupal - Inline Edit @ Giza)
  • In8 (translation) not figured out at all
  • Less control on the layout by site builders.
  • SEO: search engines cannot (yet) properly perform JS
  • Client side templating has issues

Learning

Pri Type Date Title
* PINNED 2016.01.16

Headless Drupal

This is the main tracking group for this issue on Drupal.org

* PINNED 2016.03.22

How should you decouple Drupal?

Latest discussion by Dries Buytaert

  Blog 2016.01.18

Should Drupal add (another) JS framework into core? Not in the name of UX.

Argues should start with UX proces

  Conference 2016.02.18

DrupalCon Asia - Building Front-end/Mobile Applications with Headless Drupal

Date: 18 February 2016
Course: Building Front-end/Mobile Applications with Headless Drupal

Last Updated 2015.12.15

  Blog 2015.12.12

WPTavern: Drupal Community Considering a Decoupled Architecture

A review of the next link:

  • Javascript reiterated as the tomorrow tool (for WordPress)
  • Notes users expecting app-like experiences

Last Updated 2015.12.15

1 Blog 2015.12.07

Should we decouple Drupal with a client-side framework?

This is the key article posted by Dries on this topic.

Content Outline

  • Users expecting app-like experiences
  • ".. short term, Drupal should work toward a next-generation user experience under progressive decoupling for both the administration layer and the end user experience."
  • Allow fully decoupled. Best way: standardize on MV* Framework (Angular, Ember, etc.)
  • Front end should not be decoupled out of the box
  • Empower people to do fully decoupled
    • Front-end devs choose own frameworks
    • Extend REST API, shore up GraphQL
  • Should Drupal standardize on a framework? (Not answered, ask to the community)
  • Which framework? (Not answered, ask to the community)
  • When to standardize (soon, get experimenting now)
  • Call to action: Need initiative to build foundation for better decoupled experiences
  • D8 isn’t fully baked for AJAX/REST
    • Mid-term solution: We should look to use the Services module for decoupled pages
    • Dries says: Use GraphQL module for comms between client and server
    • Dries asks front-end community to help select front-end MV* framework
      i.e. No conclusions reached in the article.
  • Comments Analysis
    • AngularJS and ReactJS mentioned often
    • Lullabot says: Facilitate decoupled, don’t opinionate on front-end framework
    • Don’t standardize
      • If you do, go lightweight like React
    • Yes standardize: AngularJS
      • One comment cited pain of moving from Angular 1 to Angular 2
    • Communications between client and server
      • Layer Facebook’s Relay under GraphQL (read this)
    • D8 Panels IPE (In-Place-Editing) uses Backbone (great a mish-mash of front-end frameworks!)
    • Twig on the front end as well!
      • Dec 7 2015: “Longer term, it could make sense to move from Twig to a JavaScript-based templating system where templates can be shared across client and server…. I'm not recommending we start working on that today; it requires a lot more thought, discussion, experimentation and planning. I certainly don't have all the answers,…”
    • Should consider Nunjucks instead of Twig on the front-end (has “good”? community support)
    • Web pages assembled in the browser using BigPipe to load parts of pages (web components) in priority order
    • Use Yeoman to quickly scaffold projects (great tool to start playing with a new technology!)
    • “No one objected against supporting a "fully decoupled Drupal". Many seem to really want fully decoupling.”
    • Instead of React, use Mithril.js, which according to the commenter, loads 50x faster than React, and renders apps 8x faster

Last Updated 2015.12.15

  Blog 2015.12.07 Our todo list to get to robust RESTful client interaction support
  Video 2015.12.05 Drupal 8 - RESTful architecture - Headless Drupal  
  Video 2015.11.28 DrupalCamp Helsinki 2015, Creating a custom API for a headless Drupa
  Discussion 2015.11.25 Headless drupal 8 + AngularJS + NodeJS
  Video 2015.11.05 Decoupled Drupal: When, Why, and How - The Video  
2 Video 2015.11.03

Decoupled Drupal: What This Means for Developers

MUST WATCH STUFF: Discussion of larger concepts, business cases for Decoupled, and issues of integration with clients, and a discussion of the future of the front end. Starts with brief history of content management.By Preston So, dev mgr at Acquia

  Video (Webinar) 2015.10.20

How to Successfully Implement Headless Drupal (EPAM)

Lots of latest tech discussed here. This is an amazing complex site with Salesforce integration (with SSO, iOS and Android apps with Cordova, 16,000+ microsites! Crazy deadline...wow) Good source of lessons learned. Mostly high a level discussion of the project. Potentials for Decoupled Drupal discussed at 33:00. Progressively Decouple mentioned but not discussed in detail. 

  Video 2015.10.04 Gizra - We've Got Your Headless Covered  
  Blog 2015.09.24 The future of decoupled Drupal
  Blog 2015.09.24 The Nearly-Headless CMS
  Video 2015.07.29

AngularJS + Drupal 8 REST API

Lots of little bits to keep in mind. Helps to understand Angular already.

  Discussion 2015.06.19 Headless Drupal
  Overview 2015.06.11 Getting Started with Backbone JS and RestWS in Drupal 7
  Article 2015.06.10 What is an isomorphic application?
  Blog 2015.04.30 Beyond Decoupling: The Inherent Virtues of an API
  Blog 2015.04.29

Should you Decouple?

  • Why?
    • Clean APIs for mobile apps
    • Independent upgrades
    • APIs can grow to multiple, independent consumers
    • Less reliance on Drupal specialists
    • Abstraction and constraints reduce individual responsibilities while promoting content reuse
  • Here Be Dragons
    •  
    • One system becomes a web of systems
    • Strict separation of concerns is required to gain tangible benefits
    • Drupal out-of-the-box functionality only works for the back-end
    • The minimum team size is higher for efficient development
    • Abstraction and constraints affect the whole business
  • Website becomes a web of systems
  • Harder to troubleshoot (is bug front? Back? API?)
  • Minimum team size for efficient development is bigger (for now)
  • Overkill for blog-like sites

Last Updated 2015.12.15

  Blog 2015.04.08

Headless Drupal - The Cake is a Lie

 

  • Are you ready to do without your favourite features?
  • Multilingual (Can't rely on Drupal's string translation)
  • Modifications and ongoing maintenance (schema change = code change)
  • Editorial user experience (sparse argument)
  • Accessibility: You will have to take care of this yourself
  • Traditional REST is a dead end
  • Concerns over performance, app size, complexity
  • Javascript dependency
  • GraphQL to the rescue?

Last Updated 2015.12.15

  Video 2015.02.19

Headless Drupal 7: RESTful + Backbone

Good intro to the space. Written before much was known about REST in D8

  Conference 2014.10.06 Let's get to the bottom of Headless Drupal
  Blog 2014.08.24 headless drupal? it just might be a bigger deal than twig
    2014.08.06

What's in a name: "Headless" vs "Decoupled"

What should we call this topic?

  Video 2014.04.17 RESTful best practices for Drupal
  Podcast 2013.07.12 Decoupling Drupal
  Resource   http://www.gizra.com/tags.html#Headless Drupal-ref
  Video 2012.05.17 Lessons Learned Integrating Drupal with nodejsmongodb Powered Webservices

Examples/Walkthroughs/Approaches

Load a plain HTML page w/o CSS, call KockoutJS to discard all, then load again
(Also an i8n parital solution and a list of Drupal REST sites) 

Inline editing of  a node

AngularJS Forms

Headless Drupal | Serving a XML sitemap of Drupal via Node.js / Express

AngularJS implementation of Bartik theme in D8

Angular JS and Bootstrap - Hello World

RESTful-Drupal

Todo app with RESTful backend  

 

Significant Projects/Efforts/Site Announcements

Lullabot: What they did for their website (presented at DCon Spain)

  • Everything with an eye toward blazing fast page loads.
  • Omitted jQuery!
  • Facebook's React, Node.js, CouchDB (a noSQL database) and Drupal
  • Drupal exports node data to a public facing CouchDB database
  • Front end queries CouchDB
  • ​You get a REST API for free!
  • Node edit save creates a cron queue item
  • Concurrent Cron for efficiency
  • Each node specifies parent (path), slug (URL of node), and React template to use to render
  • Cron fires and creates the CouchDB representation of the node
  • No security - all public app (in fact, entire CouchDB is public)
  • No support for user sessions
  • No in-place editing. Front end has ZERO interaction with Drupal!
  • Hybrid approach: Keep main pages on SEO, do the rest through decoupled Drupal/REST

https://github.com/friendlymachine/decoupled-drupal-angular

https://github.com/pekkis/drupalcamp-helsinki-2015-11 (This is the companion to a worthy presentation)  

https://www.easystreet3.com/jDrupal

Modules: 

(Probably missing some here. Please send your favorites!)

MongoDB Indexer (indexes nodes into a Mongo database)

Restful (Drupal 7)

Restful Web Services  (Drupal  7)

Services

Services Entity API (Extends Services module to work with custom entities)

Services Views (Extends the Services module to support views)

Views Datasource

RELAXed Web Services (Drupal 8 - Extends core REST for revisions and file attachments)

Related Topics:

REST in Drupal (The definative overview)

Drupal REST services

RESTful Web Services
Module

Services
Module for D7

REST: exposing data as RESTful web services

REST in D8 Core

REST in Drupal 8

More info on REST 

Isomorphic applications
Applications that run the same code base on the server as on the client. Also here from 2013. Also: Raging on the phrase isomorphic app

Introduction to React.js Components and Server Side Rendering in PHP - This is a good overview of React in a PHP environment

GraphQL (demo, D8 project)

Other

Native Mobile apps (Drupal.org)

DrupalGap

DrupalGap is an open source application development kit for Drupal websites. It can be used to easily build custom multi-platform mobile apps and web apps for Drupal websites.

Drupal 8 iOS & Android SDKs

BigPipe Module
Module for D8 is ready. Discussion

Views Datasource
Module for D7