Building Awesome Web Apps with Angular 2 Challenge 4: Solution

Transcript from the "Challenge 4: Solution" Lesson

[00:00:00]
>> Lukas Ruebbelke: Let's go ahead and walk through the solution. Just a quick review of our challenge. The idea is to add a widgets collection to our widget component. Then, as well as a selected widget property. Then, we want to display the widgets collection. In the template using ngFor. Use event binding to set a selected widget.

[00:00:26] Then, we want to display widget properties using property binding and interpolation binding. And then, use ngIf to show an alternate message if no widget is selected.
>> Lukas Ruebbelke: And I wanna ahead and prepared some snippets that we can use. So, I'm just gonna hop in here. Let's copy this widget's collection.

[00:00:58] And I'm going to just blow this out. So, just pasted this in and then I'm also going to create a selected widget property. So, what this does this allows us to keep track of whatever widget is currently selected.
>> Lukas Ruebbelke: And then, what I'm also going to do, because I know we're going to need this.

[00:01:30]
>> Lukas Ruebbelke: Create a property, or rather a method called selectWidget. selectedWidget = widget. Okay, and now let's hop into our CSS. Back to my snippets.
>> Lukas Ruebbelke: Let's just paste this in.
>> Lukas Ruebbelke: Let's just grab this HTML. And so what this is, is essentially is a pared down version of what we see in the items feature.

[00:02:16] And if we go to our HTML, let's just paste this in. And real quick, just wanna see what this looks like.
>> Lukas Ruebbelke: Okay, so there's nothing here, per se. But, at least it looks like it could be something eventually. So, the first thing that we'll do is let's go ahead and display the widget.

[00:02:50] So, what would be the directive that we would use here to lay these out?
>> Speaker 2: ngfor?
>> Speaker 3: R4.
>> Lukas Ruebbelke: ngFor, good.
>> Lukas Ruebbelke: And so, we want to repeat the widget card itself, so we'll go ngFor let widget of widgets, and then we'll go here. widget.name and let's go here, description.

[00:03:35]
>> Lukas Ruebbelke: Just double check here, so we have name and description. We'll go back here and you can see that we are now laying out the widget card. So far so good, we did the question ngFor we simply laid it out and so, actually let me go back real quick.

[00:03:56] You'll notice here that prior to this, so let me just back this up to here. So, a lot of times what I'll do is I'll lay it out once. And so, when this refreshes so we basically have a single item where you can say okay, this is good.

[00:04:16] This is a good template. Then from there okay, now give me 20 of them or whatever. And so, then once you have that laid out or even because there are people that do layout in HTML and CSS. You can just say lay me out one of these and then from here I can just use ngFor and we'll stamp a bunch of them.

[00:04:40] Okay, and then what we'll do is I believe the next thing we needed to do is create an event to set the selected widget. So, what do you think? What would be a good event?
>> Speaker 2: Click?
>> Lukas Ruebbelke: Click. Okay. We could do click, sure. We'll play with this.

[00:05:03] I was thinking about doing like mouse enter, or something. So when you actually roll over it, it automatically sets it. I mean you could do any done event. But we'll just,
>> Lukas Ruebbelke: Maybe we'll play with that in a minute. selectWidget and we'll just pass in widget. Now, what's interesting here is thatangular is able to keep track of what this widget is.

[00:05:29] So it's providing context within this loop, so it knows that within this particular template, whatever instance you click it knows that widget is local to this template. So, selectWidget then let's go down here. And let's do my famous, or favorite. I don't know how famous it is.
>> Lukas Ruebbelke: [INAUDIBLE] widget.

[00:06:03]
>> Lukas Ruebbelke: Let's dump this out.
>> Lukas Ruebbelke: And you can see now as I click this, that we are dumping this essentially the selected widget object into the page.
>> Lukas Ruebbelke: Let's go back here and we still need to do a property finding. I'm going to hop into items and we'll go to the items list and I'm just going to see how they did this, or so.

[00:06:46] Okay, I'm just copying this image tag out of here,
>> Lukas Ruebbelke: So, where did I put this?
>> Lukas Ruebbelke: And so, what we've done is I've just copied the image element, we're binding source to widget.image. And we're binding the old tag to widget.name. So, let's pop in the code. And you can see here, we have three super shiny images here next to our component.

[00:07:33] Or within our template, rather.
>> Lukas Ruebbelke: And we have one more.
>> Lukas Ruebbelke: Let's-
>> Lukas Ruebbelke: Let's do this.
>> Lukas Ruebbelke: I've doubled this line.
>> Lukas Ruebbelke: And in a second one, let's go selectedWidget.name. And then in this one, let's just leave this here for now.
>> Lukas Ruebbelke: Wait for it. So, it doesn't like it.

[00:08:26] Can't read property.
>> Lukas Ruebbelke: I think this will work.
>> Lukas Ruebbelke: Okay, so,
>> Lukas Ruebbelke: Because we're trying to read name on selectedWidget and selectedWidget was not there. Essentially, it's saying well, we can't do anything, so by adding the save navigation operator, we were able to fix that. But what we want to do here is if no widget is selected, then we want to show this.

[00:09:14] So let's go ngIf.
>> Lukas Ruebbelke: No selectedWidget.
>> Lukas Ruebbelke: And in this case, we'll go ngIf is selectedWidget. So now we're just toggling between the two.
>> Lukas Ruebbelke: Refresh the page.
>> Lukas Ruebbelke: The one, which it [NOISE]. And let me just do one thing real quick. Let's go button Reset. So what we want here is selectWidget null, see what happens here.

[00:10:31]
>> Lukas Ruebbelke: And so this is how we're toggling between the two ngIfs. Is back to the code, we're saying if we have a selectedWidget or we do not have a selectedWidget show the prompt selectedWidget. If we do, go ahead and show the widget's name and then from here we just had one more button to essentially set selectedWidget to null.

[00:10:57] Does that make sense?
>> Speaker 2: Can we see your component again?
>> Lukas Ruebbelke: Sure.
>> Lukas Ruebbelke: So start at the top, selectedWidget, so this is essentially a marker to keep track of the selectedWidget. Widgets. And so this is just a collection. And then from here, selectedWidget. And all this is doing is essentially a setter for the selectedWidget.

[00:11:46]
>> Lukas Ruebbelke: So, yes to answer Crispy's question, you do not need the safe operation navigator if you're using an ngIf. So in a sense that would protect that from happening, cuz we would expect that if this is showing on the DOM, that this does exist. We did the safe navigation operator first.

[00:12:09] But then once we did it with ngIf, then that became unnecessary. So just refresh the page.
>> Lukas Ruebbelke: And so once we went to ngIf, then essentially we're safeguarding against this being evaluated. Because how ngIf works is that it will actually remove that element from the DOM. And so once it's off the DOM, then it will not basically be evaluated.

[00:12:44] Then once it's attached back to the DOM, then those bindings are kind of reinitialized and it will try to evaluate it. But if the condition is that this thing has to exist for it to show up, then you saw that that safe navigation operator became unnecessary.
>> Speaker 2: Could you use it all the time?

[00:13:01]
>> Lukas Ruebbelke: What do you mean?
>> Speaker 2: The safe operator, if you just-
>> Lukas Ruebbelke: You could, I mean, so it's certainly not going to hurt anything to use it. But you have to be careful cuz it's almost the equivalent of wrapping your entire application like try-catch. So I think that you wanna be careful not to preemptively optimize for all the things.

[00:13:26] I mean even to a point of generally in most cases where that's come up, I've actually found a way to basically mitigate the need for safe navigation operator further up the stream.
>> Lukas Ruebbelke: Any other questions?
>> Lukas Ruebbelke: So if we were gonna go back and rebuild this feature. So I just wanna do a real quick recap before I go any further is we spent a lot of time today talking about features.

[00:14:03] And really when features, when we talk about that is the component, then a component is divided into two main parts. Your component class and your component template. And so the idea is that you expose properties and methods on the class. That can be consumed by your template, so that you can show meaningful information to the user.

[00:14:32] And as well as we use binding, so that when a user does something, that we can then capture that event and pass it back to the component class. And so if we were going to do yet another feature from scratch. Make something up totally off the top of our heads, what do you think would be the most challenging part to do that if we were gonna recreate the last two challenges?

[00:15:07]
>> Lukas Ruebbelke: All right, I'm curious just where is, what is confusing? What's kind of sticky? What are the ugly parts?
>> Lukas Ruebbelke: Are we comfortable with kind of classes, ESS classes?
>> Lukas Ruebbelke: Don't be shy, I see you looking around. How about you? If you're ever gonna recreate.
>> Speaker 4: Well honestly, I don't think I can give a valid response cuz I'm just fundamentally I've got a lot of issues I need to review.

[00:15:41] So I honestly don't know if I can give a valid response to that question.
>> Lukas Ruebbelke: Okay.
>> Speaker 4: Unfortunately.
>> Lukas Ruebbelke: Anybody else would like to just start the conversation?
>> Lukas Ruebbelke: If we were gonna redo this from scratch, what would be the most confusing part of this? Like in your heart, when you're like.

[00:16:06] Let's be systematic, let's do a thought experiment real quick. If your boss was like, I need you, because you went to this Angular 2 class for a day. I need you to create an Angular component. Like you went to the training, I expect a return on my investment.

[00:16:22]
>> Speaker 5: Tied into service, go ahead.
>> Lukas Ruebbelke: What's that?
>> Speaker 5: By from scratch do you mean without Angular CLI?
>> Lukas Ruebbelke: I'm not that cruel and I hope your boss isn't either.
>> Speaker 5: [LAUGH]
>> Lukas Ruebbelke: So again Angular CLI so everything that I've is done by hand, I'm only using the CLI to set up the project.

[00:16:37]
>> Speaker 6: I think for me, doing the gigantic picture and then narrowing down was kind of overwhelming and I understand the kind of help that that can provide some people, but for me then I'm trying to figure out where I am in comparison to the gigantic puzzle that you shown me.

[00:16:58]
>> Lukas Ruebbelke: Yeah.
>> Speaker 6: Whereas kind of starting small with a component and then working up and then as a review, going up [INAUDIBLE] all the pieces. That's at least, personally how it could help me.
>> Lukas Ruebbelke: So I think that's completely valid and I struggled with that, like do we start small and go big or do we go kind of here's the big picture and then from there, start small?

[00:17:19] So the upside to that is, and I don't think there is a right or wrong answer. I think people learn differently. Is that we are now on the small to big cycle. We've covered the big stuff. That first module was a beast. But now what we're doing is simply, we're going to iterate this.

[00:17:39] And so even to the point is if we have to do another feature, like I really wanna make sure that we understand how to write a component. So you actually look like you had something to say.
>> Speaker 6: Yeah tying the service to the component.
>> Lukas Ruebbelke: Okay.
>> Speaker 6: That's where I lost the connection.

[00:17:58]
>> Lukas Ruebbelke: Tying a service into the component okay. Well as it happens, the very next module is services but I don't wanna rush just yet. Like I'm really trying to get a read of everyone and where they kind of are.
>> Lukas Ruebbelke: So the question is, does the CLI come with some CSS framework?

[00:18:28] So it doesn't generate something with a CSS framework, but it does come with preprocessor support. But, it's just as easy to hook something in if you want Bootstrap, or Foundation, or material, then you can just NPM install that, and hook it in. So it doesn't actually ship with really, anything specific other than Angular.

[00:18:52] So I'm gonna try to attempt to answer Judith's question, or rather to make sure that I hopefully even understand it is that you can know what you want on your page but not know the best place to start in terms of guiding what you do as you write your code.

[00:19:12] So I think the idea is I want to.
>> Speaker 5: Is that breaking down the problem into parts?
>> Lukas Ruebbelke: Yes and so to that. I mean, so that is ultimately, I mean that's what we do as programmers is we've got this problem, and what do we do? And so this is for me why, one of the reasons why I went big picture first is that human beings, like we are wired for pattern recognition.

[00:19:36] So this is just general programming advice. I think for senior engineers, I think this will resonate with them. For new engineers eventually, I think this will not become theoretical but something that you just kind of experience, that we are wired for pattern recognition. And so when you start to work on something new, it's confusing, it's foggy, it's fuzzy, like you don't know where the pieces are.

[00:20:05] But then, as you start to build things, patterns start to emerge and you start to identify kind of these patterns. And so for me, for instance, when I think of Angular 2 I think of really, everything is a class, and I think of just you have an ES6 class and you have some metadata and pretty much everything is a variation of that.

[00:20:33] So if I were going to summarize Angular 2 in a few sentences is, understand how in the ES6 class works, understand how to wrap it in metadata, and once you understand binding, you have a component. And from there, so we're talking about three things, from there, it's a matter of learning how to stack these components together to do larger things.

[00:21:01] But really, at the bottom of the pattern is just a component. In fact, I'll even show you a slide from tomorrow. Or rather, ha! You know what? It's not tomorrow. So, let me actually just show you this slide right here. So as we get into services, when I talk about services and why we've waited until after components is because a service is just a class with some metadata.

[00:21:32] So what is a directive? Cuz we saw that, what is a directive? Well, it's just a class with some metadata. If we needed for instance a pipe, that's just another word for a filter. Well, it's just a class with some metadata. And so you notice here that the pattern for all of these are exactly the same.

[00:21:54] And so I think this is the one thing that Angular 2 got very, very right. Is that when you are building something and you understand fundamentally how a class works, from there, it's a matter of augmenting the class or connecting the class into Angular via metadata. And so when you have something on your page or you have some idea, some functionality that you want to build, the trick is to first and foremost break the problem down into small enough chunks to start to build something.

[00:22:30] And try to establish really the patterns or apply the patterns that we know to be true. So for instance, if somebody gave me a layout and said can you build this? Well the first thing that I may do, and this is actually a really good practice in terms of component composition, is I'll take out a marker and I'll say okay, a lot of times it's going to look like a master detail list, or some variation of it.

[00:22:55] It's like okay I got a master collection of something. Well that's gonna be a list component with various, so let's say it's items again. So speaking in generic terms is, I have a list of items. So I just take a marker. And I would outline that. I'll say okay, I have an items' list.

[00:23:14] And within that, I have an items' component. And then, it's like, okay, now I want to actually update or I wanna modify this in some way. Well, then I'd take another marker or I'd mark and I'd draw a box around that and say okay, this is details pertaining to this item.

[00:23:30] And I'd say okay, now this is an item details component. And from there, you might have a top level items component that controls everything or is the container for that. But you start to break things into tiny pieces into, and start to see it as just patterns. Again, so computers, really at the end of the day it's one's and zero's.

[00:23:54] It's just really a lot of switches turning on or off. And we don't really think about that because it's so low level. But, that's what computers are, just a bunch of switches flipping on or off. And so, I think of an application that when you stop and you'll look at it at a high level, it's really a composition of functionality that we're really quite familiar with.

[00:24:15] Already and we've already done in some other context. And so does this kind of make sense that, and we'll talk about this more when we get into component composition. But, I think this is probably one of the biggest or most fundamental shapes that we use when wealing with angular 2, class metadata.

[00:24:40] And from there it's properties and methods. So the question is, now well what do I want this component to do? What state does it need to have? Well that I'm going to assign a property to it, to keep track of that. Will I need to keep track of a selected widget?

[00:24:54] Or when we select a widget, do I need to keep track of that? I'll create a property for that. But I need to be able to select a widget? Well I'll create a method for that. And so it's really than with a class. Well it's actually a container for properties and methods.

[00:25:10]
>> Lukas Ruebbelke: And then as we get into services, we'll see that we're actually gonna take that collections component. And we're basically just going to abstract it out into a service and you consume it that way, but it's almost going to be identical.
>> Speaker 7: [INAUDIBLE] questions after this?
>> Lukas Ruebbelke: Yes, good, let's talk.

[00:25:33]
>> Speaker 7: What about the house styles are applied across various components?
>> Lukas Ruebbelke: So what I recommend with this is, with anything, I start with the concept of global, or local to global. So if I'm building out functionality that is really component specific, I start there. And then, as there's a need for it to become common or shared across maybe, two components.

[00:26:00] So let's say these two components are within a same feature. So for instance item details, item list, they need to share something. So then I'll basically extract that out. Just to the next level so that it's available for everything underneath of it. But then let's say, the entire application might need to use it.

[00:26:21] And so then, what I'll do is I'll abstract it even further into a shared directory. And then from there, let's say, multiple applications may need to use it. Then, I'll break it out into either its own module first. But then eventually its own standalone project that you then consume via like NPM.

[00:26:42] So for styles, this is the same thing. Is if you need to share styles across multiple components where is the nearest parent that all of these components share? And that's where it should go, I believe. I don't think it needs to go any higher, I think you need to constrain essentially the scope of where that reaches.

[00:27:07] But when that needs to go higher, then you simply promote it. So I believe of functionality or access through promotion. Start local and then promote.
>> Lukas Ruebbelke: Okay, next question. Ever need to use input and output decorators when using data bindings? Yes, so we will get into that first thing in the morning.

[00:27:33] But essentially, we are creating our own property bindings and event bindings using input and output. And this is on my top three list of favorite Angular 2 things. Kaitlin asked, what order would you recommend learning TS and ES6. So, TypeScript is really just a super set of ES6 in so much that if you understand ES6, then you understand most of TypeScript.

[00:28:05] There's a few things such as constructor assignment, field assignment, interfaces. A couple little kind of sugary things that they're trying to actually move into the spec. But I think fundamentally, the biggest overlap is on ES6 with TypeScript just being an extension of that. Yes.
>> Speaker 2: I just posted a LinkedIn chat for the pre release of Cal Simpson's ES6 The Right Parts Course.

[00:28:35] So that is not out as a course but you can download the pre release there.
>> Speaker 2: And obviously Cal Simpson is the champion.
>> Lukas Ruebbelke: He is the champion so his books you don't know JS if you haven't read them.
>> Speaker 2: Yeah they're free and online and.
>> Lukas Ruebbelke: Even though as he's graciously made them available for free.

[00:29:00] I just went on a buying spree and bought all of them in print. I think somebody who puts good work out, for me, I personally love to support them. So another one is Victor actually wrote the router book. So he wrote the router, and then he wrote essentially about 120 page guide on it, and it's excellent.

[00:29:17]
>> Speaker 2: And also, Wes Boss has a ES6.
>> Lukas Ruebbelke: Yes.
>> Speaker 2: I don't know, I haven't seen it, but I've heard good things.
>> Lukas Ruebbelke: Yep, so Wes Boss has a ES6 course. Actually, I think it's exploring ES6, is I think I paid 25 bucks for it. And he is [INAUDIBLE] bible.

[00:29:45] Just a really good resource as well. Say that again please. I believe it's Exploring ES6 by Axel Rauschmayer.
>> Speaker 2: You have that book?
>> Lukas Ruebbelke: It's really quite good.
>> Speaker 2: Like Kyle Simpson's, You Don't Know JS Books on ES6. I feel like he really, really dives in deep. I really like his style, his writing style.

[00:30:11]
>> Lukas Ruebbelke: So to answer the question real quick, Victor Savkin is the author of The Router Book, so he's on the Angular Core. He wrote essentially The Router. At one point, actually the previous version of this workshop, I didn't even wanna talk about the router. Because it was in such a bad shape.

[00:30:32]
>> Speaker 2: Yeah, you guys were complaining about it, I remember that.
>> Lukas Ruebbelke: I mean that was one of the, I think the most frustrating things. The director came in and they did a really good job. So was it just [INAUDIBLE] but a lot of the high level design decisions, I think he was involved with.

[00:30:44] But he wrote a router book that's really quite good. But I cannot say enough good things about Kyle. And so his writing style actually really resonates with me as well. So, I don't think Martin Fowler's ever gonna watch one of my workshops so I'll just say this. Let me precursor this with Martin Fowler if I ever meet you in person, I love you to pieces.

[00:31:05] But his material is a little hard for me to get through. I usually get about six pages in and it's [SOUND]. So, Kyle on the other hand is just, I can read it, and read it and read it. And I do and I have. So any more questions?

[00:31:23] This is
>> Lukas Ruebbelke: I feel like we're making progress here. Look I really want everybody to be able to right an angular component by the end of the day. And we can circle the wagons until I've got a good feeling about this.
>> Speaker 8: Do we have a good source on teaching or learning TypeScript itself?

[00:31:48]
>> Speaker 2: I think there's a good one on sight.
>> Lukas Ruebbelke: So there's one on sight. So, I haven't mentioned this yet. But I am actually the co founder of Ultimate Angular. And, so I started this with Todd Motto. And we are actually going to launch a TypeScript course from one of the guys who actually works on TSLint.

[00:32:11] His name is James and, so that'll be I think. He's about as close to the core as you can get, but he really knows TypeScript, so keep your eyes open for that on Ultimate Angular, that'll be a really good resource as well. There's a few other free resources, but I think, one of the really with ES 6, and typescript you just get good by doing.

[00:32:35]
>> Speaker 2: Yeah, I think, it's really important to understand JavaScript itself.
>> Lukas Ruebbelke: Yes.
>> Speaker 2: Really deeply and ES6 really deeply, and then TypeScript makes a lot more sense.
>> Lukas Ruebbelke: Yeah, cuz unfortunately as much as I love ES6, I have to go back and do ES5. And as much as I love fat arrows, occasionally on ES5 you have to actually spell out into the function as a closure.

[00:33:00] And then also lexical scope is broken, and you're like, great, now I've got to create a top level reference to this, so. Var that equals this or whatever, and, so ES5, just is a thing we still have to do, unfortunately.
>> Lukas Ruebbelke: So, speaking of linting, is TSLint the way to go or is there a good extension of VSLint?

[00:33:31]
>> Lukas Ruebbelke: So, I think, TSLint is, I think, it's probably as good as any. I don't have a strong opinion on that. I think, especially on a team, you should have lint, some linting into your bill process. But I think, it really matters what philosophically resonates with you. So, actually I don't even wanna get into that.

[00:33:57] There is a certain linter out there that is controlled by a very particular individual. And that's why JSHint exists, because it's a little bit more, it's not so dogmatic. So, I think, that find something that philosophically you can kind of agree with, and then stick with it.
>> Lukas Ruebbelke: So, the question is does TSLint fix errors like ESLint can?

[00:34:25] I don't know about that. And, Martin, can you give a quick overview of directives again, it's a little unclear. Sure. So, let me just hop to the slide.
>> Lukas Ruebbelke: It's up here somewhere.
>> Lukas Ruebbelke: Okay, so this is a component. Class, template, we have metadata.
>> Lukas Ruebbelke: Moving down.
>> Lukas Ruebbelke: So, a directive is essentially a component without a template.

[00:35:14] And, so this is what this looks like. So, again, similar shape, notice class. We're importing stuff, metadata, so CID, we're there. So, the cider rule still applies for this. But the difference is if you look in the directive metadata, we are not attaching a template to it. And, so for instance, think of NGF.

[00:35:42] NGF is a good example of a directive, because it doesn't have a template. There's no template attached to NGF. It's simply there to modify an existing element. NG4 is the same way. So, we have NG4, we attach it. So, it's not even, another thing is that components will always be, essentially, element selectors.

[00:36:07] Whereas a directive will be an actual attribute. And so, that's the other thing, is that components are elements. Directives are essentially attributes that modify existing elements with additional behavior.
>> Lukas Ruebbelke: And so, how this actually came to be is in Angular1, people realized there were really two fundamentally different type of directives.

[00:36:35] So, in the land before time really all you had was directives. And people realized, okay, we have directives that can serve essentially as kind of the standalone components. Or these self contained elements, such as like a calendar, date picker, whatever, that you can then pick this up and move it around.

[00:36:54] And so, people use directives to essentially create reusable components. Then, on the other side, they had what was called really decorator directives. And what that would do is essentially you would just attach it to something, and it would just augment the existing behavior. So, essentially, you're taking an element and you're decorating it.

[00:37:17] So, with then, kind of those two uses in mind, the component directive, well, that became a component. And the decorator directive, that became just, really, the directive in Angular 2. It's that it's simply there to augment, or enhance an existing element.
>> Lukas Ruebbelke: Does that make sense? I'm seeing some head shaking.

[00:37:41] Yes? Yes? Yes?
>> Speaker 9: Quick question on that. The selectors using the square brackets, is that optional, or does that mean that it is an attribute? Could I have anything in there, in the selector and then, include that as an attribute? An element.
>> Lukas Ruebbelke: So, in this case, so let's actually just pull this up real quick.

[00:38:03] I just don't wanna misspeak here.
>> Lukas Ruebbelke: Let's go to, again, my favorite page on the entire Internet.
>> Lukas Ruebbelke: So, this actually, hold on. This may have got, I think, I was being funny when I did this. This is actually.
>> Lukas Ruebbelke: So, this would be whatever you wanted on there.

[00:38:43] But the selector would be, in this case, I would actually do something like this. And so, you put it on there, and it causes it to blink.
>> Lukas Ruebbelke: So, I saw a question in here.
>> Lukas Ruebbelke: Angular is doing a lot of magic under the hood.
>> Lukas Ruebbelke: It may be good for a quick prototype, and small projects, but is it okay to use for big long term projects?

[00:39:13] Guess we need to fix and support the changes that Angular CLI may have under the hood. So, the question is, it's good obviously for spinning up small projects, getting up and running quickly. But is it appropriate for large projects? And to that, I say, absolutely. So, this is, the Angular CLI is an official project of the Angular team.

[00:39:35] And in part, this was created, so that internal teams within Google could support their large Angular projects. And so, more importantly, is that the Angular CLI essentially adheres to really all of the best practices that the angular team has kind of said, this is how we want it to be.

[00:39:57] This is idiomatic Angular to Angular CLI let it be. So, be it. Go, do this. So, the upside to that is that, if something, or some new technology comes along. So, let's say like we got web workers, and let's say, we got holograph workers, I'm making this up.

[00:40:21] But some new kind of thing comes along that Angular wants to support. Well, because it's right there at the core team, they can bake that into the CLI, and you can leverage that right away. As opposed to some starter projects where somebody's 12 months ago they were using it, and then they had their opinions about something, and then they've moved on.

[00:40:41] And they're doing some other framework, or something like that, or they haven't even progressed. Cuz there's a lot of old 1.x, nvc, starters out there that's just, that's not how we write Angular 1 at all. And so, therefore, I think for me, having something that's actually really close to the metal with what Angular is doing, because the core team is working on them both.

[00:41:07] I think to me, that's the biggest endorsement that this thing is good for enterprise projects.