Play by Play is a series in which top technologists work through a problem in real time, unrehearsed, and unscripted. In this course, Play by Play: Building Enterprise Angular Apps with Nx, Duncan Hunter and Lars Klint demonstrate how to effectively use the Nx library for Angular to build enterprise apps. Learn about Nx workspaces, how it relates to NgRx, common pitfalls for using the library, and support for error detection. By the end of this course, you’ll have the tools necessary to dive in and start using the Nx library for Angular to build safe apps for the enterprise space. GitHub links: https://github.com/duncanhunter/pluralsight-nx-play-by-play and https://github.com/duncanhunter/pluralsight-angular-testing-play-by-play
Lars is an author, trainer, Microsoft MVP, community leader, authority on
all things Windows Platform, and part time crocodile wrangler. He is heavily
involved in the space of HoloLens and mixed reality, as well as a published
Pluralsight author, freelance solution architect, and writer for numerous
Course Overview Hi everyone, my name is Duncan Hunter, and I'm Lars Klint, and welcome to our Play by Play: Building Enterprise Angular Apps with Nx. I'm a software architect from Brisban, Australia where I'm lucky enough to make Angular applications for a range of different clients. And I'm a freelance solution architect at larsklint. com, Microsoft MVP, speaker, and expert in Australian outback internet. Yeah, really. I've been building software systems from tiny websites to massive teleco systems for the past 20 years. Making enterprise-scale applications in teams is hard. And this is where the Nx library that provides an opinionated approach to application project structure and patents to create productive, consistent, and safe apps for the enterprise space can really help. We will start off by discussing why you would want to use Nx. Then we discuss how to set up a development environment to create a new Nx workspace. And after this, we'll look at the difference between a normal Angular CLI application and an Nx enhanced Angular CLI application. We will create two Angular applications in the one monorepo and they're called Nx workspaces and learn to share code between these Nx workspaces with Nx libs or libraries. We will also use the Nx schematics to generate more Nx libs to use NgRx, a state management library for Angular well suited for enterprise applications. We also identify some of the common pitfalls for using the library. I hope you'll join us on this journey to learn about building enterprise applications with our Building Enterprise Angular Apps with Nx Play by Play at Pluralsight.
Creating an Nx Workspace So where do you kick off? Where do you get the information? The best place is go to the Nrwl site. They've got a whole section here on how to get going and get running. I'm going to probably show you a bunch more stuff just because we've got more time today than you're going to get from the docs because things are still evolving. But Justin Schwartzenberger from the team also has a set of videos, which are really good that he's going to continue to flush out that are worth checking out. But at this point in time, they're kind of more like this is how you do it, whereas hopefully I'm going to tease out kind of like this is what it's like using it, and these are the things that I've found. So you can come along to here. You can read about it. You can watch some videos. Justin has some great like tidbits on there, a bit more than that. And then if we come into the Getting Started here, then the Nx Workspace is the tab we want. And it'll talk about what you need to do and what you're going to need to have installed. So you need the Angular CLI on your machine. I'm running 1. 6 today of the CLI. And you need to go get the nrwl/schematics. So schematics are new to the Angular CLI at this point in time. And what they allow you to do is extend the code generation that the Angular CLI will do. So when you scaffold an app, you can extend it with schematics, like the Nrwl schematics. That's what Nx is. And then you can do extra code gen. So we need to install those. I've already gone and done this. I've done an npm install -g @nrwl/schematics and then the npm install of the angular/cli.
Using NgRx to Manage State So, we've gone and made this service, but it does nothing. We've got NgRx and it does nothing. And we have all this boiler plate. We probably should write a little bit of code. So what I'd like to do now is kind of go through and touch on the bits that it's made, and some of the smaller bits of what I like, and how I kind of tweak it a bit, and what it gives you, and what other choices you need to make. So let's go to our service, make a fake like login function that just returns a user no matter what. And then we'll go fill out some actions to login and login success and login fail and handle those sorts of situations. And wire them up in our effect. Then we'll make a presentational component on our login container component, and we'll follow that whole pattern where you dispatch an action from the container component and then it does all the work. Sure, alright.
Summary So I kind of done a quick slice through there. You can get more information on our other stuff about NgRx, but I found that's kind of like through the workshops that I've run, and the people I've helped with it, and the projects we write, this is kind of the more core bits that you need to get going with because you're going to use NgRx. And it's a fair bit to tackle if you do NgRx and this at the first time like my friend is doing. He's probably like where's my cheese? But this can really help not make it easier to learn, but make it so you implement it right the first way in the full-fledged version. Yeah, that makes sense. I mean I've never seen this before with the Nx part of it. I'd seen NgRx obviously because of our other course, but most of this is configuring to get it right, to make sure your structure is right, your architecture is right. You get boiler plate to put in the right places, and you make those decisions that you said first off before we start building anything of where am I going to put my shared stuff, and am I going to have namespaces under that, and all that stuff. And I think that's probably the important thing to take away from this course. Yeah, is that thinking up front. And we kind of haven't --- I've found there's a lot of refactoring as you're kind of figuring out as a team how you like to namespace those sorts of things. But yeah, definitely up front you want to actually draw them out. Have some logical decisions around how that works. Yeah, definitely. And try and put everything in a libs versus the apps and keep it out.