Что нас ждет в 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

Typed Reactive Form RFC update

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

Подробнее об этом можно почитать тут
https://github.com/angular/angular/discussions/44513#discussioncomment-2038985

Standalone Components

Команда Angular начала вливать наработки по Standalone Components.

В этом PR разработчики принесли поддержку флага standalone и imports для компонента.

Слудующий PR реализует поддержку импорта одноиночных компонентов в NgModule. PR пока в статусе черновика.

Более подробно о предложении по Standelone Components и Optional NgModules мы писали ранее тут

https://blog.angular.io/angular-v14-is-now-available-391a6db736af

Вышел Angular 14
- Типизированные формы
- Standalone Components
- Возможность указать Title в роутах
- Улучшены сообщения об ошибках
- Несколько новых правил линта (научат вас правильно писать банан в коробке)
- Сообщения об ошибках теперь подгружаются когда нужно
- TypeScript 4.7 (с es2020)

И много всего другого интересного, надеюсь разберем на днях на стриме

http://goo.gle/angular-event

Сегодня по идее выпуск Angular 17. (Разработка v16 прекратилась 3 ноября)

Какой то интриги навели,
Из очевидного:
- Расскажут о том как могут работать с esbuild, vite, и за счет этого ускорили сборки
- Про новый синтаксис в шаблонах
- Про сигналы, и что их можно юзать полноценно (про change detection)
- Обновление всяких third part dependencies
Не очевидное:
- public api для генерации документации, с учетом JsDoc и ангуляровских декораторов
Невероятное:
- Сменят логотип?

накидывайте варианты в комментах

- новое лого
- новый сайт документации (https://angular.dev/)
- завершили таску с регидрацией (SSR)
- новый синтаксис Control Flow
- Input transform
- Esbuild для билда, webback deprecated в будущем

Просто взгляните на эти показатели, c новым control flow и без зоны ☄️

https://krausest.github.io/js-framework-benchmark/current.html