✨ Отслеживаем размер сборки

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

В статье описывается использование BundleMon — инструмента для мониторинга размера пакета. В качестве альтернативы можно рассмотреть Size Limit.

👉 https://angular.love/en/track-your-bundle-size-with-bundlemon

✨ Angular SSR — Platform Provider паттерн

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

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

👉 https://www.ngserve.io/angular-ssr-creating-server-and-client-side-service/

✨ Знакомство с @let в Angular

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

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

@let позволит определять переменную и повторно использовать ее значение во всем шаблоне.

👉 https://blog.angular.dev/introducing-let-in-angular-686f9f383f0f

✨ RxJS: switchMap, concatMap, mergeMap, exhaustMap

RxJS предлагает широкий спектр возможностей для управления потоками данных. Сегодня мы углубимся в концепцию high-order observables.

Иван Черняков подробно объяснил этот подход, дополнив рассказ примерами из реальной жизни.

👉 https://www.youtube.com/watch?v=O8Pr47VyfDQ

✨ Создание локального AI-чатбота

Команда Chrome работает над тем, чтобы внедрить небольшой LLM в браузере для выполнения простых задач без необходимости использования внешнего API.

Узнайте, как создать чат-приложение с помощью Angular и запустить Gemini Nano, используя всего несколько строк кода.

👉 https://www.danywalls.com/building-a-local-ai-chatbot-with-gemini-nano-chrome-canary-angular-and-kendo-ai-prompt

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

Если вы пропустили сессию 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