✨ Angular 19 и ZoneLess

Возможно, вы считаете, что ваши Angular приложения работают быстро, но под капотом Zone.js приходится выполнять итерации по всему дереву DOM, что влияет на производительность.

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

👉 https://danywalls.com/angular-19-and-zoneless

✨ Недостающий ингредиент для покрытия кода шаблонов

Независимо от того, используете ли вы Karma, Jest или Vitest, вероятно, вы используете компиляцию Just-In-Time (JIT) для своих тестов, поскольку до недавнего времени это был единственный доступный вариант.

Хорошая новость заключается в том, что теперь вы можете включить компиляцию Ahead-Of-Time (AOT) для тестов, чтобы получить более точное покрытие кода шаблонов и ускорить их выполнение. Пока эта возможность доступна только для Vitest, но, возможно, в скором времени она появится в Karma и Jest.

👉 https://marmicode.io/blog/angular-template-code-coverage-and-future-proof-testing

✨ Закладки, к которым ты никогда не вернешься

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

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

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

✨ Шпаргалка по Signals

Система реактивности в Angular за последнее время значительно усложнилась, и разобраться в ней становится всё труднее.

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

👉 https://medium.com/p/89d3dbac79a1

✨ Создание Angular-приложения для разных групп пользователей

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

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

👉 https://timdeschryver.dev/blog/creating-an-angular-application-thats-used-by-different-user-groups

✨ Продвинутые операторы RxJS

Поскольку RxJS остается важным инструментом в Angular и включает огромное количество операторов.

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

👉 https://www.angularspace.com/advanced-rxjs-operators-you-know-but-not-well-enough-pt-2/

✨ Паттерн Фасад в Angular

Фасад (Facade) — это структурный шаблон проектирования, который предоставляет упрощенный интерфейс к сложной подсистеме или набору подсистем. При этом фасад не инкапсулирует функциональность сам по себе, а делегирует выполнение задач соответствующим классам, избавляя клиента от лишней сложности.

В Angular паттерн Фасад реализуется через создание сервиса (фасада), который взаимодействует с различными другими сервисами или логикой управления состоянием. Этот сервис служит единой точкой взаимодействия для компонентов, предоставляя простой и чистый API, который скрывает все сложности системы.

👉 https://angular.love/angular-facade-pattern

✨ Последние разработки в механизме обнаружения изменений

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

В Angular этот вопрос особенно спорный, в основном из-за «магической» природы Zone.js. В последнее время в этой области произошли значительные обновления, особенно с появлением сигналов и возможностью отказаться от использования Zone.js.

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

👉 https://angular.love/the-latest-in-angular-change-detection-zoneless-signals

✨ Хост директивы: ключ к декомпозиции

Хотя Directive Composition API появилось ещё в Angular 15, и мы о нём уже писали ранее, оно до сих пор не привлекло должного внимания.

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

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

✨ Рецепты TypeScript: простое тестирование типов

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

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

👉 https://habr.com/ru/companies/cloud_ru/articles/865118/

✨ NG-BE 2024

Недавно прошла конференция NG-BE в Бельгии, и все записи теперь доступны онлайн.

В основном докладе Минко Гечев (Minko Gechev) поделился достижениями Angular за последние несколько лет и заглянул в будущее фреймворка.

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

👉 https://youtube.com/playlist?list=PL9pV_RwZceNg6bl_hBEgGevOP-QvLXHRt

✨ Анонс NgRx 19

Библиотека NgRx Signals, впервые представленная в версии 18, была разработана с нуля на основе Angular Signals.

В этом выпуске она получила обновления и улучшения, направленные на повышение удобства работы разработчиков. Полный список изменений доступен в репозитории на GitHub.

👉 https://dev.to/ngrx/announcing-ngrx-19-ngrx-signals-features-action-signals-and-more-2b35

✨ Использование Resource API с NgRx SignalStore

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

Эта статья показывает, как использовать withProps для работы с Resource API внутри SignalStore.

👉 https://www.angulararchitects.io/en/blog/using-the-resource-api-with-the-ngrx-signal-store/

✨ Основные способы взаимодействия компонентов

В Angular существует множество методов взаимодействия между компонентами.

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

👉 https://www.angularspace.com/mastering-component-communication-in-angular/

✨ State of JS 2024

State of JS был создан для выявления новых тенденций в экосистеме веба, чтобы помочь разработчикам принимать технологические решения.

В этом году он проводился с 13 ноября по 10 декабря и собрал 14015 ответов.

👉 https://2024.stateofjs.com/en-US/

✨ Новый стиль написания кода

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

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

👉 https://angularexperts.io/blog/new-angular-coding-style

✨ Интеграция CSS-фреймворков в Angular

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

Статья подробно объясняет причины этих сложностей и дает рекомендации, как правильно интегрировать CSS-фреймворки в Angular.

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

✨ 5 CSS-сниппетов, которые должен знать каждый front-end разработчик в 2024 году

Если вы пропустили все последние новшества в CSS, то самое время наверстать упущенное.

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

👉 https://www.angularspace.com/5-css-snippets-every-front-end-developer-should-know-in-2024/

✨ Создание приложения для перевода

Перевод контента в интернете традиционно требует использования серверной инфраструктуры. Однако с недавнего времени в Chrome стала доступна локальная языковая модель (LLM), которая позволяет использовать Translator API.

Это открывает возможность создавать приложения для перевода без настройки серверной части и дополнительных затрат на использование LLM.

👉 https://dev.to/railsstudent/build-a-translation-app-with-chrome-built-in-ai-in-angular-5636

✨ Что такое реактивное программирование?

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

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

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

✨ Прототип форм на основе сигналов

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

Эта директория содержит прототип кода, демонстрирующего, как может выглядеть и работать будущая версия Angular Forms.

👉 https://github.com/angular/angular/tree/prototype/signal-forms/packages/forms/experimental