I'm stepping into a decoupled project. The developers are working on a Vue front end and Drupal backend, but were having trouble connecting the pieces. I know Drupal very well, but will be looking into decoupled architecture for the first time.
The front end developers are on the same team as the designers. This is great because they can work closely together and provide requirements for the content model. I can look at what they have, ask a few questions about the structure and get most of it built with content types and paragraphs. They have the freedom to build their components, and we will periodically touch base on plugging content into their templates. The goal is to work in a way where we support each other and don't create bottlenecks with interdependent work.
From there, we approach the big gap of getting Drupal content into Vue. We can turn on JSON API, but the endpoints are a bit foreign to the front end team and they'd prefer a more custom schema. We can use rest views, but we'll have to customize each and every combination of the endpoints. And how are we going to handle routes? Can those be defined in Drupal along with the content, and let the Vue app be agnostic? How will we handle caching?
Where I arrived is to draw a line of responsibility in development, so we can communicate clearly what we need on either side. This means building a separate system that allow me to define how to fetch the data from Drupal, and allows the front end team to specify the format. This system can be built on redis as the Vue cache, and populated in a way to keep content fresh and prevent live hits to the Drupal backend. I'm looking at webhooks to allow Drupal to tell the system when content is added or updated.
Ideally we could extend Drupal's cache tag system into the Vue components, to invalidate cache for related items. IE if a page is added, some menu will have to be updated. Drupal knows how to do this, but can we tell the system which components to update?