My takeaways from ng-conf 2019

I had the opportunity to attend this years ng-conf which took place on the 1st-3rd of May in Salt Lake City. How was it? Was it worth ~20 hours of traveling there and back from Central Europe?

What a silly question, of course, it was. 😄

  • Three days full of talks from top-level speakers, there is always something to learn for everybody
  • party on Wednesday at Clark Planetarium with many interactive exhibits
  • D&D session on Thursday with a cool party (👋 PP & Anus )
  • as an AFOL I was fortunate to win one of the prizes, which was Saturn V from Lego
  • a bag full of Angular swag
  • stackblitz guys in spacesuits (sorry I don’t have a photo of them)

Here are my key takeaways from the conference:

Angular 8, Ivy and the future

Before the conference, I thought that it would be all about Ivy, but I was wrong. Many talks did mention Ivy, but it was not the primary focus. So what is the status of the new renderer? It is not fully ready yet. 97% of unit, integration, and screenshot tests are passing for Google codebase, so there is still some work mainly because of backward compatibility. It is shipped in Angular 8 as an experimental renderer, and Angular team is trying to make it the default renderer in Angular 9 (Q4 2019). You can experiment with it now in your project when you upgrade to Angular 8, and you can report all found issues.

You can watch day one keynote by Brad Green and Igor Minar to learn more about Bazel, onboarding new contributors to the team and scalability of Angular. Watch day three keynote by Stephen Fluin and Miško Hevery to learn about the process of how new features are evaluated and added to the framework and how the future of Angular might look like.

Tools for fast Angular applications (video, slides)

Minko Gechev speaks about multiple things which help speeding up Angular applications like code splitting, lazy loading, pre-fetching strategies, and performance budgets. One new thing for me was differential loading. It is a technique to reduce the size of the code sent to the client by:

  • not sending polyfills to modern browsers
  • serving ES6 modules for newer browsers
  • not downleveling modern JS features

You can try differential loading when you upgrade to Angular CLI 8.

Use decorators to beat ngOnChanges (video, slides)

Kern Zhao talks about using decorators and how they can help you to turn this:

ngOnChanges(changes: SimpleChanges) {
if (changes.name) {
console.log(`name is changed to ${this.name}`);
   }
if (changes.age) {
console.log(`age is changed to ${this.age}`);
   }
}

into this:

@OnChange<string>(function(newValue, change) {
   console.log(`name is changed from ${change.previousValue} to ${value}`);
})
@Input()
name: string;

The OnChange decorator is available on npm and GitHub, and you can try it out whether it helps you to organize your ngOnChanges hooks.

You can also watch Wrapping it up with Decorators by Nicole Oliver in which she explains how the decorators work.

Angular and CSS Grid: Get ready to fall in love (video)

Workshop by Bill Odom explaining different features of CSS grid. It is accompanied by an app with examples so you can follow along. Bill covers the basics of CSS grid, grid areas, and templates, so it is suitable for newcomers.

RxJS

There were many talks about RxJS, I have picked 3 of them that are trying to explain the same thing: switch our thinking from imperative to reactive.

All three talks promote: don’t manually subscribe to observables, use async Pipe in the views. Combine different streams to provide data needed by the view and leverage the power of RxJS operators. Think of all asynchronous events happening in the application (user actions, timers, server requests) as sources and all the things that consume the observables (views…) as sinks. Some example taken from the slides:

vm$ = combineLatest([
    this.product$,
    this.productSuppliers$,
    this.pageTitle$
   ])
   .pipe(
     filter(([product]) => !!product),
     map(([product, productSuppliers, pageTitle]) =>
       ({ product, productSuppliers, pageTitle }))
   ); <div *ngIf="vm$ | async  as vm">
 <div>{{vm.pageTitle}}</div>
 ...
 <div>Name:</div>
 <div>{{vm.product.productName}}</div>
 ...
  <tr *ngFor="let supplier of vm.productSuppliers">
 ...

This allows the view to display product, its suppliers, and page title by composing three different streams.

Another example shows how to react to user action:

data$ = this.searchTerm$.pipe(
 switchMap(term => this.apiService.fetchData(term))
);

Where searchTerm$ is a stream of search terms entered by user and switchMap does the HTTP request to the backend whenever user action happens. data$, which are search results, is then used in the view with async pipe.

If you want more in-depth knowledge about RxJS then definitively check talks by Michael Hladky:

  • RxJS Schedulers form outer space — performance, animations, asynchrony (video, slides)
  • RxJS Advanced Patterns (video)
View from Ensign Peak over Salt Lake City

Most funny talks

As a bonus, I picked up three talks during which I blew a little more air through my nose 😏, and they might bring a smile or even laugh to you:

Wrap up

Of course, there were many more talks. You can find a complete list of talks with slides and video links in Sam Julien’s GitHub repo or you can check ng-conf 2019 Youtube playlist.

My takeaways from ng-conf 2019 was originally published in ableneo Technology on Medium, where people are continuing the conversation by highlighting and responding to this story.