Появился драфт, который приближает нас к опциональным 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

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

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