Video details

Automate Your Angular Workflow | Matt Vaughn


Matt Vaughn

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 Official Website:


OK, well, I know as software developers, application developers, we want to be effective and efficient as possible, not as a not only as an individual developer, but as a team. And these are probably some kind of basic things. But they're good reminders. And especially when you're working with a new team, there might be things that could be improved in terms of being more effective. So one of the things I wanted to talk about was how to be effective with like just some of the tooling that we have with Visual Studio Code. And by default, if if you want to create elements in your your templates, you can basically use built in snippets that will do this for you. Now, a lot of times I will create snippets like a container template pattern here where the container has something in it. And then I use async observable with NGF, but then I also use NGF else with a template for the implementation. So for me to be able to remember how to do that over time kind of gets a little complicated. Or if you if you're not familiar with it, you might wonder how to do it. So with snippets you can just basically start. Typing and things like that, and basically the templates will start aligning in your code for you, and then you can just type in your expressions the name of templates. There's even a template for a template right here. So we can just click on that. And there we have that. So templates are or these are snippets are very valuable in getting a consistent code implemented in to your templates, as well as just being more efficient and effective. Now, there's a few different ways we can go around this. We could simply use the templates given to us in our angular environment. We can also download other extensions and install them, like the angular snippets for version nine from John Pupper. There's some great snippets there and not only are snippets available for HTML, but they're available for our typescript code as well. So if there's certain types of statements or constructors that you want to implement consistently, templates are really interesting or these snippets are an interesting way to go. Now, one thing that we could do also is you can create your own libraries of snippets as a developer or as part of a team. So if you do the command palette and just type in snip or for a snippet, you're going to see this preferences where it says configure user snippets. Now you have the capability here to configure snippets or even create snippets for HTML typescript, react even, but you can also create global snippets, file or even a work space snippets file. And those global files could be shared with a team as well. So your team can organize specific snippets for the things that you develop. So if you find something you're doing over and over again, you can create a snippet for that. And there's also other extensions that you can install that actually help you select code from HTML or type script in your files and basically generate a snippet. And then it puts that snippet in the specific snippets file that you have shared. So that's a pretty cool way to do that. I didn't know if you if many of us are using this capability, but it's there and you can really kind of expand that on that on your own and develop a snippets to make you more efficient and effective and more consistent in how things are implemented. One other thing that I thought was interesting is a lot of times a team will have a specific configuration for Leontiev or how they want their code to look and such. And when you have this, you want to be able to make sure that your code complies as you develop it. Now, you could you can England and then you can fix your problems and you can do it that way or you can do it a few other things like automate the process of LINTANG and fixing that with some packages that you can install, you can install a husky package. Huskey and pretty quick, those two combined will actually with just a little configuration here. We'll allow you to to basically have. On save or on a hook before you check your coat and it will actually verify and check and lint your coat for you on a pre comet. So this is some really nice animation for you, something that you can stop thinking about. But it happens and it's a good thing because then it keeps your code in the format that's consistent with everyone else on the team. And especially if you have checks enabled on your C.I. process, then you'll want to be able to make sure you're not violating any of those listing rules and such. And this is one way to do it. It's just a very simple couple of packages to install a little configuration to do that. Now for me, where we're letting Jason files and typescript files, you can also lente HTML files as well. So this little patterns glob here will help you to find what files you want to target during that process. So that's pretty cool. The last one of the last things I wanted to touch on about automation is your development and debugging environment. Now, one thing I like to do is when I'm setting up a new environment, it's to make sure I have a launch. Jason set up and configured. If you're doing this for the first time, you're going to have this ad configuration at the bottom. And when you click that, it's going to ask you what you want to create in terms of your configuration. I'll usually just simply do a chrome launch and that way or you can do edge launch if you're on windows. But what this is going to do is going to create this configuration that allows you to basically attach and debug within visual studio code, which I think is a pretty cool way to do it. For example, I've already launched by going to my little debug area here on the left and then I click that F five or to run. And basically when you do that, it will detach or attach to any debug markers that you put in your code. And when it hits that line of code, it'll actually stop. And then you can go to Visual Studio and basically start using these tools here, like the watch or even the call stack to determine, you know, what happened before you got to this line of code, what is going on now? So you can actually look at the things that are happening in the specific template or view here. And you could see and look at all the different items on the in your debug area, on the visual studio code. So these are really nice ways to kind of automate debugging, use that launch file, configure that and target whatever the. Browser that you want to work with, such that's pretty cool. And then the last thing I wanted to touch on was a really cool extension from annexure console. So it's an extension called Anex console. And when you use this, this is a kind of a gooier UI that sits on top of the angular Seelie. So if you're uncomfortable, you're not familiar with all the options for things in the English cli you want to start getting ready for with some of those library projects that we've talked about earlier today in the sessions this morning, you can actually just type in library. I want to create an angular library and I'm using Anex tools and what it's going to do is just bring this up and I'm going to create a new library and this is going to be my video library or such. And you fill everything out. Using the form you can define if you want what style you want, sass or just regular access and you just feel everything, and what happens is it will actually compile and run that Seelie command in your terminal for you that you could copy and paste and reuse. But if you don't want to use the terminal, this is just another way to kind of automate that process. And I find it a little easier to to do when you're doing more complex kind of things, when you're trying to build out maybe even a module that has a a component module with a routing set up with lazy loaded configuration to a parent module. And when you do that, basically it gets pretty complicated. But when you use the next console. Writes it all out for you so you can just execute this, it does it in a dry run. So when you're ready to go with what you like in your output, basically all you need to do is just click that run and you're off and you've created a library, so. That's pretty much it for what I have to share in terms of the automation here, but hopefully using snippets, automating your lending process, using the launch configuration for debugging and using Anex console to quickly use the CLI to create elements in your application. So enjoy the rest of the conference. Thanks.