Components everywhere! - Bridging the gap between backend and frontend
summary
Proposal makes web components a first-class concept in Drupal backend, using Twig/Twing to render server HTML and exporting component data via Drupal.settings so the same template powers server output and client rehydration. Pattern converts a 'most_recent' block to be server-rendered then real-time React update (or Vue/Svelte) by wiring a client store (Yjs or Firebase) and lazy builders; claim: 95% of templates need no duplicate code and performance trade-offs are acceptable.
AI-written summary · about
chapters (18)
- 0:00Introduction to components
- 1:12Session overview
- 3:31The problem with decoupled
- 5:53Web components in Drupal
- 7:11Understanding web components
- 8:35Drupal's rendering challenge
- 10:20History of Drupal rendering
- 13:02Twig and BigPipe impact
- 14:47Decoupling within the backend
- 17:10Data-driven frontend
- 19:07Twig components and libraries
- 21:09Virtual DOM and rendering
- 24:32Server-side rendering success
- 26:41Reactivity and stores
- 28:00Real-time and offline capabilities
- 29:59Future steps and vision
- 31:44The future of single page apps
- 34:02Q&A and closing
related talks
48mReact Server Components: A New Way to Build Fast and Interactive Web Apps
57mComponent-based Drupal
33mServer Components are React's superweapon in the Stack Wars
45mReact Server Components: A New Way to Build Fast and Interactive Web Apps
46mScaling Micro-Frontends with Custom Elements
47mEnvisioning a Design System Maintained by the Drupal Community
54mReact Server Components: A New Way to Build Fast and Interactive Web Apps
19mReact Server Components - Under the Hood