Что нас ждет в 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 и более детальное описание релиза.

Друзья! У меня есть отличные новости, в канале появился новый автор, 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

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

У 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 признан устаревшим и его поддержка будет удалена в следующих релизах

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

🅰️ Продолжение обзора 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 в  @InjectableInjectable({ 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

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

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

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

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

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

Сейчас идёт 2й день ng-conf и Кирилл Черкашин публикует у себя в канале интересное:
https://t.me/kirjs_ru

#1 - Keynote -  Как команда делает Angular более последовательным

1. Angular linker - имя проекта будет использовать для распостранения либ на Ivy
2. Сделают Language Service для IVY, тот, что сейчас использует много хаков
3. Strict mode, позволяющий делать более строгие проверки типов в шаблонах будет  в новых приложениях  включен по умолчанию
4. ng-build будет запукаться с —prod по умолчанию
5. Inline SASS - еще один шаг к Single File Components!
6. Более последовательные коды ошибок
7. Test harnesses - Позволяют упростить тестирование компонентов из Angular material, и спрятать детали имплементации.
8. Новый компонент - Angular image, говорят что для оптимизации произволительности

Наверно все бы хотели знать когда в Angular появятся современные быстрые кастомные сборщики. Ответа пока точного нет, но есть кое что забавное.

esbuild и swc добавили в devDependencies пока только для того чтобы исправить некоторые баги в IE11. Когда дропнут IE, не будет больше esbuild и swc.

Но! есть коммент в котором говорится что нет прямой завязки на webpack и babel. Но если будет, то не лучше ли юзать современные сборщики.

ps.
А еще бы компилятор под esbuild затащили бы.

Говоря про deprecate IE 11 в Angular 12, и удаление его в 13

Создали RFC, если есть что сказать то сюда:

https://github.com/angular/angular/issues/41840


Это конечно позволит убрать очень много специфичного кода, в самом фреймворке, что даст заметный буст

В Angular 12 View Engine будет по умолчанию заменён на Ivy

По статистике большинство разработчиков уже использует новый render pipeline Ivy. Для разработчиков переход должен стать незаметным, но имеется возможность использования View Engine (который получит статус depricated) при необходимости.

https://blog.angular.io/upcoming-improvements-to-angular-library-distribution-76c02f782aa4

C 12 версии Stylus будет deprecated.

А еще в Angular Material будет переход на sass модули @use вместо @import Если вы используете Angular Material то можете попробовать:
ng g @angular/material:themingApi

Зачем нужен use а не import можно почитать в статье

⚡️Встречайте релиз Angular 12 ✨

Выдержки из релиза уже были в канале, можно найти по тегу #angular12

Традиционный пост на medium:
https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49

⚡️Стал доступен Angular DevTools ✨

Фичи:
- построение дерева компонентов
- визуализация CD
- поддержка Angular 9+ с включенным Ivy


https://blog.angular.io/introducing-angular-devtools-2d59ff4cf62f

Уже все наверно знают что отец создатель Angular - Misko Hevery покинул Google 4 мая после 15 лет работы в нем. Ну вот так вот бывает, засиделся я бы даже сказал. Но внезапно я тут обнаружил что готовился к этому уходу еще давно, и начал разрабатывать свой проект в начале этого года, а то что он ушел в BuilderIO, ну так получилось, возможно.

Вопрос, и что же будет там делать человек с таким большим опытом разработки фреймворка? Да, новый фреймворк!

🥳 Qwik- новый фреймворк от создателя Angular. Пока есть только концепт, нигде ничего  не анонсировалось, все что удалось собрать по github'у расписал ниже.

Фреймворк с большим упором на Time to Interactive, возобновляемый ssr, lazy load.
Это значит что браузеру не нужно будет тратить время на bootstrap приложения, парсинг js, регидрация и прочая магия чтобы отобразить валидную страницу. Звучит как просто выплевывание наружу чистого html, казалось бы, интернет так появился, что тут нового. Да, все это DOM, DOM центральная часть фреймворка, а все остальное это атрибуты. Ну тут самые старые из вас скажут, да этож JQuery.

Вся суть:
- template - в jsx, забирать их через qrl('./path')
- render - jsx, не понятно, будет ли еще что либо
- никаких декораторов
- есть DI, provider на уровне каждого элемента
- собирать это все через bazel
- опять медленный terser,
- ssr - domino, express
- Entity state, component
- с querySelectorAll можно забрать любой компонент

Примеры:
Указывает на то что есть provider к элементу →

<div ::user="qrl_to_entity"> 

Input →

<div :user:some_user_id='{"fullName": "Joe Someone", "age": 20}'>

Output →

<some-component on:click="qrl_to_handler">

Binding →

<some-component bind:user:some_user_id="$user">

lazy load template

<div>
parent component
<child decl:template="./path_to_child_component_render_function" />
</div>

→ TODO app

Похоже что то на смесь AngularJs + React + Knockout, не понятно насколько это ок.
И вообще - Qwik is a different kind of framework. Напишите свое мнение в комментариях.

Github Qwik

Завтра, 24 июня в 21.00 состоится очередной NgRuAir #18.

Тема: Ревью Angular проекта, разбор архитектуры, best practices.

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

Основной стрим, и если пойдет все плохо перейдем на запасной стрим