Video details

Brian Love: The Phantom of the Template Error


Brian Love

Get ALL the ng-conf: Hardwired videos for FREE at
ng-conf is a three-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. 1500+ developers from across the globe converge on Salt Lake City, UT every year to attend talks and workshops by the Angular team and community experts.
Follow us on twitter Official Website:


All right. Today, we're talking about haplotypes type checking in in your. My name is Brian Love and I'm a Google developer, expert and angular and web technologies. My goal is to help you today to build high quality software. So I've done a lot of high level angular architecture reviews for companies from small to large. Now I share with you a quick story about meeting a team. Susan, one of the engineers was very interested in the goal of building high quality software. She asked lots of questions and had a lot of great insight into the application. Steve, another one of the engineers wasn't quite so interested. I asked him what his role was on the team. And he replied simply, Well, I come to work. I grab a ticket on the backlog, submit a PR and I'm done. I could tell that Steve was a little frustrated. I know because I've been there. So let me ask you a question. Do you want to build high quality software? I asked Steve if he wanted to build high quality software. And of course he said yes, but I knew that I had a little bit of convincing to do. Well, there are probably some room for debate in terms of opinions on what exactly defines high quality software. Let me propose that high quality software contains fewer bugs. And to further clarify, by what I mean. Let me say that high quality software has fewer runtime exceptions in production. Well, what if I told you that we could reduce bugs in our applications by up to 15 percent? So what do I mean? I mean, 15 percent fewer runtime exceptions, which means 15 percent fewer issues. The tree. Which means 15 percent fewer fixed branches, 15 percent fewer pull requests. 50 percent fewer code reviews, 15 percent fewer red squiggly lines and our builds and maybe even fifteen percent less. Man, why did I pick this career? And I'm not making this up. Truly, there was a study called to type or not to type. And this study was created by Microsoft Research and the University of College in London. And the study analyzed over one million public JavaScript repositories and leveraging the project history. They selected a bug and checked out the code just prior to the fix. They then manually added type annotations to test if type checking would have reported the error in the code ahead of time. The result is that 15 percent of these bugs could have been detected with type checking. At this point, you're probably thinking, geez, Brian, this sounds good. How do I do this? Well, let me share with you one of the features and angular nine that I'm most excited about is called template type checking with angular version nine. We have vastly improved error type checking in our templates. So just like TypeScript can catch errors in your code before emerging that PR push into production. So too can we leverage angular new mode for template type checking to catch errors in our code ahead of time. So Angular Version nine with Ivy has enabled three new modes for template type checking. We've got basic mode, full mode and strict mode. In basic mode, Angular is type checking is most relaxed. This mode is similar to type checking in previous versions of ANGULAR. The next is full mode. This mode increases the level at which your templates are type checked and angular. Nine with Ivy. Things like embedded views and pipes are now type checked and that's good. And this can help us to catch type errors ahead of time. But we could still have runtime exceptions lurking in our templates. Finally, we have strict mode, strict mode, like it sounds performs a strict check of our templates. This is the Mad Max of template type checking in and your 9:00 with IP enabled with strict mode. You get all the benefits of type checking included and full mode with additional type checking. We're talking about component binding type checking event object type checking. Determining the correct type of components and directives. Local references to DOM elements, safe navigation expressions and more. With strict mode. We can further reduce runtime errors and regressions in our code by leveraging full and strict mode configurations with the angular compiler. I believe that you can reduce bugs in your code by up to 15 percent. So I'm at an angular meet up a little bit after this architecture review with the company and I see Steve is there and I walk over to strike up a conversation, Steve. I say, How's it going, Steve? He replies and says, Hey, Brian, guess what? You're never gonna guess what I did today. And I said, What's that, Steve? And he replies and says, Because of the new template type checking and angular, there are now fewer issues in our backlog. So much so that I have more time to do what I love. And I'm like, cool, what's that? And he says, tweeting, tweeting the best meems and gifts on Twitter. In closing, I'm not sure what you're gonna do with 15 percent fewer bugs in your code. Maybe you can spend 15 minutes watching funny cat videos on YouTube or tweeting out. Funny means you do you, but you can be rest assured knowing that 50 percent fewer bugs means a better life as an angular developer.