Wow. Things just got seriously master-level at the Masterclass! Day Two really did build on Day One, kicking off with the wonders of the Async pipe.
It was actually great to start out with Async Pipe, since it let us convert our little Contacts application to an Observable architecture and ditch all the dodgy *ngIf code and null checking we’d crammed into to play nice with the async http calls.
Getting Serious With Observables
Async was really the theme for the day, and the exercises came steadily throughout the day to make sure we were grabbing the concepts as they were introduced. There’s a lot to love about Observables, but it took the day to really appreciate what they bring to the table.
Here’s my typo-laden gitlog for the day to give you an idea of content pace and the type of exercises we worked on:
Making friends with RxJS - switchMap(), takeUntil(), Oh My!
Christoph and Thomas took us on a tour of the hardcore range of Rx operators that are helpful when working with Observables. Even with marble diagrams, some of these concepts pretty much blew our minds!
Major. Paradigm. Shift.
As a last mic drop before the switchMap() exercise Christoph told us “you’ll work it out” - then pointed it at the lab to learn-by-doing.
And work it out we did. We implemented the classic debounceTime() search scenario (but optimised it with a little distinctUntilChanged(), followed up with some merge()ing with the initial ContactList Http fetch for the non-search case, and even sprinkled in some serious switchMap() rocket surgery to make sure that async fetches arriving out of sequence were handled (to cater for load balancing scenarios).
It was impressive.
And it will take a lot more practice.
But here’s a vanity showoff of what we covered today.
As one of the many bonuses, I finally understand why you use this form of import for RxJS (compared with the standard Angular imports):
import 'rxjs/add/operator/map';
Intercomponent Comms turned up to 11
We did all kinds of intercomponent comms yesterday - property binding, EventEmitter, and all their friends were covered - culminating in implementing a basic EventBus shell. Powered by a Subject(), this EventBusService let us update the Header component of our application with a breadcrumb from wherever we were in the app. Very nifty!
Bring On Day Three
Today we dive into all the nuances of Forms and Validation and will be getting deep into the Router for routing child views. Great way to finish!
Pumped!