Introduction

[00:00:00]
>> All right, everyone, welcome to this course Angular Fundamentals with your host, Mark Thompson. I am so thrilled to be here. And I'm so glad that you're joining us in-person and online. And if you're watching this at a future time, I'll say this, welcome to the party, we're so glad that you're here as well.

[00:00:15]
Okay, friends, I said Mark Thomson, but I also go by Mark Techson, this is my celebrity name, so that you all can always find me online. So if you ever Google Mark Techson, I'll always pop up, because my wife is smarter than me. She came up with that name, and it is just such a great way to do this.

[00:00:33]
All right, so Angular Fundamentals. Here's what I want you to understand, what's gonna happen today. Here's what I want you to expect, all right? So by the end of this time together, you're gonna understand the fundamentals of Angular and be able to build an application. But you may be asking yourself, well, Mark, what does it mean to build an application?

[00:00:53]
What about all the things that Angular can do? Well, with any technology, no matter whether it be Angular or some other front-end framework or other tool, there's a just really broad range of topics and a lot of depth that you can go into. But before you get there, before you need those things, I believe that these we'll cover today are what you need to get started, and you'll be able to get going and build something cool.

[00:01:16]
Let's talk about the takeaways, the things that I want you to take away from our time together. So, you'll definitely learn about components, which are a big part of any front-end framework, right? The components are just one of the major building blocks, we will learn about that. We'll learn how to add routing.

[00:01:30]
You really can't get through an application these days without routing and navigating through the application. We'll capture user input forms, another fundamental part of building an application. Angular has something very special and we call it dependency injection. Now, if you've ever done any back end programming, you've heard of this before, but on the front end, we really don't use dependency injection or Aspect Oriented Programming, stuff like that.

[00:01:55]
You don't really use that type of stuff, except for Angular leverages a special power, and we'll get some time with that as well. I'll even teach you some quick optimizations, and I can already read your minds, I know where you are right now at home, I can feel it.

[00:02:06]
People in the room are like, why did you teach us to optimize in the beginning? Okay, you really optimize after you've measured, and you know that there are things that you can do better. But I'll show you some things that you can include from the beginning that will help you along that process.

[00:02:19]
So this isn't pre-optimization, this is just what can you do right now to keep the party going? All right, a little bit about me, I introduce myself, my name is Mark as I said, and I'm all right. All right, I'm cool. Okay, fine, that's fine. No, but seriously [LAUGH] all right, this is a true story about me.

[00:02:37]
All right, I'm an award winning university instructor after I've taught at universities such as Harvard, Northwestern, UCLA, I've taught at a lot of places. And I was fortunate enough to win an award, the students liked me enough that they're like, hey, this guy's great, and we'd like to honor his work.

[00:02:48]
So, I appreciate that. Currently, I'm an engineer at Google, I work on the Angular team. And then, here's something that I do by myself. This whole time that I've been with the team at Frontend Masters, I've been asking about all the gear and all the cameras. Because I love videography as a hobby, and one of my favorite things to do, literally, is for you to invite me to your party or something.

[00:03:09]
And then, I'll show up with my camera and document the whole thing for you, and create a story as a gift. But, you cannot pay me to do this, because then it's no longer fun for me. So I like to do it as a gift for people. And I love video games, and I love to play guitar, I've been playing guitar for almost 20 years.

[00:03:23]
And I'm okay guitar player, because I'm not famous for guitar, so you can tell I'm okay, all right. All right, now, about this course, here's how we'll do it, all right? The way I teach, we'll discuss the topic, I'll go over the syntax, I'll go over the ideas, and then, you also see an example, and then we'll all do it together, okay?

[00:03:45]
And you will do some of the activities, but this is hands-on. Okay, so I'll be asking for you, even at home I'll ask you folks to submit ideas for what we build and how we do things, cuz I want you to get some learning by doing. The most important part to be able to participate is to have these two links.

[00:04:04]
All right, the first link is to the slides. So if you're at home and you want to be able to use the slides or see the slides, just go to this link right now, you got that one, and then, if you need the project code, okay? And you can go to get the project code.

[00:04:21]
Just at a high level, here are the things that you need to be able to do this course. So if you're watching this at some point in the future, you definitely need the latest version of Node, the Angular CLI, Visual Studio Code. And then a nice bonus is if you have the Angular Language Service Plugin, which allows VS Code to do some nice ergonomic themes with Angular for you.

[00:04:44]
Do you a question?
>> Is just a few comments from chatter.
>> Sure, okay.
>> Snaps got me buzzing for real. What's your favorite genre to play on guitar?
>> Good question my favorite genre to play on guitar. So I love heavy metal. And so, I've been practicing heavy metal for, recently, that's been my big thing recently.

[00:05:08]
Before that, I used to do a lot of just alternative, everything from the 90s, things from the 2000s, but now I really love heavy metal. And so, I'm trying to go back to some of my favorites. I wanna be able to play Master of Puppets in six months, right?

[00:05:21]
I wanna be able to play the whole thing, even the solo, even the solo. So if you find me online and I don't do it, remind me about this moment.
>> I'm inviting Mark to my birthday party. Mark is invited to my wedding, said that to Eduardo.
>> All right, if you see me in all black with a camera, just like, cuz, yeah, you know what happened.

[00:05:42]
>> Will we be live coding in this workshop?
>> You will be live coding, which is why it's super important to get all of these things going for yourself on your local machines. Or if you can't get it set up in time and you want to do it live with me, you can also go to StackBlitz, I wish I had the link for you.

[00:06:00]
But you go to StackBlitz, and then, you can code online there. So it'll be pretty close to what we're doing, right, if you just wanna type it in live. But, the best thing to do is to get all these links that I have listed on the slides. All right, so what is Angular?

[00:06:14]
Angular, at the high level, this is what we say now, right? Angular is a web framework used to build scalable web applications with confidence. Okay, scalable and confidence are the two words that I like to call out here. Because one of the things that people will say about Angular world that's an enterprise solution.

[00:06:31]
But here's what's interesting about enterprise in general. You know what enterprise is excellent at? Scale, right? Sometimes it has the wrong definition of like, enterprise is big and slow. No, enterprise is great at scale, and if you build anything in general, for the most part what you really care about is scalability.

[00:06:49]
If I were to build a weekend project that I want to turn into a startup, what do I care about in the long term? Scalability, right? I want to eventually get to the point where I can handle thousands of users requests per minute, tens of thousands, etc. And so, what we believe is that some of the fundamental patterns in Angular help you to achieve that vision of scalability.

[00:07:11]
But here's where the confidence part comes in. When we're talking about confidence, we want you to have confidence in the framework and in the community. We say confident in framework, one of our core tenets is that we try to bring the web forward with us. So when we release an update on the Angular team, many of our features are actually non-breaking even with major changes.

[00:07:34]
We release some new syntax that we'll cover today. You can opt into that syntax when you're ready. And that is huge for organizations, because then, they can take advantage of things like security updates, other stability updates, and then they can migrate their large applications over time. Because think about this idea, what if you have an application where let's say, a million lines of code?

[00:07:53]
That is not unreasonable for a large application that's been built in serving users. You probably can't migrate to every new thing every single time, that's fine. We're here with you on the Angular team, and what we do is that we also release tooling to help you migrate at your own pace.

[00:08:11]
We do all of this extra work, right, to continue to give you the confidence in the framework. So that's why we say, you can build and scale with confidence. Because we're helping you along the way and we try not to break you, as we go. What questions can I answer before I go on?

[00:08:27]
Sure, questions.
>> What do you mean when you say, scalability?
>> Sure, two things. You can scale your applications and you can scale your teams. One of the things that Angular developers usually comment on is the idea that, when they jump into an Angular code base, they can get started quickly.

[00:08:43]
Because of the patterns and the best practices that we set out in the beginning. Angular is opinionated. We give you a lot of stuff up-front, for example, the router built-in, you are never searching for a router. That is just not a part of your story. Dependency injection, built-in, we got you on that one.

[00:09:01]
We even give you an HTTP client that you can use, that we say, here are some great ways to do things. We just give you a ton of stuff, you don't have to go look for all these libraries. So as a developer, you get to jump right in.

[00:09:14]
And that helps you really quickly to get up to speed at your new organization. And then scalability in terms of scaling your projects, what we have tooling that helps you scale, we have scaffolding that helps you scale. And then we also have some things like some of the optimizations that I'll show you today, that also help you scale your application.