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

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

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

👉 https://www.danywalls.com/testing-components-in-angular-noerrorsschema-stub-components-and-ngmocks

✨ Улучшаем тесты на Angular Testing Library

В последней версии библиотеки Angular Testing Library (v17.1.0) появилось новое API on, которое позволяет легче тестировать компоненты.

В небольшой заметке рассказывается, как его можно использовать и почему оно является лучшей альтернативой существующим API componentOutputs и componentProperties.

👉 https://timdeschryver.dev/blog/the-new-on-property-improves-output-testing-in-angular-testing-library

✨ Выбор JavaScript фреймворка

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

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

👉 https://habr.com/ru/articles/831726/

✨ TypeScript в Node.js

На днях в Node.js появилась возможность выполнять файлы TypeScript, установив экспериментальный флаг --experimental-strip-types. Для этого используется SWC, который уже применяется в Deno.

Node.js транспилирует код TypeScript в JavaScript, при этом проверка типов не выполняется, а типы отбрасываются. Это означает, что использование Enum, namespaces и т.д. будет невозможно.

👉 https://github.com/nodejs/node/pull/53725

✨ Все, что вы хотели знать про иерархию инжекторов в Angular

Dependency Injection (DI) — это мощный инструмент, который упрощает работу с зависимостями. Однако часто мы не используем его в полной мере, потому что не до конца понимаем его работу.

Дмитрий Дробышев подробно объяснил, как функционирует DI, что собой представляет иерархия инжекторов и какие изменения внесла 14-я версия Angular с появлением standalone компонентов.

👉 https://habr.com/ru/companies/zyfra/articles/817843/

✨ Анонс TypeScript 5.6 Beta

Disallowed Nullish and Truthy Checks

Компилятор теперь выдает ошибку, когда он определяет, что проверка на истинность или nullish всегда будет давать определенный результат. Однако некоторые выражения все еще разрешены, даже если они всегда являются истинными.

Iterator Helper Methods

Недавно в ECMAScript было предложено добавить множество методов из Array к итераторам. Поэтому в TS появился новый тип под названием BuiltinIterator.

Вместе с этим появился новый флаг --strictBuiltinIteratorReturn.

Опция --noUncheckedSideEffectImports

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

Опция --noCheck​

Позволяет пропустить проверку типов для всех входных файлов.

Один из сценариев использования этой опции — отделить генерацию JavaScript-файлов от проверки типов, чтобы эти два этапа можно было выполнять отдельно.

Allow --build with Intermediate Errors

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

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

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

✨ Руководство по использованию Signal

Signal — это обертка вокруг значения, которая уведомляет заинтересованных потребителей об его изменении.

Евгений объяснил, что такое Signal, как его применять в Angular и привёл примеры реального использования.

👉 https://habr.com/ru/articles/832632/

✨ Computed сигналы и ChangeDetection

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

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

👉 https://habr.com/ru/articles/832520/

✨ Анонс NgRx Signals v18

Начиная с версии 18, пакет @ngrx/signals вышел из стадии предварительной версии для разработчиков и теперь стабилен.

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

👉 https://dev.to/ngrx/announcing-ngrx-signals-v18-state-encapsulation-private-store-members-enhanced-entity-management-and-more-2lo6

✨ Восстановление позиции прокрутки

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

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

👉 https://angular.love/en/angular-scroll-position-restoration

✨ @let: за и против

Недавнее появление @let в Angular вызвало значительные споры в сообществе разработчиков.

Одни считают его ценным дополнением, другие — ненужным усложнением. Подробнее об этом читайте в статье.

👉 https://angular.love/en/angular-template-let-variable-hot-or-not

✨ Управление состоянием URL с помощью NgRx Router Store

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

NgRx Router Store позволяет легко связать состояние приложения с событиями роутера и получать данные из роутера.

👉 https://danywalls.com/handling-router-url-parameters-using-ngrx-router-store

✨ Представляем Taiga UI v4

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

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

👉 https://habr.com/ru/companies/tbank/articles/834508/

✨ Type-safe фронтенд без проверок на null

Разобраться в множестве различных подходов к реактивности в фронтенд-приложениях бывает непросто.

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

👉 https://dev.to/niko_doing_dev/frontend-made-fully-type-safe-and-without-null-checks-part-1-11lm

✨ Использование Signal и Model Inputs

Функции Signal и Model Inputs являются отличной альтернативой декораторам Input и Output, решая проблему обнаружения изменений без дополнительного кода.

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

👉 https://habr.com/ru/companies/tbank/articles/835662/

✨ Обработка ошибок с помощью toSignal

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

По умолчанию, когда Observable, связанный с сигналом, генерирует ошибку, toSignal будет распространять эту ошибку каждый раз, когда вы попытаетесь прочитать значение сигнала. Это может вызвать проблемы, если у вашего приложения есть глобальный обработчик ошибок.

👉 https://netbasal.com/handling-errors-with-tosignal-in-angular-6500511c0d6f

✨ Динамический рендеринг компонентов

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

Даня подробно объяснил процесс их создания, предоставив примеры кода и пошаговое руководство.

👉 https://habr.com/ru/companies/tbank/articles/836036/

✨ Особенности Enums в TypeScript

Многим нравится Enums, но их реализация в TypeScript довольно странная, с множеством нюансов.

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

👉 https://www.totaltypescript.com/why-i-dont-like-typescript-enums

✨ Использование isolatedModules в Angular 18.2

В Angular появилась поддержка isolatedModules из TypeScript, начиная с версии 18.2. Благодаря этому производительность при сборке может увеличиться до 10%.

В статье рассказывается, как вы можете воспользоваться этой функцией в своих проектах.

👉 https://blog.angular.dev/using-isolatedmodules-in-angular-18-2-68a7d3a6c03d

✨ Другой взгляд на TypeScript

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

В статье анализируются основные возможности TypeScript с точки зрения работы с множествами.

👉 https://www.rob.directory/blog/a-different-way-to-think-about-typescript

✨ Использование GitHub в качестве провайдера аутентификации

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

В статье объясняется, как его настроить для использования GitHub в качестве провайдера аутентификации для вашего Angular-приложения.

👉 https://dev.to/this-is-angular/using-github-as-an-authentication-provider-in-your-angular-app-with-pocketbase-3dcc