Transcript from the "The Angular CLI" Lesson
[00:00:00]
>> How many of us, just show of hands, have built web applications prior to Angular? So even 1.x counts, but I'm looking for anybody who's built web applications prior to three years ago. So like five, six, seven years ago. Just quick show of hands, Zoom, if you've done it, don't be shy.
[00:00:30] So if you haven't, consider yourself lucky. This is one of those-
>> There's a lot of people putting their hands up in the chat. We've got five or six-
>> Tons, tons.
>> And then two hands up in Zoom, yet now there's still more coming in in the chat.
[00:00:48]
>> If you haven't, and almost I feel bad if I'm like, if you've never done anything prior to this, raise your hand and everybody would just be like, I hate you so much. This is kind of one of these like, when I was your age, I would walk to school in the snow, and obviously then we're from Minnesota.
[00:01:05] And uphill and dirt for lunch, whatever is that in the spectrum of maturity. JavaScript is really a fairly immature ecosystem that it always kind of just blows me away when I start going through some of the classic programming books that were written in like the 80s and the 90s, and I think you should.
[00:01:37] That the things that front end developers are thinking about and they spend all their time like arguing about. These ideas have been around for years and years and years and years. Even Mark I remember one time he talking about maybe unidirectional data flow or something and he was telling me that years ago he had essentially written something that solved that problem.
[00:02:06] Observables RGS, that is really a composition of multiple, just really two patterns that are put together. And the reason why I bring this up is that we have the cyclical kind of patterns in our developer experience to where is JavaScript developers that when we want to put something together is that it typically looks something like this.
[00:02:39] Where, it's like npm, TypeScript, JavaScript, Gulp, Grunt, I mean, I laugh at these because a lot of these are not even around anymore. But the fact that even if you remember the pad left debacle to where somebody's like, you know what, I'm taking this package down and then blew everything up.
[00:03:01] Is that when we're building front end applications, it is certainly, certainly getting better but JavaScript fatigue is real. And there are times where even with a major framework release where things just kind of start to fall apart. And how do you put things together? How do you compile?
[00:03:26] Are you using Babel? Are you using Webpack? What kind of a module system are you using? So if you're using front end and you're using ES6 module syntax, but then you move over into node using express, maybe you're using common module syntax. And I can say just being totally open before everybody, there has been some afternoons where this is how I feel.
[00:03:58] Some package changed and something happened and I cannot get it to work and what do you do? So prior to, in my opinion, I believe that Angular, and I'm gonna put this in writing if somebody wants. I think Angular got really good around Angular 4.x. Up until that point, this was me as an Angular developer, a lot of times.
[00:04:28] I think I had to even come up and redo an entire Angular workshop because they changed something. And one of the reasons why I think it got as good as it did is because of this tool. The Angular CLI allowed us to take a lot of these quirky nasty bits and streamlined them so we did not have to think about them anymore.
[00:04:56] And before, you would have to ideally find some kind of a sane starter project on the Internet, borrow from that if you're lucky, and then try to customize it to make it fit your needs. Whereas with the Angular CLI, you were able to just install it. ng new, define your app, step into it and serve it.
[00:05:24] And so the first time I did this and it actually worked, this was me again but these were tears of joy and not tears of sorrow. So the fact that I can create a working Angular application in three or four lines of code and serve it up is phenomenal.
[00:05:49] And we'll kind of walk through some of this in a moment. And I will invite you to code along with me as we do this. But the one thing that I just want to call out is that it's very easy to take a tool like a CLI, and turn it into a crutch.
[00:06:15] And it's kind of the equivalent of somebody who has a player piano in their house and they turn it on, and it starts auto playing a song and they're like, see, I can play the piano. And being able to execute commands from a command line does not a web developer, make.
[00:06:39] And so what I recommend is that you do the hard work initially, and you do not treat the CLI as a crutch. But you endeavor to understand what is happening under the hood with the Angular compiler. Why things are the way they are, and once you understand that then you can use the Angular CLI as much as you want.
[00:07:10] But it's like somebody who just knows jQuery and they think of themselves as a JavaScript developer, or somebody who's like I build web pages, and really what they do is they install WordPress. And I have nothing against that at all, but it's important to understand that this is just a tool, it's a means to an end.
[00:07:33] And so do not, or when you use the CLI take the time to understand what's happening under the hood and why the code that is being generated is done the way that it is. So with that said, the biggest value proposition is it's a fully functional project that just works.
[00:07:57] You have a code generator for all sorts of stuff. You can generate a production build, you can do unit test. Some of the things that comes with this that I don't use a ton, but you can actually deploy to get a pages linting, I do use Sass, which is really nice.
[00:08:16] So I think CSS preprocessors are amazing, lazy routes and fully extensible schematics which are pretty fantastic. So installing the CLI, just npm install, g@angular/cli. And from here, you can just ng new and we'll walk through this in just a moment. And you can generate a project. Now, this is where it gets fun.
[00:08:44] Is using ng generate, you can generate all sorts of things, components, services, enums just a ton of stuff. You'll notice here that I'm using ng g, and that's just an alias shorthand for generate. With the service, it's almost identical. You can generate a build. So that is a kind of a compact production build.
[00:09:09] And if you wanna run unit test, ng test. And I'm not for sure, protractor was kind of the tool. And I know the Angular team is moving to Cypress, which is amazing. So if I tried ng e2e I'm not for sure what would happen. I think that might be in flux, but my official verdict on this is use Cypress regardless.
[00:09:37] And you can lint, ng lint. And with that said, let's hop into the code or let's just generate some things and let's see this working.