⚡️Стал доступен Angular DevTools ✨
Фичи:
- построение дерева компонентов
- визуализация CD
- поддержка Angular 9+ с включенным Ivy
https://blog.angular.io/introducing-angular-devtools-2d59ff4cf62f
Фичи:
- построение дерева компонентов
- визуализация CD
- поддержка Angular 9+ с включенным Ivy
https://blog.angular.io/introducing-angular-devtools-2d59ff4cf62f
Уже все наверно знают что отец создатель 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 к элементу →
Input →
Output →
Binding →
lazy load template
→ TODO app
Похоже что то на смесь AngularJs + React + Knockout, не понятно насколько это ок.
И вообще - Qwik is a different kind of framework. Напишите свое мнение в комментариях.
Github Qwik
Вопрос, и что же будет там делать человек с таким большим опытом разработки фреймворка? Да, новый фреймворк!
🥳 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 в эти проекты.
Основной стрим, и если пойдет все плохо перейдем на запасной стрим
Тема: Ревью Angular проекта, разбор архитектуры, best practices.
В данном выпуске разберем пару реальных приложений, попытаемся их улучшить, найти и исправить баги, сделаем PR в эти проекты.
Основной стрим, и если пойдет все плохо перейдем на запасной стрим
Появился драфт, который приближает нас к опциональным NgModule. Следим и ждем публичный RFC!
https://github.com/angular/angular/pull/42831#issue-688255145
https://github.com/angular/angular/pull/42831#issue-688255145
GitHub
feat(compiler-cli): spike of standalone components by alxhub · Pull Request #42831 · angular/angular
This is a WIP commit of a spike for standalone components - components which
declare their own dependencies and do not use an NgModule.
declare their own dependencies and do not use an NgModule.
Angular Fanatic
Появился драфт, который приближает нас к опциональным NgModule. Следим и ждем публичный RFC! https://github.com/angular/angular/pull/42831#issue-688255145
Вчера, Alex Rickabaugh, автор этого PR, отвечал на вопросы по standalone component, и рассказал какие есть сложности с внедрением этой фичи: YouTube
Это видео появилось благодаря активностям в Angular Nation - в нем действительно много контента.
Это видео появилось благодаря активностям в Angular Nation - в нем действительно много контента.
16-17 сентября пройдет бесплатный nx conf,
CFP на Lighintg Talk открыт
CFP на Lighintg Talk открыт
🧮 ng-app-counter
✔️ Года 2 назад делал считыватель Angular проекта, и он даже умел показывать счетчик компонентов из node_modules до Ivy, теперь уже как подметили в комментах в тви, польза сомнительна как и у compodoc. Плюс теперь в ng-app-counter чтобы добиться вывода количество роутов нужно постараться в своем проекте, юзается Guess.js (alpha).
✔️ Год назад внедрил сбор анонимной статы для тех кто желает его опубликовать. И вот теперь настал момент публикации =)
На графике распределение по проектам классы/angular сущности.
Github/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
👉 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.
Пример, как это может быть
На самом деле, это скорее будет скрыто под каким либо wrapper, никому не охота писать в стиле Incremental Dom, я думаю. Возможности конечно радуют.
p.s. Такое можно уже делать, используя инструкции 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, через Θ, но никто ничего не гарантирует =)
tg_image_1472084026.jpeg
1007 B
3 сентября в 19:00 пройдет Angular Meetup в Нижнем Новгороде. Будет пара докладов про Taiga UI и Module Federation, пара GDE и онлайн-трансляция.
Говорят, что если зарегаться, то получишь ссылку на трансляцию, но мы и так ее знаем:)
https://youtu.be/SWsCBioLDQI
Говорят, что если зарегаться, то получишь ссылку на трансляцию, но мы и так ее знаем:)
https://youtu.be/SWsCBioLDQI
🅰️ Что нам готовит Angular 13.
Пока изменений на первый взгляд не так уж и много, думаю добавят много при 13.1+2 как это было с 12. Я бы назвал что релиз Angular 13 это про окончательный дроп IE. Считаю справедливо =) тут в Вебне недавно был опрос про IE, который это только подтверждает.
Angular:
- Поддержка number separators:
- 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
Пока изменений на первый взгляд не так уж и много, думаю добавят много при 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
Angular Fanatic
16-17 сентября пройдет бесплатный nx conf, CFP на Lighintg Talk открыт
Началось, ссылки на стрим
Day 1 stream link: https://youtu.be/oG2QbFquraA
Day 2 stream link: https://youtu.be/hlGOaGDsWKg
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
Оператор in в шаблонах 38560
Совместимость с ES Optional Chaining 34385
Как вы знаете эта фича в шаблонах, появилась задолго до того как фича была в спеке.
Например выражение
Внедрение директивы *ngLet 15280
Фичу ждем уже 5й год, посмотрим. Напомню, ее реализация есть в различных либах, таких как
Input Output Spreads 14545
Поддержка стрелочных функции 14129
Сомнительное предложение как по мне. Согласен с утверждением в коментах.
Деструктуризация значений из *ngIf as 27555
Cold event streams 13248
Предложение настолько устарело, что синтаксис компонентов еще с Angular 2 beta. Суть предложения, создать EventStream только в момент подписки, особенно ок для Output, и + не будет лишний раз дергать CD. В целом похож на одно из предложении из
Полный список предложений: 43485
Недавно собрали различные предложения по улучшению 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
Ранее писал про публичный релиз angular-canvas.
Спустя год решил написать статью про его устройство, и проведенный вместе c ним год в проде:
https://angular.fun/post/2021-10-01-angular-canvas/
Спустя год решил написать статью про его устройство, и проведенный вместе c ним год в проде:
https://angular.fun/post/2021-10-01-angular-canvas/
⚡️Optional NgModule
Опубликовали вариант как будет выглядеть standalone components, ну и в целом для кого, и какие бенефиты от этого. Главное: не сломает существующие решения.
Этому предложению уже больше года, писали об этом тут и тут. Но в последние месяцы это набирает обороты, ведь уже появилось много RFC, которые зависят от Optional NgModule.
На текущей момент проблемой является гарантирование провайдеров в DI для standalone. На картинке решение проблемы.
Пример:
Ну и чтобы уменьшить бандлы таких компонентов предлагают разбить тот же CommonModule на подмодули, например так: NgIf, NgFor
Ну и в конце примерчики
ng-standalone
---
👉 Читать публикацию. Занимаетельное чтиво на час.
Опубликовали вариант как будет выглядеть 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
Должно быть про предстоящий релиз, инициативы сообщества, и учебных курсах.
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
Просто интересная подача материала =)
---
напишите в коментариях какой доклад/статья вам понравился за последний год
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
Просто интересная подача материала =)
---
напишите в коментариях какой доклад/статья вам понравился за последний год