🦊 Angular Fox 🚀 — русскогорящие новости сообщества

✨ Знакомимся с Elf

Elf — это реактивный стейт менеджер, построенный на базе RxJS. Он использует кастомные RxJS операторы для запроса состояния и чистые функции для его обновления. Elf поощряет простоту и избавляет от необходимости создавать шаблонный код.

Netanel Basal рассказал о новом стейт менеджере, который стремится быть простым и модульным решением.

👉 https://netbasal.com/introducing-elf-a-reactive-store-with-magical-powers-for-js-apps-678d6cb0596f

🚀 Валидируем данные

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

Саша Беспоясов на примере формы «заявки на колонизацию Марса», показал подход, который делает валидацию проще.

👉 https://bespoyasov.ru/blog/declarative-rule-based-validation/

🔥 Управляем состоянием с помощью Akita

Существуют различные подходы, с помощью которых можно управлять состоянием в Angular. Akita — это паттерн управления состоянием, основанный на принципах объектно-ориентированного проектирования и RxJS.

William Juan показал, как легко применять Akita, и как можно использовать его с Auth0.

👉 https://auth0.com/blog/state-management-in-angular-with-akita-1/

🎉 Анонсирован TypeScript 4.6 RC

Когда Daniel Rosenwasser объявлял о выходе бета-версии, то упустил две новые возможности — анализ потока управления для Destructured Discriminated Unions и что --target теперь поддерживает es2022. В остальном команда TS работала над исправлением ошибок и исследовала возможности повышения производительности.

В ближайшие две недели будет выпущена стабильная версия TypeScript 4.6. До выхода больше не ожидается никаких изменений.

👉 https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-rc/

🚀 Принципы работы компилятора Angular

Компилятор Angular (ngc) — построен на основе компилятора TypeScript и расширяет его функционал. Например, когда вы используете Angular декораторы, ngc распознает их и переводит в более эффективный код.

Alex Rickabaugh подробно описал алгоритм работы ngc.

👉 https://blog.angular.io/how-the-angular-compiler-works-42111f9d2549

🔥 Новый способ установки заголовков страниц

Часто требуется, чтобы заголовок страницы обновлялся при переходе. В прошлом приходилось делать это вручную, но недавно в 14-й версии Angular Router появилась новая функция, позволяющая настраивать поведение маршрутизатора.

Brandon Roberts рассказал, как использовать новую функциональность Angular Router.

👉 https://dev.to/brandontroberts/setting-page-titles-natively-with-the-angular-router-393j

✨ Изучаем Module Federation в Angular

В последнее время ведется много дискуссий о микрофронтендах. Они позволяют разделить огромную кодовую базу на более мелкие части и поручить каждую часть отдельной команде. Подобная реализация раньше требовала множество трюков. К счастью, Module Federation упрощает эту задачу.

Manfred Steyer с помощью простых примеров показал, как применять Module Federation с Angular.

👉 https://auth0.com/blog/micro-frontends-with-angular-module-federation-and-auth0/

✨ Разбираемся в type

В TypeScript обычно можно обойтись объявлением типов через interface, но иногда пригождается и type. С его помощью можно писать утилиты, которые выполняются при анализе кода и расширяют возможности языка.

Павел Дымков рассказал про type, не касаясь интерфейсов. Однако, эта тема интереснее, чем может показаться, и наверняка вы найдете что-то новое для себя.

👉 https://habr.com/ru/post/648805/

🦄 Taiga UI: год в Open Source

Taiga UI — это библиотека компонентов на Angular. Она разрабатывалась несколько лет, перед тем как выйти в публичный доступ. Open Source помог сформировать сообщество, благодаря идеям и помощи которого были расширили возможности кастомизации и локализации.

С тех пор прошел год, и Александр Инкин подводит итоги и делится планами на будущее.

👉 https://habr.com/ru/company/tinkoff/blog/649685/

✨ Создаем видеочат

С появлением WebRTC позволяющего делать видеозвонки в браузере, все больше приложений стали добавлять этот функционал.

В статье Александр Шатилов рассказывает о построении видеоконференций на базе Angular, WebRTC и Openvidu.

👉 https://habr.com/ru/company/europlan/blog/595731/

✨ Тестируем компоненты по новому

Component Harness — это способ тестирования компонентов, который позволяет убрать зависимость тестов от внутренней реализации компонента: разработчикам предоставляется специальный API, который упрощает взаимодействие с компонентом и DOM. Идея такого подхода возникла из шаблона PageObject.

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

👉 https://kevinkreuzer.medium.com/how-to-write-component-harnesses-in-angular-8dbcccf2bf0e

✨ Настраиваем Tailwind CSS в Angular

Tailwind CSS — это CSS-фреймворк с хорошей функциональностью из коробки и высоким уровнем персонализации. С момента своего появления он привлек к себе много внимания, и он хороший вариант, когда речь идет о стилизации наших приложений.

В этой статье рассматривается, как можно использовать Tailwind CSS с Angular.

👉 https://blog.nrwl.io/set-up-tailwind-css-with-angular-in-an-nx-workspace-6f039a0f4479

🔥 Новая диагностика в Angular

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

В последнем выпуске Angular v13.2 добавлена новая замечательная функция. Она называется расширенная диагностика. Давайте рассмотрим ее подробнее.

👉 https://kevinkreuzer.medium.com/angular-extended-diagnostics-bee0400727ec

⭐️ Реализация GitHub с помощью Angular

Команда This Dot Labs создала клон интерфейса GitHub, чтобы дать сообществу проект, демонстрирующий возможности Angular, с открытым исходным кодом в качестве учебного пособия.

Проект нуждается в доработке. Если вы новичок в Angular и хотите получить отзыв о своем коде. Можете сделать pull request с вашими изменениями, и они с радостью рассмотрят его и дадут обратную связь.

👉 https://www.thisdot.co/blog/announcing-angular-github-clone-for-starter-dev-showcases

🦊 Лис разрушает мифы про Angular

Очень часто вижу, что люди задаются таким вопросом: «А правда ли то, что Angular сложный, тяжелый и трудно поддерживаемый фреймворк?» или «Что проще выучить новичку: Angular или React?»

Это хорошие вопросы, которые ставят многих разработчиков в тупик.

На стриме, который состоится через неделю — 3 февраля, расскажу на примерах, что на самом деле такое Angular.

Зарегистрироваться можно здесь.

👉 https://youtu.be/ZHvQv34WKlk

🎉 Angular v13.2 уже здесь

Нововведения:
— Поддержка optional chaining в шаблонах
— Дополнительные опции в FormControl
— Расширенная диагностика

Так же добавили более умные предупреждения и помощь в раннем обнаружении простых ошибок.

👉 https://github.com/angular/angular/releases/tag/13.2.0

🔥 Функции TypeScript, которые следует избегать

TypeScript — это сложный язык, который значительно эволюционировал с течением времени. Как и в случае с любым зрелым языком, приходится принимать сложные решения о том, какие функции использовать, а какие избегать.

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

👉 https://www.executeprogram.com/blog/typescript-features-to-avoid

✨ Обзор дорожной карты Angular

За предыдущий год команда Angular завершила 16 проектов из дорожной карты. Которые включали:
— Улучшение производительности, тестирования и отладки
— Ivy стал единственным движком рендеринга
— На 88% ускорилась сборка
— Выпущены Angular DevTools

Прямо сейчас идет работа над двумя востребованными инициативами:
— Строго типизированные реактивные формы (RFC)
— Автономные компоненты (RFC)

В этом году также планируется выпустить несколько улучшений производительности и DX. В дорожной карте есть и другие пункты, так что следите за новостями.

👉 https://blog.angular.io/angular-2021-recap-and-2022-preview-cb3067f76217

🎉 Анонсирован TypeScript 4.6 beta.

21 января анонсировали бета-версию TypeScript.

Нововведения:
— Разрешение кода в конструкторах перед super()
— Улучшенная проверка глубины рекурсии
— Анализ потока управления для зависимых параметров
— Анализатор трассировки

Чтобы узнать подробности, включая даты выпуска, вы можете взглянуть на план итераций.

👉 https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-beta/

🔥 Observables vs Promises

В этой статье вы получите полное представление о том, чем промисы отличаются от Observables. Олег Барановский постарался охватить все, что нужно знать, в одном месте.

Каждая тема будет сопровождаться примерами кода. Так что будьте уверены, скучать вам не придется.

👉 https://obaranovskyi.medium.com/the-ultimate-guide-to-observables-and-vs-promises-rxjs7-296877376668