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 всем!

Что нас ждет в Angular 12. Заметки из последних changelog и плана релиза.

✨ Forms:

- Улучшение min, max валидаторов, ломает html min, max аттрибуты в input, теперь Form начнет триггерить только если в input накинули formControl
- Опция emitEvent добавлена в AbstractControl, поэтому поломаются

FormGroup.addControl, FormGroup.removeControl, FormGroup.setControl, FormArray.push, FormArray.insert, FormArray.removeAt, FormArray.setControl, FormArray.clear

но миграция ng update их устранит. Если только вы не делали своих наследников от AbstractControl и далее.

✨Http:

- Наконец то затипизировали http статусы и сделали их читаемыми
- Зафиксили и добавили request timeout, до 12 версии видимо никого это не беспокоило, хотя это еще добавили в path версию 11.

✨language-service:

- 5 улучшений, интеграция в vscode будет работать немного лучше в части templates.

✨common:

- ICU для DatePipe

Пока все, будем ждать обновленный roadmap и более детальное описание релиза.

#angular12

Друзья! У меня есть отличные новости, в канале появился новый автор, Angular Fanatic

Igor Katsuba - frontend-разработчик в Тинькофф, автор в inDepth.dev, open-source контрибьютор

Angular CLI тем временем тоже идет к 12 версии. Уже сейчас доступна предрелизная версия 12.0.0-next.1

Из интересного:

- Поддержки npm 7 пока НЕ будет. Команда пытается интегрироваться, но фичу блокируют баги самого npm (один, два)
- Добавлена поддержка Webpack 5 (привет, Module Federation!)
- Strict mode при создании приложения или воркспейса по умолчанию включен

Breaking Changes

- Минимально-поддерживаемая версия Node.js — 12.13
- Удалена поддержка Zone.js 0.10
- Минимально-поддерживаемая версия Karma — 6.0.0

Будем наблюдать что будет дальше!

#angular12

У single-spa, похоже появился Angular ментейнер, буквально в ноябре они писали что ищут.

single-spa - Это фреймворк для объединения нескольких микрофронтендов в приложении, со своим роутером. Поддерживает множество фреймворков, и даже SSR.

Глубокое погружение во внутреннее устройство Ivy

Команда Angular в своем блоге рассказывает об оптимизации и внутренней работе движка со структурами данных

https://blog.angular.io/ivys-internal-data-structures-f410509c7480

Продолжаем обозревать грядущий Angular 12 и уже вышедшие next-версии фреймворка.

Из интересного

- APP_INITIALIZER научили работать с Observable
- Контракт router-outlet стал публичным, что упростит создание его кастомных имплементаций
- Добавлена поддержка отключения анимации через BrowserAnimationsModule.withConfig
- number и boolean теперь разрешены в качестве http-параметров
- Методы onPopState и onHashChange класса PlatformLocation теперь возвращают функцию, которую можно вызвать для удаления подписки. Благодаря этому исправлено создание лишних подписок при повторном бутстрапинге приложения.

Angular CLI не отстает:

- Объявлена поддержка npm 7, а если быть точнее то npm@7.5.6 и выше
- Флаг inlineCritical установлен в true по умолчанию
- Имплементирован новое свойство defaultConfiguration в angular.json. Это может избавить от передачи лишних флагов при сборке проекта. Например, если указать "defaultConfiguration": "production" , то продуктовую сборку можно запустить уже без флага --prod
- В свою очередь флаг --prod признан устаревшим. Вместо него следует использовать флаг --configuration
- IE 11 признан устаревшим и его поддержка будет удалена в следующих релизах

На этом пока все. Наблюдаем дальше.

#angular12

🅰️ Продолжение обзора Angular v 12 next✨

- common/http: Появился класс HttpContext и HttpContextToken для запросов HttpClient, 4 года ждали эту фичу. Например теперь можно будет дополнительно обработать запрос в interceptor, согласно заданному контексту. Пример

- common: Удалены не используемые методы в DomAdapter, и если у вас были какие либо специфичные вещи связанные с DominoAdapter то кажется у вас будут проблемы с SSR, например у меня это в angular_deno

- compiler: :host-context c нормальным multiple наконец то таки, влита уже в 11, как бага

- platform-browser: XhrFactory @angular/common/http мигрировал в @angular/common. Необходимо чтобы можно было настроить токен XhrFactory на уровне платформы, и не тянуть зависимости, а в browser только BrowserXhr Автоматическая миграция должна пофиксить.

- compiler: пересборка JIT должна стать чуть быстрее за счет переиспользуемых компонентов

- common: historyGo в Location service, забавно что принимает number, то есть можно уйти как на 2 шага назад historyGo(-2) так и вперед historyGo(10), но если не сможет, то просто не сработает без всякой ошибки
- доступна опция forwardRef в @Injectable({ providedIn: forwardRef(() => MyModule) })

- compiler: появился хук transformResource, а это означает что можно писать свои препроцессоры для стилей, с удобным интерфейсом ResourceHostContext, для меня это означает что можно подрубить легко sass для angular_deno

- compiler: nullish coalescing доступна в Angular templates: {{ a ?? b ?? c}}

- typescript 4.2

-----------
BREAKING

- core: Флаг emitDistinctChangesOnly по умолчанию будет выставлен false в ContentChildren, ViewChildren, а так же будет помечен как deprecated. Неободим так как QueryList.changes вызывался лишний раз.

- animation fix: очистка dom элементов после разрушения AnimationEngine, а это в основном когда root удален, по факту может повлиять на ваши тесты, если вы после destroy проверяете dom элемент

- core: больше нет поддержки node v10, перешли на использование node v14, минималка v12.14.1

- ng_packagr: больше не генерит минифицированный umd

#angular12

🅰️🆖 В ожидании следующей версии Angular 12, мы решили сегодня провести очередной NgRuAir #17

Фич так много, так что не пропустите. Сегодня, 21 апреля, 20.00 мск

https://www.youtube.com/watch?v=6hndkY0WdIE

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

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

#angular12