Сегодня в 20.00мск состоится очередной NgRuAir.

В этом выпуске мы хотим поговорить про Angular Codelab (https://codelab.fun) – инструмент для интерактивного обучения Angular.

https://www.youtube.com/watch?v=h9lGLpvKeFI

Вышел Angular 9.1

- Быстрая сборка с ngcc
- TypeScript 3.8
- Флаг в генерации

ng generate component my-component --displayBlock

- grep в тестах по умолчанию

ng e2e --grep searchTerm

- Улучшения в language service и в плагине Vscode соответственно:
Improved HTML & Expression Syntax Highlighting
- Улучшения localization, можно прям в коде менять направления 'rtl' или 'ltr'
- TSLint 6.1 by default

[Core CHANGELOG] 9.1.0
[Components CHANGELOG] 9.2.0 metal-man
[CLI CHANGELOG] 9.1.0

ng update @angular/cli @angular/core

🅰️ Делаем Angular снова меньше!

Интересная попытка скрестить lit-element и angular elements PolymerLabs/angular-element

Которая к тому же поможет избавиться от огромных бандлов в стандартной обертке AngularElements.

На данный момент следуя стандартному руководству в angular.io конечный бандл Angular Element будет занимать 65kb.

Для сравнения, бандл lit-element весит 6.98kb (All the Ways to Make a Web Component - конечно же Angular не попал в эту сравнительную таблицу).
Как я уже писал можно предельно ужать рантайм и в 256b

Но если у вас нет желания писать свои обертки для Angular Elements, то можно воспользоваться ngx-elements который будет давать в итоге 6кб.

Время для просмотра онлайн Angular митапов.

🗓 31.03 Angular Heidelberg
- Angular and RxJS – Tackling Component State Reactively

🗓 02.04 Angular Belarus
- Protractor: Automated testing of Angular apps Dual lab
- What are Angular Reactive Forms?

🗓 07.04 Angular Toronto
- The State of Angular Deployment, SSR, and Prerendering
- Scaling Development across Multiple Projects with Nx
- Little App of Horrors - workshop
- Components Best Practices

🗓 08.04 Angular Warsaw
- Sustainable Angular-Architectures with Strategic Design and Nx
- Build your own portal with Angular Embedded views

🗓 10.04 Angular Sydney
- Angular 9 with Minko Gechev, Angular components, QnA and more

🗓 12.04 Angular Thailand #1
- Nx Extensible Dev Tools for Monorepos

🗓 14.04 Angular-Leipzig
- Angular - Best practices
- Angular basics in real world projects.

🗓 22.04 Angular Warsaw
- Extending angular for the reactive web
- Angular End To End (e2e) Testing With Cypress.io

🗓 25.04 Angular Online (India)
- Best practices, Routing & more.

А теперь немного выдержки того что было на ng-conf из нового

▪️ HOC

export function extend(aComponent: AComponent) {
   class DynamicComonent implements OnInit { /* .. */};
   DynamicComonent.ɵcpm = ɵɵdefineComponent ({/* wraps AComponent */});
  return DynamicComonent;
}

▪️ Standalone Components, Dependencies are provided directly in directiveDefs fields

export class AComponent {/* ... */}
AComponent.ɵcpm = /* private API */
AComponent.ɵcpm.directiveDefs = [OtherComponent.ɵcmp];

▪️ Angular 9 Universal

ng run app:prerender

▪️ RxJS: ⚠️ toPromise() deprecated, use lastValueFrom(source$)
▪️ RxJS: New flag resetOnSuccess

pipe(retry({
   count: 3,
   resetOnSuccess: true
})

▪️ NgRx: variable in observable

<ng-container *ngrxLet="obs$ as n">

▪️ NgRX: New Reactive Router (experimental)

<ngrx-router>
  <ngrx-route path="/blog/posts/:id" [component]="blogPostComponent"></ngrx-route>
</ngrx-router>

Angular Ivy и время сборки проекта по умолчанию.
https://medium.com/@piotrl/angular-with-ivy-build-performance-review-5d27bd322bc5

Прямо сейчас начинается Angular Moscow,
подключайтесь на пиратский стрим)

https://www.youtube.com/watch?v=ISAcv5rquwc

Часто спрашивают про то как делать хорошее Angular приложение, какую архитектуру заложить. Тут Manfred Steyer опубликовал бесплатно свою книгу Enterprise Angular
Так же внутри есть подписка на всякие онлайн воркшопы

https://www.angulararchitects.io/book

⚡Доступны видео с онлайн конференции ng-conf: Hardwired проходившей с 1 по 3 апреля. Ivy, Angular-cli Builders, Bazel и многое другое ждет вас.

😭Правда есть нюанс, само видео почему-то выложено в Vimeo и доступно только после регистрации на сайте https://videos.ng-conf.org/videos/day-1-keynote

Nitay Neeman традиционно опубликовал выдержку после ngConf
https://nitayneeman.com/posts/all-talks-from-ng-conf-hardwired-2020/

Вот и Angular добрался до deno. A именно, dev_server.

Как он работает?
При обращении на index.html, запрашивается main.ts,

Он же транспаилится (в соответствии с заданным tsconfig), и выдает готовый js код по этому url.

Что с зависимостями?
А вот тут конечно приходит на помощь jspm, cdn.pika, unpkg. Поэтому вам придется указать соответствующий importmap.

В итоге у вас на выходе JIT как оно и было во времена systemjs v0.. и 5мб кода.
Из плюсов, вам не придется ждать пока произойдет dev сборка у вас в консоли.

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

Как попробовать:

deno run --allow-net --allow-read --allow-write --unstable https://deno.land/x/dev_server/mod.ts --template angular

(Предварительно должен быть установлен Deno не ниже v0.42.0)

После двух лет разработки, появился вот такой замечательный портал, соцсеть, по 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.iss.one/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.