What we read in April: useful articles for Angular developers and a selection of the best with ng-conf
This April was, of course, not the best month for reading about the good and the eternal; all in the soap rushed behind the raging ILV and glued the beaten saucers. However, life outside the area of his responsibility did not stop. Our front-end developer Maxim Popov, even in the midst of hostilities, tracked interesting Angular news and shared it with colleagues. In addition, he watched 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, to see on a long weekend.
RxJS: Avoiding bugs with switchMap
About attentiveness to the operators used by RxJS, specifically switchMap. In general, you can not take a steam bath, but it is worth having 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 canceled 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 the order is not important;
· Use switchMap for read actions that should be canceled when another action of the same type is launched;
· 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 use switchMapwith a condition inside. It is a frequent case when it is necessary to hook another thread further along some flag and stop this further thread if the flag is false. This is done through switchMapand switching to Observable.never()the fall branch.
But there is one funny moment: if after such a switch there are other switchMapoperators that logically refer to the thread we are switching to, they will not be stopped, despite switching to a never()branch.
It is due to the fact that it switchMapswitches only its contents, but does not affect further operators in any way. This is corrected by the fact that the entire sequence of operators to which we switch is carried out in one stream, to which switching is done.
The button toggle wrong sequencestarts the timer in the stream with an error, if you click on the button again, it will be seen in the console 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 must be used is enabled === truetaken out in a separate stream and is completely switched.
Examples of everything new in ECMAScript 2016-2017-2018
Most of them are known to everyone, but there is an interesting point in 2018: Shared memory and atomics .
Allows to fumble between streams (webworks) real pieces of memory (objects), and not to drive serialized pieces to and fro (lines through postMessage, as it is now). It should give normal multithreading and a lot of speed up (for example, video / audio decoding for the same live streams). Well, we are waiting for angular N, which runs non-home-related code in webworks.
Quote:
The main idea is to introduce some kind of multithreading option in JavaScript so that JS developers can write high-performance programs capable of working in parallel in the future, directly managing memory instead of instructing the JS engine to do this.
This is achieved using the new global SharedArrayBuffer object, which essentially stores data in a common memory space. Such data can be used both by the main JS stream and webworker streams.
Everything you wanted to know about the inject tree in Angular
An excellent analysis of how the injections tree looks and works in the hangar, and at the end there is a small note about the new feature in v6 - treeshakeable tokens (in Injectable, the service can indicate which module it belongs to).
Quote:
Angular continues to work on reducing the size of the framework, and starting with version 6, it will begin to support a new way to register providers.
The Injectable decorator had not previously indicated that a class may have a dependency; this did not affect how it will be used in other parts. Thus, if the service has no dependencies, @Injectable () could be removed without any consequences.
Once a stable version of the API is released, we can configure the Injectable decorator to tell Angular which module it belongs to and how to instantiate it.
A selection of performances ng-conf
In April, another ng-conf was held in Salt Lake City; Here is a video of the speeches that Maxim considers the most worthy of attention.
Featured:
Elements from Rob Wormald is a
story about what will be @Angular/elementswith the release of ng6.
Components development kit (@ angular / cdk, formerly @ angular-material / cdk) a
bunch of useful features like working with scrollers, overlays, throwing pieces of a template between components (portals), anything to create your own GUI components (almost the whole presentation is an example of creating color picker using cdk).
Excellent:
PR VS Code ide
why are you still on the braking PhpStorm, when there is a nice and nifty VS Code? ..
Writing a clean code from John Papa
Using stackblitz.com for prototyping A
delightful thing, suddenly someone else does not know: a full-fledged ide - vs code - the entire js / ts ecosystem in the browser, any files are put into the project (and very quickly), there are ready-made templates for angular / react / something else something.
Useful:
Using reactive forms with all sorts of perversions
Reactive forms is a very cool thing, do not even think about ngModel.
Template refs in templates
Template refs are those #smthon tags in a template. What is it, why, how to cook.
A fairly detailed description of how ng-content works and why
there is an interesting hack with the ngProjectAs attribute.
A bit about bazel and how its operation and configuration look.
This is what we will (most likely) collect the angular in the future, because much faster assembly and reassembly.
rxjs with angular for those who are not yet very versed
. Basically, basic things.
Analysis of as angulyar operates with elements in the template
Examples ElementRef, ViewChild/ ViewChildren, TemplateRefas arranged with Vyuha work / home.
How does the Angular router and useful tips on how to cook it
Basic things: resolvers, guards, removal of 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.
Optimization of application performance
Basic things like OnPush, pure pipe, immutable (just don’t mutate the data), memoization (a rare case), output buffering (also a rare case).
We create our build system like the one in @ angular / cli
But why? ..
Large applications with angular
How to live with a bunch of applications, common libs and why (yes, again monorepa).
All the speeches are here (there are much more, there is still everything about ngrx, testing)
We remind you that we are always in search of cool developers ! VPN attached to vacancies ...
