 Hello, everybody, and welcome to this presentation. In this session, we are going to talk about Talguin for e-resolution using with components, react application, and tweak template. But first, let me introduce the speaker. So here we are, Jose Nieves, which is a software engineer and myself. I'm Monica, and I'm working as a front-end developer. All of us, we are working from one X internet. But first, if you want, you can scan this QR, and then you can easily follow all the presentation. Also, we have some URL that you can follow, even the not only the slide, also the repository that we will show you later, just in order to the workshop. So the agenda for this presentation will be first. We're going to start with the purposes about what is Talguin and how it works. We will talk about the little introduction about the problem that we solved, the proposal, just in order to solve the problem, why we use the main concept. And at the end, we will start with the workshop time, where we will show you some desensitizing components, the react application, and the theme, everything connected with the same Talguin config. So let's start with the purposes of this presentation. In this case, for Talguin, why we use Talguin is because we can unify and simplify the Talguin for an hybrid website. Does this mean, because maybe you are asking, okay, what is hybrid? So in this case, hybrid is just to have multiple markups, but just using one single Talguin config. And then we will have just all the style sources in one only place. But how? Because Talguin proposes just efficiently and consistently styling. Now, we are going to continue with the introduction. And then Jose, please. Thank you. Okay, so before we start, let's get some context. First of all, what's the problem to solve here? We want to improve scalability when we are styling, and especially, as Monica said, hybrid solutions. That means that we have multiple markup sources with using more or less the same classes. And this can lead to some problems, like this one, for example, maybe you are having a new dev that needs to implement a react application for your project, Drupal project, and need to follow more or less the same CSS and conventions that you have in your company. And it's going to be a mess to explain everything and probably it's actually not going to work because maybe skipping sometimes or it's not that logical, not that easy to follow. Or maybe you just have a developer that doesn't know that react application was added to your project and is looking to the markup and is finding out that in the final render page there is a class and he wants to override it and start adding importance everywhere just to be sure that because he cannot find the source, like the markup for it, just to ensure that it's actually overriding. Okay, so what's our proposal is to have a single point of truth and Tailwind is helping us here with Tailwind Config because with this one file we are able to actually define all the base, all the foundation for the styling that we are going to be doing on our website. But why Tailwind? Because we want to solve this problem with consistency and as I said, this config file is going to let us produce a set of utility classes that are going to be used on any markup that you are developing that react application, the quick templates, some web components that we're going to show also later. Also it's going to be efficient because you can be styling on all those places but in the end you will only produce one single CSS file that's going to be the output coming from Tailwind and it's going to be the one containing all those utility classes and only the ones that you are using, the ones that you don't use are not going to be there. And finally for scalability, since again we have that single point of truth, we have a file where we can config our Tailwind, we will be able to actually add configurations or change configurations and automatically have it spread to all our solution. And we are going to be using three main concepts of Tailwind here. In order to do that, one of them is the config file that I just talked a little bit about and it's going to represent the input because there is where we define how Tailwind is going to be configured but it's going to receive as configuration and then that's going to be the base for the second step that's going to be extending. Are we going to use presets for that that is going to let us for development reasons or in order to actually have the Tailwind config defining a place that can be reused in multiple ones and especially finally in the theme layer, we are going to extend that single file in multiple places being able to move what we have defining one place to the other ones. Finally, we need to produce an output and we are going to use the content concept there because we need to tell Tailwind where are the classes being used so it knows which ones needs to purge because they are not being used and being used and which ones are actually in use and are going to arrive to the output. That's it for the introduction so if you want, we are going to start coding a little bit here and this is the repository and Monica is going to continue explaining. Thank you. So here you are again another QR that you can scan and then easily you can go directly to the URL that you have done there. We will show you here. We have, this is the repository with the QR scan. So here you have a written me that you can follow easily all the steps and then you will have everything that we will show you here in the workshop. So step by step, we will have the Drupal of code that you can start and install. Then we will have the different themes, the design system and the react application that you're using. You just only need to run the NBM use, the NBM install and so on and then you will have exactly the same and we will show you just here. So back to the workshop time, we will, as I mentioned before, we will have the design system here. We will have the react application and we will have the Drupal theme. So if we go to the code, if we go here, as you can see in the screen, I hope you see, we have here different folders. We will have the main folder, which is DC23 Talwin. Inside of this folder, we will have the design system, where inside of this, we will have the source place, where we have here, of course, the base of the Talwin that we are using and here, we will have the atomic design that we are using with all the components that we will just only show in this workshop. Also, we have here the react application where we have, again, we have the Talwin that we will extend that we are using in the design system and inside we have all the functionality that we are using in this react application. And of course, we will have here Drupal, we will have here some different templates that we are using for different paragraphs, layout, and so on. So let's back to the presentation. And now, links going to start with the design system. So the design system will be defined, all the input that we will show. This will be the base of every project that we will use because there we will have the atomic sign, as I mentioned before, with every component with the same Talwin config that we will use and extend for the older application. There, as I mentioned, we will have the component with the encapsulated style and the link to the output. This means that if we go back to the repository, we can go directly to the design system folder. So here, as you can see, we have the Talwin config. In this place, we are using just customized some of the styling, like here you can see here some default color for the brown color, some secondary color, even we have some custom from family, and even we are using some background images for some of the paragraphs that I will show you later. Again, inside of this folder, we have the source, and then we have here different components. In these components, we have, for example, some barons where we have, of course, the functionality of the baron here in the .gss. We have the CSS, where, as you can see here, we have all the Talwin classes, even the customized classes, like this border brown, which is using the same color we defined in the Talwin config, secondary colors, and so on. And, of course, we have here the component.gss, where we just use the base URL just to go directly to the Talwin CSS that is compiled with all the classes, only the classes that we need to use inside of the design system. So let's talk to the presentation. So, as I mentioned, we have the Talwin config with all the presets that we will use. We have the Talwin base, and, of course, don't forget about the plugins, because the plugin, even, we can create some custom classes and then we can reuse in every place just in a silly way. And, of course, we are using the Storybook in order to see all the components that we have in this presentation. So if we go back to the story, if we go here, just on the design system for them, we just only need to do an MPM start. Then, automatically, we are waiting to build this one. So, here we are. Here we have all the design system that we have with the Storybook, with the component. So, for example, we have here some barons, which is the primary color, as I showed you before. We have, for example, the secondary color. We have the headline, where we have, for example, the title for the headline. Also, we have a pretext. For example, if we want, like, let's say, hello world. If you see here, this appear with the styling that we have for the secondary color. And, for example, we have even some color here or some different variants of this color. It's really easy because, for example, in case we want to change the color, for example, the brand color, we can go directly to the repository. We can go here. We can go in the all the tywin.conf.js that we are using inside of the design system folder. And, for example, here, let's say that we want to use, I don't know, let's some random number. We just need to save. And then, automatically, okay. Maybe not too much random. It's not working. Again, we'll change just maybe. Two number, there we go. Here, as you can see, now we have something like green color, has a primary color. And in every place that we have calling not this because it's the secondary color and we don't change that. But here, for example, we have this color and, for example, in the cards. Right now, automatically, let's say, we have exactly the same color in every place we are using this custom class. So, let's back here. Back again to the same color that we are using. Let's save. And, again, if we have exactly the same color, then we need to use in Talwin, in Drupal, in other places that we need to build all the themes and then we will have in every place. Let's back to the presentation. And then, right now, we'll continue with the React application and Jose will continue with that. Thank you. Okay, so now we're going to continue, as Mika said, with the React application that we're going to add to the worship and it's going to extend. As we said before, we already defined the Talwin config that we're going to have a space. So now, for our development environment for the React application, we need to extend it and to make it available. So we see also all these changes, real-time changes on our development environment. In the Talwin config of this React application, we are going to use the preset concept in order to extend that other Talwin config that we defined on the design system and it's going to be only for development because we don't need to build this for anything. As we said, we are going to have a theme for Drupal that is going to take care of that later. Okay, so let's go back to the code here. And now, instead of design system, we are going to React application and we are going to show you the Talwin config and as you see here, it's really, really simple because as I said, this is only for development. It's just using the preset that is coming from the design system. If I open, you can see that it's exactly the file that Monica has been sharing. And again, we are using content also here but it's only for development and we are specifying where the classes are being used, the utility classes. Okay, so if we go back here to the presentation, we have for React, we have JSX that is going to be that other markup source that we are going to have and it's going to be in the end just markup with some Talwin classes and of course you can embed some JavaScript functions or a valid user. Let's find out some component of the React application. It's a really simple one. So it's just going to have an app.tsx and then it's going to have also task because this is a really simple to do app. Okay, so we are going to check the app component and if we check here, they are hidden. If I do this, you will see that we have a lot of class names here using utility classes of Talwin, exactly the same ones that we have configured on the design system. And using them, we can also see them running a development environment right here for the React application. If we now open this, here, let's go here. We have a really simple to do app. We have some tasks here but it's also interesting to know that these are actually web components that were also defined on the Talwin, on the, sorry, on the design system. As you can see here, we have, we have tasks and we have it right here. So it's working as a component. All right, so this is also, as I mentioned, style with Talwin. So if we check and inspect, you can again see the utility classes and on the sources, you can see that we rebuild Talwin only for development and it's right here. This file in the end is not going to be used. Again, it's only for development. So if we go back to the presentation, I'll really show you the firm environment. So we are going to get into the theme, the orchestrator, that is going to take care of providing that output file to the final website. So the Drupal theme is going again to extend. We are using the same concept because we need to reuse the Talwin config that we defined on the design system layer. We are going to generate the output CSS file and on the Talwin config, again, we are using the preset concept and we are going to check for all the content that it's using utility classes. So if we go back to the code, this time to the theme and we check the Talwin config, it's pretty similar to the other one, but in this case, this is really important because it's going to let us produce the final output CSS file. So again, we extend with the preset concept and we specify all the places that we want to take into consideration in order to produce the output. So we are taking into consideration the design system and the React application because both are providing hidden sources of markup that Drupal is not going to actually have in the folders. And of course, we also target the templates because they are also able to use Talwin. Once we do that, we just need to continue checking how this is being used on Twitch and how it looks in the final Drupal page. So Monica, please. Thank you again. So right now, the important thing, how it's Drupal, where it's Drupal and how it's worked with Drupal. So if we go to the presentation here, in the repository we have here the folder that I mentioned before with the demo design. Inside of this, we have the different templates that we are using in this workshop. We have the different paragraphs. So if we go to the here, this is the Drupal that we have. So for example here, we have some paragraph headline with the pretext that I showed you before in the demo design system. We have here just a simple paragraph image text. We have another headline without any pretext. We have here some paragraph text. If you can see here, we have some custom background, even some custom image background that I showed you before in the target config. We have the different cards that we are using in the design system. Here we have the paragraph for the information about the to-do list. And of course, we have here the other components. So if we take a look a bit deeper here. So for example, in this case, if we inspect this, I hope you can see here, we have the DC card that we are using. This means that we are using the component that we have in the atomic design in the design system, which is the variant compacts. In this case, we go here. You can see that there we go. It's exactly the same component that we are using in this case in the Drupal. So again, for example, of the application in React, if you see here, we have here just a simple there where we can use an ID for the React application. We send all the item in different fields that we are using in Drupal. And of course, inside of this, we are using, as Jose mentioned before, the DC task component that we have inside. So let's take a look a bit deeper in the Drupal. For example, if we go directly to the edit page. It's right there. Okay, now we have in the content, we have here all the paragraph that we are using in this case in this presentation. So if we go to the to-do list, if you can see here, we can just edit. And again, here we have the list item that we process in the React application. So for example, in case that we want to add a new item here, just to easy because we can say again, hello world. For example, just save. And then if we go down, automatically we'll appear. If you can see here, hello world in the React application with the same component that we are using. And again, for example, this is another paragraph. This is the page reference paragraph where we are using the card that we have in the descent system, which is the default card. But in this case, which are custom images that we send directly in Drupal. In the previous image of Drupal, we have some different links. And of course, for example, this will be some of the next section that we have. Here we are, the same headline paragraph with the pretext and some paragraph text here. So if we go back to the presentation, then we will continue now with some possible changes that could happen, maybe that the color brand has mentioned before some component. And so please, Jose, thank you. Okay, so we invite you to actually try if you have already checked and prepared your own repository, local repository. But we are going to do some random changes. So it's not like that prepared, let's say. For example, we are going to change the foundation. This means that we are going to do a change in the input concept that it's the design system. So if we directly do some change here on the tailwind config. And for example, we change these colors. We won't need to change any class anywhere because we are just defining, not defining, but changing the value of utility class. So if we now build our design system because we did a change for it, and then we build our theme and clear the caches and we go back to our website and we refresh. We will see that everything is automatically changed on all the sources that we have on the React application, on the components, on the paragraphs, everywhere, the color just changed changing one single place. Okay, let's do now a different change because we have also other sources of markup. So let's do a change, for example, to the application, to React application. Let's say that we want to have these titles a little bit bigger. So let's go back to the code. We can go to the app component and we have here text XL. Let's do two XL, for example. It will make it a little bit bigger and also here. And then this case, we need to build the app because we did a change on the app. And the theme, in this, we will see, again, clear the cache. We will see that these titles will get a bit bigger. You see, it's not that much, but I changed just a little bit. And okay, let's do also a change on the theme layer. For example, we can go to the paragraph for the cards here. They think that it's page references, page reference. Okay, and we have here also tailwind classes. So let's say that we want to have two columns instead of one column. We can even just remove this because it's already here for the responsiveness. So let's save. And in this case, we only need to build the theme because we did a change on the theme layer. So we are built. We clear the cache in here. We refresh and now it's two columns. And all these changes, again, are done in different places but are using the same foundation, the same design system foundation tailwind config. And all you need to do is just change the classes where you are using the classes, rebuild, and you get changes everywhere. So I think that that was all from our side. I think that we went a little bit fast in the end. But if you have any questions, if you are trying it out and you have any doubts or anything, just please tell us. Any question? I think it's there, I think. Hi. So I've seen you choose webpack of a read, for example. Is there any reason or the... It's not totally related to the topic of the talk. So you can actually use whatever you want to do that. In the end, you just have different JavaScript files or different outputs. The only thing that you need to use with tailwind is post CSS in order to produce these output that it's not related to the vendor. So you can use whatever vendor you want. Yeah, so there's no... Okay, there's no source in that. We cannot use that for... And actually I am using different ones for the different parts, like Vita for the React application, Webpack for the theme, and yeah, you can use whatever you want. Great, thank you. Any other question? My theme for the tailwind stuff, or is it completely your own custom? No, we are using... Like here, we are just modifying a little bit, extending a little bit what tailwind base is providing you, and adding some extra classes, but this is like, for example, so we are not actually having a complex theme in here. It's just adding a few colors. So no. The tailwind base is underbarred. No, no, it's the tailwind base. Like the tailwind utility classes that come by default is what I meant. Ah, we have a triple theme, but in the end, we are using the same tailwind configuration. So it doesn't matter, like, the topic is to actually use tailwind to style the paragraphs and everything, like all the tweak templates that you have on your Drupal. So it's not that related to the theme. Like, we are providing a custom theme. If that's what you're asking, we created a custom theme just to add our tailwind CSS file there as a library, and then it says that you just consume the tailwind CSS, and everything looks like the classes that you have on tailwind. Is it clear or? Yeah, I was already asking, is there a concept theme that you get started with tailwind in the file? Ah, I don't know. I think we are not using any like that. We provide always our custom themes for that. Can you hear me? Forgive me if I missed something, but I was wondering, so I saw you had a tweak template there with some markup defined in it. Does this mean that your markup lives in two places, one in the React app and one in the theme folder, or how does your markup basically get to Drupal? In the end, it's just another layer. So for the React application, we only have this paragraph for the to-do list. As you can see here, we add some things that are only on the theme layer. There are these classes here, this headline here, but then you have this div that is having an ID, and React is just targeting it and introducing rendering inside of it the other source of markup. So if you go to App Deus Ex, you have here this markup that is not in Drupal at all. It's on the JS file, and it's like injected there. All right, thank you. Hi, great work as always from 1xInternet, but I had a couple of not really questions, but considerations for you guys. One is, have you guys seen Ving Suite by Christian Widem, I don't know if he's here or not, but more or less does the same thing that you guys doing with the Tailwind and, well, Storybook. And also, I was thinking for achieving this, why didn't you consider a headless, like using Next Drupal, for instance, uses Tailwind and it just statically generates everything. Isn't that a better alternative, maybe? Not sure if I got your alternative one. Next Drupal, by Chapter 3 guys, have you seen it? No, sorry. So, but at the end of the day, it's the same, like a headless Drupal and that's Next JS and, well, Drupal. So I was thinking, could it also do exactly what you were doing and, well, just replace the old front end of Drupal, wouldn't that make it easier, maybe? Yeah, I think that if you are able to actually go to a totality couple, then you just need to style your decouple solution if you are only having that source of markup. But our worship was more in the direction that you need to actually have multiple sources of markup. Let's say that you have a project that you are maintaining and someone comes and say, we need to have a React application that does something dynamic. And if you already started with Tailwind, it's going to be really easy to just have that source of markup control and following exactly the same styling that you are using. Yeah, thanks, but have you seen Wing Suite as well? It's a theme at the end of the day. Wing Suite, it's not, okay. But let's give it a shot, see if it works. Okay, thank you for your recommendation. Any other, if there are no more, oh, yeah, one more. Yes, hello, thanks for your presentation. I have a concern with your solution. We are using Tailwind as well, but with Twig, not React, and VGS too. But with your solution, I'm not sure the Drupal Render Cache is used for Twig templates. I think I couldn't get your question, sorry. Can you repeat it? Ah, sorry, the Drupal Render Cache, I'm not sure is used with your... Cache, you mean Drupal Cache. Yeah. Yeah, it's... For Twig, is that used in... Yeah, yeah, it's used. Okay, it's used. Like, what do you mean, like we are... We need to refresh every time, of course, that we provide a new tailwinds, like a new build for the CSS output. So yeah, it's being used. And once you clear the cache, you get the new CSS. And where is it set? What is what? Where is it set? Because when you're rendering a Twig template, you have a render array. And I did not see a render array somewhere with some cache or context or things like that. So I was just curious about that. And I don't get what you mean, sorry. Like, what... I don't get your question, sorry. I'm not getting what you mean. No, no, it was about... It's okay. I'm not sure we are understanding each other. Sorry, I don't understand you. No, it's okay. What do you mean? Okay, so thank you very much for coming.