⚡️Встречайте релиз 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

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

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