Wrapping Up

[00:00:00]
>> I won't go super deep into the CLI, cuz you've been using it today, but the CLI can do a lot of stuff. One, you can create applications, that's a big part of it. It scaffolds out the code that you need to create a new application. And that is super helpful, because here's a good way to think about it.

[00:00:18]
If you've ever used Create React App, the Angular CLI is like that, but here's the difference between Create React App and Angular CLI. People eject Create React App after a certain time, right? They are like, okay, I got what I need, I'm gonna do my own thing, let's get rid of that.

[00:00:31]
Angular CLI is just there with you the whole time, because it's not only a scaffolding tool. That's the way to think about it. There's a lot of things you can do. You can create resources like we talked about, you can generate components and services, just take some of the busy work out of it for you, where you're not typing in things.

[00:00:50]
But you can create a component by hand, you can. Or you can just use CLI and say, yeah, NGGC, component name, and just be on with your day. The local dev server, that's another big part of the Angular CLI, local dev server. We've been using the Vite as a dev server the whole day.

[00:01:07]
It's been fast, it's been updating, everything has been working for us. We didn't have to do any additional installation for that. And this goes back to where we're opinionated, right? We spent a lot of time making decisions. We have our opinions, we do listen to the community, but we're always thinking about how we can make your experience the best, and this is what we're thinking is good right now.

[00:01:27]
And there's so much more. You can run your tests, you can, [SOUND] let's say, yout build process is run through there. We have our own Angular ecosystem package installer, where you NG add, and then you can add things that are specific to Angular. If there's a library for Tailwind or something that's written for Angular, you can also do that through the CLI, all that stuff comes for you.

[00:01:50]
And the CLI also helps with this thing called schematics, which are ways that developers in general can write code that helps to do a task like migrate. So let's say you were using our previous syntax before the add f stuff, right, we wrote a schematic that will migrate your code for you.

[00:02:10]
We wrote a schematic that will migrate your way from standalone component, sorry, from modules to standalone. We write schematics. With every release, we write new schematics, especially if we have a new feature, we'll write new schematics for you. But you can also do, a community can write schematics as well, that will help us to do even more.

[00:02:29]
And so that's all a part of it. One thing I didn't get to today because Angular, like I said, there's a lot to learn. We have a material design system from Google. We have an official library that we maintain. But on top of the official library, we also maintain something called the component development kit, which has a bunch of unstyled accessible components like tabs, drop-downs.

[00:02:54]
I mean, so many things to think about. All these things that you don't wanna build yourself, carousels, they're all accessible, they're all unstyled. So you can go in and style them yourself and just drop them in your applications right now and build even more complex applications. All that stuff is there, so I guess I'm answering, what do you do next, right?

[00:03:12]
If you're looking at Angular and you're like, okay, what else is there? I showed you literally over this last six or seven hours. I showed you just a small sliver of what's possible with Angular. But it feels like a lot though, right, cuz it was a lot. But that's just the tip of the iceberg, because Angular is a very mature and robust framework for applications that you could never imagine, for instance, there's an airline KLM.

[00:03:39]
They serve a half billion users, I think, per year, and they have an Angular app, and they stay up to date with the latest version of Angular, and they just do. So scalable applications, Cisco is another company, big Angular applications. So people click up another Angular place, people will do angular stuff, so angular is out there.

[00:04:01]
But what do you do if you wanna continue down that journey? Head over to angular.dev. If you like the way that I teach, well, there is two things there for you. There's some more self-paced exercises that you can go through in our tutorial land, on this camera, they're just text only, right?

[00:04:19]
But they're self-paced, the same kind of style, you do that. I recorded a course on YouTube that you can do. It's the same thing we cover here. But in that one, we're building a whole application, right? So everything is compiled together to build one app versus a bunch of smaller apps or whatever, so do that.

[00:04:37]
Stay connected with us if you're interested in more Angular stuff, right? Stay connected, get locked in. You can hang out with us on the framework or the place formerly known as Twitter, right? The social media [LAUGH] knownTwitter. Hang on YouTube, we do live streams and stuff, we hang out there as well, yes.

[00:04:56]
>> What was the Toolkit that you were talking about where it's got the tabs and all?
>> Sure, sure, sure, sure, let me see if I can show you that. Angular CDK, okay, so that's what it's called the Component Development Kit. So this is what I mean. Okay, got it, got it, got it, got it.

[00:05:15]
Can I zoom in a little bit so it's legible? Okay, yeah, so you got accordion, clipboard, coercion, collections, component harnesses, dialogs, drag and drop, which is a big feature that people always have to implement for some application. Somebody in your organization is like, all right, well, I want the user to be able to drag this intervention, why?

[00:05:35]
Nobody wanna do that. But if you have to, this is built there for you, right, and you can reorder lists. This is the thing. You get your playlist thing and do that. I don't know. Can we order this the right way with the best movies?
>> [LAUGH]
>> I can't think of the machete order right on top of my head, but I know there is one.

[00:05:56]
Anyway, so you got all this stuff. I'll just say a couple more things. You got some layout stuff if you wanna have some programmatic layout stuff, you wanna do menus, overlays, tables, a tree. Sometimes I gotta do that tree stuff, right? And you can get trees in here.

[00:06:15]
Yeah, it's cool, a lot of cool stuff. Angular CDK and Angular Material is where we have other components that are styled. Yes, questions.
>> Are pipes still supported or are they deprecated?
>> No, pipes are totally supported. Pipes are a way for us to transform values, right? So that first example that we did today, where we had the dollar sign, the reason it didn't work is because they had the template thing.

[00:06:40]
And normally, you wouldn't put a dollar sign in your template, cuz you use a pipe to convert the value into a dollar, and it can put the region specific monetary value there, so you get the right. If you're doing stuff in Asia, you get the Yen, or you'll get Canada dollars.

[00:06:57]
You know what I mean, so we have pipes that transform data. They're for data transformation, totally supported. I can't talk about everything in one day. Yeah, Moore?
>> What is the actual line of where the code is executed when you put a defer on it? Is it compiled and ready, and it pulls it in?

[00:07:18]
How does it pull it in?
>> How does it pull it in? Okay, sure, sure, sure, I understand the question now. So when you have a defer, so this would be helpful for a visual, just to show you how this works, cuz I want you to think that I'm doing some sleight of hand stuff.

[00:07:36]
Okay, so this is, let's say, After defer. Before, okay, just so you can kinda see what's going on, I don't care about that formatting. But you see there's nothing in there right now, but everything below it is still rendered, right? Then, After defer was below that code, you see?

[00:07:57]
So now, if I do low posts, it's put in the place in the code, man, that's why you see why I deferred it, look how many posts it says. All right, you can see it's still down at the After defer. You see, so how does it pull it in?

[00:08:11]
So that's something at a compile time, we read your templates, and then we're like, we can chunk these codes that you have isolated with your defer blocks. We could chunk them and put, and then build separate bundles for those. And then, when it's satisfied, the condition is satisfied, we can then make that request for it, good questions.

[00:08:30]
>> What's the difference between using input transform and pipes?
>> Good question, what's the difference between using an input transform and a pipe? Okay, let's talk about that. Input transform, so remember your inputs, that's how you send data into a component. We agree with that? Yeah, so what you can do there is you can specify a function called a transform that says, whatever the format that it comes in, I want you to apply this function to it, and then give me a different output right out of there.

[00:09:06]
The reason you use an input transform versus a pipe, a pipe can also do transform on data. But where do you do a pipe? You do a pipe in a template. The input is not in the template, so that's the difference, right? And when things are rendered, the template is rendered, but those inputs are bound before you get to the template, so that's the difference.

[00:09:25]
They both can serve similar use cases. Or sorry, they solve similar problems, but they are different use cases. That's the best way to say that. Similar problems, different use cases. Mm-hm, mm-hm, if I get more questions, I'm gonna show a quick example of a pipe because I've been talking about it and I feel like people kinda need to see it.

[00:09:47]
Let's say I have a salary I'm gonna show you how much I made last year, don't laugh. All right, good plan. All right, so then I got that and what I can do is I can bring in this thing called the CurrencyPipe. And in my template, I can say whatever the salary was.

[00:10:09]
Wait, I messed up my salary. Hold on, yeah. There we go, okay? [LAUGH] What did I say I did for a living? I said I was famous. All right, so if I got my salary, if I wanna format that nicely, and then you do currency. Okay, so now, it's taking the salary property and applying that pipe to it, okay?

[00:10:37]
They call it a pipe because of this, right? The pipe character, that's why we call it a pipe. Okay, so now, if we look at our component, you see it put commas in there. Hold on me. You see how nice that is? It put commas in, comma separators, it put the dollar sign in, but I don't wanna say about that in the beginning because you know anything yet.

[00:10:55]
So if I showed you that first, you'd be like, wait, what? What's the pipe doing? This is the worst framework I ever used. But this is what you would do instead of putting a dollar sign, right, and then you have a whole bunch of these. So let's say you don't wanna do currency, you could also do decimal, okay, and then I can do decimal.

[00:11:16]
Let's see, I forget what the actual thing is. I forgot, I honestly forget. Decimal pipe, Angular, okay, we actually got to look it up because I forgot what the format is for that one. Okay, so that didn't help me, hold on. Right, [LAUGH] this is a format. So the number of digits, the number of fraction digits, and so I can specify this.

[00:11:40]
And then that way I can say every number will have two digits, or you know what I mean, commas and stuff. So you can get really involved if you want, yeah. Good questions, good questions, okay, let's just keep the party going, more questions.
>> How would you compare Angular to some of the other sort of up and coming frameworks like Nox to Nest?

[00:12:02]
>> Sure.
>> Cuz I know that there's a lot of similar features.
>> Yeah, I think what they're doing with the team at for sale is doing what Nest is fantastic. They're definitely redefining the server side story and what you can do, which is really special. And the reason I think it's so interesting is because of this.

[00:12:21]
Some of us we've been around long enough to remember that everything was server-side at first, everything. There was no client-side programing. What you did was this, you had a folder called CGI bin on a server and you wrote your code in Perl. And then guess what the deployment was?

[00:12:41]
You click your mouse and you drag the file into your FTP client, and that's how you deployed your code. And you rendered everything on the server, that's how the Internet worked for so long. And that's why it was like, wait a minute, why go back to the server?

[00:12:53]
Let's stay on the client. We're already here and make small request. And that's how we get the whole Ajax and the rest API stuff being more popular. Now, we're doing this hybrid thing and I think what Nest is doing is just really nice. They have a really nice thing where you can define your API endpoints to find things that only render on the server with server components, I mean, really good API's.

[00:13:15]
I think that for us on the Angular team, so what will we do to kinda compare to those types of things? We're really good at writing Angular code. That's what we're really, really good at. And what we wanna do is let the community around us solve for whatever next is gonna be for Angular.

[00:13:31]
One person called Brandon Roberts has this thing called analog, which is a meta framework for Angular, where you can do file-based routing, some other stuff. And so what we like to do is say, well, what can we build into Angular that will make his work much easier? So he can focus on that part, but we'll build all the foundation that makes him able to tap in to Angular on the server side story.

[00:13:58]
Because we do have server side rendering Angular and full hydration where you could render, ship that code and pick up where you left off and re-render. We have all that now. But people can build off of that though, and they can make it and take it to the next level.

[00:14:13]
Great question, yeah, but that stuff is great. I said I think Nest is great, I really do. I think it's a really brilliant engineering teams building some really cool stuff. I think Astro is great. That's another one that's very, very good. Server side, rendering, you get islands architecture, which is almost like defer, but not quite because islands is defined differently.

[00:14:36]
This is that simple level you can just do anything like this. And you can also defer your routes in Angular, right? So you can be like, this whole routes, I don't even want you to ship. But that's more complexity at the router file. Defer is like, in my components, right, that's the part I'm still amazed by myself.

[00:14:54]
At the component level, I'm like, I don't want this little part of the component to come. Because this widget that my team wants me to include slows my page load down, and I don't wanna do that. But I still wanna ship this so it's fast, and now you have that flexibility, right?

[00:15:09]
So I think we all learn from each other to be honest with you. Here's the thing that people don't know about all the framework teams. We all talk. We've had meetings with Rich Harris, and we've all shared ideas. Because what we all care about is moving the web forward and giving you all, as developers, the tools to build your next great app.

[00:15:29]
>> I think a lot of people associate Nest with Angular. I don't know if you could speak to that at all.
>> I can't because I've never used it, yeah, but I know what it is. But yeah, I've never used it. But I have heard that people like to use Nest with Angular.

[00:15:47]
So that's a place to explore if you're looking for that type of solution. Yeah, Analog, and then I would say, yeah, check out Nest for some really cool solutions. I'll speak a little bit to this, too, cuz I think people are interested. We've gotten a lot of new attention on Angular, because we've done our recent brand identity refresh, new logo, new colors, new website.

[00:16:10]
So what do we care about now? What are we gonna be thinking about now? For us, the future is thinking about a lot of things. How can we continue to improve the server story? With server-side rendering, static site generation, maybe potentially incremental rendering where you can do, hey, only, or yeah, incremental rendering.

[00:16:28]
So many different things we have ideas for a reactivity, right? So we have signals, and we didn't really get to spend a lot of time on that, but we're thinking about how do we make our whole reactivity system based around signals to get that lightning fast update. That's something we're working toward now, right?

[00:16:44]
And then the next thing, we can look out and say what we think is next, but we really have to continue to listen to the community, right? Continue to see what people want and what people are needing. Where's the space going in general and to see how we can be the best partners to the web that we can be.

[00:17:04]
All right, so here's what I'll do, cuz I know that there were some other questions that required some further exploration of programming. I will update this repository with the answers to those questions, right? I didn't forget them, I wrote them down. I'll update the repository, so if you pull down the latest code in a couple of days or so, you'll be able to see, and I'll write an explanation about what we did.

[00:17:23]
And if it worked or did not work, I'll know why it happened. But I need some more time to think about it and to experiment.
>> What's the equivalent of feature modules when it comes to using standalone components?
>> Good question, if you wanna do a feature module, right now there really isn't an equivalent with standalone.

[00:17:44]
So here's what a feature module is for people who may be like, what is that? So one thing that you could do is you could put your features, let's say, login, and you made a module in Angular. And then you can have everything related to login all managed by this module and then you can load that module if you wanted to, right?

[00:18:02]
And so without modules, how do you accomplish that same thing? Well, you don't necessarily have to stay without modules because here's the other thing, if modules work for you, then you should use modules. We didn't deprecate modules. We make them optional, which is a really big distinction that we want teams to understand.

[00:18:18]
It still works, it is still a valid use case, because there are still some things I'm sure that people want to do that are only capable, only possible, sorry, with modules. So modules are optional, not deprecated.
>> All right, what are some resources for component-driven architecture and testing in Angular?

[00:18:37]
>> Yeah, check out angular.dev and angular.io. angular.dev is in beta, so we're pushing it up. If you're watching this in the future, it's fully graduated to our primary site. But maybe if you're watching it now, check out angular.io and angular.dev, we have guides written by our team. We rewrote a bunch of the guides and a bunch of the content to talk about those things.

[00:18:58]
And then if you check out component-driven architecture, there's also a Frontend Masters course, where the principles will be the same that was already listed on the site. So check that one out, because I know there's some sections about component-driven architecture that you can learn. Again, the syntax may be a little bit different for the templates where you got your new foreign stuff, but the ideas are gonna be the same, so check that out too.

[00:19:23]
And really to say thank you, this has been a blast, you folks are fantastic. Thank you so much, this has been so great, and yeah.
>> [APPLAUSE]
>> Thank you, thank you, thank you, thank you, thank you, thank you.