✨ Погрузитесь в генеративное искусство

Если вы пропустили сессию Google I/O, посвященную Angular, то упустили не только последние обновления фреймворка, но и демонстрацию Generative Art Gallery, в которой были объединены AI, Angular и WebXR.

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

👉 https://blog.angular.dev/immerse-yourself-in-generative-art-an-angular-webxr-adventure-bd83bcd037d6

✨ Web components как альтернатива iframe

Web components — это набор стандартов, который позволяет создавать пользовательские HTML-элементы.

В Angular поставляется пакет @angular/elements для работы с ними, что делает их использование простым и удобным.

Сергей Глазырин поделился подходом к интеграции формы регистрации в лендинг на CMS с помощью web components.

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

✨ Как создать бесшовную текстуру

Бесшовный шум используется в графике для получения естественных и реалистичных текстур и эффектов.

Виталий Дуденко рассказал, как создавал бесшовную текстуру для фона страницы с определённым узором.

👉 https://habr.com/ru/companies/pgk/articles/829678/

✨ Будущее поддержки Material в Angular

Недавно было объявлено об изменениях в Material Web Components (MWC) от Google. Поскольку Angular Material не использует MWC и не зависит от него, эти изменения на него не повлияют, и он продолжит активно поддерживаться и развиваться.

Пользуясь случаем, команда Angular решила рассказать о том, как они разрабатывают Angular Material.

👉 https://blog.angular.dev/the-future-of-material-support-in-angular-7fa0662ecc4b

✨ Бесплатная книга по TypeScript

Total TypeScript: Essentials — книга, которая проведет вас по пути от новичка до уверенного пользователя.

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

👉 https://www.totaltypescript.com/books/total-typescript-essentials/kickstart-your-typescript-setup

✨ Пользовательская проверка равенства в toSignal

Сигналы поддерживали функцию equal, когда Angular 16 только появился.

Теперь эта опция доступна в toSignal, и её можно использовать для повышения производительности.

👉 https://dev.to/railsstudent/explain-tosignal-custom-equality-checking-in-angular-18-g2i

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

Тестировать компоненты 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