Лучшее из мира Angular за неделю
Дайджест №1 (18 января — 25 января)
Свежая подборка со ссылками на новости и материалы.
Приятного чтения!
⚡ Релизы
Angular
Angular 7.2.2 — улучшена поддержка Bazel
Angular CLI
Angular CLI 7.2.3 — исправлены ошибки, улучшена стабильность
Angular CLI 7.3.0-beta.0 — множество улучшений связанных с Ivy, добавлен флаг experimentalIvy для генерации нового приложения с Ivy
IONIC
4.0.0 Neutronium — Enjoy! 🎈
NGRX
TypeScript
TypeScript 3.3 RC — улучшили поддержку Union Types и в 4 раза ускорили инкрементальную сборку Composite Projects.
Composite Projects были опубликованы еще в TypeScript 3 и о них можно почитать по ссылке:
https://www.typescriptlang.org/docs/handbook/project-references.html
Подробнее о новом релизе можете почитать на официальном сайте: https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#typescript-33
🛠️ Инструменты
🎁 Angular Console, который добавляет UI для Angular CLI, теперь имеет свой плагин в VS code.
https://angularconsole.com/
📢 ngx-quicklink используя Intersection Observer API для Preloading Strategy ускоряет загрузку Angular приложений.
https://github.com/mgechev/ngx-quicklink by mgechev
🔥 Аналогично команде rxjs-operator-counter, Rustam написал крутую утилиту ng-app-counter для Angular.
https://github.com/Jamaks/ng-app-counter
🎁 rx-handler — потрясающий ReactiveX инструмент, уменьшающий бойлерплейт.
https://github.com/johnlindquist/rx-handler
🗃 rxjs-watcher — простое расширение для Chrome DevTools, визуализирующее RxJS.
https://github.com/xripcsu/rxjs-watcher
🔥 serverx-ts — экспериментальный Node.js HTTP фреймворк, использующий RxJS.
https://github.com/mflorence99/serverx-ts
🦄 Считаешь, что хорошо знаешь RxJS? Опробуй свои знания в мини-игре RxJS Puzzles!
https://vik-13.github.io/
👮🏻♂️ TweetDeck приложение для отслеживания GitHub репозиториев.
https://github.com/devhubapp/devhub
📐 fx — потрясающий CLI инструмент для удобного просмотра и редактирования JSON в терминале.
https://github.com/antonmedv/fx
😎 Spectator — полезный иструмент для тестирования Angular приложения, который делает тестирование проще и уменьшает количество бойлерплейта.
https://github.com/NetanelBasal/spectator
🎁 NgxFormly — простой инструмент для создания и динамического отображения реактивных форм.
https://github.com/ngx-formly/ngx-formly
🚀 Prettier — инструмент для форматирования кода. Имеет минималистичный конфиг, есть интеграция со всеми IDE и поддерживает множество языков.
https://prettier.io/
🌟 Для простой установки Prettier в Angular, есть готовый schematics:
https://github.com/schuchard/prettier-schematic
🌈 HTTP Client Karin необычно использует шаблонные литералы.
(Не рекомендуется использовать, пользуйтесь стандартными механизмами)
https://github.com/vaheqelyan/karin
🖥 RunJS — scratchpad для ваших экспериментов вместе с Node.JS.
https://projects.lukehaas.me/runjs/ (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
💣 ExpressionChangedAfterItHasBeenCheckedError
Все что вам нужно знать про ExpressionChangedAfterItHasBeenCheckedError
https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4
🚀 Angular Injector
Для обеспечения быстрого поиска провайдеров, Angular под капотом использует Bloom Filters. Есть замечательная статья, которая подробно объясняет эту структуру данных:
https://llimllib.github.io/bloomfilter-tutorial/
🎁 Angular Forms
Организация приложения с использованием NgxFormly
https://hackernoon.com/organize-your-forms-application-using-ngx-fomrly-796150461045
Обработка ошибок с Angular и NgxFormly
https://itnext.io/error-handling-with-angular-6-and-ngx-formly-8272a3aa7871
🏆 Angular Monorepo
Nrwl опубликовали книгу “Angular Enterprise Monorepo Patterns”.
https://go.nrwl.io/angular-enterprise-monorepo-patterns-new-book
🚀 Experimental Ivy
Попробовать Ivy можно уже сейчас, для этого можно воспользоваться готовым приложением.
https://github.com/thekiba/angular-experimental-ivy
Или самостоятельно проделать несколько шагов:
— Обновить @angular/cli до 7.3.0-beta.0
— Создать новое приложение
— Вручную обновить @angular до 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 провел замечательное исследование на предмет производительности Ivy, и получил неожиданные результаты.
🥬 🔥 Angular и Bazel
Minko Gechev отвечает на вопросы связанные с Angular и Bazel, и рассказывает об интересных особенностях нового сборщика.
🥬 Bazel
Инкрементальная и удаленная сборка Angular на серверах с помощью Bazel.
https://blog.nrwl.io/building-angular-applications-remotely-with-bazel-efc506e44726
🎉 Introducing Ionic 4
🎉 Сегодня я рад объявить о выпуске Ionic Framework 4.0, который можно с легкостью назвать «Ionic for Everyone».
Max Lynch
https://blog.ionicframework.com/introducing-ionic-4-ionic-for-everyone/
🦅 NGRX 7
У NGRX появился сайт https://ngrx.io с подробной документацией.
https://medium.com/@ngrx/announcing-ngrx-version-7-docs-testing-and-more-b43eee2795a4
В новой версии добавили долгожданную поддержку типов для Actions, представили нам Selector Props, lifecycle методы OnInitEffects и OnIdentifyEffects. Улучшили поддержку Entity, Router Store и Store Devtools.
✨ Angular Forms: магическое отображение ошибок
Netanel Basal рассказывает о том, как можно использовать директивы для более простого отображения ошибок в Angular.
https://netbasal.com/make-your-angular-forms-error-messages-magically-appear-1e32350b7fa5
🚀 Launchpad для RxJS 🎊
Cédric Soulas обновил сайт reactive.how, и добавил удобный Launchpad для поиска необходимых операторов по различным категориям.
🧩 Исследуйте категории
🔎 Ищите операторы
📚 Изучайте их
Подписывайтесь на мой Medium, Twitter и Telegram канал, чтобы быть в курсе последних событий в мире Angular.
