Сегодня состоится очередной NgRuAir.

В этом выпуске мы хотим поговорить про новые фичи, breaking changes, производительность, размер бандла, жизнь без zone.js, так же затронем Ivy и ngcc.

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

Nrwl недавно внедрили в Nx кэширование результатов выполнения команд. Это должно повысить скорость ваших билдов при разработке, а именно:
- для тестов
- при переключении веток 🔥
- Micro-Frontend App, все достается из кэша
- CI

Подробнее

Так же это все ушло в Nx Cloud.
Это поможет вашей команде делится результатами билдов в момент разработки.

Записывайтесь на тест: https://nx.app/

Запускаем Angular IVY в jspm sandbox

import { Component, ɵrenderComponent } from '@angular/core';

@Component({
  selector: '[id=container]',
  template: `{{title}}`
})
export class AppComponent {
  title = 'ng-ivy-demo';
}

ɵrenderComponent(AppComponent);

1. tsconfig.app.json target: "es2018"
2. ngc -p tsconfig.app.json
3. Подправить импорт:

import * as importcore from "https://dev.jspm.io/@angular/core@9";
const core = importcore.default;
const { Component, ɵrenderComponent } = core;

К сожалению, prod сборку через jspm-cli еще невозможно.

Чем вам может быть интересен jspm и jspm-cli?
На данный момент, это прежде всего инструменты на подобии codelab, ng-run, stackblitz
jspm умеет создавать import-maps и преобразовывать любые пакеты в es-модули.
Так же применим для вытаскивания пакетов npm в deno.

Подготовил rollup конфиг, который собирает hello world в 6кб.

В начинке:
- build-optimizer
- uglify, c параметрами 'ngDevMode': false, 'ngI18nClosureMode': false.
- terser plugin.

👆так же как и стандартный angular cli.

Terser плагин практически работал в холостую и никаких прибавок к конечному бандлу не давал.

В итоге чтобы собрать hello-world уходит по ~15с
Что собственно дает в сумме 6кб.

Взглянув в итоговый бандл, я увидел что в инструкциях шаблона действительно присутствует только то что было объявлено.
Но, так же в каждом компоненте объявлены все функции хуков, + в начале бандла содержаться инструкции по загрузке модулей, компонентов.
Поэтому 6кб считаю далеко не пределом.

Простое руководство как успешно коммитить в Angular:

https://habr.com/ru/post/491788

Angular NL отменён
ng-conf переведен в онлайн
ngVikings переведен в онлайн
angularday на очереди

Актуальные события https://angular.fun/events/

Вышел NestJS 7
- GraphQL + TypeScript
- Flexible Custom Decorators
- New Pipes
- Implicit type conversion

https://trilon.io/blog/announcing-nestjs-7-whats-new

Как то увидел пост в твиттере, что размер конечного бандла Angular приложения слишком большой, ну и как всегда не смог пройти мимо.

Angular приложение в 293 bytes (gzip)

Во столько смог ужать hello-world Angular Ivy. И считаю что именно так должен работать @angular-devkit/build-optimizer
и подбрирать необходимый runtime.

Что я имею ввиду под Angular app:

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `Hello world!`
})
export class HelloComponent {}

И то что это приложение было пропущено через стандартный компилятор ngcc.

Для написания собственного runtime необходимо переопределить инструкции для рендеринга.

И немного понять, как работает incremental-dom.

——
Сейчас мой runtime очень простой, и не поддерживает ничего кроме пару простых инструкции. В дальнейшем хочу поддержать в нем все стандартные инструкции Angular renderer, и пропустить все это через closure compiler.

Пару слов про эксперименты Angular team c closure compiler
- 58.28kb brotli (Angular 7.2.13 Hello World app)
- те кто вкладывался в этот проект к сожалению больше не работают в Angular команд, и в целом ушли из Google

Сегодня в 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/

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