This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Nx Workspace" Lesson
[00:00:00]
>> Speaker 1: Let me take just a moment and let me talk about Narwhal and the Narwhal workspace. Usually I will typically call it a Warwhal workspace, in some cases like monorepo has some negative connotations even though you have some very, very large companies. Google being one of the biggest ones using this.
[00:00:21] That this is, I'm gonna take strictly from how I feel Angular applications should be built. That your component has two responsibilities, consuming just enough data to satisfy the template. And capturing user events and delegating that upwards to the application. So I cannot tell you how many times I've been called to do an architecture review on a client's project, and they have very fat controllers or component classes.
[00:00:55] Where it's just doing tons and tons of stuff. Your components are, the classes are hundreds of lines long and it's a very lopsided application. That your components should be very thin and do those two things. So, when you delegate something up or when you pull data down, where is that coming from?
[00:01:16] So that needs to come from a service layer, from a state management library. And that does not necessarily need to exist in your front-end application. Or the piece that is specific to what the user is seeing and experiencing and touching. And so by moving those pieces into a lib, you can now share that same state management, that same business logic across multiple applications.
[00:01:45] And so, a very common use case is that you might have a dashboard with a lot of stuff that's doing some complex things. But then you need to surface just a subset of this, like maybe it's a dashboard or it's a mobile app. Well, by separating your business logic and your functionality, your state management into a lib, you can then spin up a new application.
[00:02:07] So let's say like dashboard widget. And then most of the work is still done, you just have to build out your visual layer or your UI layer. And so this is, I believe, a really handy way to start to separate out the pieces that you can use, your core business logic, your state management.
[00:02:28] And then keep the pieces that you cannot use very, very thin. Now if you talk to, for instance, Jeff Cross or Vitrus Afkin or Thomas Brulsin from Narwhal, they're going to talk about enterprise collaboration with teams and sharing updates across everything, and I agree. But for me personally, having really thin components, with everything else abstracted out to a lib, I believe is really critical for, one, having reusable front-end stuff that people can use.
[00:03:01] And then stable kind of core pieces of logic that you're not having to recreate over and over and over.
>> Speaker 1: All right, and so now we have our app. Let's hop back in and, well, I need to do some housekeeping here real quick, before I forget. So if we look in the resources folder, there is a style sheet.
[00:03:30] And I believe I can just paste this in. And I should have deleted the other one first, I'll click that.
>> Speaker 1: We rename this back to, there we go. And then let's take this assets folder. Really I just need these two pictures here, so it's the logo and the background image.
[00:03:53] And we'll paste these into assets, all right. Now that that's done, let's use the CLI to start to build some of this out. So, as I was practicing for this workshop, I was able to generate pretty much most of the entire file structure and all of the pieces from the CLI.
[00:04:19] We'll do this in stages, but the CLI is really, really, really fantastic for generating. And scaffolding out the shape of an application very, very quickly. And we'll see that in just a moment. Unfortunately, when,
>> Speaker 1: Pour Sass pretty processor konks out, that's kind of time to restart it, all right.
[00:04:53]
>> Speaker 1: And if we go back into the Wiki. So I will mention this. So I showed you the snippets here. And we'll us these, so I hop back and forth to copy these. But if you go to up and running. This is pretty much the commands that I'm going to run if you want to follow along.
[00:05:13] I only took it out to up and running and the basic Angular CLI commands because from there, all bets are off, but I do know the basic structure that I want. And so this is kinda where we are at. So, I mean I will probably flush this out as this starts to kind of take shape which is fun, but if anybody wants to like what command did you just type in there, what just happened, etc.