Components written using React and Tailwind CSS. You might be thinking this is a decoupled talk. It's not. Unless you want it to be. Learn what you can do with Code Components in Drupal Canvas today using the in-browser code editor or any development environment.
Attendees will get the most out of this session by being familiar with basic React or modern JavaScript UI library concepts.
Drupal Canvas introduced Code Components last year at DrupalCon Atlanta, opening a new avenue for Drupal frontend engineering by shipping a zero-setup, in-browser code editor, and out-of-the-box support for React and Tailwind CSS. A lot has happened since then. As the technical lead for Code Components, I've watched the possibilities steadily grow as Drupal Canvas has matured and become stable.
New features have been introduced to support data fetching and Next.js-style image optimization. Experiments are underway to support server-side rendering and third-party imports. Editing Code Components is no longer bound to the browser: A CLI tool makes it possible to work with them in any development environment. This opens up interesting opportunities, such as building decoupled frontends.
This session will discuss different approaches and techniques for working with Code Components in Drupal Canvas, as well as the current state of all features, experiments, and plans for the future.
Note for organizers: The topic is a fast-moving target, and I'll be presenting the latest developments at DrupalCamp Florida (as a featured speaker) and at DrupalCon Chicago, continuously updating the content. My Drupal Canvas talk together with Lauri Timmanee last year at DrupalCon Vienna was the most visited session of the event. See more at https://balintbrews.com/speaking.
At the end of this session, attendees will understand what Code Components in Drupal Canvas can do today. We'll cover all the new features added since Code Components were introduced last year, such as data fetching and Next.js-style image optimization. You'll also learn how to manage these components using the in-browser code editor or your preferred development environment.
