🅰️ Что нам готовит Angular 13.

Пока изменений на первый взгляд не так уж и много, думаю добавят много при 13.1+2 как это было с 12. Я бы назвал что релиз Angular 13 это про окончательный дроп IE. Считаю справедливо =) тут в Вебне недавно был опрос про IE, который это только подтверждает.

Angular:

- Поддержка number separators:

<div>Total: \${{ 1_000_000 * multiplier }}</div>

- Form status протипизировали
- Forms: Добавили методы hasValidators, addValidators, и removeValidators
log

Angular/CLI:
- webpack-dev-server upgrade в 4 версию
- deprecate deployUrl
- esbuild для оптимизации css глобальных стилей
- <script type=module во все скрипты, так как поддерживать IE больше нет необходимости, ранее был defer
- так как IE все, удалили сборку под es5, и из полифилов убрали
- extractCss убрали флаг и удалили не нужный loader, теперь css всегда extract
- inline google шрифтов тоже удалили в woff, (ну из за IE)
- удалены: node-sass, tslint
log

Angular/components:

- datepicker: добавлены material-date-fns-adapter и material-luxon-adapter, ранее был только moment-adapter
- CdkOverlay: расширение, поддержка больше типов, x,y
- cdk/table: добавили output event когда таблица отрендерена,
- virtualScroll: добавили флаг appendOnly, за счет чего не будут удалятся элементы из поля зрения, при необходимости.
- dialog: autofocus к определенному field

ну и много fix, которых долго ждали.
log

Началось, ссылки на стрим

Day 1 stream link: https://youtu.be/oG2QbFquraA
Day 2 stream link: https://youtu.be/hlGOaGDsWKg

🌳 Улучшение Angular templates

Недавно собрали различные предложения по улучшению Angular templates. В ближайшем митинге их рассмотрят. Ниже я постарался собрать наиболее интересные предложения, если вы заинтересованы во внедрении этих фич думаю стоит зайти и проголосовать за них, или же написать отзывы в комменты.

К сведению, есть доклад как рассматривают различные PR в Angular Team: Angular Connect YouTube

Деструктуризация различных типов объектов: 38807

<div *ngFor="let { key as country, value as poi } of countryPoiMap | keyvalue">
   <div>{{ country.name }}</div>
   <div>{{ poi.name }}</div>
</div>

Оператор in в шаблонах 38560

<div *ngIf="'a' in item">
  I'm expecting item is no longer of type A | B, but only A
  {{item.a}}
</div>

Совместимость с ES Optional Chaining 34385
Как вы знаете эта фича в шаблонах, появилась задолго до того как фича была в спеке.
Например выражение a?.b в Angular означает null == a ? null : a.b по спеке же a == null ? undefined : a.b , ну и различные изменения в этом духе.


Внедрение директивы *ngLet 15280
Фичу ждем уже 5й год, посмотрим. Напомню, ее реализация есть в различных либах, таких как ngxs, rx-angular/templates, ngxf

<div *ngLet="userStream|async as user">...</div>

Input Output Spreads 14545

html
<my-component [prop1]="prop1" {...otherInputs} ></my-component>

Поддержка стрелочных функции 14129
Сомнительное предложение как по мне. Согласен с утверждением в коментах.

<select [compareWith]="(a, b) => a.id == b.id" [(ngModel)]="selectedCountries"> ...

Деструктуризация значений из *ngIf as 27555

<div *ngIf="thingAndOther$ | async as {thing, other}">

Cold event streams 13248
Предложение настолько устарело, что синтаксис компонентов еще с Angular 2 beta. Суть предложения, создать EventStream только в момент подписки, особенно ок для Output, и + не будет лишний раз дергать CD. В целом похож на одно из предложении из rx-angular/templates Так же в комментах указали на одну либу, пример:

<button (*click)="clicks$; $event = 'custom payload'">Click Me</button>

@Component({...})
export class MyComponent implements OnInit {
  @ObservableEvent()
  clicks$: Observable<any>;

  ngOnInit() {
    // we can either manually subscribe or use the async pipe
    this.clicks$.subscribe(console.log);
  }
}

Полный список предложений: 43485

Не могу не поделиться =)

SpaceX используют Angular об этом они написали в блоге, история про Knockout -> AngularJs -> Angular

В NASA же решили перейти на Vue после AngularJs, хотя я до последнего думал что уйдут на Angular. Тут даже есть заметка почему так.

Ранее писал про публичный релиз angular-canvas.

Спустя год решил написать статью про его устройство, и проведенный вместе c ним год в проде:

https://angular.fun/post/2021-10-01-angular-canvas/

⚡️Optional NgModule
Опубликовали вариант как будет выглядеть standalone components, ну и в целом для кого, и какие бенефиты от этого. Главное: не сломает существующие решения.

Этому предложению уже больше года, писали об этом тут и тут. Но в последние месяцы это набирает обороты, ведь уже появилось много RFC, которые зависят от Optional NgModule.

На текущей момент проблемой является гарантирование провайдеров в DI для standalone. На картинке решение проблемы.

Пример:

@Component({
selector: 'standalone-component',
standalone: true,
imports: [FormsModule, CommonModule, OtherStandaloneComponent],
template: `
<other-component *ngIf="name=='rustam'"></other-component><input [(ngModel)]="name" /> (name = {{ name }})
`
})
export class StandaloneComponent {
name = 'rustam';
}


Ну и чтобы уменьшить бандлы таких компонентов предлагают разбить тот же CommonModule на подмодули, например так: NgIf, NgFor

Ну и в конце примерчики
ng-standalone
---
👉 Читать публикацию. Занимаетельное чтиво на час.

🎥 Через 30 мин начнется выпуск State of Angular. Будет Angular Team

Должно быть про предстоящий релиз, инициативы сообщества, и учебных курсах.

https://youtu.be/b8mcnjK_kq4

👀 Недавно в твиттере Angular спросили, какой доклад вам понравился за последний год. Из ответов могу выделить следующие доклады:

RxJS Patterns in Angular | Deborah Kurata
в докладе показаны частые кейсы которые приходится решать в Angular проектах, и то как использовние RxJs поможет в этом.

Standalone components in the world of Angular Ivy - Eliran Eliassy
Как делать standalone компоненты в текущей версии, до того как имплементирует его core.

Crafting Bespoke PWA experiences with Angular | Mark Thompson
Просто интересная подача материала =)

---
напишите в коментариях какой доклад/статья вам понравился за последний год

🅰️ Говорят что сегодня выйдет Angular 13

Заметки были тут ну или changelog

Вышел Angular v13 🥳

Кратко:
- быстрее, лучше =)

Подробнее: goo.gle/angular-v13

Что нас ждет в Angular 14 ?

- Standalone components
- Быстрый ng serve за счет typecheck в background + поставки только ESM, примерно как Vite
- Типизированные формы (не факт, этих PR очень много), ну а если вам срочно надо, можно поюзать ngneat/reactive-forms

👉 Подробнее

💡Что нужно чтобы написать свой компилятор для Angular:
1. лексер, можно брать любой html подобный.
2. парсер, сделать самому чтобы вырабатывал AST, подобно (anguar/compiler - astexplorer.net)
3. render свой, в терминах angular - render3
4. wrap tsc, особенно в той части где Decorators
5. print -> js

Но это конечно только вершина того что есть в compiler, дорабатывающего его 10x инженерами уже в течении 5ти лет.

ngc - AOT compiler, ну и общее наименование компилятора
ngcc - компилятор до ivy либ, должен был в ng 13 уйти
ngtsc - wrapper над tsc

👉Подробнее про Архитектуру Ng Compiler


🤖Решил я тут на выходных написать свой компилятор Angular, на волне с хайпом esbuild на Go, ну чтоб значительно убыстрить сборки Angular.

Начал конечно без конкретного погружения в esbuild, надеясь что его API позволит сделать желаемое.

Пройдя по верхам 1го и 2го пункта, написав свою реализацию на Go, пропустив 3й перешел на 4й.

Esbuild сам по себе быстрый сборщик, но его api не под каждого, и расширять этот api автор явно не планиреут. К тому же сам парсер esbuild может пропускать некоторые вещи es, если они не нужны в плане bundler.
Итог: Esbuild умеет многое и быстро, но только если у вас проект схож с автором. Но если когда нибудь команда angular отвяжет свою сборку напрямую от tsc, то можно будет юзать различные сборкщики.

👻 Парсер для примера я опубликовал ng-template-parser , хотя в нем только базовые вещи, он работает в 26раз быстрее чем @angular/compiler/parseTemplate, в комментах расскажу мои мысли почему второй медленный. Поставте star если проект вам интересен =) и тогда я его доработаю, и можно будет его заюзать например в линтерах.

----
Следующий этап будет написание под swc и на Rust. SWC такой же быстрый, имеет поддержку таких проектов как Deno, Next.js, Parcel, strapi. С дружелюбным API, и открытым к разговору автором.

говорят ngUpdate -> v13 делает сборку в 2 раза быстрее и бандл чуть меньше

пруфы

Roadmap для Nx 14

По Angular
- Angular 13 + NgRx 13 Support
- TailwindCSS Support
- migrating from Angular CLI (multiple projects)
- SCAM generator for Standalone Components
- "create-modern-angular-app" пакет для создания минимального окржения Angular

Буквально через час в 20.00 мск мы соберемся на очередной NgRuAir #19

Тема: Angular 13 обзор

В этом выпуске мы обсудим фичи Angular 13, и фичи предстоящего Angular 14, а так же заглянем в обновленный недавно roadmap

YouTube

Продожение приключений с ng template parser 👻

Оставалось реализовать ng expression. Выражения достаточно сложные потому что в Angular можно писать очень странные штуки вида:

{{val === true ? 1+1 : valie > 1 ? 1+1 : method()["Oups"][1][2] - method2(33) | myPipe:'lol'}}

Перед тем как реализовать все с нуля я вспомнил что есть такая замечательная штука как SimplePEG. Которая позволяет описать PEG грамматики и сделать на основе него парсер. Этим легким путем (как казалось в начале) я и пошел.
Составлять грамматики в PEG очень просто и интуитивно. Поэтому за вечер получил ng expression.

Так как ng template parser у меня написан на Go, требовалась поддержка SimplePEG тоже на Go. Ну я и написал его SimplePEG/Go
Адаптация его под другие языки не так сложна, даже для строго типизированных языков.
Что такое SimplePEG - можете посмотреть в докладе его создателя Алексея Охрименко

---
⏱ Время benchmark =)

Как оказалось моя реализация expression parse не такая уж и быстрая, слишком сложный получился grammar. Вдобавок моя реализация SimplePEG на Go имеет узкое горло в виде парсинга regex подобных выражений, который в свою очередь опирается на std regex go. И как оказалось Gо в этом плане предпоследний по скорости среди всех языков: regex-benchmark

Поэтому ng-template-parser получился такой же по скорости как и angular/compiler/parseTemplate
---

🔜 Что дальше?
- написать свой парсер псевдо regex (?)
- написать expression parser на LR/GLR грамматиках
- перейти наконец то на swc и rust =)

Мы долго ждали и кажется это наконец-то случится!

Вероятнее всего Angular 14 будет включать в себя доработку, которая подарит нам типизированные формы.

Но что бы покрыть как можно больше кейсов и оправдать ожидания сообщества команда Angular прямо сейчас собирает обратную связь и для этого представила RFC с описанием прототипа новых форм. Мы еще можем повлиять на конечный результат!

https://github.com/angular/angular/discussions/44513

Думаю начать постить даиджест недели по ПН.

1. Как повлияет SCAM на архитектуру Angular приложений
Manfred Steyer начал выпуск серии статей про SCAM.

В целом движется к тому чтобы работало как обычные es import. Жду когда подобные изменения затронут Angular Elements и будет малый рантайм.


2. В nx появился @nrwl/js специально для проектов только на js/ts. Из интересного:
- можно сразу установить в качестве tsc -> swc
- можно собрать секцию scripts в package.json из executors в project.json

#ngweekly

1. AngularJS - End of life
В 2018 году был поставлен на 3 года в статус Long Term Support. В 2020г из за COVID, был продлен до 31.12.2021. Жизненный цикл крупного фреймворка длился 12лет. issue останутся открытыми.

2. Состояние CSS в Angular - статья
Краткое описание изменении в CSS за последние 2 релиза.

3. Enterprise Angular - eBook
Manfred обновил свою книгу. Материал для тех у кого заведен или интересен ModuleFederation, с 87 страницы решение возникающих проблем. Бонусом добавлен раздел про nx generation tools (чуть больше чем официальная дока).

#ngweekly

Теперь можно не только почитать RFC по типизированным формам, но и попробовать!

И это можно сделать несколькими способами:

1. Прямо в браузере. Ловите ссылку на проект в StackBlitz

2. Локально. Для этого склонируйте вот этот репозиторий и запустите как обычно Angular приложение.

3. В своем проекте. Для этого нужно обновить фреймворк до последних next-версий с помощью CLI

ng update @angular/core --next

Проверить, что все angular-пакеты имеют суфикс next в версии, подменить версию пакета @angular/forms на https://1097395-24195339-gh.circle-artifacts.com/0/angular/forms-pr43834-a245792aa2.tgz и запустить миграцию.

ng update @angular/core --migrate-only migration-v14-typed-forms

Более подробные инструкции можно найти все в том же RFC

ESbuild под Angular.

Эксперементальный проект, в котором затащили ng как плагин в esbuild.

Из фич - быстрый холодный старт, и только для dev режима, так как компилятор затаскивается в рантайм.
Интересно реализован "выборка декораторов", потому как сам esbuild таких фич не предоставляет.

При пересборке проекта разницы между angular/cli на своей машине не заметил.

https://github.com/cherryApp/ngc-esbuild