Video details

Using Kendo UI to make your Angular App Shine| Alyssa Nicoll | EnterpriseNG 2021

Angular
06.23.2022
English

Kendo UI is a component library that will give you the ability to implement styling throughout your application, while easily maintaining consistency. Once you become familiar with implementing Kendo UI Components into your application, the front of the front-end will become a whole lot easier, and a lot more fun too!
In this talk, you’ll learn:
How to maintain consistent styles across components and elements How to produce coherent and consistent user experience throughout Angular application How to achieve styles with out having to use scary styling language (CSS) I will introduce Kendo UI, demonstrate how to implement it into your existing Angular application, and show how easy it can be to customize so the styles match your brand! ng-conf is a three-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. 1500+ developers from across the globe converge on Salt Lake City, UT every year to attend talks and workshops by the Angular team and community experts.
Follow us on twitter https://twitter.com/ngconf Official Website: https://www.ng-conf.org/ Join the Angular Community: http://www.ng-conf.org/ Get your ng-conf tickets: https://ti.to/ng-conf Follow Us: https://twitter.com/ngconf Learn More: https://ng-conf-school.teachable
Read More: https://medium.com/ngconf
Hear More: http://theangularshow.com

Transcript

Hey, there. I'm Joe Williams. Before we get into the video, I want to remind you about Ng Cough happening on August 31 in person. So head over to Ngcoff.org to check out the speakers, check out the talks, and get your ticket. It's time to get get back together. Hello and howdy. My name is Alyssa Nichol, and today I'm going to be talking to you about scaling your angular apps fast. So consistency between your components with your styles, across your application isn't always easy to achieve. Using a component library can speed up your team's velocity and help them stay consistent across components, pages, and even applications. So speeding up your dev time means the ability to scale your app and your business, which is good, right? I don't have a ton of time with you today, but I'm going to use the next 20 minutes to show you how to start creating this consistency using Kendall UI's component library for angular. These concepts should apply to any component library, but I'm going to be demoing them with my favorite. So this is the Tour of Heroes application, originally created by John Papa. I have forked it, and I am keeping it up to date, so if you want to check that out on my GitHub, my GitHub username is Alyssa Michelle, but I'm keeping up to date, and essentially, it is just a demo application used to teach people beginner things in angular. So if you've been around the block with angular for a while now, you've more than likely heard of it. It's still sprinkled throughout the angular docs. So we're going to be using the Tour of Heroes app to talk about some UI issues, to go over just styling and UI in general, and to get into that concept of consistency using a component library of the Tour of Heroes application. You have this dashboard page with top heroes listed out, and then a hero search that is custom built. And then if we go over to the Heroes page, this is essentially like an index of all the heroes, and you can scroll down through them. You can delete one. You can add a new hero here, and I'll pop down with a little form. As you can see, the styles are very rudimentary. They're very basic. And of course, it was very intentional because it was a very simple app meant to teach the basics of angular, not for styling. That being said, it's a wonderful playground to work with some of these UI issues, because I've seen some things like this that we're about to talk about in larger scale applications that obviously aren't demo apps. But it's funny that I've seen them in both, and so let's dive right in. One of the first things that jumps out to me is the way that heroes are displayed. So as you see here on the top Heroes, you have them displayed, and I call these cards. If we go to the dashboard template in the application. Apparently I already had open hi. So here you'll see that we're looping through the heroes and we're printing out the hero name and we're doing a little bit of custom styles here. This call one four. And it's very basic. It's a div than a div, but I'm calling it a card. And you'll see why in a minute. Because this to me feels like it's own little module of information like a card is. If we go back over to the Heroes page that we saw these displaying, each hero also feels like a card. It just has a little bit more information, their ID, and the ability to delete. So this is one of the first concepts about consistency that I would like to tackle is how many times have you seen in an application that you work on or an application that you've seen, maybe a button, it's a submit or a next action type of button, but on different pages, the button is styled differently, right? Maybe it's different font, different color, even rounded edges, one squared off edges and it's just got this inconsistent oh, that was the old way we used to do buttons. This is the new way. We haven't gotten to replacing all of our button styles yet. I see that so many times. And for lack of a better term with these Hero cards, they're inconsistent as well. On the dashboard page, you've got these blue and gray ones. And then over here you've got these like very like horizontal long and skinny gray ones. And it's just inconsistent, right? And so something that's really cool about bringing in a library is going to give you just kind of this baseline of hey, buttons should look like this, right? Hey, cards should look like this. So whether or not that's kind of UI and I'm actually going to go ahead and pull up our docs on develop branch, I had to zoom in a little bit. So whether or not it's using something like Kendall UI or another component library, it's much easier to have a consistent style across your application or applications if you're using a component library. And if we have time, I'll even show you how we can add on top of a component library and extend your own brand so that you can get the best of both worlds. Your developers aren't spending hundreds of hours building. Let's go and show you how many components Angular UI for. Kendall UI has over 100 components. Can't even fit them all on this screen. So it's getting the best of both worlds, right? You don't have to go and build all of these out, but you also do get that look and feel of your brand integrated in. So the first thing that we were talking about is this card, right? How do we implement a card from a component library and then customize that card so that it matches our brand how do we do that? What does that look like? How does that feel? So let's tackle it. The first step is we're going to go to and I'm just going to close out of this go to so I like to stay on our Develop docs. You'll see here I've got taller.com Kendallangularuidve. That's just our latest. Some things that are like in beta will show up there. You can browse on with or without develop does matter. But let's go down to our layout, not our grid. And inside of the layout package, this is how you will install it on NPM. You'll install the layout package. If we go check out that package, you'll see that it includes these components, right? And the card component is the one that we're directly after. So if we go to Getting Started with layout and scroll down I really love this about our docs. Every single package of components has this Getting started page. And if you scroll down, you'll see the Quick set up one with the CLI, which is why I will be using today. But also if you go down to the manual set up, maybe you have feature modules throughout your application. And so you only want to download it per module. We have the step by step instructions to essentially do what the Ng ad command is doing, but per module. So I'm going to copy this code, go on over to my terminal, and I can bump up this font, a Smidge page to make it that much easier. All right, so I'm going to paste in that Ng add command, and that is going to the NPM and installing the layout package, which again, includes multiple components. But the reason that the dev team decided to chunk up Kendall UI this way is because nobody wants to download 100 components for their application. That would be pure madness. I mean, maybe someone out there is using all of them goodness, but we just need a few today for this. And so we're going to download layout. And then I'm just going to go ahead and pull up the card docs, and I'm going to go straight to the building blocks because this is the demo that I'm going to borrow from. So if we scroll down past all the definitions of this is like a card. If we scroll down and keep going to the basic card, this is what I'm after and this is what we're going to go ahead and steal from our docs and then customize to make our own. And so on our little demo here, you can go to View Source and you can see the template of how we're doing this. So I'm just going to copy that, go and check on this. It looks like I've got a couple of warnings, but that's fine. And I don't know if I need to restart. So I'm going to try and then we're going to go over to while all of that is running and working and doing. Let's go. And in real time, you're just going to see how I would do this as a front end developer if I was tasked with cleaning up this application's UI. So the first thing I would do is identify the chunks of markup that need to be changed. So inside here, I'm going to separate it out and I'm going to paste the card. So this is the Kindle card that we're going to transform with our Hero data. And if you'll see here, I can make this a little bit larger for you if that's helpful. And maybe make this smaller. Hopefully that's a good size for you. So as you can see here, we have the Kendall card element. Inside that element, we are using the Kendall card header. There's also a Kendall card body, but we don't really need that for this very basic card example. Inside of that, we are utilizing an avatar. However, we don't have images for our we don't have images for our Heroes. And I'm actually going to go and open up our in memory data service. And this is a service that we're using to essentially mock data, mock API calls. And these are the heroes that we have. And this is the only information that we have to start with in this application. So we have an ID and a name. But if you'll notice, this template doesn't have it. But if we open up our I think it's Heroes. Yeah, our Heroescomponent HTML. This is the page. If I go back to our it's not serving. I'll just show it in the template first and we'll go fix that bug. This is the page where it was listing out the heroes in, like, the skinnier, more card shaped bits. And this one does have an ID, right? It's showing both the ID and the name. And this kind of goes back to the consistency of our UI. Why are we choosing to show the ID in one place but not the other? If we have a good reason for it? Like, oh, because on the top Heroes page, we just want to highlight the Hero's name. Really big, really bright, then that's great. That's fine. But we could still use the same base card in both places and then get really specific on the top Heroes card component and pare down that a little bit. So this one is also the chunk of HTML that we're going to be replacing. And I'll just put a little comment here of replace with our card component. All right, let's go check out that error. Error. All right, what's the problem? I'm not really sure why it was so grumpy before. I ended up just rerunning the Ng ad command, which of course asked me, would you like to install this package? And I was like, yes. I thought we just did that. And then I re ran Ng Serve and now it's compiled successfully. So I'm not really sure what happened. Often happens with me. I'm like dependencies. So here is our application and here is the card. Pardon me. And you see the avatar is not loading because again, we don't have that data. However, the Kendall avatar is actually really cool and let's use it to display instead of an image, maybe you could use it to display initials. But what I'm after is let's use it to display the ID number. So instead of image source, you can say initials as a directive on that and then it's very grumpy if you do not give it a string. So let me show you how it looks with hero name. We're not within the loop. So let's go ahead and steal this Ng four. And we want for every hero in Heroes to generate a Kendall card. Let's check it out. Beautiful. 1234. And you see N A for Narco, B O for bombasto. It's just truncating it and giving the first two. So instead of name, what we want to use is the ID. And again, it is expecting a string. So we're just going to call two string on that gorgeous ID number. And there we go. 1213 14, 1515. Perfect. And we are so on our way. I love this. I'm so excited. Right now all we need is I think the hero name, which is the only other piece of info we really have about the hero. So we can go ahead and clean this up a little bit. We don't need the rapper Div for that. Let me see if there's anything else that we can clean up. I don't think we need to specify a set width on that. And in fact, I'm going to fast forward us a little bit in a minute with some custom styles and show layering on top of this. Just because we only have 20 minutes. Don't have time to watch me walk through every little piece. But let's go ahead and check out what our card looks like right now. It's got Narco, bombasto, perfect. Everything's showing up how we want. So now we need to get it in a list like a row, looking like a row, and maybe center everything, text align everything in the middle and maybe start including our own styles. So again, I'm just going to comment out the old with the old and we're going to go and this is my favorite thing to do. Again, this is how I would do it as a front end dev that was tasked with this job. I would select all of the styles. It's not too many 67 lines and I would go ahead and do that. That's how I would tackle this. So now we have our top heroes and they are in a column and we want them in a row how they previously were. So we're going to create a div and give it a class. Let's cards wrapper and steel paste me, sir. Perfect. Now, in our CSS, we are going to create Cards Wrapper and we are going to name it. We are going to give it a display of flex. I don't want the none. Thank you. And by default, flex is already a row. But there was also this functionality, and you might have seen it before when the page got resized once it got so small, the cards wrapped to the next line. So we are going to go ahead and enable that and we'll say flex, wrap, wrap, so that it can go ahead and wrap to the next line when it needs to. I think next is going to be pulling over some custom styles, walking you through that and talking about also integrating this card, these cards that you see here in place of these, so that we have that consistent card across all the pages. All right, so I fast forward our app a little bit in time and prepare yourselves. She looks different, but it's okay. So I have incorporated our company colors and I'm actually going to close our console and show you what it looks like here in full screen mode. So you see the cards on our Heroes page. They're beautiful, they're styled. You got this lovely hover. If we go over to the Heroes page, we've got those same cards and we also have the delete button and the ID showing up as we wanted them. And so you have this now consistent look and this idea of, oh, that's a hero I'm looking at, right, like, in each place. And I'm going to show you how I implemented that. So as we did, we had a div wrapping called Cards Wrapper, went ahead and made that a little bit more semantic and made it a section. And then on our card, I added a couple of nice to have. I set the width to 100%. And on this Cards Wrapper, that is the thing that we're actually styling so that it is flexing, flexboxing. And I don't want you to be afraid, I really don't. It's totally fine. But I went ahead and added SAS to our application because this is the next big epiphany moment that you should have during this talk, and I'm going to go ahead and pull up our styles. So on top of using a UI library, the next step so that you can go ahead and customize and bring in your own brand, your own look and feel, is using SAS to theme SAS. Variables and SAS mixings are, as of yet, unreplaceable for what they do and how they function. And I created a variables sess file to store our variables in. And I created some basic variables for our company. So this is our brand shell, brand Black, brand orange, brand Pink that our company uses. And I also created some sizing variables beetle, mouse, hog, moose. There's a really cool article that I was reading on naming font sizes. And if you think about it, small, medium, large for variables, it's not very flexible. There's no in between for those. And so I loved the concept of using animals for those because let's say we need something between twelve pixels and 20 pixels. Well, we just have to think of an animal that's between a beetle and a mouse, right? These are used everywhere, not just on fonts, but for margin and padding and just all over the place. Anytime I need a number, I often try and reference one of these. And that way if I need to update it or make everything larger font for people with high contrast on or something, we can do that easily by changing a variable in one spot. And I'm actually going to show you that with this little dark mode demo in a minute. So, yes, we have these, and then we plug them into things like background, primary, primary highlight. And if we go into I'm just going to show how they're being used. Styles is the global style sheet in your angular application. So I'm actually importing our variables here, and I have this commented out to try and remind me of what are those variables, but it's not needed. And then you'll see here on the body that I'm giving it margin moose times two. And that is a lovely thing about SAS. And actually, if I go to oh, no, I think it's in this. It's down here. If I go down to our K card, this is the really cool part about Kendall UI. So I've used other libraries, and I've really struggled with some in the past because I love doing custom CSS work. I love coming in and adding in a neat little tidbit, but I hate wrestling with a framework or a library that just won't give control over because it's so broad or it's so general with its styles. So this is something that's really cool about Kendall UI, is that I've never, never once struggled with that. I needed the card to be the company brand pink instead of its default white that Kendall UI is. So I inspected the card after I put it on the page, I inspected it and I went here and I found this K card class. And so I just added a selector for keycard, and I started adding the things that I needed to customize and personalize for application, right? I need it to have this background color. I need it to have this text color on hover. I need the border to have a little bit of a darker purple. And so I absolutely love this is a really cool combination of using a component library and using SAS to kind of layer on your brand and your own custom theme. And so if we go back to the variables S CSS and we toggle dark mode from false to true, you'll see that if it's dark mode. We're going to go ahead and set the background to black and our primary to shell. So everywhere that I'm using those variables just now updated in our application, let's go check out Dark Mode. So here we have our row of Hero cards, top Hero cards, and then our column of all of our heroes. And it's in Dark mode and it's using our company brand still, but it just changed like that and it was beautiful. And it was beautiful. I hope you've enjoyed this talk and our demo about incorporating consistency with your styles using a component library. I really do love Kindle UI. I've been a developer advocate for progress for a couple of years now, and the more I get to know the product, the more I enjoy using it and extending applications using the library. So try it out for free, 30 days free trial right there with the orange button. Or if you decide that you just must have it, you need it in your life. We have a promo code especially for Ng Enterprise, and it is good through the month of December 21 for 25% off. So here is that promo code, and let me know if you have any questions or comments. Alyssa Nichol on Twitter, and I really appreciate your time. Thank you. Hi, I'm Joe Williams. Thanks for checking out this video from Enterprise. Ng 2021. Online conferences were great, but it's time to get back in person, see your old friends, make some new ones, and take your career to the next level. Head over to Ng Cough.org to get your ticket. See you there.