Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Decoupling 101 - Why decouple, when not to, progressive decoupling and success stories in decoupling

Decoupling 101 - Why decouple, when not to, progressive decoupling and success stories in decoupling

Decoupled web applications have recently gotten attention in the software development industry, this is because of how useful and effective it can be for development teams. Decoupling is a software architecture pattern that entails splitting web applications into smaller components that perform only a subset of tasks.

This is advantageous because it becomes easier to maintain and update code without affecting the whole application or needing to understand each part of the site. Decoupling comes with its own risks of added complexity, and cannot always be implemented quickly or even the right choice for every site.

In this talk, we'll explore the basics of decoupling, and how you can identify whether decoupling is appropriate for your site. We’ll also cover progressive decoupling as a migration strategy, as well as a series of success stories from teams and individuals that have used a decoupled architecture for their applications in production.

678a2503a2995aa4815b2992a70d376c?s=128

shedrack akintayo

February 17, 2022
Tweet

More Decks by shedrack akintayo

Other Decks in Programming

Transcript

  1. Decoupling 101 Why decouple, when not to, progressive decoupling and

    success stores in decoupling
  2. Shedrack Akintayo Lagos (Nigeria) whoami • Developer Relations Engineer @

    Platform.sh • Technical Writer and Community Builder
  3. Table of contents • What is Decoupling • Basics of

    decoupling • Deploying decoupled • Why decouple • When not to • Progressive decoupling • Success stories
  4. The basics of decoupling

  5. backend frontend backend REST API/GraphQL frontend Monolithic Decoupled THE BASICS

    OF DECOUPLING + Monolithic Drupal: content management & content presentation + Decoupling: separates presentation responsibilities to JS app, powered by an accessible Drupal API for content + Abstraction: if API is abstract enough, frontends can be switched out + Teams: allows for dedicated teams with narrower responsibilities; JS recruitment & collaboration together + Heads: replacing heads → many heads
  6. THE BASICS OF DECOUPLING + Monolithic Drupal: content management &

    content presentation + Decoupling: separates presentation responsibilities to JS app, powered by an accessible Drupal API for content + Abstraction: if API is abstract enough, frontends can be switched out + Teams: allows for dedicated teams with narrower responsibilities; JS recruitment & collaboration together + Heads: replacing heads → many heads
  7. Deploying decoupled

  8. DEPLOYING DECOUPLED + Platform.sh multi-app: project is a cluster of

    containers, communicating over internal network. + Each app resides in own subdirectory + Communicate over a relationship, where Gatsby pulls content from API + Build app and serve, or configure environment-dependent builds → start dev server → Live Previews + Single project: develop alongside each other; teams focused on single app
  9. DEPLOYING DECOUPLED + Platform.sh multi-app: project is a cluster of

    containers, communicating over internal network. + Each app resides in own subdirectory + Communicate over a relationship, where Gatsby pulls content from API + Build app and serve, or configure environment-dependent builds → start dev server → Live Previews + Single project: develop alongside each other; teams focused on single app
  10. DEPLOYING DECOUPLED + Platform.sh multi-app: project is a cluster of

    containers, communicating over internal network. + Each app resides in own subdirectory + Communicate over a relationship, where Gatsby pulls content from API + Build app and serve, or configure environment-dependent builds → start dev server → Live Previews + Single project: develop alongside each other; teams focused on single app
  11. DEPLOYING DECOUPLED + Platform.sh multi-app: project is a cluster of

    containers, communicating over internal network. + Each app resides in own subdirectory + Communicate over a relationship, where Gatsby pulls content from API + Build app and serve, or configure environment-dependent builds → start dev server → Live Previews + Single project: develop alongside each other; teams focused on single app
  12. Why decouple advantages and improvements

  13. The Pros • Focus • Hiring experts • Interchangeable frontends

    • Common API Expert teams with dedicated responsibilities With an abstract enough API, teams can focus on one part rather than the whole site. Node.js experts focus on the frontend, WordPress experts on the backend, etc. Better recruiting around other languages Far more talented Node.js developers out there than WP/PHP. Use the tools best for the job Gatsby, React, etc. are far better and more flexible at solving the frontend problem; don’t rely on plugins. Interchangeable frontends Again, requires an abstract API - switch out the frontend to the newest and best framework you need. Many heads! Same backend consumed by multiple frontends with different purposes. Reasons to decouple your apps
  14. MANY HEADS ACROSS MANY TEAMS + Headless is a bit

    of a misnomer + Removing presentation responsibilities from Drupal to one or many sites + One for each device + One for each regional site + One site for each team, collaborating back upstream + Keep content in sync across them all
  15. … or not to decouple consider the following (or your

    CMS)
  16. The cons • Work to get there • Double the

    concerns • Rewrite tools • Constant vigilance Work required to abstract API Decoupling means removing context/dependence of frontend from the backend. Work will have to go into a strong API that can be consumed by anything/no assumptions. x2 tests + security concerns to worry about Two apps, two teams, double the tests and security oversight. Rewrite tools supported by monoliths Plugin ecosystems establish (editorial) workflow standards that will need to be rewritten from the ground up to continue supporting those teams work. Team isolation Promise: frontend/backend teams don’t need to worry about backend/frontend engineering. Reality: work is necessary to keep coordination and visibility - especially when hosted in two places. Reasons not to decouple your apps
  17. Progressive decoupling

  18. ⍅ A bit Different from full decoupling ⍅ You get

    all the benefits of decoupling while avoiding some of the downsides ⍅ In progressive decoupling, a JavaScript framework is layered on top of the preexisting Drupal front end (Vue, React). ⍅ Best way to progressively decouple a website progressively is to use widget because of the flexibility they provide. ⍅ Widgets are stand-alone applications, by nature they adhere to the decoupled principle ⍅ Appeals to both developers and content editors ⍅ Developers get to leverage whatever javascript framework of their choice without having to mess with the content editors workflow Progressive decoupling
  19. Drawbacks of Progressive decoupling

  20. - Progressive decoupling doesn’t leverage server-side rendering via Node.js -

    Higher Cost - JavaScript's ascension is not going to stop any time soon; therefore, the risk of sacrificing some of Drupal's popular capabilities might still seem insignificant compared to the JS advantages at a front-end level Drawbacks of Progressive Decoupling
  21. Decoupling success stories

  22. IFFR + Burst + Pre-pandemic: film festival run on a

    single Drupal 7 site + Challenge: moving entire festival online during COVID; improve site reliability and festival credibility + Delivered 100% online festival, which opened up for further microservice enhancements towards a general streaming platform + Created a flexible, virtual platform that sets the stage for new, exciting digital opportunities and experiences for future festivals Read the case study »
  23. OpenSocial: decoupling in progress for a SaaS + A fully

    built Decoupled SaaS product + a Drupal installation profile they sell to individual users so that they can get their own community site + They decouple because It allows independent development + It opens us up to more integrations and external channels + Decoupling has provided a Open Social a platform that is faster, leaner, more flexible and easier to continuously update and improve. Read the case study »
  24. Thank you! Shedrack Akintayo Developer Relations Engineer, Platform.sh firstname.lastname@platform.sh