Lupus Decoupled Drupal - Drupal Austria Meetup - 2023-04.pdf
1. Lupus Decoupled Drupal
Drupal Austria Meetup 2023-04-12, Wolfgang Ziegler
Component-oriented Decoupled Drupal with Nuxt.js!
2. About me
Wolfgang Ziegler // fago
Managing Partner, CTO of drunomics
Contributions
○ Drupal 8 Entity API & Typed Data API
○ Contrib: Rules, Entity API, Field
Collection, Profile2
Twitter: @the_real_fago
drupal.org/u/fago
3. A bit of history...
almost 4 years ago, we started our in-house distribution
… and building our favourite decoupled Drupal stack!
5. Why Lupus Decoupled Drupal?
based on the same stack, but…
● complete, fully integrated solution
● out-of-the-box
● opinionated setup:
➔ /ce-api/<your-page> API prefix
➔ CORS headers & Cookie authentication
➔ Backend <-> Frontend redirects
6. Component-oriented !
● Builds upon Lupus Custom Elements Renderer
● Renders every Drupal page into high-level component
● Each custom elements becomes a (frontend) component
7. Architecture overview
GET /home GET /ce-api/home
Custom Elements
HTML
Server-Side-
Rendering
Subsequent
pages
GET /ce-api/article/example
Custom Elements
9. So why another API?
Don’t throw all Drupal features away!
➔ Performance
◆ Page-based caching & invalidation
◆ Less queries to time-critical rendered page
➔ Editorial control of pages & layouts & path aliases
➔ Working previews, authentication - easy to add more routes!
➔ Backend stays in control of URLs, e.g. handy for
◆ SEO / Sitemaps
◆ Metatags / Social media
◆ Newsletter integrations
https://8080-shaal-drupalpod-gs7ruhbg9u9.ws-eu77.gitpod.io/ce-api/node/1?auth=1
10. Loose coupling
● Clearly defined API response
● Backend & Frontend can evolve separately
● & be separately tested!
● Easy to combine with other APIs as suiting
● Read more
11. ● like Vue.js: Easy to get started, performant & enjoyable!
● includes all needed for fully-fledged applications
○ Transpilation, CSS (Pre-)Processors
○ Routing, with automatic code splitting, …
● Flexible deployment: SSR, SSG, Serverless (Nuxt 3)
● Modules (I18n, PWA, Analytics, ...)
13. Achievements unlocked
● beta1 released
● Easy testing - full stack gitpod.io environments
● Easy setup - ddev/gitpod.io repository template
○ integrated frontend with SSR
○ working authentication (Cookie-based)
14. Achievements unlocked (2/2)
● migrated from Nuxt2 to Nuxt3
○ Vue3, optimized for serverless, faster…
● moved to JSON serialization by default
● Block-Layout Support (thanks Full Fat Things!)
● Views support landed today! (thanks Full Fat Things!)
● Forms support & User login - WIP (thanks Full Fat
Things!)
15. Todos
● Finish JSON-based Views support
● Proper automated tests! (E2E, playwright)
● Get Custom Elements UI (3.x) ready!
● Ease of use: Copy templates from backend to frontend!
● Stabilize
● Documentation!