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

✨ Standalone components и Angular Testing Library упрощают тестирование компонентов

Angular Testing Library предоставляет полезные утилиты для взаимодействия и запросов к вашему компоненту, а автономные компоненты делают компоненты Angular менее подверженными влиянию внутренних компонентов.

В сумме они дают нам лучший фундамент, на котором можно строить наши тесты.

👉 https://timdeschryver.dev/blog/angular-standalone-components-and-angular-testing-library-make-component-tests-easier

✨ Signals vs Observables

В последнее время много разговоров о сигналах внутри фреймворков. Но естественно спросить: чем сигналы отличаются от Observables?

Разбор этого вопроса и является целью этой статьи.

👉 https://www.builder.io/blog/signals-vs-observables

✨ Angular и сигналы

Соскучились по сигналам? Команда Angular проделывает отличную работу по продвижению и объяснению нового реактивного примитива. Единственно, чего может не хватать, — одного ресурса, который собрал бы все имеющиеся материалы.

Эта статья — попытка создать такой ресурс.

👉 https://dev.to/this-is-angular/angular-signals-everything-you-need-to-know-2b7g

✨ Ошибочные представления об Angular

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

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

👉 https://dev.to/this-is-angular/angular-misconceptions-4aeb

🎉 Релиз TypeScript 5.0

Этот релиз приносит множество новых возможностей, одновременно стремясь сделать TypeScript меньше, проще и быстрее.

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

👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/

✨ Возможности JavaScript и TypeScript последних лет

В статье рассматриваются некоторые изменения, произошедшие за последние 3 года в JavaScript и TypeScript.

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

👉 https://habr.com/ru/company/timeweb/blog/722450/

✨ Советы по тестированию

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

В Angular у компонентов есть декораторы, сервисы, pipes, дочерние компоненты, поэтому в наших тестах слишком много действующих лиц.

Эта статья посвящена типичным проблемам, с которыми приходится сталкиваться, когда мы начинаем добавлять тестирование в компоненты с зависимостями.

👉 https://www.danywalls.com/tips-for-averting-typical-testbed-mistakes-in-angular-component-testing

✨Angular Forms: Выбор между реактивными и шаблонными формами

Когда мы начинаем создавать приложение на Angular и нужно создать формы, мы должны выбрать один из двух вариантов: "Реактивные" или "Шаблонные формы".

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

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

👉 https://www.danywalls.com/angular-forms-choosing-between-reactive-and-template-driven-forms

✨ Переход TypeScript на модули

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

Сейчас это может показаться удивительным — модули? Разве почти весь современный JavaScript и TypeScript не использует модули? Именно так! Но текущая кодовая база TypeScript появилась раньше модулей ECMAScript — последняя переработка началась в 2014 году, а модули были стандартизированы в 2015 году.

В итоге удалось добиться уменьшения размера пакета без сжатия на npm на 46%, увеличения скорости на 10%-25% и более современной кодовой базы.

👉 https://devblogs.microsoft.com/typescript/typescripts-migration-to-modules/

✨ Кастомная стратегия виртуального скроллинга для просмотра pdf

Angular CDK имеет широкие возможности для скроллинга плоского списка. Если размер каждого элемента одинаков, то можно воспользоваться FixedSizeVirtualScrollStrategy: всего лишь нужно прокинуть размер элемента в пикселях, проитерироваться по данным и виртуальный скроллинг готов.

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

👉 https://habr.com/ru/company/bimeister/blog/721220/

✨ Пишем более качественные тесты

API меняются со временем, поэтому написание и поддержка полного набора mocks и stubs для всех зависимостей зачастую намного сложнее и хрупче, чем просто использование настоящих.

Использование RouterTestingHarness, вместо того чтобы использовать заглушки Router, может сделать тесты более надежными.

👉 https://medium.com/p/bf5fc95c1c57

✨ Будущее обнаружения изменений

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

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

👉 https://www.angulararchitects.io/en/aktuelles/angular-signals/

✨ Знакомство с DestroyRef

В Angular v16.0.0-next.1 появился новый провайдер DestroyRef, который позволяет регистрировать обратные вызовы уничтожения для определенной области жизненного цикла.

В статье объясняется, зачем может понадобиться нововведение, если уже есть метод ngOnDestroy.

👉 https://medium.com/p/9791aa096d77

✨ API композиции директив

Как вы уже знаете, в Angular 15 появился отличный способ расширять функциональность библиотечных директив, а также писать мелкие директивы, которые можно объединять в различные комбинации.

Юрий Безруков продолжил рассказ о новом (уже старом) способе управления директивами в Angular.

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

🦄 История о миграции на Module Federation

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

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

👉 https://habr.com/ru/company/oleg-bunin/blog/718302/

✨ Введение в Directives Composition API

Directives Composition API может быть довольно полезным и простым в использовании инструментом для извлечения поведения в мелкие директивы и объединения их в более сложные.

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

👉 https://www.thisdot.co/blog/introduction-to-directives-composition-api-in-angular

✨ Глубокое погружение в стратегию обнаружения изменений OnPush

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

Давайте рассмотрим эти стратегии более подробно.

👉 https://indepth.dev/posts/1515/deep-dive-into-the-onpush-change-detection-strategy-in-angular

✨ Изучаем Angular с помощью Open Source

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

Сегодня мы делимся с вами списком из пяти приложений. Если вы знаете классный проект, пожалуйста расскажите о нем в комментариях.

👉 https://medium.com/p/c5def72e0e41

✨ Реактивность с помощью сигналов

Команда Angular анонсировала прототип, который добавит в фреймворк реактивный примитив Signal. Реактивность с помощью сигналов может в корне изменить то, как мы пишем приложения.

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

👉 https://medium.com/p/152a2d26fe2f

✨ Перестаньте бояться InjectionTokens

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

Эта статья дает хорошее представление об InjectionToken и о том, что они означают.

👉 https://dev.to/this-is-angular/stop-being-scared-of-injectiontokens-2406