После двух лет разработки, появился вот такой замечательный портал, соцсеть, по Angular.

Уже сейчас вы там можете найти себе бесплатные курсы по Angular, и более плотно пообщаться с Angular GDE, Coloborator и Core team.

А так же подключиться онлайн к различным митапам и воркшопам.

А еще мы там завели специальный уголок для подкаста ngRuAir. Обязательно присоединяйтесь, чтобы быть в курсе событий, ведь теперь круг докладчиков ngRuAir станет гораздо больше.

https://www.angularnation.net/

Внимание, после регистрации нужно дождаться апрува.

Сегодня будет релиз Deno.

Опубликовал статью, обзор.
https://habr.com/ru/post/501480/

Завел еще один канал чтобы публиковать все про Deno:
DenoFanatic

Буквально менее чем через 2 часа начнется бесплатная онлайн конференция ngVikings

Первый день (Видео)
Второй день (Видео)

Обязательно регистрируйтесь чтобы поучаствовать в живую, позадавать вопросы. Если еще не успели.

Сегодня начинается 76я встреча TC39 и Серёжа как всегда будет вещать про работу TC39 в своем канале https://t.me/juliarderity .

Вам возможно будет интересна судьба async-context аля zone.js.

Ведь ранее это предложение было заброшено хотя Misko Hevery и Jia Li проявляли активный интерес. Domenic прекратил свое участие в TC39

Кстати, в прошлом году zone.js переехали окончательно в Angular, как отдельный пакет конечно же.

Уже через несколько минут начинается Angular Minsk.

Сегодня в программе:

🤖 Автоматизация разработки с Angular Schematics | Yanis Seilis
(Все про ng add, ng update, etc и использование ng schematics для других фреймворков)

⏱ Ангулар может сожрать ваше время | Oleksandr Poshtaruk
(Angular tips and tricks)

> Трансляция

На прошлой неделе команда Angular объявила что начнет, наконец то, заниматься типизацией форм. И вот буквально вчера все предложения по типизации были объедены в отдельный milestone
Каждое предложение будут рассматривать отдельно, сроков конечно же не дали.

Изменения затронут: ControlValueAccessor, AbstractControl, formState и т.д.

🎉 Состоялся релиз Angular 10.0.0

- Updating to Angular version 10
- Deprecated APIs and features

И традиционный пост от Stephen Fluin в Angular blog:
Version 10 of Angular Now Available

ng update @angular/core @angular/cli

В Deno сообществе почему то решили что для SSR удобнее всего брать React, и конечно внедрили JSX как часть Deno.core. И даже появились фреймворки на этой основе. Angular остался немного в сторонке в очередной раз =)

Поэтому решил совместить deno + angular: Angular Deno Renderer Engine.
Сейчас он больше готов для использования как любой другой template engine, например как тот же Handlebars, ejs и тд.

Сравнение Angular Universal на NodeJS и Deno по времени рендеринга (хотя это практически ничего и не значит):

Deno 1.1.2 Angular JIT: 3-8ms
Node 12.18.2 Angular JIT: 15-24ms
Node 12.18.2 Angular AOT: 5-13ms

Если у сообщества Angular будет достаточный интерес к этому проекту, то далее буду внедрять:
- Transfer State, (чтобы был прям настоящий SSR)
- Compiler на Deno, для AOT
- Поддержка различных препроцессоров
- Пререндер как в Scully
- HMR

https://github.com/alosaur/angular_deno

Сравнение Angular Universal 9 и 10 по потреблению памяти

Так же Minko Gechev заявил что в Angular 11 будут дополнительные улучшения производительности.

Nrwl представила утилиту которая позволит пересобирать проект быстрее. Суть в том что билды складываются в кэш. Бесплатно для использования в локалке, и так же есть возможность закидывать в cloud чтобы шарить билды между командой. (5часов сборки в месяц бесплатно).

Подробнее на сайте: https://nx.app/angular-cli-faster

npx make-angular-cli-faster

Ну а еще Виктор Савкин опубликовал, что они хотят сделать в Nx 11.

На страницах angular.io появилась страница с roadmap (https://angular.io/guide/roadmap)
Коротко:
- решение задач в backlog
- typescript 4.0
- улучшение e2e
- ivy для либ
- rxjs 7
- language service под ivy
- внедрить больше angular/cdk/test harness
- поддержка trusted types
- больше MDC web в Angular Material
- strict types angular/forms
- webpack 5
- optional zone.js
- избавление от старого view engine
- Angular DevTools
- Optional NgModules
- миграция в eslint

https://blog.angular.io/a-roadmap-for-angular-1b4fa996a771

LTO, ngl, Angular Linker, и еще немного информации по roadmap от Angular Team

Коротко:
- Angular Package Format не нужен, и metadata.json c ним же
- ngcc только в период совместимости Ivy и View Engine
- DI в либах как public api (условно)
- все больше поддержки тем у кого нет angular cli
- angular linker на передовой, как плагин babel в первую очередь
- качаем из npm и сразу можем запустить в JIT
- быстрая сборка / пересборка

Еще больше инфы: Ivy Library Compilation - Conceptual Design Doc

Устранение ресурсов, блокирующих рендеринг в Angular

В разделе «Возможности» вашего отчета Lighthouse перечислены все URL-адреса, блокирующие отрисовку вашей страницы.

Цель состоит в том, чтобы уменьшить влияние этих URL-адресов, блокирующих рендеринг, путем встраивания критических ресурсов в сам html, откладывания некритических ресурсов и удаления всего неиспользуемого.

Какие URL помечаются как блокирующий рендеринг?

<script>

- если он находится в заголовке
- если он не имеет аттрибут defer или async

<link rel="stylesheet">

- если нет атрибута disabled
- не имеет атрибута media соответствующий устройству пользователя

Если даже ваш внешний css код будет весить 0кб браузер все равно потратит на него время.

Все для того чтобы увеличить результаты FCP (first contentful paint)

Именно над этим хотят сейчас поработать в Angular CLI.

- Загрузку CSS асинхронно в SPA
- встраивания критических CSS в html
- Inline Google Fonts and Icons.

До:

<link rel="stylesheet" href="styles.css">

После:

<link rel="stylesheet" href="styles.css" media="only x" onload="this.media='all'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Как же будут выбирать критически важные CSS?

Пока нет достойного решения который бы устраивал в разных режимах, SSR и CSR. Поэтому по поводу идут еще обсуждения, и рассматриваются различные webpack плагины, и даже есть альтернатива всему этому чтобы включить в рутовый AppComponent styles.css. Но болью в этом случае будет с SSR, так как все глобальные стили будут внедрены в html.

Обсудить предложение в issue

🎂 Angular 🎂

15 сентября 2016г. состоялся официальный релиз Angular

https://github.com/angular/angular/releases/tag/2.0.0

ngast - удобный API парсера для проектов Angular, недавно обновился на ngtsc (TraitCompiler).

Поэтому пришло время обновить тулзу для подсчета Angular сущностей.
В основе ngast + guessjs


Измерить свой проект можно запустив:

npx ng-app-counter -p ./project/tsconfig.app.json

Решил что тут снова будут обзоры статей, видео, подкастов и мои коментарии к ним.

Статья: Nx: On Bazel Support

Computation Caching

Основной фишкой внедрения Bazel в Nx была реализация распределенной сборки, но эта задача была полностью решена на стороне Nx, поэтому Bazel в Nx не будет.

Bazel and Angular

Действительно после ухода Alex Eagle из Google, больше нет никого кто бы работал с rules_nodejs из Google, Angular в частности, и поэтому как считает Victor Savkin, Bazel team не будут уделять большое внимание на частные проблемы при интеграции с Angular. Считаю что это не так, поскольку Bazel(rules_nodejs) для сборки используется в самом Angular, и других крупных проектах: TensorflowJs, Selenium, NgRX, и тд.

Кстати, недавно появился rules_python.

Bazel or Nx

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

Что насчет поддержки различных сборок?

В настоящее время каких либо планов чтобы отклониться у Angular team от webpack нет, и реализуется поддержка новой версии. Но тем не менее есть поддержка rollup от сообщества Angular Ivy, rollup-plugin-ngc (Есть и старший брат - angular2-rollup , но проект сейчас не поддерживается, для примера реализации собственного сборщика ок)

У rollup-plugin-ngc под капотом:

import { createProgram, CompilerHost  } from '@angular/compiler-cli'

Конечно, этот плагин практически ничего не дает, для крупных приложений, но для Angular Elements почему бы нет? Тут даже пример есть

Есть у некоторых идеи еще попробовать сделать сборщик на основе vite, ориентирован прежде всего на vue и react. Вроде обещает быть быстрым, который в свою очередь соревнуется с Snowpack.

Напишите в комментариях, довольны ли временем сборки вашего проекта?
(Если нет, то можете следить за этим issue)

Для тех у кого пересборка serve занимает значительное время, Netanel Basal недавно представил новую утилиту - inspector. Возможность изменения inputs, outputs property в специальном окне.

Features
- Inspect Angular components on the fly
- Change component properties without touching the code
- Simulate Angular events
- See the results in realtime

Для тех кому нужно быстро войти и разобраться в Angular, возможно подойдет эта шпаргалка -

Angular Cheat Sheet

Рад представить вам еще одну свою поделку на Angular:

🎨 Angular Canvas Renderer

Может:

- Кастомные canvas элементы и компоненты
- Перерисовка в одном canvas контексте
- Поддержка inputs and outputs, attributes, styles
- EmulatedEncapsulation по умолчанию
- И самое главное: быстрая миграция вашего canvas кода на компонентный подход

Ну и чтобы проверить реализацию, была написана мини игрушка, исключительно рисованием на canvas. Демо

В демке примерно такой template

<canvas>
  <background></background>
  <cactus></cactus>
</canvas>

<canvas>
  <cat
    #catElement
    [x]="x"
    [y]="y"
    (x)="updateUnitX($event)"
  ></cat>
</canvas>

⭐ → https://github.com/irustm/angular-canvas