SlideShare a Scribd company logo

Lupus Decoupled Drupal - Drupal Austria Meetup - 2023-04.pdf

W
WolfgangZiegler6

Wolfgang Ziegler presented on Lupus Decoupled Drupal, a component-oriented decoupled Drupal stack built with Nuxt.js. It provides a complete, integrated solution for building decoupled Drupal applications with out-of-the-box features like API routing and CORS headers. Components render each Drupal page into reusable frontend components. The stack allows for performance benefits like caching while retaining Drupal features like content editing and authentication. Current work includes finishing JSON views support, automated testing, and documentation to stabilize the beta release.

Internet
1 of 17
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Lupus Decoupled Drupal Drupal Austria Meetup 2023-04-12, Wolfgang Ziegler Component-oriented Decoupled Drupal with Nuxt.js!
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
A bit of history... almost 4 years ago, we started our in-house distribution … and building our favourite decoupled Drupal stack!
Lupus Nuxt.js Drupal Stack
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
Component-oriented ! ● Builds upon Lupus Custom Elements Renderer ● Renders every Drupal page into high-level component ● Each custom elements becomes a (frontend) component
Architecture overview GET /home GET /ce-api/home Custom Elements HTML Server-Side- Rendering Subsequent pages GET /ce-api/article/example Custom Elements
Link
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
Loose coupling ● Clearly defined API response ● Backend & Frontend can evolve separately ● & be separately tested! ● Easy to combine with other APIs as suiting ● Read more
● 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, ...)
Current status https:/ /www.drupal.org/project/lupus_decoupled
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)
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!)
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!
Lupus Decoupled Drupal - Drupal Austria Meetup - 2023-04.pdf
Thank you!

More Related Content

PDF
Drupalcon 2021 - Nuxt.js for drupal developers
nuppla
 
PDF
My "Perfect" Toolchain Setup for Grails Projects
GR8Conf
 
PDF
Drupal 7 and RDF
scorlosquet
 
PDF
Node.js an Exectutive View
Manuel Eusebio de Paz Carmona
 
PPTX
Instant developer onboarding with self contained repositories
Yshay Yaacobi
 
PDF
[scala.by] Launching new application fast
Denis Karpenko
 
PDF
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
nuppla
 
PDF
Drupal and the semantic web - SemTechBiz 2012
scorlosquet
 
Drupalcon 2021 - Nuxt.js for drupal developers
nuppla
 
My "Perfect" Toolchain Setup for Grails Projects
GR8Conf
 
Drupal 7 and RDF
scorlosquet
 
Node.js an Exectutive View
Manuel Eusebio de Paz Carmona
 
Instant developer onboarding with self contained repositories
Yshay Yaacobi
 
[scala.by] Launching new application fast
Denis Karpenko
 
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
nuppla
 
Drupal and the semantic web - SemTechBiz 2012
scorlosquet
 

Similar to Lupus Decoupled Drupal - Drupal Austria Meetup - 2023-04.pdf (20)

PDF
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
Vladimir Roudakov
 
PDF
Embedding Linked Data Invisibly into Web Pages: Strategies and Workflows for ...
National Information Standards Organization (NISO)
 
PDF
Designing flexible apps deployable to App Engine, Cloud Functions, or Cloud Run
wesley chun
 
ODP
Drupal Architecture and functionality
Ann Lam
 
PPTX
Node.js Web Apps @ ebay scale
Dmytro Semenov
 
PPTX
Snowflake Automated Deployments / CI/CD Pipelines
Drew Hansen
 
PDF
Getting started with the Lupus Nuxt.js Drupal Stack
nuppla
 
PDF
Efficient development workflows with composer
nuppla
 
PPTX
Becoming A Drupal Master Builder
Philip Norton
 
PDF
More Than Just The Tip Of The Iceberg.pdf
Michal Gancarski
 
PDF
Help! I inherited a Drupal Site! - DrupalCamp Atlanta 2016
Paul McKibben
 
PDF
ODN - Technical introduction of the platform
Comsode - FP7 project
 
PDF
SCM Puppet: from an intro to the scaling
Stanislav Osipov
 
PDF
Collaborative environment with data science notebook
Moon Soo Lee
 
PDF
[Srijan Wednesday Webinars] Breaking Limitations using Drupal 8
Srijan Technologies
 
PDF
Scaling up and accelerating Drupal 8 with NoSQL
OSInet
 
PDF
Spark Driven Big Data Analytics
inoshg
 
PDF
Drupal in-depth
Kathryn Carruthers
 
PDF
Drupal 8 improvements for developer productivity php symfony and more
Acquia
 
PDF
Drupal + composer = new love !?
nuppla
 
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
Vladimir Roudakov
 
Embedding Linked Data Invisibly into Web Pages: Strategies and Workflows for ...
National Information Standards Organization (NISO)
 
Designing flexible apps deployable to App Engine, Cloud Functions, or Cloud Run
wesley chun
 
Drupal Architecture and functionality
Ann Lam
 
Node.js Web Apps @ ebay scale
Dmytro Semenov
 
Snowflake Automated Deployments / CI/CD Pipelines
Drew Hansen
 
Getting started with the Lupus Nuxt.js Drupal Stack
nuppla
 
Efficient development workflows with composer
nuppla
 
Becoming A Drupal Master Builder
Philip Norton
 
More Than Just The Tip Of The Iceberg.pdf
Michal Gancarski
 
Help! I inherited a Drupal Site! - DrupalCamp Atlanta 2016
Paul McKibben
 
ODN - Technical introduction of the platform
Comsode - FP7 project
 
SCM Puppet: from an intro to the scaling
Stanislav Osipov
 
Collaborative environment with data science notebook
Moon Soo Lee
 
[Srijan Wednesday Webinars] Breaking Limitations using Drupal 8
Srijan Technologies
 
Scaling up and accelerating Drupal 8 with NoSQL
OSInet
 
Spark Driven Big Data Analytics
inoshg
 
Drupal in-depth
Kathryn Carruthers
 
Drupal 8 improvements for developer productivity php symfony and more
Acquia
 
Drupal + composer = new love !?
nuppla
 
Ad

Recently uploaded (20)

PPT
isotopes_sddsadsaadasdasdasdasdsa1213.ppt
Kenneth James Alamillo
 
PDF
FINAL CALL-6th International Conference on Networks & IOT (NeTIOT 2025)
IJMIT JOURNAL
 
DOC
Rose毕业证学历认证,利物浦约翰摩尔斯大学毕业证国外本科毕业证
acoqwo
 
PDF
Tenda Login Guide: Access Your Router in 5 Easy Steps
tendawifi16
 
PPTX
Mathew Digital SEO Checklist Guidlines 2025
Mathew Digital
 
PPTX
presentation_pfe-universite-molay-seltan.pptx
yahyamohibme
 
PPTX
SAP Ariba Sourcing PPT for learning material
NKKumar16
 
DOCX
Unit-3 cyber security network security of internet system
shivangisharma636228
 
PPTX
Database Information System - Management Information System
faizhossain3
 
PDF
Smart Home Technology for Health Monitoring (www.kiu.ac.ug)
publication11
 
PPTX
Funds Management Learning Material for Beg
NKKumar16
 
PDF
💰 𝐔𝐊𝐓𝐈 𝐊𝐄𝐌𝐄𝐍𝐀𝐍𝐆𝐀𝐍 𝐊𝐈𝐏𝐄𝐑𝟒𝐃 𝐇𝐀𝐑𝐈 𝐈𝐍𝐈 𝟐𝟎𝟐𝟓 💰
GRAB
 
PPTX
Introduction to Information and Communication Technology
AkmadArzieAyao1
 
PPT
Ethics in Information System - Management Information System
faizhossain3
 
PPTX
newyork.pptxirantrafgshenepalchinachinane
PrashantKoirala12
 
PPTX
Internet___Basics___Styled_ presentation
poonam62133
 
PPTX
INTERNET------BASICS-------UPDATED PPT PRESENTATION
poonam62133
 
PDF
The New Creative Director: How AI Tools for Social Media Content Creation Are...
SageTitans
 
PDF
Introduction to the IoT system, how the IoT system works
TinBinh
 
PPTX
Module 1 - Cyber Law and Ethics 101.pptx
anantyakhrisna1
 
isotopes_sddsadsaadasdasdasdasdsa1213.ppt
Kenneth James Alamillo
 
FINAL CALL-6th International Conference on Networks & IOT (NeTIOT 2025)
IJMIT JOURNAL
 
Rose毕业证学历认证,利物浦约翰摩尔斯大学毕业证国外本科毕业证
acoqwo
 
Tenda Login Guide: Access Your Router in 5 Easy Steps
tendawifi16
 
Mathew Digital SEO Checklist Guidlines 2025
Mathew Digital
 
presentation_pfe-universite-molay-seltan.pptx
yahyamohibme
 
SAP Ariba Sourcing PPT for learning material
NKKumar16
 
Unit-3 cyber security network security of internet system
shivangisharma636228
 
Database Information System - Management Information System
faizhossain3
 
Smart Home Technology for Health Monitoring (www.kiu.ac.ug)
publication11
 
Funds Management Learning Material for Beg
NKKumar16
 
💰 𝐔𝐊𝐓𝐈 𝐊𝐄𝐌𝐄𝐍𝐀𝐍𝐆𝐀𝐍 𝐊𝐈𝐏𝐄𝐑𝟒𝐃 𝐇𝐀𝐑𝐈 𝐈𝐍𝐈 𝟐𝟎𝟐𝟓 💰
GRAB
 
Introduction to Information and Communication Technology
AkmadArzieAyao1
 
Ethics in Information System - Management Information System
faizhossain3
 
newyork.pptxirantrafgshenepalchinachinane
PrashantKoirala12
 
Internet___Basics___Styled_ presentation
poonam62133
 
INTERNET------BASICS-------UPDATED PPT PRESENTATION
poonam62133
 
The New Creative Director: How AI Tools for Social Media Content Creation Are...
SageTitans
 
Introduction to the IoT system, how the IoT system works
TinBinh
 
Module 1 - Cyber Law and Ethics 101.pptx
anantyakhrisna1
 
Ad

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!