Решил что тут снова будут обзоры статей, видео, подкастов и мои коментарии к ним.

Статья: Nx: On Bazel Support

Computation Caching

Основной фишкой внедрения Bazel в Nx была реализация распределенной сборки, но эта задача была полностью решена на стороне Nx, поэтому Bazel в Nx не будет.

Bazel and Angular

Действительно после ухода Alex Eagle из Google, больше нет никого кто бы работал с rules_nodejs из Google, Angular в частности, и поэтому как считает Victor Savkin, Bazel team не будут уделять большое внимание на частные проблемы при интеграции с Angular. Считаю что это не так, поскольку Bazel(rules_nodejs) для сборки используется в самом Angular, и других крупных проектах: TensorflowJs, Selenium, NgRX, и тд.

Кстати, недавно появился rules_python.

Bazel or Nx

Bazel хорошая технология, но плохо работает с js тулами. В статье много отсылок к тому что с Nx можно собирать что угодно, и сделать какой угодно сборщик зная в основном только TS.

Что насчет поддержки различных сборок?

В настоящее время каких либо планов чтобы отклониться у Angular team от webpack нет, и реализуется поддержка новой версии. Но тем не менее есть поддержка rollup от сообщества Angular Ivy, rollup-plugin-ngc (Есть и старший брат - angular2-rollup , но проект сейчас не поддерживается, для примера реализации собственного сборщика ок)

У rollup-plugin-ngc под капотом:

import { createProgram, CompilerHost  } from '@angular/compiler-cli'

Конечно, этот плагин практически ничего не дает, для крупных приложений, но для Angular Elements почему бы нет? Тут даже пример есть

Есть у некоторых идеи еще попробовать сделать сборщик на основе vite, ориентирован прежде всего на vue и react. Вроде обещает быть быстрым, который в свою очередь соревнуется с Snowpack.

Напишите в комментариях, довольны ли временем сборки вашего проекта?
(Если нет, то можете следить за этим issue)

Для тех у кого пересборка serve занимает значительное время, Netanel Basal недавно представил новую утилиту - inspector. Возможность изменения inputs, outputs property в специальном окне.

Features
- Inspect Angular components on the fly
- Change component properties without touching the code
- Simulate Angular events
- See the results in realtime

Для тех кому нужно быстро войти и разобраться в Angular, возможно подойдет эта шпаргалка -

Angular Cheat Sheet

Рад представить вам еще одну свою поделку на Angular:

🎨 Angular Canvas Renderer

Может:

- Кастомные canvas элементы и компоненты
- Перерисовка в одном canvas контексте
- Поддержка inputs and outputs, attributes, styles
- EmulatedEncapsulation по умолчанию
- И самое главное: быстрая миграция вашего canvas кода на компонентный подход

Ну и чтобы проверить реализацию, была написана мини игрушка, исключительно рисованием на canvas. Демо

В демке примерно такой template

<canvas>
  <background></background>
  <cactus></cactus>
</canvas>

<canvas>
  <cat
    #catElement
    [x]="x"
    [y]="y"
    (x)="updateUnitX($event)"
  ></cat>
</canvas>

⭐ → https://github.com/irustm/angular-canvas

<script>

- если он находится в заголовке
- если он не имеет аттрибут defer или async

<link rel="stylesheet">

- если нет атрибута disabled
- не имеет атрибута media соответствующий устройству пользователя

<link rel="stylesheet" href="styles.css">

<link rel="stylesheet" href="styles.css" media="only x" onload="this.media='all'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Устранение ресурсов, блокирующих рендеринг в Angular

Влили пункт по inline fonts, будет доступно по умолчанию с Angular CLI 11

Ну а если вам нужно прямо сейчас, то смело делайте руками

https://github.com/angular/angular-cli/commit/871dd6a434fdd9674905bde307b5ad79d5d59603

Angular Push Pipe - новый способ оптимизации работы Angular приложения без работы zone.js c включенным в проект zone.js
Обзор 2 статей.

Как вы знаете вся магия работы Angular работает исключительно за счет zone.js. (Для тех кто не в курсе, тут есть замечательное объяснение на русском - zone js от а до я). В статье  рассказывается за счет чего работает тот же async pipe, и как собственно работает changeDetection. Приводится много аргументов того что async pipe будет недостаточно производительным в приложениях, где идет большой объем данных, за счет того что этот pipe pure: false и сам внутри смотрит latestValue и вызывая changeDetectionRef.markForCheck() отмечая связанный компонент как dirty (следующее обнаружение изменения zone.js запустит рендеринг). Так же приводит факт того что об этом уже неоднократно говорили и выступали на разных конфах Victor Savkin, Rob Wormald и другие ex-Angular team. (Тут же вопрос у меня, почему бы не занести это в angular/core если все знали, не понятно, Upd - в Angular team не хотят вносить доп функционал из либ [rxjs]).

Michael Hladky предлагает использовать detectChanges, для немедленного реагирования, и позволяя тем самым исключить работу с zone.js.

Пример реализации этого pipe - push

@Component({
selector: 'app-display',
template: `
  {{observable$ | push}}
`
})
export class DisplayComponent {
  observable$ = of(1, 2, 3);
}

Но в данном случае этот код запустит detectChanges аж 3 раза, что наоборот увеличит нагрузку. Решение этой проблемы с помощью pipe функции  coalesceWith(animationframes)  которая пересылает последнее значение один раз в кадре анимации.

Много слов выше, просто стоит попробовать:
npm i @rx-angular/template
или прочитать серию статаей от Michael Hladky.

Ну и возможно будет интересно взглянуть на внутренности, самого rx-angular, ведь все они рассчитаны на улучшение производительности.

В продолжение Angular Push Pipe

rx-angular/templates: rxLet

Директива *rxLet, по сути такой же как и *ngrxLet но с некоторым отличием. Дополнительные каналы RxJS, next, error, complete и бонусом suspense когда еще ничего не определено.

<ng-container *rxLet="hero$; let hero; rxSuspense: suspenseView; rxError: errorView; rxComplete: completeView">
        {{hero.name}}
<ng-container>
<ng-template #suspenseView>Loading...</ng-template>
<ng-template #errorView>Error!</ng-template>
<ng-template #completeView>Complete.</ng-template>

rx-angular/templates: unpath

UnpatchEventsDirective - для частичной деактивации NgZone, а также избавления от ненужных рендеров через патчи addEventListener зоной. Его можно использовать с любым элементом, к которым вы применяете привязки событий.

Проблемный код:

<div (mousemove)="doStuff($event)">Hover me</div>

Проблема в том, что каждое событие, зарегистрированное через (), например (mousemove) (или custom @Output ()) помечает компонент и всех его предков как dirty и повторно перерисовывает все дерево компонентов. Таким образом, даже если ваш eventListener вообще не связан с какими-либо изменениями, ваше приложение повторно перерендерит все дерево компонентов. Это может привести к очень плохому взаимодействию с пользователем, особенно если вы работаете с часто запускаемыми событиями, такими как mousemove.

Директива unpatch решает эту проблему удобным способом:
<button [unpatch] (click)="triggerSomeMethod($event)">click me</button>
<button
 [unpatch]="['mousemove']"
 (mousemove)="doStuff2($event)"
 (click)="doStuff($event)"
>
 click or hover me
</button>

rx-angular/templates: render strategy

Дополнительный property - strategy. Есть в push pipe и rxLet directive.

RenderStrategies можно рассматривать как основу уровня оптимизации производительности.

Local Strategy - эта стратегия рендерит текущий компонент и все его дочерние элементы, которые находятся на пути, отмеченном как dirty или имеющем компоненты с ChangeDetectionStrategy.Default На первый взгляд может показаться, что это тоже самое что вызов detectChanges, но тут он имеет отличия, а именно группировку событий по компоненту по которому был вызван change detection.

Global Strategy - markForCheck на стероидах, может работать без зоны.

Noop - Ничего не детектит и не отрисовывает, может быть полезен для отладки, и в разных оптимизациях.

Native - markForCheck который отрендерит только в следующем Application.tick, т.е по сути async pipe.

Pluggable Angular Architecture with Webpack 5 Module Federation

2 года назад я рассказывал на одном из митапов Angular Moscow, про плагинную архитектуру (youtube) как это было во времена AngularJS, и как должно было быть круто с приходом Angular IVY. И вот этот день можно сказать почти настал.

https://github.com/alexzuza/angular-plugin-architecture-with-module-federation

Реализация плагинной архитектуры с Angular 11 станет еще более удобной, с использованием фич Webpack 5. В этом примере Alexey Zuev показывает как это можно будет применить.

В основе как всегда есть 3 слоя:
- config плагинов
- loader service
- render

Но прежде чем загрузить и показать что то, нужно создать что то.
Для начала необходимо добавить в angular.json конфиг вебака
"extraWebpackConfig": "webpack.config.js"

И разметить shared области, чтобы не дублировать код angular/core и остального в плагинах.

new ModuleFederationPlugin({
      shared: {
        '@angular/core': {
          singleton: true,
        },
// и тд

Для создания плагинов будем использовать другой webpack.config и другой проект, в рамках angular library.
В данном случае 2 плагина будут жить в одном бандле.

ne

w ModuleFederationPlugin({
      name: 'plugins',
      library: { type: 'var', name: 'plugins' },
      filename: 'remoteEntry.js',
      exposes: {
        './Plugin1': './projects/plugins/src/app/plugin1/plugin1.component.ts',
        './Plugin2': './projects/plugins/src/app/plugin2/plugin2.component.ts'
      },
      shared: {
        '@angular/core': {
          singleton: true,

Ну и сам loader service разместившийся в main project (plugin-loader.service.ts) :

asyn

c load<T>(pluginName): Promise<Type<T>> {
    const { name, mfEntry, exposedModule, ngModuleName } = config[pluginName];
    await loadRemoteEntry(mfEntry);
    await __webpack_init_sharing__('default');
    const container = window[name] as Container;

    // Initialize the container, it may provide shared modules
    await container.init(__webpack_share_scopes__.default);
    const factory = await container.get(exposedModule);
    const Module = factory();

    return Module[ngModuleName];
  }

Cо

здание компонента после загрузки (app.component.ts):
loadPlugin(pluginName: string): void {
   this.pluginLoader.load(pluginName).then((component: Type<any>) => {
     const compFactory = this.factoryResolver.resolveComponentFactory(
       component
     );
     this.vcRef.createComponent(compFactory);
   });
 }

🥳А вот и релиз Angular 11🥳

https://github.com/angular/angular/blob/master/CHANGELOG.md

Традиционный пост по релизу: https://blog.angular.io/version-11-of-angular-now-available-74721b7952f7

В пятницу так же будет ngParty вместе с Angular Team
https://mobile.twitter.com/angular/status/1326784437200236544

Присоеденяйтес к ngParty вместе с Angular Team прямо сейчас:
https://www.youtube.com/watch?v=Oi-ucZeJBjs&feature=youtu.be

На страницах Angular Docs неделю назад появилась страница со всеми примерами показанные в самих доках, включая Tour of Heroes

https://angular.io/guide/example-apps-list

После долгого перерыва, мы вновь соберем ngRuAir. В этот раз будет тема про Angular 11.

Сегодня, 25 ноября, live в 20.00 мск

https://www.youtube.com/watch?v=J98fHG0Z4wQ

📍 Интересное наблюдение.

Тут в issue про уменьшение времени сборки в angular, провели эксперимент на новом arm64, macbook m1.

Результаты:
node.js 14 x86, macbook intel i7 2,2 Ghz, turboboost off - 8.9s
node.js 14 x86, macbook intel i7 2,2 Ghz, turboboost on - 6.1s
node.js 14 x86, macbook m1 - rosetta 2 - 6.0s
node.js 15 arm64, macbook m1 - native - 2.9s

Но не стоит бежать в apple store за новым macbook, эксперимент был проведен на довольно простом проекте, на более серьезном webpack упал.

Завтра, 23 декабря в 20.00 мск пройдет очередной

NgRuAir #16

⚡️Тема этого выпуска:
Микрофронтенды: Module Federation в Angular. Специальный гость: Dmitriy Shekhovtsov

YouTube

Топ 10 ошибок совершаемых в Angular было опубликовано на страницах angular.docs

https://angular.io/errors/

Вышел Angular v11.1

Из твита:
- Improved error messages
- Preview of Ivy library distribution
- Experimental native Ivy support in the language service
- Trusted type support
- Support for TypeScript 4.1

Еще немного из changelog
- localize, ARB формат (JSON подобный)
- partial compilation components, directives
- ngZoneRunCoalescing в дополнение к ngZoneEventCoalescing
- улучшения по performance

что то много всего, поэтому стоит немедленно попробовать 11.1

> ng update всем!