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

Сейчас идёт 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


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

#angular12

В 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 можно почитать в статье

#angular12

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

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

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

Уже все наверно знают что отец создатель 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 в эти проекты.

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

Появился драфт, который приближает нас к опциональным NgModule. Следим и ждем публичный RFC!

https://github.com/angular/angular/pull/42831#issue-688255145

Вчера, Alex Rickabaugh, автор этого PR, отвечал на вопросы по standalone component, и рассказал какие есть сложности с внедрением этой фичи: YouTube

Это видео появилось благодаря активностям в Angular Nation - в нем действительно много контента.

16-17 сентября пройдет бесплатный nx conf,
CFP на Lighintg Talk открыт

🧮 ng-app-counter

✔️ Года 2 назад делал считыватель Angular проекта, и он даже умел показывать счетчик компонентов из node_modules до Ivy, теперь уже как подметили в комментах в тви, польза сомнительна как и у compodoc. Плюс теперь в ng-app-counter чтобы добиться вывода количество роутов нужно постараться в своем проекте, юзается Guess.js (alpha).

✔️ Год назад внедрил сбор анонимной статы для тех кто желает его опубликовать. И вот теперь настал момент публикации =)

На графике распределение по проектам классы/angular сущности.

Github/ng-app-counter

Наш друг и ведущий онлайн видеоподкаста NgRuAir, Глеб Михеев является еще и руководителем ПК FrontendConf, принес нам промик на эту конфу, дарят 7% по ключу FR2021_ngRuAir

👉 Cамо событие пройдет в Москве 11, 12 октября.

Тематики:
- Архитектура и организация кодовой базы
- The Frontend Operations Engineer
- Хорошие практики современного фронтенда
- Будущее, перспективы развития
и тд

Подробнее по ссылке https://clck.ru/WiLkp

🌿 Плоды Angular Ivy начинают радовать. Еще больше динамики!

В настоящее время чтобы реализовать динамические компоненты в Angular есть 2 пути:
- Используя JIT Compiler, т.е. из любой строки создать компонент. Имеет в себе много недостатков, поэтому практически никто таким не занимается на проде.
- Используя ViewContainerRef, и ему подобные API, которая на самом деле не предоставляет достаточной гибкости динамического создания представлений из смеси статического HTML.

И вот появилось предложение для создания таких компонент, Imperative View & Template Composition APIs.

Пример, как это может быть


import {createView, html, component, directive, text, binding, template} from "@angular/core/compose";
import {MyYellowComponent} "./myYellow.component";

const myCustomView = await createMyCustomView({userName: 'Kahless'});

async function createMyCustomView(myContext) {
return createView([
html("<div>some static html,</div>"),
component(MyYellowComponent, { projection: [
text("html string followed by a binding"),

// {{ userName }}
binding(() => myContext.userName),
...
}


На самом деле, это скорее будет скрыто под каким либо wrapper, никому не охота писать в стиле Incremental Dom, я думаю. Возможности конечно радуют.

p.s. Такое можно уже делать, используя инструкции Ivy, через Θ, но никто ничего не гарантирует =)

3 сентября в 19:00 пройдет Angular Meetup в Нижнем Новгороде. Будет пара докладов про Taiga UI и Module Federation, пара GDE и онлайн-трансляция.

Говорят, что если зарегаться, то получишь ссылку на трансляцию, но мы и так ее знаем:)
https://youtu.be/SWsCBioLDQI