 Does this work? Okay, great. It's not really close to it. Yes, it's long. Does it work? Hello? Is this microphone work? Does this work? There we are. Hi, Mary. I like that hat. Yeah, it's nice. Hi, Mary. I would say hi to everyone, but I don't know everybody's name. Sorry about that. For us to go, or do you... All right. So thank you for coming. I'm Rebecca Alpert. I'm a front-end developer at Red Hat. And I'm Dana Kutcherite. I work on Patternfly as a developer with it. And we're going to be speaking to you today on applied open design in web applications, specifically as it relates to Patternfly React. Okay, so maybe you've been to some of the other Patternfly talks today. So it's nice that we're able to do a series of these. And we are the third in the series, as you see with the nice circle around the three, applied open design in web applications, as was mentioned. So we're going to be specifically talking about that, how all of this translates into what can then be done in a web application. So what is Patternfly? Just a brief review. It's an open-source design system that was created to enable consistency and usability across a wide range of applications and use cases. And it really helps with pretty consistency so that users can understand what's going to happen when they move between applications and that we've been able to do a lot of research into those use cases and figure out what's going to be a pattern that's easily recognizable and easy for them to use. So what does it include? By the point that you're using React code, which is a JavaScript framework, we have design baked in. There's CSS that's used from a library that we're pulling into the React components. We're able to add accessibility through keyboard navigation, support through our various event listeners that really helps to tie that together and it works natively within React code bases. So how does this process work? We're just going to take you through a little bit of how we end up with a React component. So it starts with design. That's where everything starts. We don't create components unless a designer has come up with a specific researched use case that makes sense for that. So we're showing an about model here, which you can see all the various pieces that have been indicated by a designer and provided some more specific instructions. This is just a screenshot from the top of our documentation page. But there's additional, for each of these callouts, really describes how they should be used. But then with this design, go to the next slide. We have usage information that tells us how it should be used, how it should be accessed on the page, how it can be launched. And then it gets converted into HTML and CSS. So we take this, we create the states, the various CSS properties and classes that would create what we see here. But then to create a React component, something that's usable in an application, we actually create the code for this. So this is now a screenshot of an actual live React component. And they pretty much, they should look the same, do the same between each of those. And that's really, this whole part is meant to just show that the design system is the same across all of these various pieces. We can go to the next one. All right, and our components, as we mentioned, they have CSS that we pull in from our core library, user interaction. So we have a lot of listeners for events. We also add keyboard handling. So if you're inside a modal, we may trap focus and know that as you tab around, it's going to access various elements. And even state management can be included. And that really can help tying it into an application. So then some may say, why build a JavaScript library? Why can't you just tell us what the CSS should be or what the design, and we're going to build it ourselves. So there's a few benefits from this. And we've seen over time when you just provide CSS what happens. People will look at the designs, and for each application that uses it, they will invariably create their own component library because they want to share the components. So by creating one, we benefit from shared expertise around implementing the patterns. We also work closely and directly with the designers and the CSS developers to build these. We're also able to create common, more embedded and involved experiences. So things like wizards, navigation, masthead where it's not just a button or a dropdown but a lot more put together. And what that helps a user with, if they're moving between applications in the same family, they get the exact same experience, and that reduces cognitive overhead. So when you're doing one action and then you move to the next action in a similar UI, you don't have to relearn it. It's right there, it's done the same way. So making these interactions into a library, into a JavaScript library really helps with that. And if one thing breaks, we don't have to fix it in dozens of places. You can fix it in one place and then the entire community benefits from it. So who's using pattern fly for? Well, everyone from Red Hat OpenShift to Insights. There are also Red Hat projects such as the Chris Project, which is run through the Massachusetts Open Cloud that are using pattern fly for their frontend interfaces. Here you can see three examples of pattern fly being used in the wild in Red Hat OpenShift, the Chris Project, and Red Hat Insights. These products and projects are using pattern fly react for everything from alerts to about models to charts. And it gives you a seamless experience across the products and projects. So what does pattern fly react contain? It contains three major components as we discussed in prior segments of the pattern fly presentations. Components, layouts, and demos. Components are everything from about models to wizards to buttons. We offer a wide range of components and you can go to our website patternfly.com slash v4 to see all of the different variations of components that we offer. Another cool thing is that we will give you sample code so that you can copy and paste it into your react project and even edit it live on our website so that you can test it out on a small case before you actually put it in your product. The benefit of layouts is you don't have to write CSS anymore. We offer layouts of everything from grids to stacks to bullet layouts. And all you need to do is import a JSX tag, such as grid, and pull it into your project to give you the great layout that you would see here. As for demos, the third part of pattern fly, these are more complex use cases that we've coded out for you. They're made up entirely of components and layouts that we have provided elsewhere in the pattern fly ecosystem. And this way you don't have to worry about how to build a page correctly. You can just look at all of the different variations that we provide on our website and grab the case that works best for your application so that you can move on to bigger and better things. It's easy to customize pattern fly 4 for your application as well. For example, here you can see two different alerts and they're very different. One is red and has a danger icon and the other one is going to be blue and used more for informational messages. This is going to be controlled simply with one prop variant and you can use it for all different types of alerts in the pattern fly library. You can take props a little bit further and include anything that you might need for your component. If you need an action button for your alert, you can add the action prop. But if you don't need it, you can just leave it out and the alert is going to behave just as well. With descriptions, you can add them and it'll give you all the padding that you would need to get a successful description on your alert. You can see all of the available props for a component on our website for the component for that particular page if you scroll down to the props section. You can take customization a little bit further using something that we call CSS variables. We're not going to get too far into it in this presentation because we covered it briefly under the CSS portion of the React timeline. What you can do with CSS variables is make powerful adjustments to components across a project. Here you can see two alerts and we've adjusted the drop down size with just one line of code. PFC alert box shadow, that's all you're going to need and that'll modify the alerts in your application for you. We don't see a ton of people using this but it's very useful if for example you need to migrate between pattern libraries and bridge the gap between different types of looks and feels. Now that you've learned a little bit about pattern fly we're going to teach you how to use it hands on. This is the fun part. If you have a laptop then you're welcome to join along. This is something new that we're introducing to the pattern fly ecosystem. We're trying to add tutorials to help people see and learn how to use all of these pieces together. I welcome you to go to catecoder.com. We're going to walk through it up here so you're also welcome to just watch the demo too and try it out later. We also have it at the UXD table out in the main area there. You'll notice there's an HTML CSS pathway that has five different scenarios which I encourage you to take a look at outside of this but there's also a React one and that's the one we're going to go into with a course where we've added two different scenarios. Depending on your feedback and feedback from others we may be adding more of these if you find them valuable. So we'd love to hear what you think of these after what you hate about them, what you like about them. So we're going to start that course and we're going to start our basic one here. I'll try to imagine it's going to load one of these days. So is anybody following along? Let's see, okay, Christy. Is it loading for you, Christy? Or are we just having a... Okay, maybe we'll just refresh the page and start from scratch here. We'll do the basic one to start. And then what happens as you start the scenario? I think it was starting. There we go. Sorry about that. So it takes a few moments. You'll see it's connecting to port 3000. The way this works is it starts up a container in the background and it runs a small node application based on Create, React app. And it reloads automatically in the background. Now Catacoda is something maybe you've seen in other Red Hat training and this is Catacoda's first starting to wade into UI training materials. So we've been working closely with that team to help provide feedback on these scenarios. And there's still some glitches, but we'll talk through them as it goes. But eventually what's going to happen is that little Catacoda sign at the bottom and the creator loves cats for some reason. We all like cats. So there it goes. It's connected and it's loading. And that's... We just got to talk through this until it says welcome to pattern fly. There we are. All right, and then at the top you'll see a tree view that has all the source code and steps on the left. So we're going to walk through modifying this and creating a very simple built out card that we see here. And this is the general structure of a card that we're going to add that we can see. And this is what we'll end up building is basically a card view with a header at the top, an action button, another internal header, and then some content and some links in the bottom. And we'll show how assembling all of the built components can really help to meet the needs of a designer and a user very quickly. So let's go to our first step. So we're going to add a card to start. And you'll notice there's a copy to editor button and what this is going to do, you'll want to make sure that you open the app.js before you click this. But this will put all of that code that acts as a baseline to create the overall structure. It imports various components for you. And if we scroll down a little, we'll see the empty content. So this is showing you have a card with an empty card head, some actions, card header, card body, and footer. And those are just basically placeholders. There's no content in there. And when this reloads, which I think it has, the monitor doesn't really show, but you'll see a really, really dim gray line beneath. Dan sees it. Anybody else see it? I wish I had prizes. I could throw a t-shirt to you guys. Okay. All right, so now you're free to move on to the next step. And we're going to start building this out together. So adding content to the card. You'll see the content goes in the body of the card. And within this, you'll see there's some code you can copy to the clipboard inside of the card body. You also can just start typing in the card body, but it's a bit of text. And if anyone feels strongly about the formatting of their code, you can free to tab it in and have it look nice. We chose two spaces, but if you like four or tabs or three spaces, it's up to you. So then when it reloads, you should see the text, Adam. This is a react, which one? On the right? The card. So it's specific to pattern fly react. So that's what the form of the react components looks like when they're laid out in JSX, which is a react templating language, if you will. So it returns the content, and then each of those pieces are replaced with HTML content. If you were to inspect the code below, all you would see would be divs and spans with pattern fly classes on them. All right. Anybody else stuck on this step, or everybody see who's doing it? Christy, you're good. Okay. Let's move to the next step. With react. So most JavaScript frameworks will have a domain-specific way of defining components so that when you reference them in the language, they can then be compiled into HTML. Yeah. Now, to use pattern fly, you don't. But you do still need to work with an XML format, which is HTML if you want to write a web page. So you're always at some layer of abstraction away from that. But this is the format react has taken to define components. Sound good? Not on a fundamental level, but in the way that we're building these, I think this is where we are nowadays. Okay. So our next task, we're going to, I think we're at the header, right? Okay. This is my aging eyesight. So we're going to add some text to the card header. Start to indicate where we are. And you'll see a text component inside of that. That also has a variant in there. So this is a text variant P, which is ending up putting an HTML P tag inside of this header. So again, if you were to inspect it, you would see this outcome and you'll see pattern fly show up. And let's move on to the actions and then we can check and see where everyone ends up. So we're putting a button inside of the card actions, which is a location that ends up putting the actions off to the top right within the header here. Okay. And what else do we have in the card head? A subheader. Yeah. And sometimes this will happen. This is a matter of getting the right structure in place. And if this happens to happen, this is something we're still, let's see where we go. You may just want to right click and reload the frame. And it looks like it came back. Okay. And I think there's going to be an icon that goes in there too, right? Yes. Did we miss that part? Yes. There's a bit of, so there's a brand component, which then takes a source of an image and that's going to show up in there. So we moved a little bit past that, but maybe you caught that in the steps and we'll see the brand show up in just a moment. Which I believe is outside the actions. Good luck here. I think it's inside. Maybe up in card head, not card header. Yeah, you're right. Yeah. We get to write code live here, which always has its... So Dan's got the brand. Okay. Anybody else? Let me know when you get the brand showing up there. There it is. It's like coding live because you can see it's real. There we go. All right. It's going to fail to compile in a second, but then it should come back. And this is what real development looks like. So it's great. And it's coming back. Okay. There's the logo. And you can even see it on this monitor. So now we have a header and a title and a subhead and some text. So we've got the header and the body built out. If you're doing good, anybody else doing this live? All right. Yes. I can't hear. So maybe sometimes that happens. You may need to right click down in that frame. This is an iframe down below. And within that frame, reload the frame only if it gets a little stuck. So that's an active bug. These are brand new tutorials that we're bringing to you guys. We've never shown them to anybody else. So there's a few little minor glitches here. And we'll have a few minutes after we can step over and I can walk you through it too. All right. You're good. All right. Let's move to the next footer. So now in the card footer, so this is going to be at the very bottom, we're going to add a few links. And this will show some of our buttons and also a layout. Now, you don't necessarily need to use a split layout for this, but we wanted to show another part of pattern fly, which is our layouts. You could just put a couple of links next to each other. But a split allows you to position items horizontally on a screen and then define space between them with a gutter. So you'll see a split. And then for each item that you want to position, you would create a split item. And then if we put a button inside of the first one, which is a link type button, it should show up like a link. And it does. Now we're going to put the next one in the next item. And we're going to see for all of anybody who likes to write UIs, what's wrong with that screen there? What else should we add? I'm going to tell you about seeing a violation error before. We're going to say it's actually updated based on the latest type. That's a great question. So this editor also has one lovely piece where it saves after every keystroke. So that leads to some really amazing situations where your code is saved way sooner than you would like for that to happen, leading to some interesting compilation errors. So we're working through that, but it also makes it a little more exciting. You're on the cutting edge. Control less. I'm going to do a whole lot for you. All right. So then with our links right next to each other, I think we need some space. So we're going to add a gutter in there. And Rebecca just added a gutter. We can put a medium gutter. There's other variations. And the documentation will tell you what all of the various values that could be put there. So now once the gutter is there, you should see some space between our links. All right. Who sees space between their links here? Dan does. Great. I have a... I embedded someone in the audience to help us out. Okay. All right. So that brings us to the end of this. And we actually have a little time to do another scenario. So if you're still there, if you finished and you would like to try a little more advanced scenarios, this was just a card, but we can show the full power of pattern fly through another course. So go back to catacoda.com slash pattern fly, which may involve typing manually in the URL bar to get back there, or a lot of back buttons. And we can try the advanced one. I think we have time. What do you think? What time it is? We have time, Rebecca? We should have time. Okay. All right. I'll turn it over to you then. All right. So for this one, you're going to want to choose the advanced demo. And the rationale behind the advanced demo is to get you familiar with pattern fly react demos, as well as a little bit more of customization. So if the people are who are following along, Dan, are you, is your server up? But can you let me, give me a heads up when your server's up? So as we mentioned before, demos are basically just made out of components and layouts, and it's just a way for you to deal with a more complex use case easily. What we're going to be building in this presentation is a page demo, and we're going to customize it so that it's purple with red links, which is not standard to pattern fly. Dan, is your server up yet? Great. All right. So our first step here is like, similar to the last demo, we're going to open up app.js and copy all of the code into the editor. When it reloads, we're going to get a bare bones page demo from the pattern fly documentation. When it reloads, you should see something like this. Our demos come with all sorts of interesting functionality built in. We have it so that you can collapse the navigation and we have some interesting drop downs that you can play with. The next step that we're going to do is populate our cards with some content like we did in the last demo. So we're going to find card body in our demo. So you can see here, app page is our actual demo. Gallery is our layout that we're using to generate the layout for the cards. And then we have our actual cards inside gallery item. So you're going to copy and replace the code in this card. When it loads, you're going to get something like this where you have cards that are populated with content similar to the last demo. Now we're going to move into more of what the power pattern fly is, customization. So one of the cool props that you can add to a card is actually a hover effect. And that's very easy to add. All you have to do is add in is hoverable prop to your card. And when you mouse over after it loads, it's going to give you a nice drop shadow around to your actual card when you mouse over it. You can see it a little bit here. Yeah. But it's going to be clear on your desktops if you're following along on your own computer. It'll look more like this if that's any more visible, which is not. All right. So our next step is we're going to actually customize the link in the card from a link style button to a primary button. And that's also done with props. We're going to change the variant to primary instead of link. And when that loads, you should see a blue button that has a nice hover effect. We offer a lot of different buttons in power fly, and you can use the same rock to customize it to all different variations. The next thing we're going to do is actually switch files. So go back to your source folder in the left pane if you're following along, and you're going to want to open app.css. Sure. Go back where we replaced the card. Yes. Should we replace inside or inside that? You should replace inside the array. So it should be a... Yes. So we're going to open up app.css once that happens. And then our next step is we're going to actually apply CSS variables to our page demo. So we're going to copy over the CSS into app.css. And what this is actually doing is defining a variable at the root level. This is a nice red color. And then at the component level, we're actually changing the link color to that same red where it says pfgloballinkcolor. And we're changing the background color for the page where it says pfcpage background color to a nice purple. When your page reloads, you should see that the nav bar is now purple and your icons are going to be red when you hover over them. So it's very easy to use pattern fly CSS variables to customize your components for your use case. So this is the last step in our demo. We're going to head back to our presentation. If you have any questions about the demo, you can come and see us at our table in the lobby. And now that you've gotten a little more experience working with pattern fly hands-on, if you'd like to take it a little bit further and contribute to pattern fly, we welcome you to file issues and fix bugs on our GitHub repository. You can reach us at pattern fly slash pattern fly react. And if you want to get up to speed on how to be a good contributor, we recommend checking out our contribution guide. If you have questions or would like to learn more about pattern fly, we recommend reaching out to us on our Slack channel through our forum or through our mailing list. They're pretty active, so if you have questions, we'll get back to you pretty quickly. And if you'd like to meet the UXD team in person, feel free to come and see us in the lobby. Yes? Inline is an interesting term. It depends on your compiler, I would say, but essentially you end up with valid JavaScript and HTML to render the application. Any other questions? So that's also a great question. JavaScript, most of these languages, all of them at this point, have this concept of source maps, which the browsers support now natively. So within the browsers, there's debuggers that use the source maps to take every compiled line of code and return you to the line of code that you created to author it. So then within a browser debugger, so if you own the Chrome dev console or Firefox has dev tools, Safari does, you can then see the actual code that you wrote, which uses these source maps to load it for you. And then you can set breakpoints, you can hover over to your variables and do all you would with a normal debugger. All right, other questions, thoughts? Okay, so we're around. Come find us at the booth. Ask us, we've got a few more minutes. We'll be around here for a few more minutes, but welcome questions. Thanks, everybody. Favorite part. Do you want me just to read this? It's not my party, somebody else's party. Party tickets will be available at 435. Right at 435? Or after. Or after, 436 too. At registration. Party tickets in the parties tomorrow, Friday night at 7 p.m. I don't know where. There's a costume content, is it for real? Yes. 1980s attire. Yeah. Adam has plenty of material. Or a character from Star Wars with a bunch of 1980s attire. All right, well you're all invited, I guess you're invited or you show up as a first come, first serve for the tickets? It's first come, first serve for the tickets. Show up at 435. You're invited to that. Or after. Thanks, everybody.