Enabling Declarative Components Everywhere: Drupal + Web Components Out of the Box - TTT #019

Jul 01, 2020

Many front-end technologies, especially React, now consider the notion of declarative components to be table stakes. Why haven't they arrived in environments like the Drupal CMS's own front end? Many native CMS presentation layers tend to obsolesce quickly and present a scattered or suboptimal developer experience, particularly against the backdrop of today's rapidly evolving front-end development workflows. But according to Fabian Franz, there is a solution that allows for that pleasant front-end developer experience within Drupal itself without jettisoning Drupal as a rendering layer.

The solution is a combination of Web Components support within Drupal and intelligent handling of immutable state in data that allows for Drupal to become a more JavaScript-like rendering layer. Rather than working with endless render trees and an antiquated Ajax framework, and instead of reinventing Drupal's front-end wheel from scratch, Fabian recommends adopting the best of both worlds by incorporating key aspects of Web Components, the Shadow DOM, and particularly syntactic sugar for declarative components that competes readily not only with wildly popular JavaScript technologies like React and Vue but also matches up to the emerging approaches seen in ecosystems like Laravel.

In this Tag1 Team Talks episode, join Fabian Franz (Senior Technical Architect and Performance Lead at Tag1), Michael Meyers (Managing Director at Tag1), and your host and moderator Preston So (Editor in Chief at Tag1; Senior Director, Product Strategy at Oracle; and author of Decoupled Drupal in Practice) for a wide-ranging technical discussion about how to enable declarative components everywhere for Drupal's front end out of the box. If you were interested in Fabian's "Components Everywhere" talk at DrupalCon Amsterdam last year, this is a Tag1 Team Talks episode you won't want to miss!

DrupalCon Amsterdam 2019:Components everywhere! - Bridging the gap between backend and frontend: https://www.youtube.com/watch?v=RK4BG3hsN3I
WebComponents server-side shim: https://github.com/mortenson/twig-components-ssr
Chat with the Drupal Community on Slack: https://www.drupal.org/slack
Vue.js: https://vuejs.org/
Lit-HTML: https://lit-html.polymer-project.org/

Preston’s newsletter Preston.so
Preact - Fast 3kB alternative to React with the same modern API https://preactjs.com/
Descript.com - Uses AI to transcribe Audio (PodCasts) and Video into text, providing you with a transcript & closed captioning; edit the audio/video by editing the text!

Hi! I'm Karim Boudjema, the developer and site-builder of this site. I'm currently working as a freelance Drupal developer.

I was wondering how could I giving back to the Drupal community all what it gave to me during the last 10 years, that's how the idea of this site came to me ... (read more)

Hi! I’m Santiago Rico, the web designer and themer of this site.

When Karim proposed me to design and theme this site for the Drupal community, I accepted immediately because the community is the main reason why I love Drupal so much.