#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

🅰️ Что нам готовит 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