Podcast audio transcript

[0:00] Music.

[0:06] Welcome to season 16 episode number two. The theme of season 16 is making drupal development easier.
And in today's episode, we'll be talking with Luca Lusso about his new book, Modernizing drupal 10 theme development.
Before we get to my interview with Luca, please allow me to mention that the next semester of DrupalEasy's professional module development course begins on January 30th.
Now, this course is 15 weeks long. We meet for two half days a week and we cover topics such as setting up your code editor using Xdebug, writing automated tests and so much more.
Check it out at drupaleasy.com/pmd.

[0:49] Hi Luca. Welcome to the drupal podcast. Hi, Mike. Thank you for for inviting me. Sure.
So, uh Luca Luso, Luca Luso, it's fun to say, I feel like I'm, I'm pronouncing it a little bit wrong somewhere. But what's your drupal background?
How did you get into drupal? How long have you been in the community?
And what's your, what's your drupal story? OK.
Yes, I started using drupal in 2007.
Probably so. A long time ago. We are working on a project with my, with a friend of mine about a course in a university.
And we are looking for AC MS to, to automate and to, to, to let uh editors wrote the things we, we try some alternatives and then we, we choose drupal.
And then uh starting from, from 2007, I basically only use drupal for everything.
Then in uh 2015, I wrote uh the web profiler module that is the 11 of the main module that I maintain.
So I jumped into the contribution then uh in 19 what it is?
1914, 1915, I attend my first drupal Con as a speaker, please, please say 2014 and 2015 because you're making a lot of people scared.
You said 1914 and Oh, sorry, sorry.

[2:17] Of course. Of course. It's 20 you would be our, our oldest guest ever if it was 1914, 1915. Sorry.

[2:28] So, yeah, you and I, you and I have been doing drupal development about the same time. That's, it's about 16, you know, over 16 years.
And that's interesting that because I don't think our paths have crossed to this point.
But they have no. So I asked you on the podcast because you have uh recently written a book titled Modernizing drupal 10 theme development.
Is this your first drupal book?
Yeah. So this is quite an accomplishment because I, I, I'm a big fan of the book.
Um And I mean, it is quite comprehensive. So what, what made you decide to do this?
OK. I, I want to, to wrote a, a book for a, for a long time in effect, but it's uh II I never found the time and the opportunity to do that basically.
Then uh October of 2022 last, last year paced the, the publisher of the, of the book uh wrote me on, on linkedin.
They are looking for someone to wrote a book about uh.

[3:32] And then uh I see this, I, I see this opportunity and uh I start working with them on this project, Mexican.
I mean, that's, that's, it's jumping in, you know, jumping into the deep end.
Yeah. You know, possibly head first as well.
Did you, did you write a lot before or do you write a lot of blog posts or?
But like you said that Pat emailed you about it.
So, how, how did that, how did they find you? Um, I, I brought a lot of, uh, Blockbuster, some of them in English, a lot of them in Italian. Sure.
Sure. Sure. Then I, maybe they found me because I contribute to the community, maybe on linkedin basically for that, I suppose.
Well, regardless they found you and, and, and we're pretty lucky that they did because it's, it's a pretty comprehensive book.
Uh, we're gonna get into that in just a minute.
But I want to start, I mean, I really like it when authors take an opinion on the way things should be done and don't try to, you know, be all things to, to all, all people, so to speak.

[4:38] And the book is definitely a little bit opinionated in the tooling that you use.
I mean, you specifically mentioned, I'm gonna go through a list here and it's probably an incomplete list, but it's a list that I picked out as I was going through things.
D DEV, visual studio code yarn paragraphs module, tailwind, backstop Js github, post, CS S web pack, Stylin es Lint, P HPC S storybook.

[5:02] I, I think it's probably, I'm gonna guess I got probably very short strong limb here that these are all tools that you use day to day anyway.
Yeah. Is that right? Yes, I use those tools.
Um Some of them in my day to day work, some of them uh for contributing, for example, for example, D the, the drupal stock that you can use for spin up uh uh drupal website locally.
Uh I use it a lot for contribution development uh for web profiler and other modules.
Then uh other other tools like um storybook or P HPC S uh I use them um on, on my daily work job, the daily kind of developer workflow. Yes, exactly.
And some of them I, I choose them for, for, for the book because uh we want to, we want to try to, to use the tools that uh from 10 developers outside of the drupal community normally uses for, for from 10 development. Right. Right. Right.
I really liked right off the bat. I really like the way you took time.
I, I think it's probably almost all of the first chapter and even the second chapter as well, like just setting things up.

[6:22] You know, setting up that local development environment, talking about like what did is, you know, installing things the right way the book has a companion like a demo site companion, which you know, that's, that's no small feat either.
And then even once you get into the them aspect of things, setting up things like web pack and browser sync and backstop J si mean, really kind of comprehensive, just information on how to set up a solid, you know, front end developer focused environment.
I mean, was that your plan all along or I, I know that when I write lessons for our courses, you know, as an example, like if I want to teach the one that popped into my mind is like dependency injection.
In order to teach dependency injection, you've got to teach like four other things before that to introduce that concept.
So I might have an outline of, you know, I'm gonna teach these five things.
But in order to get to those five things, I end up having to write about 15 things.

[7:24] Did, did you find yourself kind of falling into those rabbit holes as well as you want?
Yes. Uh uh mm Yes. Uh This uh this what you say is interesting because, uh I, I al I always think that it's important when, when teaching something to, to go in the, in the, in the correct order.
So you cannot uh talk about uh a topic uh without uh introducing it uh without the, it's uh the information that comes uh before and uh when I, when I wrote the, the outline for, for the book, I tried to do the same.
So I try to avoid talking about a topic uh using uh for example, word basically that I never used before, right?
You have to introduce and make sure that everyone explains that word.
Yeah, understands that word. Ee Exactly.
So it's, uh I, I changed the, the order of the chapters, uh sometimes during the, the, the, the writer in the book to, to, to move things around to, to, to, to do the correct order, right?
I mean, this is very much not a, there are parts of this book that are like a how to type of book.

[8:34] But there's also the other thing that really impressed me was there's a chapter just on explaining how drupal renders html. Yeah.
And it, it, it gets pretty deep and it's, you know, there's some information in there that you, you know, you won't see in most blog posts or documentation because it takes a while to explain, you know, things as, as deeply as you need to explain it. So I think.

[8:58] Stuff like that. Like this book is super valuable for folks.
Thanks. I think that audience for this book is is mainly from 10 developers, that are not in the in the in the drupal community, not in drupal job basically.
So I want to the the first chapters uh you you mentioned about the the setup of the the local stock is because uh in my experience, uh front end developers uh maybe have some difficulties with Docker or all these uh more back end or developer stuff.
So I want to explain them how to set up the the environment.
But the book is also for backend develop backend drupal developers that needs to maybe not doing front end development but uh provide the, the the the code and the infrastructure for a front end developer to do its job.
Yeah, I think that's the category I fall squarely in where I, you know, I do a little bit of front end development here and there.
I'm very comfortable with backend development, but there's definitely things in the book that I learned along the way. OK, great.

[10:07] I also think the other audience that you probably had in mind, but you haven't mentioned yet is folks who are comfortable with drupal in general, and maybe dabble in front end development.

[10:21] But aren't using all of the tools that you mentioned or, you know, maybe have some holes in their knowledge.
You know, the one, the, the, the one word that keeps or kept coming into my mind as I was reading was, wow, this is like really comprehensive.
There are parts of this that I may never use, but it's, it's really interesting that it's in there regardless.
And I think for someone who wants to level up their front end development skills from, you know, casual to professional, you know, there's not a whole lot that's missing in this book, I don't think.
Yes. Yes. Basically, it's a, it's a, it's an overview for, for some part of a very in depth overview about everything about uh what you can do with Front End in uh in drupal and, and also the, the, the chapter about uh how drupal renders its page, I think uh maybe a typical front end developer can skip it.
But uh if he understand the internals of, of the CS M of, of the C MS, sorry, how drupal uh bills renders array, how the cash works.
Uh It's mandatory to, to grow uh maintainable and future proof code. Right. Right. Right.

[11:41] So I wanna ask, you know, something specifically, you know, you talk about the storybook and you use, you know, you have some examples involving storybook in the book.
To me, you know, my interaction, you know, with storybook has mainly been with like large clients, you know, clients who, who have the budget for separate designers, you know, or, or, or focused designers who are doing that stuff in storybook and then, you know, possibly different front end developers to implement those designs, the storybook and I, I I've always kind of grappled with like what percentage and you know, you might not have an answer to this.
So you know, what percentage of like professional front end developers do you think use storybook regularly?
I, I've never been able to get a good handle. Is it just a few or you know, is this something is, is this type of kind of front end uh component design tool?
Is that, is it really common in with larger clients or is it something that's just now starting to gain traction or like where, where do you see that falling?
Yeah. Uh Basically storybook, uh it's a tool that is used a lot uh in uh from 10 community that does react uh or from 10 use from 10 frameworks.

[13:00] It starts to, to be used on uh on project outside front 10 frameworks like like drupal, for example, uh maybe at the, at the beginning of this, of this year or at least when uh uh drupal 10.1 has been released, because uh starting from, from that version, we have uh the single directory components module in car.
So we can uh we can simply build a front end theme using components.
And uh we can use storybook to develop the components uh before the, the, the building phase of the website basically.
So of course, uh I see the benefit of using storybook, but in, in, in larger project, of course, but also in larger, in larger teams.
Because uh if you have the same, uh the same developers that uh that provides all the building and the teaming and so on, probably you don't need the storybook at all.
But if you have a team that designs the, the components and then uh some team that uh some people in the team that do this, the drupal building and back and development that usually comes later.

[14:20] In the cycle, but you need to, to start developing the components from the design system. Uh and so on.
We, we notice I'm, I'm working on a, on a big project this month that is using a storybook and all those stuff.
And we are see that right now, we can build the uh in the final uh single directory components for a paragraph or a block, for example, before building that paragraph of that block.
So we can build the, the CS S uh the markup, the javascript uh show the component of the, the, the, the final client, final customer without the drupal part.
And this is, this is useful.
Are there other? And I don't want to go too far down to the storybook, Rabbit hole.
Are there other tools that you see having a lot of traction similar to storybook with drupal front and developers or storybook pretty much the way to go right now.

[15:20] Yes, probably it's the, it's the tool that has been choose, probably for by the, by the community right now because there is an integration between storybook and the S DC single directory component modules.
So you can easily expose your components uh in a, in a storybook instance.
Yeah, let's, let's talk about S DC single directory components for a moment.
Uh You dedicated an entire chapter to it, you know, I mean, I, I think you probably agree that the future is very bright for single directory components is the skills necessary to create a single directory component.
Has that are those skills very different than traditional front end semen in drupal or front end development in drupal?
Or is it just kind of applying those skills in a different way?
Yes, because uh it's just uh reorganizing files in a, in a different way basically.
So in a single, the single vector components module allows you to create a separate folder called components in your theme or your module.
And in that folder, you have a, a single folder for, for every component.

[16:30] And in that folder, you have uh a metadata file that describes the component, the twig file for the markup and some cs S and javascript files unique for that component.
So it's the same code you wrote in the in the team folder probably of of drupal but uh or better organized and then, then you have uh to, to vote uh all the mapping.
So in the, in the in the, in the templates folder of your team, you still have to override all the templates of drupal.
And in that file, you.

[17:04] Include or embed the twig files from the.
So there is a, it's a one step more to use a single directory components because you have to do to, to probably two different twig files.
One for the component and one for the, for the mapping.
Are you using single directory components in your day to day work at this point?
Yes. Yes, we are, we are, we are working on a, a big project for um a university here in Italy.
And uh all the components has been developed by using a single data components exposed on storybook.
So the customer sees them uh on storybook and then can they can uh use those components to define pages and then we can map the drupal structures.
So the paragraphs and so on to that components in the we are, we are using it a lot.
We are, we are contributing to both the module because uh it's very early stage at the moment.
So there are some issues with, with it.
So we contribute some patches to the S DC model and also to the.

[18:14] To the add on the LA about wrote for, for the study book integration Right. Right. Right.
Yes, I've, I've seen that stuff. All right. Cool.
I, I, you know, a bunch of other chapters in the book. I was really, it was really interesting to me because I know that when I'm building a theme, I always start with the header and then the footer, well, I start with like, basic typography and all that stuff first, but then header footer and then, you know, node pages and it was really interesting because as I was going through your book, your chapters are kind of laid out that way as well.
You've got a chapter on styling, the header and the footer, uh you know, on styling content on styling forms, on styling blocks.
Is that the way you approach when you're, when you're building, uh you know, doing the front end first sight, do you kind of the same way that you laid it out in the book? Yes. Yes, exactly.
Uh We, we followed that uh that, that pa and uh I, I try to add some more topics and knowledge uh at every step.
So I start with the other and footer because probably in the other and footer, you only have blocks or, or something like that.
So it's more easier than styling an entity, for example, a standard content entity.
And then uh I move to the content where you have probably a node or, or something like that when you may have fields.
So you have to understand how to extract the fields information from uh.

[19:40] From drupal, how to pass them to, to twig and, and so on. Cool, cool, cool.

[19:48] I did want to mention, you know, one more chapter that I was really surprised.
And uh honestly, I just skimmed it. So this is one of the one of the few chapters I haven't read yet.
I'm using Google Lighthouse for front end performance. So again, this is one of those skills that I know in my experience, not all front developer, you know, not even all professional front end developers or full time front end developers have, but those that do use lighthouse are very, you know, very like they wanna talk about it.
They wanna mention like their, their lighthouse scores are, are are high and stuff like that.

[20:21] So again, I'm gonna assume is this something that you use in your day to day work? Yes.
Right. And for those, for those who are, who are unaware of what lighthouse is, can you just explain what Google Lighthouse is real quick?
Yes. Basically, it's a, it's a tool that measure uh some metrics from every pages of our website, and, and uh it extracts metrics like layout, uh layout shift or time to the page to be interactive or some other metrics like uh time to first buy a lot of metrics that uh the that are calculating the browser for this uh Google light ta uh works well uh when you are using Google Chrome because they are using some API S that are only available on Google Google Chrome browser.
And uh you can use uh those values they, they call them uh car web vitals.
You can use those metrics uh to check if some part of the page can be improved for performance and, and accessibility point of view.

[21:22] And then the interesting part is that Google Lighthouse can provide you suggestions about how to improve your pages.
And some of those suggestions are from uh for, for drupal.
So there is a repository of suggestion, basically you can contribute to, to it.
It's open source and you can add for, for example, uh if uh images are not lazy loaded or if uh some javascript blocks, uh cs S rendering or something like that, then there are maybe standard uh approaches in drupal.
For example, you can enable the lazy loading of images or installing a module to improve something.
So you can provide those suggestion to to develop a specific for, for drupal. So that's really interesting.
So that uh I think what you're saying is is that in the in the lighthouse report in Google Chrome, it will it, it can sense whether or not.
It's a drupal site and if it is, it will give you drupal specific suggestions.
Wow, that's really, I didn't know that that was a feature of Google Lighthouse.
So that's pretty interesting.

[22:33] All right, you mentioned web profiler module. You do talk about web profiler in the book a bit as well.
So real quick for folks who aren't familiar with web profiler, when you give us a low down on what that module does.
OK. Basically web profiler is uh a parting more or less of the web debug toolbar of SY from symphony.
Uh If you ever use symphony at the, when you are in on on development at the bottom of every html pages, you can see uh a toolbar.

[23:01] Without some metrics that the tool uh calculate on the page.
You are you are viewing, I move some of the code from.
Uh some of the code are already in drupal because we are using symphony, some symphony components.
I brought all the missing stuff that are in symphony but not in drupal.
So if you install the web profiler module, when you if you have uh permission to to do that, you see a toolbar on the bottom of every web page with a lot of widgets that collects some metrics about the page that you are, you are rendering, you are viewing.
So, but it's more it's it's not, it's not metrics about the front end performance as much as it is about caching, I believe, right?
It's both because uh if you are using web profiler on Google Chrome, you also see oh hard web vitals calculated the same way as um the lighthouse.
And you, you also see how many Ajax call the browser is performing.

[24:07] But the most part of the the data is collected on the back end of course.
So you you have many queries which which query as uh as executed uh cache sheets.
For example, how many blocks or views or forms are rendered on a page, the the rout information.
So parameters from routing the controller that has matched.
Yeah, that's the stuff III I I'm familiar with seeing a web profiler.
I didn't realize that was integrated with the Google Lighthouse, the core web vital stuff as well.
Yes, it's uh it's uh I I've added it uh the end of uh last year.

[24:46] And uh I also improved the web profiler adding some other metrics especially for for the book because for example, until uh this spring web profiler does not collect anything about single director components.
For example, now there is a data collector for which components are used on a on a page and so on.
So I expanded the tool because I needed that data in the book to explain how things work, All right. Well, you know, I I think that over the past 28 minutes or so we've conveyed just how comprehensive this book is. So let me ask you one more question.

[25:31] So for someone who is a, a casual front end developer, a casual drupal front end developer, familiar with writing Sass, maybe familiar with overriding template files, maybe not much more than that.
If you had to mentor, you know, that type of developer, what would be the two concepts that you think that they should learn next?
Is it using Google Lighthouse? Is it learning STC?
Is it something else like what in your opinion, I mean, is it using all of these tools that you mentioned like web pack and post CS s and really understanding those tools?
Like what would you tell an aspiring front end developer who kind of wanted to make the leap from casual to professional? What what advice would you give them?
OK. First of all, uh understanding why drupal does things as it does, it's it's mandatory to, to become more professional.
So understanding uh how renders array caching, uh the render, the render pipeline works?
I think this is the first point where, where to start, then S DC probably will be one of the most the, the f the first way to, to develop a theme in the, in the, in the, in the future.
And if I can one more, oh, well, I always said true. I'm sorry.

[26:57] Then the last chapter of the book is about uh the coupling.
So building a front end without a twig and drupal theme layer.
So the, the book uh provides two examples, one using uh Villa Javascript, so performing fetcher quest to to the back end and uh and one using uh the next for drupal.
So the integration between drupal and next Js, it will be probably one of the most used technology to to to build uh the coupled uh drupal website.
So, uh and it's interesting because you can build the website on, with, with the React so completely decoupling from, from drupal.
And uh you can maybe use also also in that uh scenario, you can, you can use a storybook because the storybook is well suited for developing React components.
So you can reuse uh maybe you cannot use the same S DC components of Britain in Twig on, on React, of course, but maybe similar concepts, same outcome center. Exactly.
So do you ever envision yourself developing a drupal site that isn't using either S DC or a decoupled front end or are you past the point where.

[28:22] You would build a site not using one of those tools?
Now? Probably probably we will use that two tools uh in all next website, we, we will level up.
So I would argue then that, you know, based on that answer, the, the probably the most important thing for aspiring front end developers to get comfortable with his components, and, and possibly storybook as well.
I agree because if you're going to build a modern site, you're probably going to use components, whether it's fully decoupled or whether it's STC and those components have to be designed somewhere. Exactly. Yeah.

[29:00] Well, Luca, this was fantastic. Thank you very much for taking the time to talk to me today.
And I, you know, really appreciate the work you did in in the book.
Again. It is modernizing drupal 10 theme development published by Pact.
I'll have links to the book and a lot of other things we talked about in the show notes of the podcast.
So great to meet you and uh I'm sure we'll run into each other at some point in the future.
Thank you. Thank you very much for, for inviting me and go by the book because uh it can be a very useful set of information for, for a Drat team.
Thanks for listening to the DrupalEasy Podcast. Don't forget to check out all of our long form drupal training courses at drupal.com and stay tuned for the next episode of the DrupalEasy Podcast.

[29:50] Music.