Ready to switch from your layout system (see Paragraphs' bloated database issue), endless twig and .tpl files, or template engine and move to a new way of building out Drupal websites: using Drupal 8 web components?
Eager, but still have some doubts? Some unanswered questions that keep haunting you?
How do you build Drupal UI components? What JS library do you choose?
What are your best options when it comes to integrating web components with your Drupal projects?
I've got the answers ready, so keep reading:
1. But First: What Are Web Components?
Custom HTML elements that you can share, use, and reuse.
HTML tags that you can use with any JS library or framework.
Of, if you prefer a longer definition:
Web Components are bundles of HTML, JS and, CSS that enable you to put together reusable components to use in your web apps or web pages.
Web components that have their custom behavior and encapsulated styling.
Moreover, you can easily extend HTML and “inject” additional data – new custom attributes – into your components.
2. Why Would You Move to a Web Components-Based Front-End?
In other words: what's the advantage of using web components?
There are a... few, actually.
Here are just the strongest reasons why you'd pivot to web components:
- you get to write reusable code (that translates into reusable functionality)
- HTML web components means less platform lock-in
- you no longer need to have a new database field for all your content
- it becomes easier to stick to consistent branding
- people in your development team don't need to use the same tech stack
- you avoid the risk of duplication
- you're free to further extend your web components using style “hooks”: an ever-evolving design
- you get to leverage a simpler way of building Drupal websites: putting together Lego-style pieces
- it becomes easier to distribute the workflow of building the pieces that make up your Drupal website(s) across your entire team
- with their functionality encapsulated separately from the rest of the code, web components make it easier to create reusable custom elements
3. Drupal 8 Web Components: From Twig Components to the HAX Module
Now that it is clear(er) to you what web components are and why you should consider using them to build your websites and web pages, let's tackle your next question:
“How do I build web components and use them in my Drupal projects?”
How do you build Drupal boilerplate themes? What web component library should you be using?
Let's start with the basics:
The behaviours system in Drupal 8 enables you to set up some custom interface elements (e.g. a photo slideshow) and to get the most of the best practices.
Of a generic configuration, for instance.
And now, let's move on to the most robust techniques for implementing web components in Drupal:
3.1. Drupal 8 Twig Components
What's a Twig component?
A web component using Twig...
Why would you opt for Twig components when building your Drupal website?
Because:
- they fit perfectly with Drupal (as well as with headless applications and other CMSs)
- if you've already been using Twig to create HTML in the backend, you can easily put them together to build re-usable web components
3.2. The Hax Module: A Simpler Way of Building Out Drupal Websites
What this module does is enable you, as a front-end developer, to work exclusively in a JS library. Like LitElement, for example.
In other words: you no longer need to “swear allegiance“ to Drupal.
Source: Drupal.org
HAX= Headless Authoring eXperience.
In short, you :
- can have the back-end of your Drupal website store and manage content, whereas the front-end can handle its UI patterns
- no longer need to work with an overly specialized “plugin” system
- no longer need to use different UX patterns, that are specific to every single system, for uploading files, creating content embed media...
The innovative idea behind the HAX module is the “authoring experience” that it grants end-users:
Built on web components, HAX ships with a simple Schema. If your HTML element fires an event that has an HAX schema, the module implements it and creates an UI for it. It also enables you, the front-end developer, to author that newly implemented solution...
A simplified way of building out Drupal websites...
4. Web Components in Drupal: Where They're Heading
… for a Drupal front-end driven by web components, that's where they're heading.
And the trend of using Drupal 8 web components to build out websites, which has grown so powerful, stems from the very challenges that Drupal's facing today:
- the decoupled Drupal architecture is not a “one size fits all” solution... we've come to realize that
- Drupal's incompatible with Node.js-driven server-side rendering
We're looking at a future where Drupal theming is fully component-based. Where components finally bridge the gap between back-end and front-end.
With Drupal 9 almost here, the “wind of change” blows even harder our way.