--- title: "Decoupling Drupal Q&A" date: "2019-07-19T13:17:26+00:00" summary: image: type: "article" url: "/acquia-cloud-platform/help/88596-decoupling-drupal-qa" id: "bd2da0d5-4da9-483c-a5e4-29ea67a22e59" --- Table of contents will be added 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](https://dev.acquia.com/users/preston-so) has published a book about decoupling: -------------------------------------------------------------------------------------------------------------------------------------------------------------- * https://www.amazon.com/Decoupled-Drupal-Practice-Architect-Architectures/dp/1484240715 That's all! Happy decoupling! :-)