SlideShare a Scribd company logo
1 of 17
Download to read offline
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!
Thank you!

More Related Content

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

Embedding Linked Data Invisibly into Web Pages: Strategies and Workflows for ...
Embedding Linked Data Invisibly into Web Pages: Strategies and Workflows for ...Embedding Linked Data Invisibly into Web Pages: Strategies and Workflows for ...
Embedding Linked Data Invisibly into Web Pages: Strategies and Workflows for ...
National Information Standards Organization (NISO)
 

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

Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
 
Embedding Linked Data Invisibly into Web Pages: Strategies and Workflows for ...
Embedding Linked Data Invisibly into Web Pages: Strategies and Workflows for ...Embedding Linked Data Invisibly into Web Pages: Strategies and Workflows for ...
Embedding Linked Data Invisibly into Web Pages: Strategies and Workflows for ...
 
Designing flexible apps deployable to App Engine, Cloud Functions, or Cloud Run
Designing flexible apps deployable to App Engine, Cloud Functions, or Cloud RunDesigning flexible apps deployable to App Engine, Cloud Functions, or Cloud Run
Designing flexible apps deployable to App Engine, Cloud Functions, or Cloud Run
 
Drupal Architecture and functionality
Drupal Architecture and functionality Drupal Architecture and functionality
Drupal Architecture and functionality
 
Node.js Web Apps @ ebay scale
Node.js Web Apps @ ebay scaleNode.js Web Apps @ ebay scale
Node.js Web Apps @ ebay scale
 
Snowflake Automated Deployments / CI/CD Pipelines
Snowflake Automated Deployments / CI/CD PipelinesSnowflake Automated Deployments / CI/CD Pipelines
Snowflake Automated Deployments / CI/CD Pipelines
 
Getting started with the Lupus Nuxt.js Drupal Stack
Getting started with the Lupus Nuxt.js Drupal StackGetting started with the Lupus Nuxt.js Drupal Stack
Getting started with the Lupus Nuxt.js Drupal Stack
 
Efficient development workflows with composer
Efficient development workflows with composerEfficient development workflows with composer
Efficient development workflows with composer
 
Becoming A Drupal Master Builder
Becoming A Drupal Master BuilderBecoming A Drupal Master Builder
Becoming A Drupal Master Builder
 
Help! I inherited a Drupal Site! - DrupalCamp Atlanta 2016
Help! I inherited a Drupal Site! - DrupalCamp Atlanta 2016Help! I inherited a Drupal Site! - DrupalCamp Atlanta 2016
Help! I inherited a Drupal Site! - DrupalCamp Atlanta 2016
 
ODN - Technical introduction of the platform
ODN - Technical introduction of the platformODN - Technical introduction of the platform
ODN - Technical introduction of the platform
 
SCM Puppet: from an intro to the scaling
SCM Puppet: from an intro to the scalingSCM Puppet: from an intro to the scaling
SCM Puppet: from an intro to the scaling
 
Collaborative environment with data science notebook
Collaborative environment with data science notebook Collaborative environment with data science notebook
Collaborative environment with data science notebook
 
[Srijan Wednesday Webinars] Breaking Limitations using Drupal 8
[Srijan Wednesday Webinars] Breaking Limitations using Drupal 8[Srijan Wednesday Webinars] Breaking Limitations using Drupal 8
[Srijan Wednesday Webinars] Breaking Limitations using Drupal 8
 
Scaling up and accelerating Drupal 8 with NoSQL
Scaling up and accelerating Drupal 8 with NoSQLScaling up and accelerating Drupal 8 with NoSQL
Scaling up and accelerating Drupal 8 with NoSQL
 
Spark Driven Big Data Analytics
Spark Driven Big Data AnalyticsSpark Driven Big Data Analytics
Spark Driven Big Data Analytics
 
Drupal in-depth
Drupal in-depthDrupal in-depth
Drupal in-depth
 
Drupal 8 improvements for developer productivity php symfony and more
Drupal 8 improvements for developer productivity  php symfony and moreDrupal 8 improvements for developer productivity  php symfony and more
Drupal 8 improvements for developer productivity php symfony and more
 
Drupal + composer = new love !?
Drupal + composer = new love !?Drupal + composer = new love !?
Drupal + composer = new love !?
 
HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan KrausHTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
 

Recently uploaded

一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
AS
 
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
ayvbos
 
一比一原版英国格林多大学毕业证如何办理
一比一原版英国格林多大学毕业证如何办理一比一原版英国格林多大学毕业证如何办理
一比一原版英国格林多大学毕业证如何办理
AS
 
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
AS
 
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
hfkmxufye
 
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理
apekaom
 
一比一原版澳大利亚迪肯大学毕业证如何办理
一比一原版澳大利亚迪肯大学毕业证如何办理一比一原版澳大利亚迪肯大学毕业证如何办理
一比一原版澳大利亚迪肯大学毕业证如何办理
SS
 
原版定制英国赫瑞瓦特大学毕业证原件一模一样
原版定制英国赫瑞瓦特大学毕业证原件一模一样原版定制英国赫瑞瓦特大学毕业证原件一模一样
原版定制英国赫瑞瓦特大学毕业证原件一模一样
AS
 
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
AS
 
一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理
F
 
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
ayvbos
 
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
AS
 

Recently uploaded (20)

一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
 
Lowongan Kerja LC Yogyakarta Terbaru 085746015303
Lowongan Kerja LC Yogyakarta Terbaru 085746015303Lowongan Kerja LC Yogyakarta Terbaru 085746015303
Lowongan Kerja LC Yogyakarta Terbaru 085746015303
 
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
一比一原版(USYD毕业证书)悉尼大学毕业证原件一模一样
 
一比一原版英国格林多大学毕业证如何办理
一比一原版英国格林多大学毕业证如何办理一比一原版英国格林多大学毕业证如何办理
一比一原版英国格林多大学毕业证如何办理
 
APNIC Policy Roundup, presented by Sunny Chendi at the 5th ICANN APAC-TWNIC E...
APNIC Policy Roundup, presented by Sunny Chendi at the 5th ICANN APAC-TWNIC E...APNIC Policy Roundup, presented by Sunny Chendi at the 5th ICANN APAC-TWNIC E...
APNIC Policy Roundup, presented by Sunny Chendi at the 5th ICANN APAC-TWNIC E...
 
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
 
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
 
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理
 
Down bad crying at the gym t shirtsDown bad crying at the gym t shirts
Down bad crying at the gym t shirtsDown bad crying at the gym t shirtsDown bad crying at the gym t shirtsDown bad crying at the gym t shirts
Down bad crying at the gym t shirtsDown bad crying at the gym t shirts
 
Research Assignment - NIST SP800 [172 A] - Presentation.pptx
Research Assignment - NIST SP800 [172 A] - Presentation.pptxResearch Assignment - NIST SP800 [172 A] - Presentation.pptx
Research Assignment - NIST SP800 [172 A] - Presentation.pptx
 
一比一原版澳大利亚迪肯大学毕业证如何办理
一比一原版澳大利亚迪肯大学毕业证如何办理一比一原版澳大利亚迪肯大学毕业证如何办理
一比一原版澳大利亚迪肯大学毕业证如何办理
 
原版定制英国赫瑞瓦特大学毕业证原件一模一样
原版定制英国赫瑞瓦特大学毕业证原件一模一样原版定制英国赫瑞瓦特大学毕业证原件一模一样
原版定制英国赫瑞瓦特大学毕业证原件一模一样
 
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
一比一原版(毕业证书)新西兰怀特克利夫艺术设计学院毕业证原件一模一样
 
Nungambakkam (Chennai) Independent Escorts - 9632533318 100% genuine
Nungambakkam (Chennai) Independent Escorts - 9632533318 100% genuineNungambakkam (Chennai) Independent Escorts - 9632533318 100% genuine
Nungambakkam (Chennai) Independent Escorts - 9632533318 100% genuine
 
一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理
 
Sholinganallur (Chennai) Independent Escorts - 9632533318 100% genuine
Sholinganallur (Chennai) Independent Escorts - 9632533318 100% genuineSholinganallur (Chennai) Independent Escorts - 9632533318 100% genuine
Sholinganallur (Chennai) Independent Escorts - 9632533318 100% genuine
 
[Hackersuli] Élő szövet a fémvázon: Python és gépi tanulás a Zeek platformon
[Hackersuli] Élő szövet a fémvázon: Python és gépi tanulás a Zeek platformon[Hackersuli] Élő szövet a fémvázon: Python és gépi tanulás a Zeek platformon
[Hackersuli] Élő szövet a fémvázon: Python és gépi tanulás a Zeek platformon
 
A LOOK INTO NETWORK TECHNOLOGIES MAINLY WAN.pptx
A LOOK INTO NETWORK TECHNOLOGIES MAINLY WAN.pptxA LOOK INTO NETWORK TECHNOLOGIES MAINLY WAN.pptx
A LOOK INTO NETWORK TECHNOLOGIES MAINLY WAN.pptx
 
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
 
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
 

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!
  • 16.