What we read in April: useful articles for Angular-developers and a selection of the best with ng-conf

The current April was, of course, not the best month to read about the good and eternal; All in the soap were worn behind the raging RKN and glued the beaten saucers. However, life outside his area of ​​responsibility did not stop. Our front-end developer Maxim Popov even at the height of the fighting tracked interesting news on Angular and shared it with colleagues. In addition, he looked at the reports of the past ng-conf and prepared a selection of the most valuable. With his kind permission, I share this information with Habra - there will be something to read and, most importantly, look at a long weekend.

RxJS: Avoid bugs with switchMap

About attentiveness to the operators used by RxJS, and specifically switchMap. In general, you can not bathe, but you should have a similar case in mind (especially the case when the canceled request on the backend managed to work out).

Quote:

In short, when you need a smoothing operator in an effect / epic, you should:

· Use concatMap for actions that should not be undone or ignored, and for which order should be preserved - this is also a conservative choice with predictable behavior;

· Use mergeMap for actions that should not be canceled or ignored, but for which order is not important;

· Use switchMap for read actions that should be canceled when another action of the same type is started;

· Use exhaustMap for actions that should be ignored while another action of the same type is in the queue.

In addition - a small note about using switchMap with the condition inside. A frequent case, when it is necessary to hook on another flag on some other stream and, if the flag value is false, stop this further stream. This is done via switchMap and switching to Observable.never() in the falls branch.

But there is one merry moment: if after such a switch there are other switchMap operators that logically refer to the thread to which they are switching, then they will not be stopped, despite the switch to the never() branch.

switchMap to the fact that switchMap switches only its content, but does not affect further operators. This is ruled by the fact that the entire sequence of operators to which we switch is put into one stream, to which the switching is made.

An example to make it clear

The toggle wrong sequence button starts the timer in the stream with an error, if you press the button again, then in the console you will see that the timer continues to work:

toggle right sequence will start the correct chain, when pressed again, the timer will turn off:

In the second case, the entire chain of operators that should be used for enabled === true put into a separate thread and switches completely.

Examples of all new in ECMAScript 2016-2017-2018

Most of all are known, but there is an interesting point in 2018: Shared memory and atomics .

It will allow fumbling between threads (webwearers) real pieces of memory (objects), rather than pushing serialized pieces back and forth (strings via postMessage , like now). It should give a normal multithreading and speed up a lot (for example, video / audio decoding for the same live streams). Well, we are waiting for angular N, which runs the non-home code in webweekers.

Quote:

The main idea is to introduce some kind of multithreading into JavaScript, so that JS-developers could write high-performance programs that can work in parallel with the program directly controlling the memory instead of entrusting this control with the JS engine.

This is achieved using the new global SharedArrayBuffer object, which essentially stores data in a shared memory space. Such data can be used both by the main stream of JS, and by streams of webworkers.

Everything you wanted to know about the Angular injecting tree

An excellent analysis of how the injecting tree looks and works in an angular, and at the end a small note about the new feature in v6 - treeshakeable tokens (the service's ability to specify in Injectable which module it belongs to).

Quote:

Angular continues to work on reducing the size of the framework and from version 6 will begin to support a new way of registering providers.

Previously, the Injectable decorator did not indicate that a class might have a dependency; this did not affect how it would be used in other parts. Thus, if the service has no dependencies, @Injectable () could be removed without any consequences.

As soon as the stable version of the API is released, we will be able to configure the Injectable decorator to tell Angular which module it belongs to and how it should be instantiated.

Selection of performances ng-conf

In April, another ng-conf was held in Salt Lake City; Here is a video of speeches that Maxim considers most worthy of attention.

The best:

Elements by Rob Wormald

a story about what @Angular/elements will be like with the release of ng6.

Components development kit (@ angular / cdk, former @ angular-material / cdk)

a lot of useful chips like working with scrolling, overlays, prokidyvaniem pieces of the template between the components (portals), all for creating their own GUI components (almost the whole presentation is an example of creating a color picker using cdk).

Excellent:

PR VS Code Ide

Why are you still on the braking PhpStorm, when there is a nyashny and nimble VS Code? ..

Writing clean code from John Papa

Use stackblitz.com to prototype

A delightful thing, suddenly someone else does not know: a full-fledged ide - vs code - the entire js / ts ecosystem in the browser, any project is put into the project (and very quickly), there are ready-made templates for an angular / react / something else.

Fit:

Using reactive forms with all perversions

Reactive forms is a very cool thing, don’t even remember about ngModel.

Template refs in templates

Template refs are #smth on tags in a template. What is it, why, how to cook.

A pretty detailed description of how ng-content works and why

There is an interesting hack with the ngProjectAs attribute.

It is a little about bazel and how its work and configuration look

This is what we will in the future (most likely) collect an angular, because much faster assembly and reassembly.

rxjs with an angulyar for those who are not very understanding yet

Basically basic stuff.

Analysis of how the angular works with the elements in the template.

Examples of using ElementRef , ViewChild / ViewChildren , TemplateRef , how work with views / home is arranged.

How does the angulyar router and useful tips how to prepare it

Basic things: resolvers, guards, taking out child routes, lazy loaded routes.

How rxjs operators are arranged, and how to make your own

Examples of different types of operators, as well as how to file your own, only with a casino.

Application Performance Optimization

Basic things like OnPush, pure pipe, immutable (simply do not mutate the data), memoization (rare case), output buffering (also rare case).

Create your build system by the type of that in @ angular / cli

But why? ..

What's new in rxjs6

Large applications with angular

How to live with a bunch of applications, common lib and why (yes, again monorep).

All the speeches are here (there are a lot more of them, there is more about ngrx, testing)

We remind you that we are always looking for cool developers ! VPN is attached to vacancies ...