Lupus Decoupled Drupal

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!

4. Lupus Nuxt.js 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

8. Link

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, ...)

12. Current status
https:/
/www.drupal.org/project/lupus_decoupled

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!

17. Thank you!