Лучшее из мира Angular за неделю — Дайджест №1 (18 января - 25 января)

Свежая подборка со ссылками на новости и материалы.

Приятного чтения!

Релизы

Angular

Angular 7.2.2 ^[1] — улучшена поддержка Bazel

Angular CLI

Angular CLI 7.2.3 ^[2] — исправлены ошибки, улучшена стабильность

Angular CLI 7.3.0-beta.0 ^[3] — множество улучшений связанных с Ivy, добавлен флаг experimentalIvy для генерации нового приложения с Ivy

Angular CLI 7.3.0-rc.0 ^[4]

TypeScript 3.3 RC ^[8] — улучшили поддержку Union Types и в 4 раза ускорили инкрементальную сборку Composite Projects.

Composite Projects были опубликованы еще в TypeScript 3 и о них можно почитать по ссылке ^[9].

Подробнее о новом релизе можете почитать на официальном сайте ^[10].

Инструменты

Angular Console ^[11], который добавляет UI для Angular CLI, теперь имеет свой плагин в VS code.

ngx-quicklink ^[12] by mgechev ^[13], используя Intersection Observer API для Preloading Strategy ускоряет загрузку Angular приложений.

Аналогично команде rxjs-operator-counter ^[14], Rustam ^[15] написал крутую утилиту ng-app-counter ^[16] для Angular.

rx-handler ^[17] — потрясающий ReactiveX инструмент, уменьшающий бойлерплейт.

rxjs-watcher ^[18] — простое расширение для Chrome DevTools, визуализирующее RxJS.

serverx-ts ^[19] — экспериментальный Node.js HTTP фреймворк, использующий RxJS.

Считаешь, что хорошо знаешь RxJS? Опробуй свои знания в мини-игре RxJS Puzzles ^[20]!

TweetDeck ^[21] — приложение для отслеживания GitHub репозиториев.

fx ^[22] — потрясающий CLI инструмент для удобного просмотра и редактирования JSON в терминале.

Spectator ^[23]— полезный инструмент для тестирования Angular приложения, который делает тестирование проще и уменьшает количество бойлерплейта.

NgxFormly ^[24] — простой инструмент для создания и динамического отображения реактивных форм.

Prettier ^[25] — инструмент для форматирования кода. Имеет минималистичный конфиг, есть интеграция со всеми IDE и поддерживает множество языков.

Для простой установки Prettier в Angular, есть готовый schematics ^[26]

HTTP Client Karin ^[27] необычно использует шаблонные литералы.
(Не рекомендуется использовать, пользуйтесь стандартными механизмами)

RunJS ^[28] — scratchpad для ваших экспериментов вместе с Node.JS (macOS only)

Интересные статьи

Перед тем как заниматься микро-оптимизациями, проверьте, что все перечисленное уже сделано для вашего Angular приложения:

Use the Angular CLI
Compress your assets brotli/gzip
Use code-splitting with loadChildren
Preload routes
Use the Angular Service worker

https://github.com/mgechev/angular-performance-checklist ^[29]

ExpressionChangedAfterItHasBeenCheckedError

Все что вам нужно знать про ExpressionChangedAfterItHasBeenCheckedError
https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4 ^[30]

Angular Injector

Для обеспечения быстрого поиска провайдеров, Angular под капотом использует Bloom Filters. Есть замечательная статья, которая подробно объясняет эту структуру данных:
https://llimllib.github.io/bloomfilter-tutorial/ ^[31]

Angular Forms

Организация приложения с использованием NgxFormly
https://hackernoon.com/organize-your-forms-application-using-ngx-fomrly-796150461045 ^[32]

Обработка ошибок с Angular и NgxFormly
https://itnext.io/error-handling-with-angular-6-and-ngx-formly-8272a3aa7871 ^[33]

Angular Monorepo

Nrwl опубликовали книгу "Angular Enterprise Monorepo Patterns".
https://go.nrwl.io/angular-enterprise-monorepo-patterns-new-book ^[34]

Experimental Ivy

Попробовать Ivy можно уже сейчас, для этого можно воспользоваться готовым приложением.
https://github.com/thekiba/angular-experimental-ivy ^[35]

Или самостоятельно проделать несколько шагов:

Обновить angular ^[36]/cli до 7.3.0-beta.0
Создать новое приложение
Вручную обновить angular ^[36] до 8.0.0-beta.0
Удалить параметр es5BrowserSupport из angular.json

npm i -g @angular/cli@7.3.0-beta.0
ng new angular-ivy --experimentalIvy

Ivy Performance

Kliment Ru ^[37] провел замечательное исследование на предмет производительности Ivy, и получил неожиданные результаты.
https://medium.com/ngx/angular-ivy-perfomance-f98e5ca2e45e ^[38]

Ivy & AngularNYC

Igor Minar ^[39] на AngularNYC отвечает на вопросы про IVY.
https://youtu.be/a3j5U5WVmUo ^[40]

Angular и Bazel

Minko Gechev ^[13] отвечает на вопросы связанные с Angular и Bazel, и рассказывает об интересных особенностях нового сборщика.
https://youtu.be/vlIhnYnMAX0 ^[41]

Bazel

Инкрементальная и удаленная сборка Angular на серверах с помощью Bazel.
https://blog.nrwl.io/building-angular-applications-remotely-with-bazel-efc506e44726 ^[42]

Introducing Ionic 4

Сегодня я рад объявить о выпуске Ionic Framework 4.0, который можно с легкостью назвать «Ionic for Everyone».
Max Lynch ^[43]
https://blog.ionicframework.com/introducing-ionic-4-ionic-for-everyone/ ^[44]

NGXR 7

У NGRX появился сайт https://ngrx.io ^[45] с подробной документацией.
В новой версии добавили долгожданную поддержку типов для Actions, представили нам Selector Props, lifecycle методы OnInitEffects и OnIdentifyEffects. Улучшили поддержку Entity, Router Store и Store Devtools.
https://medium.com/@ngrx/announcing-ngrx-version-7-docs-testing-and-more-b43eee2795a4 ^[46]

Angular Forms: магическое отображение ошибок

Netanel Basal ^[47] рассказывает о том, как можно использовать директивы для более простого отображения ошибок в Angular.
https://netbasal.com/make-your-angular-forms-error-messages-magically-appear-1e32350b7fa5 ^[48]

Launchpad для RxJS

Cédric Soulas ^[49] обновил сайт reactive.how, и добавил удобный Launchpad для поиска необходимых операторов по различным категориям.

Исследуйте категории
Ищите операторы
Изучайте их

https://reactive.how/rxjs/ ^[50]

Если вы еще не подписаны, то подписывайтесь на мой Twitter ^[51] и Telegram канал ^[52], а так же вступайте в Telegram группу ^[53], чтобы быть в курсе последних событий в мире Angular.

Автор: thekiba

Источник ^[54]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/dajdzhest/306530

Ссылки в тексте:

[1] Angular 7.2.2: https://github.com/angular/angular/blob/master/CHANGELOG.md#722-2019-01-22

[2] Angular CLI 7.2.3: https://github.com/angular/angular-cli/releases/tag/v7.2.3

[3] Angular CLI 7.3.0-beta.0: https://github.com/angular/angular-cli/releases/tag/v7.3.0-beta.0

[4] Angular CLI 7.3.0-rc.0: https://github.com/angular/angular-cli/releases/tag/v7.3.0-rc.0

[5] 4.0.0 Neutronium: https://github.com/ionic-team/ionic/compare/v4.0.0-rc.3...v4.0.0

[6] NGRX 7.1.0: https://github.com/ngrx/platform/compare/7.0.0...7.1.0

[7] TypeScript 3.2.4: https://github.com/Microsoft/TypeScript/releases/tag/v3.2.4

[8] TypeScript 3.3 RC : https://github.com/Microsoft/TypeScript/releases/tag/v3.3-rc

[9] о них можно почитать по ссылке: https://www.typescriptlang.org/docs/handbook/project-references.html

[10] Подробнее о новом релизе можете почитать на официальном сайте: https://github.com/Microsoft/TypeScript/wiki/What

[11] Angular Console: https://angularconsole.com/

[12] ngx-quicklink: https://github.com/mgechev/ngx-quicklink

[13] mgechev: https://twitter.com/mgechev

[14] rxjs-operator-counter: https://github.com/timdeschryver/rxjs-operator-counter

[15] Rustam: https://twitter.com/rustjama

[16] ng-app-counter: https://github.com/Jamaks/ng-app-counter

[17] rx-handler : https://github.com/johnlindquist/rx-handler

[18] rxjs-watcher: https://github.com/xripcsu/rxjs-watcher

[19] serverx-ts : https://github.com/mflorence99/serverx-ts

[20] мини-игре RxJS Puzzles: https://vik-13.github.io/

[21] TweetDeck: https://github.com/devhubapp/devhub

[22] fx: https://github.com/antonmedv/fx

[23] Spectator : https://github.com/NetanelBasal/spectator

[24] NgxFormly: https://github.com/ngx-formly/ngx-formly

[25] Prettier : https://prettier.io/

[26] schematics: https://github.com/schuchard/prettier-schematic

[27] HTTP Client Karin: https://github.com/vaheqelyan/karin

[28] RunJS: https://projects.lukehaas.me/runjs/

[29] https://github.com/mgechev/angular-performance-checklist: https://github.com/mgechev/angular-performance-checklist

[30] https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4: https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

[31] https://llimllib.github.io/bloomfilter-tutorial/: https://llimllib.github.io/bloomfilter-tutorial/

[32] https://hackernoon.com/organize-your-forms-application-using-ngx-fomrly-796150461045: https://hackernoon.com/organize-your-forms-application-using-ngx-fomrly-796150461045

[33] https://itnext.io/error-handling-with-angular-6-and-ngx-formly-8272a3aa7871: https://itnext.io/error-handling-with-angular-6-and-ngx-formly-8272a3aa7871

[34] https://go.nrwl.io/angular-enterprise-monorepo-patterns-new-book: https://go.nrwl.io/angular-enterprise-monorepo-patterns-new-book

[35] https://github.com/thekiba/angular-experimental-ivy: https://github.com/thekiba/angular-experimental-ivy

[36] angular: https://habr.com/ru/users/angular/

[37] Kliment Ru: https://medium.com/@klimentru1986

[38] https://medium.com/ngx/angular-ivy-perfomance-f98e5ca2e45e: https://medium.com/ngx/angular-ivy-perfomance-f98e5ca2e45e

[39] Igor Minar: https://twitter.com/IgorMinar

[40] https://youtu.be/a3j5U5WVmUo: https://youtu.be/a3j5U5WVmUo

[41] https://youtu.be/vlIhnYnMAX0: https://youtu.be/vlIhnYnMAX0

[42] https://blog.nrwl.io/building-angular-applications-remotely-with-bazel-efc506e44726: https://blog.nrwl.io/building-angular-applications-remotely-with-bazel-efc506e44726

[43] Max Lynch: https://twitter.com/maxlynch

[44] https://blog.ionicframework.com/introducing-ionic-4-ionic-for-everyone/: https://blog.ionicframework.com/introducing-ionic-4-ionic-for-everyone/

[45] https://ngrx.io: https://ngrx.io

[46] https://medium.com/@ngrx/announcing-ngrx-version-7-docs-testing-and-more-b43eee2795a4: https://medium.com/@ngrx/announcing-ngrx-version-7-docs-testing-and-more-b43eee2795a4

[47] Netanel Basal: https://medium.com/@NetanelBasal

[48] https://netbasal.com/make-your-angular-forms-error-messages-magically-appear-1e32350b7fa5: https://netbasal.com/make-your-angular-forms-error-messages-magically-appear-1e32350b7fa5

[49] Cédric Soulas: https://twitter.com/CedricSoulas

[50] https://reactive.how/rxjs/: https://reactive.how/rxjs/

[51] Twitter: https://twitter.com/thekiba_io

[52] Telegram канал: https://t.me/angular_fox

[53] Telegram группу: https://t.me/angular_ru

[54] Источник: https://habr.com/ru/post/437536/?utm_campaign=437536

Нажмите здесь для печати.