Angular Fanatic
1.34K subscribers
44 photos
2 videos
3 files
224 links
Ангуляр в каждый проект!
__________
Канал на паузе
Download Telegram
Сегодня, 25 сентября в 20.30 мск проидет очередной ngRuAir
Тема: uiBakery: инструмент для прототипирования Angular приложений вместе со специальным гостем: Никитой Полторацким
https://www.youtube.com/watch?v=0zJck44Bc0E
Еженедельник запоздал,

поэтому немножко последних статей про NestJs:

Announcing NestJS Monorepos and new CLI commands

Build your first serverless app with Angular, NestJS and Azure

Deploying NestJS Apps to Zeit Now

Deploy NestJS Serverless Apps to Azure Functions

Если вы заметили, то все статьи на trilon.io , это такой аналог nrwl, только уже вместе с Kamil Mysliwiec (NestJS) и Mark Pieszak (Angular Universal team)
Давайте поучаствуем в Hacktoberfest 2019,
Сюда можете занести ваш любимый Angular ресурс (статью, видеоролик, либу и т.д.)

Здесь будут собраны лучшие материалы за этот год.

https://timdeschryver.github.io/hacktoberfest-2019-angular/
Через 30 минут начинается ngAir.
Тема выпуска: Использование Angular Elements в React компонентах

https://youtu.be/cdrMozMs0PY
#ngFanatic #еженедельник от 16.10.2019

Релизы:

angular:
8.2.10, 9.0.0-next.10 (2019–10–09)
angular-cli: 8.3.9, v9.0.0-next.9
angular material2: 8.2.3

Статьи:

How to test Observables (Kevin Kreuzer) — Полное руководство по тестированию Observables, чтобы вы больше не путались.

Creating Behavioral Components in Angular (Netanel Basal) — Из этой статьи можно извлечь:
- Как мы можем подписаться на события в дочерних компонентах, и изменять их поведение на верхнем уровне;
- Как с помощью exportAs можно вытащить состояние компонента и использовать его внутри ng-content;
- Как организовать Lazy компоненты и не рендерить их по его собственному состоянию.

Discover Iterative DOM, the magic behind Angular Ivy (Francesco Leardini) — Основной посыл статьи: Iterative Dom tree-shakable поэтому ваши бандлы должны стать еще меньше.

Clarity’s future: user-focused, framework-independent, accessible, enterprise-ready, and open source (Jehad Affoneh) Если вам лень писать свою либу компонентов, или хотите узнать а как надо писать, то вам обязательно необходимо взглянуть на Clarity.

10 Things Every Angular Developer Should Know About Zone.js (Matthias Junker) очень крутое руководство по Zone.js c различными отсылками к офф документации. Про управления событиями, какие можем закинуть в blacklist, или какие события оборачиваются Node.

Celebrating Another Year of TypeScript (Ben Coveney) Typescript уже 7 лет, а вот AtScript могло бы быть 5 ;) хорошо что сумели обьедениться.

Creating Modals in Angular (Chidume Nnamdi) простая модалка на ангуляре.

Либы:

Ng-sortgrid (Kevin Kreuzer) Очень легкая либа для draggable grid.

🎁 Бонус

И просто напомню, вы можете поучаствовать в Octoberfest улучшив ngx-bootstrap, и получить дополнительные подарки.
Сегодня прошел WSD в Екатеринбурге, где Андрей Старовойт из webstorm рассказал про поддержку фреймворков, на примере Angular, где вы можете узнать почему так долго индексируется ваш Angular проект.

https://youtu.be/DsfnFrwKksA?t=5278

ну если и этого мало, то можете поковырять плагин Angular под webstorm:
https://github.com/JetBrains/intellij-plugins/blob/master/AngularJS/src/org/angular2
#ngFanatic еженедельник от 27.10.2019

Релизы:

angular:
8.2.12, 9.0.0-next.14
angular-cli: 8.3.14, v9.0.0-next.15
angular material2: 8.2.3


Статьи:

Testing Asynchronous Code in Angular Using FakeAsync (Netanel Basal)
Статья про то как использовать FakeAsync, и сделать тесты более предсказуемыми. Ну и конечно это все под соусом из Spectator.

Overriding Angular Schematics (Santosh Yadav)
Статейка про переопределение стандартных schematics в angular.json. Default onPush и все такое.

Adding Font Awesome to an Angular CLI project using npm (Rocky Segarra)
про [FontAwesomeModule] и <fa-icon [icon]="faTwitter"></fa-icon> и как с помощью этого пакета грузить только те иконки, которые действительно нужны.

TypeScript Types: The Any Type (Todd Motto)
noImplicitAny, noImplicitThis, strictNullChecks, alwaysStrict - true всем!

Vanilla JavaScript and HTML - No frameworks. No libraries. No problem. (John Papa) На счет No problem конечно сомнительно, но стоит задуматься.

Компоненты-агностики в Angular (Александр Инкин)
Динамика на минималках.
Завтра, 30 октября в 20.30 мск проидет очередной ngRuAir. В этом выпуске с нами будет Andrey Starovoyt из JetBrains и расскажет как они поддерживают фреймворки в WebStorm и почему отказались от Angular language service
https://www.youtube.com/watch?v=jLvtwNmbPKU
ngFanatic eженедельник от 06.11.19

Релизы:
angular: 8.2.13, 9.0.0-rc.0 (2019–10–31)
angular-cli: 8.3.14, v9.0.0-rc.0
angular material2: 8.2.3, 9.0.0-rc.0

Статьи:

Runtime environment configuration with Angular (Frederik Prijck) Простая конфигурация приложения в рантайме через APP_INITIALIZER.

Converting a Promise into an Observable (Frederik Prijck) Простые шаги для обработки Promise в Observable. Тут про defer, new Observable, AbortController.

Transloco's New Dev Tools Make i18n in Angular Easy as Pie (Netanel Basal) Появился extractor, такой же как ngx-translate, только в дополнение с поиском. Ну и самое крутое что есть - вебпак плагин который может закидывать ключи в файлы перевода еще на этапе разработки. Scopes в переводах из коробки. Еще и валидация появилась =). Часто возникают вопросы как мержить файлы перевода, так пожалуйста - transloco: join, split. И в добавок: "Оптимизатор", пока вырезает лишь комменты для переводчика. Выглядит все очень годно.

Migrate your Angular library to Jest (Kevin Kreuzer)

tap, map & switchMap explained (Fabian Gosebrink)

How to Avoid Observables in Angular (Michael Hladky) боли и страдания в Angular связаны прежде всего с не пониманием как работает rxjs. Большая статья про это.

Enterprise Angular (Manfred Steyer) Выпущена целая книга про DDD, Nx Monorepos и Micro Frontends.

Support for generic task execution, displaying affecting projects, new commands for schematics discovery, and more in Nx 8.7
(Brandon Roberts)
Angular уже есть практически везде
для мобилок: Ionic, NativeScript
для сервера: Nest, Universal
для терминала: Platform-terminal

Ну и конечно здесь не хватало десктопа (не будем про поделки на Electron). И чтобы это дополнить я создал нативное, кросс-платформенное решение для Angular.
Решение довольно простое, путем замены рендерера и платформы, так же нужно было занести стандартные компоненты из Qt. Основой для решения служит Nodegui, хотя можно было бы рассмотреть и другие подобные проекты: Proton-Native, Vuido, но они в отличии от Nodegui полностью завязаны на React и Vue соответственно.

Проект пока только разрабатывается, буду рад любой помощи, отзывам и критике. Ну или можете просто поставить star на github =)

https://github.com/irustm/angular-nodegui
Совсем скоро начнется Angular Piter #3

Тем, кто не смог к нам присоединиться в живую, могут посмотреть все это в лайве:

https://www.youtube.com/nexignteam/live
Пока команда Angular ушла на каникулы и Stephen Fluin традиционно не выпустил новый релиз вместе со статьей про фичи Angular, я попытался собрать все в кучу и ответить на вопрос что нового?

https://link.medium.com/9cLQPHZtx2
Представляю ресурс для Angular разработчиков =) angular.fun

На сайте будет дублироваться подборка статей, с их кратким изложением.

Так же будут публиковаться различные Angular события:

https://angular.fun/events/

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

Если у вас будут дополнения, ссылки на интересные статьи, или же захотите написать свою подборку, присылайте PR или заводите issue
Загрузка компонентов в Ivy без привязки к модулям, благодаря принципу "Locality"

const {QuizCardComponent} = await import('./quiz-card/quiz-card.component');
const quizCardFactory = this.cfr.resolveComponentFactory(QuizCardComponent);
const {instance} = this.quizContainer.createComponent(quizCardFactory, null, this.injector);


исходники
статья
Почему еще не выпустили Angular 9?

После новогодних каникул оставалось всего ~12 тасок, которые блокировали релиз. Сейчас же осталось всего 2. Более подробно про них будет ниже.

1. host binding к pipe [breaking change] теперь нельзя юзать таким образом
host: {
'[class.active]': '(active$ | async) == true'
}

С ivy этого не удастся, поэтому осталось написать лишь в guid по миграции, что не стоит так больше.

2. Проблема увеличения бандла после включения Ivy.

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

Все из за различия в renderer. Во VE компонент генерируется в 2 файла:
transpiled file и .ngfactory.js который включает template factory.

Допустим у нас есть условно SharedComponent лежащий в SharedModule, а SharedModule включен в AppModule, еще и в LazyModule.

Что произойдет:
в VE:
SharedComponent class уйдет в main.js , а .ngfactory.js в common.js
в Ivy: SharedComponent уйдет в main.js

Если уберем ссылку SharedModule из AppModule, все станет на свои места, SharedComponent уйдет в common.js и размер main.js естественно станет меньше.

Собственно, если обнаружите что main.js увеличился то проверьте ваш LazyModules на Shared из AppModule. Демо.

Так же эту проблему можно решить с помощью различных техник использования lazy components в Ivy.
Так же сегодня пройдут 2 онлайн митапа:

1. Nrwl Connect with Hero Devs: Discussing Scully

2. AngularMeetup от ThisDot c темами:
- RxJS Testing (Ben Lesh)
- Angular in the Jamstack (Tara Z. Manicsic)
Все что нужно знать про DI в Angular в удобном представлении.

Angular Dependency Injection Infographic

Загрузить полную версию