Build Web Apps with Angular 2 Change Detection & Testing

[00:00:00]
>> [MUSIC]

[00:00:03] Change Detection, this is really a very complex in-depth topic. I think I put, Pascal Precht actually gave a very, very, very, very, very good talk on Change Detection, I'll actually add that slide in, I thought I actually had that in there. But I recommend going and watching that, he gave the talk I believe in the Netherlands, and his slides are pretty phenomenal.

[00:00:32] The two things that I wanna call out, is that Change Detection has been completely rewritten using zone.js, it's really, really, really, efficient. And we also have the ability to choose how we are doing Change Detection within our application. So now with observables and immutable data objects, you can actually say, turn off Change Detection, and I'm gonna just put new state to you, which is much, much more efficient.

[00:01:05] And so that's one of the things that I'm excited about. Reactive Angular is that when you give it an observable reference that the value can change underneath, but it's not having to run Change Detection to say, did this observable change? Because it's still the same object every single time, it's just the observable is pushing new data into the consumer to basically say, hey here's this new thing, go ahead and render it.

[00:01:28] And so you don't have that change cycle or the digest cycle anymore, which is really cool. As well as you can actually in your subcomponent say, something changed and I actually wanna force Change Detection from myself all the way up to my parent branch in this component tree.

[00:01:47] And so there's some really neat low level things you can do, but the main thing is to know that the digest cycle for the most part, is we're moving away from that. So it does exist, but ideally you're going to want to lean towards the reactive kind of immutable approach, which is just much more performant.

[00:02:08] That is, Separate slide that I left in there. So Testing, same story, Angular actually wraps Jasmine methods. So we get a Jasmine methods right out of the box, and you just need to import them from angular2/testing, import your classes to test, and then you just include your providers, and you can inject them.

[00:02:35] So I'll show you what a simple test actually looks like. Pretty simple, so we're importing { describe, it, expect } and then were importing the component that we want to test. And then we're just saying hey, AppComponent should be a function, and it's pretty simple. We just see here, yeah, last slide.

[00:03:05] These are some best practices, so keep all files pertinent to a component in the same folder. And by component, actually, generally, I again think of that as a feature. And so if I'm working on let's say a widget feature, is I would have my widget's component in that folder, I would have the CSS, the styling for that component.

[00:03:31] If I had an external template it would be in that directory, and as well as my test. And so by keeping things together, one is it reduces the cognitive overhead of actually having to look for these different things. And it makes it more portable so that you can extract it out and it's not in a bunch of different folders.

[00:03:50] There is a mnemonic that I have come up with, just by working with Angular 2 a bunch, that at first it's like, I don't know, this is so confusing, it's totally this new thing. And so I came up with just, I know someone is doing the same thing over, and over, and over in the same order.

[00:04:09] And so the mnemonic I came up for that is CIDER. So the first thing I do is I create my class, I import my dependencies, I decorate my class, then I enhance my class. So in other words I'll just kind of iterate over that and start to add things in, and then I will repeat this process until I'm feature complete.

[00:04:28] So a lot of times I'll start to enhance my class, and I'll realize this thing needs to be broken out, and so I'll repeat or refactor. So again, keep templates small enough to put in the main component file directly, is optimal. Keep your components really, really, really small and focused.

[00:04:48] We're gonna actually talk about smart components and dumb components tomorrow, and what that means. But its completely okay, and I really actually strive for this, where I have a simple component that basically has inputs and outputs, and it's actually not doing really any logic. It's only saying here's this thing I want to render and I bind right to the template, and then I have an output saying, when this thing happens just basically propagate that up to the parent component to send off to a service.

[00:05:17] So really, try to keep your components small, light weight, and very focused on just what it's trying to do, and then delegate a lot of that business logic into services. Or once we get into Reactive then a lot of that logic will actually go into an ngrx/store which, is basically a Redux store.

[00:05:40] And again, don't be afraid to split things into smaller components if they're getting too large. Be ruthless about this. And Change Detection implications, always be mindful of those, everything tends to work until it doesn't. The problem is when it doesn't, sometimes you have to back things out.
>> Question.

[00:06:04]
>> Yes?
>> I'm having a problem with these decorators.
>> Okay.
>> m@component@injector, whatever that kind of stuff. I'm not sure if this is a TypeScript thing, and I don't know TypeScript at all, so what's actually happening?
>> It's just a mix in, it's just a-
>> Okay.

[00:06:20]
>> Yeah, you just added functionality to the class, it takes the class, and that that grade itself was just a function. And it just adds functionality or properties to the actual class.
>> Okay. All it is, is just a mix in.
>> Okay, all right, thanks.
>> And so you can actually create custom metadata, fairly easy.

[00:06:36] Granted, there's not a lot of documentation how to do that, but it has been done. But all it's doing is when TypeScript goes through is it'll see for instance, the component metadata. And it will say, okay, I need to decorate this class with this additional information, so that Angular can run with it.

[00:06:55] And so you can do that by hand, you do not have to use TypeScript, you can actually wire that up by hand, it's just a little bit more work. And so the reason is, well why TypeScript over ES-6 or ES-5? I really don't wanna get onto Scott's module there that's coming up next.

[00:07:14] But at least for metadata it's having to do that by hand, not super fun idea to me, it's just a much more concise way to do that-
>> I've just never seen TypeScript before, so I don't even know what I'm looking at.
>> Yeah.
>> Yeah, TypeScript's-
>> So it's actually funny that some individuals, they look at TypeScript and they're like, this thing is bonkers, I'm out of here.

[00:07:39] This is crazy, this doesn't look anything like my plain old JavaScript that I'm used to. On the other hand, I've been to a lot of places consulting and training, where they're just like, ES5, [SOUND], because it looks like Java but it's not. They expect it to behave like a classical language and it doesn't.

[00:08:00] And especially then you add in the asynchronous nature of JavaScript, and I've just ran into some very frustrated Java developers and .NET developers. Because It looks like one thing and it kind of behaves like a lisp. So that moment when you say, well this is how we're doing this, but if were on Angular 2 using TypeScript, this is what this would look like.

[00:08:22] And just having an entire room just go [SOUND] I know what that is. And so on the other hand is there are people who are very familiar with classical languages that look at TypeScript and it's like, I'm home, this actually makes sense. And so with the types, the modules, and the classes, and actually one of the big things that I think outside of the metadata is actually interfaces.

[00:08:46] I really like programming to an interface. And so it's really interesting to me that on one hand people are like this thing is an abomination, and on the other hand you have people are like this thing actually makes a lot of sense and we've been using these constructs for years.

[00:09:00] So, I think, each point is a valid point, I would just say keep an open mind, give it a shot, and I found it to be really quite pleasant.
>> Also note that most of the features in TypeScript are optional, because TypeScript now actually implements a lot of the ES 2015 features.

[00:09:19] So if you don't want to use typing as interfaces, you don't have to. Most of them, some of them you still have to use the decorates and the metadata, but other stuff you don't have to.
>> I mean, for the most part if you took an ES6 file, change it to TS, it would pretty much work, I mean, cuz it's just a super, super set.

[00:09:38] So ES6 is a super set of ES5, and so really all that classical kind of sugar, just gets compiled back into ES5, and TypeScript is a super, super set of that. But the idea is a lot of the things you see in TypeScript are eventually, ideally going to end up in, it'll become the standard.

[00:09:58] So you'll start to see those things in ES7. So I think actually even metadata is now a thing, if I'm not mistaken. Yeah?
>> My concern overall is how can I get where I'm going as fast as possible?
>> Right.
>> So if this doesn't create, I just haven't seen it.

[00:10:14]
>> Yeah.
>> That was the only thing that was throwing me off.
>> And I think once you get the compiler, you kinda get the tooling set up, then it's pretty seamless from there. So I think it's time for some real talk. Angular 2 has not been out for a super long time, and it's really I think become really viable only in the last couple months.

[00:10:40] And so as I stand up here and I'm talking about Angular 2, and I'm teaching Angular 2 is that I still run into the same Twilight Zone moments as everyone else of this thing was working. I just upgraded to the latest alpha, or alpha yeah right, no wonder it's not working.

[00:10:57] I upgraded to the latest beta and everything just fell apart. As well as, for instance if I have to stop and go look at the docs, it's because I do not have the muscle memory that I have with Angular 1, because I haven't been doing it near as long.

[00:11:09] So we're kind of here to in a sense learning together, but once you kind of get set up and you get over that initial hurdle of you getting out of the gates. I would imagine it's like if you're running a sprint and they've taped your feet into the blocks.

[00:11:28] And you're trying to get off the blocks and it's like, I wanna get going, and then finally you break free and then you're good to go. Scott, did you like that analogy? He's over there giggling-
>> He looked disappointed.
>> Yeah, I don't know.
>> [LAUGH]
>> Aw, Jeez.

[00:11:43]
>> That's what's been going on, Scott, you've been taped into the blocks.
>> [LAUGH]
>> I see the videographer writing on the wall, and I'm just presuming it's, Lukas made a joke, it's 17 04, chop that out. Is that the blocks where you're just gonna edit out my jokes?