DeveloPassion's Newsletter #9 - Angular 10

Welcome to the 9th edition of DeveloPassion’s newsletter. Before we start, I’d like to ask all of you to help me out a bit. If you find this newsletter interesting, then please do take a bit of time to share to others on social media: With your help, others will also get a chance to discover and enjoy reading it. As an added benefit, it’ll also motivate me to continue the experience! Don’t forget that you can also follow me on Twitter and Medium where I currently publish my articles. I’m still working on my SaaS product project, Didowi, which is also the source of inspiration for many of my recent articles. The nice thing with building software is that there are many discoveries made along the way and many tips & tricks to share. The difficulty is always taking the time to crystallize the ideas and explain them ;-)

As usual, here are some news about TypeScript.TypeScript 3.9.5 has been released a while ago. The great news is that Angular 10 (cfr next topic) is out and supports TS 3.9, so if you’re using Angular, then you can migrate over to this new TypeScript version right now! Cool :) Since then, a first beta of TypeScript 4.0 has been announced. My article about TS 4.0 stays right on target. I just need to update it to cover Variadic Tuple Types; an awesome new feature that this version will bring. In any case, check out the beta release notes and my article if you want to learn more. Note that my book about the language stays more than relevant; of course it misses a few concepts that were introduced since end of last year, but it remains a really solid introduction to TypeScript.

The other big news of the last days is of course the release of Angular 10. It isn’t an earth shattering release, but it does brings cool new features and many many bug fixes. I took an evening to go through the release notes and I’ve published an in-depth article about the changes. If you’re using Angular, then my article is a pretty good starting point to get up to speed. You can of course also check out the official Angular blog, but it doesn’t cover everything ;-) As stated in the previous point, this version brings support for TS 3.9, which is awesome news for everyone. I’ve also published an interesting article about Angular template type checking and the strict mode that was added back in Angular 9. If you didn’t enable that flag yet, then do it now!

While we’re onto releases, Nx 9.5 is out. I didn’t write an article about that release because I’m eagerly waiting for the release of NX 10, which will also include support/migration for Angular 10. Still, Nx 9.5 brings a few new features, like an OSS preset for create-nx-workspace, the possibility to rename the master branch (cfr #blacklivesmatter), and a few things for React. But clearly, the big release around the corner is Nx 10… By the way, even if you’re not using Nx but the Angular CLI, note that Nrwl has released a cool wrapper for NG CLI, which adds support for their caching mechanism; allowing you to benefit from their distributed cache solution (Nx Cloud).

The last notable release is the first beta of NGRX 10. This beta includes a few bug fixes and, more importantly, two new modules: component and component-store. The new component module aims to help us create more efficient Angular components, ideally letting us get rid of Zone.js and thus creating so-called “zone-less” applications. Component includes the *ngrxLet directive and the ngrxPush pipe. The former provides a way to find observables to a view context (i.e., a DOM element scope); it allows to track the observables next/error values and complete state and handles change detection nicely, whether zone.js is there or not. The ngrxPush pipe is a drop-in replacement for the async pipe, but again, better handling change detection and supporting a zone-less mode. I didn’t dive in detail into the component module just yet, but plan on writing a small article about it in the coming weeks. I did dive into the other new module: component-store, which I find really interesting and well worth learning about. Component-store is going to help us better deal with complex Angular components by letting us extract component-specific state and business-logic (and thus complexity) out of the components. By creating so-called component-stores, we will also be able to reuse complex components (which is hard to do otherwise) and even share those across applications. In addition, it’ll allow us to avoid polluting the global NGRX store with state that doesn’t really belong into it. I wrote two articles about NGRX component-store:

Switch statements are sometimes considered a code smell, but when they do make sense to use, you’d better make sure you don’t forget a single case. Luckily, TypeScript can help. I wrote a small piece about a nice trick I use whenever I can with enums, helping me ensure that the compiler tells me if I ever forget a switch case. It’s also a neat use case (far from the only one!) for the “never” keyword of TypeScript. Check out the article here: https://medium.com/javascript-in-plain-english/never-miss-a-switch-case-with-typescript-684bf5d0e1d1