 Righto, righto, pipe down. Come on. This is a lighting talk. We haven't got much time This is going to be very fast. I was told by Kim I could fit 30 minutes of content into 10 minutes So let's do this We deserve nice things and just because we work with Drupal doesn't mean we can't have nice front-end things Now it's easy to look at other frameworks and be envious But a lot of the things they don't have we've had for years and it's tempting to look at the features and the development Experience and say I want those things But if you jump you risk taking away features that your editors love or things that we've solved for a long time and Developer experience shouldn't be the most important thing over everything else like complexity, performance and maintenance But it doesn't have to be this way. So the industry standard for Component driven design is storybook and VIT is the go-to local development tool Many of these modern frameworks are built on top of So I'm here to tell you can adopt these tools into your front-end workflow with Drupal And in fact, I'm going to show you in fact these slides are built with these tools And so with that I'm going to give you the nice things manifesto if I can get my mouse back over there to click and I can So what we want are hot module reloading no more hitting reload no more clearing cases to get our front-end development Looking nice. We want painless CSS processing So post CSS or sass if you're still using that painless JavaScript bundling NPM installable stuff Component libraries and great front-end docs a playground for designers to see how components interact No duplication of markup between Drupal and the design system and Interaction snapshot and visual regression test and I just realized how small that font is. I'm so sorry All right, let's see if it goes to go Let's zoom in So to get started you need NPM if you don't have NPM stood Installed you should get it use NVM if you can so you can switch versions between your different projects For a new project. We're just going to use vanilla V. So create V use at latest follow the prompts if you're using HTML or not using any other frameworks. Just choose HTML if you're using react choose react Then we're going to create our project. So you move into that We run NPM install and we're going to add storybook. And so there's a command for that too That's npx storybook in it latest and we're saying type HTML for the rest of this project But that could equally be react as well And then this is pretty much the rest of this talk NPM install V plug-in twig Drupal. This yeah, that's it. Thank you Yeah, so Then you have to configure V And I'm getting used to the scroll over there. So this is the V config file This is the same across all those frameworks and talking about the main thing We're interested in here is we import the twig plug-in and we configure it here And we're going to come back to this But let's just say we're telling twig and V that your design system lives in a source components folder inside your project And that's what we're going to use for the rest of this talk Then we have to configure storybook And I think the only thing you probably want to change in here is how to find the stories and again We're telling storybook that they're in the source folder the files that are named on story dot J s Etc. Or they're an MDX file. There's a few add-ons there, but we won't really talk about those And then the probably the next thing you want to do is configure global CSS So there's some CSS that would be in all your components and you won't need to do that in every single component So at the top of your preview dot JS you import these CSS files And yes, this is a JavaScript file and yes They are CSS files and what happens under the hood is V transpiles that around and you end up with a style tag And it's got some JavaScript attached to it. So anytime you save any of these files It knows to reload those parts only in the page. Yeah, so this is where a lot of the magic of V comes in Next you want to start creating some stories. So This is just standard storybook. Nothing is this is Drupal specific But we do have some twig in here. So we're going to create a folder called source components card We're going with a card example like bring said cards are good for everything. We've got some mark up here This is our twig file this I'm not going to go into the detail here But just to note that there are some variables in here like a teaser and a title and then we document our story So in here we tell storybook about the fact that we have a card component We have to export something called default and in that we have to export both the title And that's how it shows up over here under card Default and we also have to have the component and the component itself is this variable called card And you see at the top we are importing card from a twig file and this is JavaScript What the plug-in is doing under the hood is using twig.js to turn that twig markup into a JavaScript function That will accept variables and render that twig template So down here we tell it about our first story We have a default story here and we say these are the variables and so storybook under the hood This is with twig, but it does the same with every other framework like React view and so forth is it'll take those variables put in with that component and render you a component So what does that look like? Here's our card It's our very rough starting point and so we get documentation of our story and what it looks like And we also get a show code button to say what the code looks like and there's as I said This has been output from twig And I've lost my mouse. Yep so big deal So this is where the hot module already comes in and if we take nothing away else away from this presentation So I'm going to collapse that off the side here and show you the card So this is some CSS for that card that I prepared earlier and if I Make some changes here and press save we watch over on the side there as I'm working. It's rebuilding pause for applause So Basically the idea behind this is you've got a stigma and you're working against the design and you want to you know Get it exactly right and so you basically work through your stories and I'll just gonna uncomment the rest of these and You get to the place that you're happy, but yeah, we're not hitting reload We're not doing anything and this is the same sort of developer experience that you see in these frameworks Okay They shouldn't have allowed for the fact that it was over my right shoulder So yeah, once you've got that the next thing you're probably going to want is some CSS preprocessing Is it gonna die me here? No, it's not so V will automatically pick up a post CSS.config.JS file in your route Or it'll automatically transpile a dot SCSS file into an CSS file for you And it's just with that import statement So you can import that SCSS file directly into your card.js your card stories.js and it'll it'll just work So as a proof of concept here, we've got some post CSS config in the root of this repo We're using post CSS import which lets you import other CSS files and we've got post CSS mix-ins Which let you do mix-ins and I'm gonna try to get this to work on the bottom here So I'm gonna This was really easy when it was on the screen in front of me and I'm gonna put that up the top So I'm gonna import a mix-in from another file And then I'm going to apply So over here when I'm on this image This little read more link is only place you can click and we want our card to be fully clickable everywhere So we've got a mix-in that makes a link cover the whole parent So I just add that to my card link And save and by the time I've moved my mouse over there the whole card should be clickable when it is So Again Big deal right and this is where the actual work comes in. It's the component-driven design part So there's another variant of our card that has a lot more text in it And so we can just export another story and we have different variables in it and we can start to document our different components and how they look and So we can create a MDX file in the component folder and put our docs in it And this is what we want for the next person that comes along to work on the project They want to know how to use a card So this is inception, but this slide is a MDX file with the code that's on this slide So I've got an example of the default card and Don't scroll on me. So I've got some guidance here on when I should use the default card And then I've got a table here with the controls and this is just default storybook So my designer can come in and say yeah, have they done the job properly? What happens if I put a lot of text in here? Oh, no, they haven't so you can actually do that real-world testing without having to get into the Drupal and make sure things are working And then you can put another version of your card and what does the markup for this page look like? It's just some MDX. So MDX is a combination of React, JSX and Markdown So we're importing some MDX components from storybook these blocks We've got a meta that gives it a title so that it shows up over here in docs Sorry under cards and then we can add things in here. So this we can add MDX files is what you will see above at the top here We can add MDX files. It's basically we've got Markdown with a mix of JSX in it Which is horrible concept, but it's it's a thing, right? So we've got this canvas component which rendered the card Then we've got the controls that I was you know putting the alternative thing in and so you can envision that your Documentation will start to you know elaborate and you can have one of these for each of your of your things So you've got all this and it's great. How do you actually start building this for production and using in Drupal? Well, VIT also has a build step and so in your VIT config you can put in how you want it to be built And I've got some just some simple examples here and scroll scroll So this bit here I've added so I'm telling it that I want to output my files into libraries nice things And I want to take in all of the entry points and you can use whatever you like to compile the entry point So I'm using fastglob which is an npm package that will let you like find files in a file system I'm saying all JS and CSS files, but I don't want any tests or any storybook stuff or any stories Put them into this library is nice things So the step to compile this reproduction is I just run feet build It spits out all these files for me and then I can start using them in Drupal. So how do I do that? There's a lot of options for this you can use single directly components in core You can use UI patterns and component blocks you can use Pinto Which is a new emerging module from one of my colleagues Dan who I did see here You can use theme hooks with bundle classes But the simplest form is to make use of twig namespaces and the components module So if you remember this from earlier in our VIT config we told VIT that your design system lived in source components In your theme.info.yaml with the components module You can say namespaces for Drupal that your design system twig files live in part to your components And that can be in the root of your repo It doesn't need to be anywhere just has to be on the same file system as Drupal And then inside your Drupal templates You can just include stuff direct from your design system with the variables that go in the slots and the and the sort of The goal that you want to get to is there's as very little markup as possible in these So that your front-end developer can just work purely in storybook and know that you know What they change there is going to eventually flow through to Drupal If you're not using SDC or Pinto You'll have to wire up your libraries.yaml to point to those CSS and JavaScript files that we built in the last slide And if you do want to see make sure this is all working in Drupal There's actually a VIT module which takes a different approach and it sort of hijacks this libraries.yaml And has hot module reloading of those as you're working in Drupal So you can have it flow right through down to that later if you like If you don't have that separation between design system in storybook and your actual Drupal site So Two minutes right Interaction testing so you can add extra add-ons to storybook because once you get into this ecosystem There's a whole you know heaps of different plugins you can add and in your component stories You can start writing interaction tests that make use of the whole react testing library ecosystem and So you can put a play function your component and say these are things that I should expect to see so for example, I created a very rudimentary collapsible sidebar in my storybook here and And So I've just got a button here that collapses over to the side and wow, that's amazing So in under here in collapse I can actually document that interaction and you saw it it played it automatically it closed it for me if I go into the add-ons And I go into the interactions. It actually has these here and it runs them as tests I can step back and forward through them and because of all the resolutions messed up I can't see where the But I can step back to the start and I can run through the interaction and see make sure it's doing what it should And then I can actually run this in CI and get my tests like this So like we say Cyprus and and the like where you can actually have a visual representation of what your tests look like You can do that in your storybook Okay wrapping up we this was a whirlwind tour. I've spoken at a rate of knots There's a whole storybook ecosystem come and say hi in the corridor to discuss this talk to me on slack About it if I spoke too fast. You can watch it at point five on YouTube. I watch everything on two times. So it's on you