This is a transcript. For the video, see Reducing complexity with Preact and HTM.
Michael Meyers: [00:00:00] Hello and welcome to another Tag1 Team Talk episode, the podcast and blog of Tag1 Consulting. Today we're going to be talking with and walking through some code examples with Fabian Franz, the VP of software engineering at Tag1. And we're gonna be talking about how to reduce the complexity of your applications by using Preact and HTM.
I'm Michael Myers, the managing director of Tag1 Consulting and today's talk is broken up into two parts. This is part two, where Fabian's going to really dive into Preact, HTM, give us some code examples using Drupal 9 Umami default install. If you haven't already seen it, please check out part one, which is a really awesome background into, you know, why applications have gotten so complex, you know, the reasons for it, the benefits, but also, you know, why you don't always need it.
So Fabian, you know, the background was great. I'm eager to jump into some examples. But before we do that, you know what, what is Preact? What does it have to do with React? You know, can you tell me a little bit about it? [00:01:00]
Fabian Franz: So just real quick for those not that not have watched part one. And the idea was essentially that modern JavaScript, and I've read that on Twitter, it's not from me. You need a PhD. With all of the tools and everything to set it up, et cetera, and, Drupal developers. At least there was a time when, Drupal developers were very productive using jQuery. Unfortunately, jQuery has became very old. It's not obsolete yet. It's still here in Drupal. And we we'll be, even be using a little part of it.
But for this scenario, imagine the typical jQuery developer that is, has been using Drupal for a while, that doesn't need too large of complexity in that, that doesn't want to do much of JavaScript development, but that essentially just wants to build a little bit. Like decoupled, headless things sprinkled in the Drupal site already existing.
So today we'll be creating a nice progress bar, using Tailwind. The setup is [00:02:00] Umami, but we see a Tailwind Umami on top of it. And, Tailwind Umami is essentially like a little theme that sub themes, Umami, which I'm using to, a demo Tailwind, and we'll using, heavily using, make use of this diet this provides.
So this web Umami is actually on my GitHub. We'll be sharing the links later and, you can look it, and I'll be also committing the Preact things to it just because we can. So, let's go to some screen-sharing. Sharing the desktop and here we go. So what do you can see here is our little demo.
We have recipes, and here we have a little block and we can make random progress, but first Michael, you ask, what is Preact? So Preact is a fast, 3kB alternative to React with the same modern API. So React has proven itself by now. It's great. It's still one of the best frameworks [00:03:00] out there.
Yes. There's things like Vue.js, there's other parts, but there's also React and this great ecosystem, but React unfortunately is pretty big. It's not as fast as it could be. And we - React also brings in a lot and usually needs JS X and all this tooling, but Preact essentially is a really fast 3 kB alternative.
And the main difference is there's a compact library. If you want to use traditional React things, and most things just work. So we can use any component that's written in React and just use it here as Preact. If you use a compat package. But the main difference is why React as reimplementing all the events.
Like it has a synthetic event model, Preact is just using the events that the browser supports. That's why it can be much smaller. So it's very close to the DOM and small size, big performance, portable, embeddable, and you're instantly productive. And so [00:04:00] here's our standard to do this list thing.
Probably I've seen that already. This is a JSX form of syntax that we talked about. That means you can just write HTML in your JavaScript and we'll be doing something pretty similar but use use a little trick.
Michael?
Michael Meyers: So you mentioned Preact, and HTM what's what's the HTM component.
Fabian Franz: The HTM is a magic sauce that make it all build less. HTM essentially allows us to use this very, very similar syntax to how the Preact was, but we have this HTML and this is a template literal.
So this looks very very similar to the to do's that we have seen here, but instead of escaping, just with with the bracket and using this kind of syntax we're using this dollar props, Syntex coming to that and a little bit more this has done in JavaScript.
Every [00:05:00] JavaScript can do this. It's a tool called template, text template, literal or~~ ~~text templates. And essentially you are having a string, string and you can escape it whenever you want, but you think this dollar and break it up. So, and that way it looks like JSX, but it's not JSX.
And the nice thing is you can use this without any tooling, you can compile it using Babel plugin HTM. So if you want to use tooling, you can still compile it. That's what I said. You can optimize it for production, but you don't need to. There's no transpiler necessary. And it has lots of nice features in that.
There's even lit HTML, Visual Studio code Extension, and the VIM JSX, pretty plug in. So. That looks well. And the nicest thing is similar to how you imported jQuery originally, you just have a standalone module, which has [00:06:00] everything you need, and that's essentially what we did here.
So, I download the HTM Preact standalone module JS. You don't need to hooks So this one. Yup. And the standalone module JS. That is the one that you had seen here for unpackage.com. So just download that into your code base, and then we set it up. We are in our library station, so I have my theme here.
Libraries, YML, sorry. And yeah, if Tailwind Alpine, we'll come to that later and here we load our Preact JS module. It should be maybe Drupal 9 supports a different way to do that. In Drupal seven, you need to use this kind of trick of type, external attributes type module, cross origin, use credentials, because for this input syntax to work, you need to be within a so-called JavaScript module and JavaScript modules are something new that browsers [00:07:00] support by now.
And they allowed to essentially load JavaScript on the fly and just use what you want from it. So this is how we set it all up. And then we look in our Preact JS and here we import it and the imports is HTML and Renna function from the standalone module JS. This is how you set it up.
This is like a little complex, but let's look at the widget itself. So this is the standard React widget. Again, we import the standalone module. We have our button here for making random progress and Then we have our little HTML here and you can see here again, we have progress, zeroed something different, or we have a percentage here.
Here we have a button component embedded and I don't have this nice plugin for we are using here. So this really looks just like a string to me, which is then, combined again with these template literals, which are then [00:08:00] I can put my logic in there, but this is essentially how you write React with Tailwind.
So it looks a little bit nicer because as this progress bar with just being a number, and I might've been not as exciting. Michael, do you have any questions so far?
Michael Meyers: We're going from no compilers to no IDs here today. I, you mentioned this module approach does that, I assume work with mobile devices as well.
This concept of only pulling in the bits that you need.
Fabian Franz: It works every where so far, at the, Oh, wrong, wrong side. It works everywhere. So, if you look at the, the scripts that are input we should be able to see it it's probably down. Yep. There we go. So the type module is, it's a very special way of ensuring you can - here we go.
This is how the script tag essentially looks if you do it, and this type module is really saying to the browser that this is its own context, its own execution context [00:09:00] where this is executed. So it has nothing to do with the other things. But this is how you get into this state where you are able to then import one thing from another and, and cross-reference things.
So how did we get this React widget here on the page? So it's very simple. What it did is I added a little text format, raw HTML, put CodeMirror in, and then I'm writing my HTML code here. Here's my Tailwind classes. Like this would be centered and a full width, it's a little bit of bottom margin and then they put just here, this Preact widget, widget equals test. Right now. I only have one widget, but it's very simple and I could have another widget here. And once I save that and we reload, you see this one quick moment for it loading. And then I see two progress bars.
And they also have their independent states because they're independent. And that's how, how you [00:10:00] essentially do it. So this is my kind of proposal. This is very, very similar to how real web components work. This could all be using real web components but they have their own life cycles and other things That are nice, but not necessarily needed.
Michael Meyers: In my mind there, cause you, you know, you've done so many great talks on web components and, and, and when I saw you do that, I was like, Oh my gosh, you know, it, you know how it is and you know, why isn't this web component? So this is, you know, this could be done as a web component as well. You know, something I could just plug in and be a layout builder, you know, as an end user.
Fabian Franz: For sure.
No, the master plan is a little bit different and you have to distinguish here. That's something you don't know, obviously, is, there's web components, which is a specification of defining custom HTML elements, which are then used. And I could have done that for this, but I didn't. And there is components, which is different from the web [00:11:00] component specifications we are talking about.
And those components are essentially for that I could place just a component here was this custom blog via layout builder or whatever. And that's for sure. That's the master plan, essentially that we have our component library, which we still have installed here. And then instead of just putting my trick template, I can put in a special trick template, put in my Preact component, click on add component, or however that will work, maybe even upload to JavaScript plus a widget right in the browser.
And boom. I have my component here, so yeah.
Michael Meyers: Either way, something that I think, you know, well, site builders could, you know, if these components already exist, you know, whether it's a component or web component, this is powerful. Like this makes it easy for me to jump in there and add this kind of thing, wherever I needed, whatever page.
So I, you know, it doesn't just make life easier for developers. I think it makes life [00:12:00] easier for. you know site builders and anybody who's working with the site, this is really powerful.
Fabian Franz: For sure. And I mean, that's a whole point of components to create reusable components, create reusable design elements with embedded interactivity, but it doesn't need to be React.
So for example, if I don't have an activity like I have here, then I don't necessarily need React for that. I mean, this simple example, we could have also done in a bit of Alpine, which we'll talk a bit again in another talk. But I want to quickly also show how we are essentially for those jQuery developers attaching this.
So this is a standard Drupal attached function. Very very standard. The difference is that we are having this input statements here, which are, does the JavaScript modules part. And then essentially we searching for all Preact widgets. And here we use a little bit of jQuery. For each Preact [00:13:00] widget, we are finding them, or then we rendered the widget to a virtual DOM with the progress being random at parts, so I can even pass properties in here, but it could not only pass properties.
Fabian Franz: So for example, this function not only takes context, but it also takes settings. So if I wanted to, I could say config= and then settings dot preact. Test configuration. And then, and for example, I could use Drupal settings output to output, to configuration for my Preact widget, from a block from wherever I want even generated from the UI, or what I could be doing is I could be doing a request here to JsonAPI and Json API, resource like set up a view Create me some resources, and then I could get some data in and sprinkle some interactivity using Json API, but which usually [00:14:00] only used for decoupled Drupal sites to sprinkle it in.
That's a hybrid approach, essentially. Like, for example, you have a locked end users. No one cares about SEO. So why not? And you have a complex, React widget already built like that and it works like that. So That's how you can, can do those things. So let's undo that real quick. Because I want to show, for example,~~ ~~but if I, know that's the whole point.
If I change progress to zero, for example, at the beginning it's at zero, so I just reload my browser and it's there. Now those using the tooling. They say, Hey, I don't even need to reload my browser. I directly see a zero. And that's a hot module reloading, and you can still use that. But my point is you don't need to.
There's nothing stopping you for, you would think this reloading, et cetera like that. So, and essentially so we render our test widget, and they may call the render function and render to wherever our widget is. And that's [00:15:00] kind of all the boiler plate you need. And I wrote that in about it an hour before the demo today to just set it all up.
So it's really simple. And in my opinion Preact and HTM should replace jQuery in Drupal 10 or something like that, because I think Drupal should ship with a framework and be opinionated about something. Like it was opinionated about jQuery, but I don't think it should force people to do all this both steps, et cetera, but really be as simple to use as always. Put in, in a JS file.
Attach it and boom, you have Preact up and running and everything like that.
Michael Meyers: A time and a place for complexity. But this makes things really simple for developers and amazing for their site builders, right? Empowers a lot of other people in the organization. And that's something that we really need to think about when you're designing and building your application is, you know, who's maybe using it.
How is it gonna be built out? So [00:16:00] this is, this is really win-win.
Fabian Franz: Yeah, you don't really, you essentially don't really need to think about, yes. There's lots of tooling that makes development work nicer. I'm the first to to tell that essentially. But the point is essentially, if you used to like sprinkle a little bit of jQuery, then you can sprinkle a little bit of Preact HTM now.
Michael Meyers: Awesome. Well you mentioned Alpine, you know, you also touched on two things that, hopefully we can come back and talk more about, how you can use those tools in a very similar way for this. Fabian, the demo was awesome. Thank you. And please for everyone who tuned in, make sure to check out part one, the in show and background.
If you like this talk, please remember to upvote, subscribe, and share it out. You can check out our past talks at tag1.com/ttt that's three T's for Tag1 Team Talks. As always we'd love your feedback and topic suggestions. You can write to us at [00:17:00] ttt@tag1.com and a big thank you Fabian for putting together this demo and walking us through it and to everyone who tuned in and joined us today.
Take care.