Acquia Developer Portal Logo

Decoupling in Drupal: All the Questions You Have, Answered by the Internet

  • 5 minute read

I've been interested for some time in this whole idea of decoupling Drupal and decoupled architectures: collecting links, ideas, videos, and anything that I considered useful. Here is my list. I hope you find something useful, maybe not :-).

Question: Decoupling Drupal… Wait, What? Why? When?

In a few words, decoupling is good because:

  • It unleashes cutting edge front-end technologies.
  • This is important because these front-end technologies are constantly accelerating -- CMS’s can’t keep pace.
  • There is also lots of front-end work that does not necessarily need to change when upgrading a CMS.
  • Which all adds up to: less friction between front end and back end.

Question: What is all this hype about?

Everyone seems to be talking decoupling, but what is this really about?

Ok, here is a quick introduction to decoupling:

  • https://www.acquia.com/drupal/decoupled-drupal

Here's another one: Decoupling explained:

  • https://drupalize.me/tutorial/decoupling-explained?p=2360

What is decoupling? According to Dries (from 2018):

  • https://dri.es/how-to-decouple-drupal-in-2018

Let’s not forget the marketeers: here's a guide for them:

  • https://www.phase2technology.com/blog/decoupled-drupal

Why is decoupling becoming so popular?

  • https://pantheon.io/decoupled-cms

How about an entire ebook on the topic?

  • https://www.acquia.com/resources/ebooks/how-guide-headless-and-decoupled-cms

Still hungry for more? Lullabot has written a lot on decoupling:

  • https://www.lullabot.com/topics/decoupled-drupal

Question: Right, understood, but, when should you decouple?

Our friends at Lullabot give you some clues:

  • https://www.lullabot.com/articles/should-you-decouple

Chromatic shares some ideas: when to do it, why do it, and what are the benefits?

  • https://chromatichq.com/blog/decoupled-drupal-what-you-need-consider

Dries shares his When, Why, and How ideas in this webinar:

  • https://www.acquia.com/resources/webinars/dries-buytaert-shares-his-view-decoupled-drupal-when-why-and-how

Also good to know: What problems you may encounter (true as of September 2018):

  • https://www.lullabot.com/articles/decoupled-hard-promblems-routing

It’s also not just about going fully decoupled. Progressive decoupling is a middle ground that can help you benefit from both worlds, while you avoid painful / stressful “all in” kind of transitions.

Here's a great introduction to progressive decoupling from Eastern Standard:

  • https://medium.com/@easternstandard/progressive-decoupling-with-drupal-8-and-reactjs-9a6fcdee1c51

Matt Davis (Mediacurrent), Preston So (Acquia), and John Kennedy (Acquia) discuss the practice behind the theory of progressively decoupled Drupal here:

  • https://events.drupal.org/neworleans2016/sessions/take-drupal-next-level-javascript-and-progressive-decoupling
  • Video: https://www.youtube.com/watch?v=McowKqqxaFU

Question: Ok, you don’t expect me to do the entire job, do you? Show me the tools!

Ok, I have convinced you. What next you say? Well, it would be good to start playing with some code. And no, there are actually a lot of good tools already out there to help you start quickly. For example:

Contenta:

  • https://github.com/contentacms

ContentaJS:

  • https://github.com/contentacms/contentajs

Waterwheel:

  • https://github.com/acquia/waterwheel.js

Reservoir:

  • https://github.com/acquia/reservoir

Headless Lightning:

  • https://github.com/acquia/headless-lightning

The Vue.js decoupled kit:

  • https://github.com/steveworley/decoupledkit-vuejs

Question: Ok, give me some examples

The Polymer REST API toy:

  • https://github.com/burczu/polymer-rest-api

A presentation: React + decoupled Drupal:

  • http://prestonso.github.io/decoupled-drupal-react/#/3/9

A Facebook REST tutorial:

  • https://facebook.github.io/react/tutorial/tutorial.html

A D8 example:

  • https://medium.com/@Userium/headless-drupal-build-a-drupal-8-api-with-a-reactjs-front-end-e43bf0fb94db
    • Code -> https://github.com/userium/Drupal-8-API---ReactJS-frontend

Question: Wow, just a bit slower please! Give me some tutorials.

Sure. Are you, maybe, into React?

  • https://www.sitepoint.com/getting-started-redux/

React plus Drupal:

  • https://www.droptica.com/blog/how-use-react-drupal/

Drupal + React:

  • https://www.millwoodonline.co.uk/blog/getting-started-with-react-and-drupal

Drupal for React developers:

  • https://reactfordrupal.com/tutorials/drupal-for-react-developers/

Waterwheel:

  • https://dev.acquia.com/blog/decoupling-drupal-with-waterwheel-for-ember-and-react/26/06/2017/18381

Live coding at Baltimore Drupalcon:

  • https://www.youtube.com/watch?v=WVbGYipxCuI

How about something for a Vue.js fan?

Vue.js + decoupled Drupal:

  • https://www.drupal.org/docs/8/modules/decoupled-blocks-vuejs

Drupal And Vue.js: Playing Together To Craft Rich Web Experiences:

  • https://blog.heliossolutions.in/cms/drupal/drupal-vue-js-playing-together-craft-rich-web-experiences/

How to build Single Page Application with Drupal 8 and Vue.js:

  • https://opensenselabs.com/blog/tech/how-build-single-page-application-drupal-8-and-vue-js

Getting data from APIs in Vue.js + axios:

  • https://alligator.io/vuejs/rest-api-axios/
  • https://stackoverflow.com/questions/41234463/how-to-access-an-api-with-vue-js

Want a book about Vue.js?

  • https://leanpub.com/vuejs2

Or, are you more of an Angular person?

Drupal 8 plus Angular:

  • https://medium.com/@chainfrog/data-visualization-using-open-source-web-tools-a-glimpse-of-the-future-using-a-practical-example-1ead08a65f2

A video from DrupalCon Baltimore about Drupal and Angular2:

  • https://events.drupal.org/baltimore2017/sessions/decoupled-drupal-and-angular-2

Here's a compilation of links inside a compilations of links… but this contains a lot of Angular references:

  • https://groups.drupal.org/node/432938

Question: I’ve heard that decoupling is not just for the web?

Sure, Alexa, show me some stories:

  • https://events.drupal.org/baltimore2017/sessions/drupal-alexa-and-big-mouth-billy-bass-walk-bar

Question: Ok, what Drupal modules are out there right now?

Commerce flyout:

  • https://www.drupal.org/project/commerce_cart_flyout

Decoupled Router:

  • https://www.drupal.org/project/decoupled_router

A plugin to preview your posts:

  • https://www.drupal.org/project/jsonapi/issues/2992833

Decoupled Blocks, a javascript-framework-agnostic, progressive decoupling tool:

  • https://www.drupal.org/project/pdb
  • https://events.drupal.org/dublin2016/sessions/decoupled-blocks-drupal-8-progressive-decoupling-your-favorite-javascript

Question: What about SEO?

  • Sure: https://www.volacci.com/blog/headless-drupal-seo-what-marketers-need-know

Question: Can I preview my articles in a decoupled architecture?

  • Certainly: https://twitter.com/morenodotnet/status/1035979360560443392

Question: Do you have something about decoupled commerce?

  • Of course: https://www.drupaleurope.org/session/road-headless-drupal-commerce-future

Question: Ok, let’s be serious: Who is decoupling in 2018/2019 (nearly)?

Well, here are some stories:

The Future of the CMS: Decoupled Architecture:

  • https://youtu.be/7WfQ5gVCYhY

A DrupalCon Nashville session:

  • https://events.drupal.org/nashville2018/sessions/decoupled-drupal-hard-problems

Acquia’s ebook:

  • https://www.acquia.com/resources/ebooks/decoupled-cms-101

Decoupled commerce in React:

  • https://lisbon2018.drupaldays.org/sessions/decoupled-drupal-commerce-react-native
  • Streaming: https://www.youtube.com/watch?v=2VLMWn-uH7c

And some case studies:


Princess Cruises:

  • https://www.acquia.com/resources/case-study/princess-cruises

A Weather.com story about innovation and decoupled architectures:

  • http://www.mediacurrent.com/multimedia/video/forecasting-innovation-weathercoms-emerging-technology-story

Powder:

  • https://www.acquia.com/resources/case-study/powdr

And some insights into this project:

  • https://dev.acquia.com/blog/a-deep-dive-into-a-decoupled-drupal-8-project/31/07/2017/18501

Wilson's Sporting Goods:

  • https://www.acquia.com/resources/case-study/wilson-sporting-goods

Pac-12 Networks:

  • https://www.acquia.com/resources/case-study/pac-12-networks

State of Georgia:

  • https://www.acquia.com/resources/case-study/georgiagov

Legacy.com:

  • https://www.drupal.org/case-study/decoupling-legacycom

Notting Hill Genesis:

  • https://www.acquia.com/resources/case-study/notting-hill-genesis

NBA case:

  • https://www.youtube.com/watch?v=4GvOdhm_eog  

Lastly, if you are a book person as I am, my colleague and friend Preston So has published a book about decoupling:

  • https://www.amazon.com/Decoupled-Drupal-Practice-Architect-Architectures/dp/1484240715

That’s all! Happy decoupling! :-)

More Like This