✨ Недостающий ингредиент для покрытия кода шаблонов
Независимо от того, используете ли вы 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
Независимо от того, используете ли вы 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
👍2👏2🔥1
✨ Закладки, к которым ты никогда не вернешься
Закладки — удобный инструмент, который со временем может превратиться в источник хаоса и информационного перегруза, усиливая прокрастинацию.
В статье исследуется цифровое накопительство и предложено креативное решение: автоматическое удаление закладок через определенный период.
👉 https://habr.com/ru/articles/863970/
Закладки — удобный инструмент, который со временем может превратиться в источник хаоса и информационного перегруза, усиливая прокрастинацию.
В статье исследуется цифровое накопительство и предложено креативное решение: автоматическое удаление закладок через определенный период.
👉 https://habr.com/ru/articles/863970/
👍3❤2🔥2🤡1
✨ Шпаргалка по Signals
Система реактивности в Angular за последнее время значительно усложнилась, и разобраться в ней становится всё труднее.
В этой статье представлен справочник, который поможет разобраться даже в самых сложных моментах.
👉 https://medium.com/p/89d3dbac79a1
Система реактивности в Angular за последнее время значительно усложнилась, и разобраться в ней становится всё труднее.
В этой статье представлен справочник, который поможет разобраться даже в самых сложных моментах.
👉 https://medium.com/p/89d3dbac79a1
👍12👏4🔥2
✨ Создание Angular-приложения для разных групп пользователей
При разработке многопользовательского приложения, например, интернет-магазина с публичной и административной частями, критически важно уделить внимание: безопасности, поддерживаемости кода и эффективности разработки.
В статье представлены четыре подхода к структурированию Angular-приложений. Каждый из них имеет свои преимущества и недостатки, и выбор подходящего зависит от ваших требований.
👉 https://timdeschryver.dev/blog/creating-an-angular-application-thats-used-by-different-user-groups
При разработке многопользовательского приложения, например, интернет-магазина с публичной и административной частями, критически важно уделить внимание: безопасности, поддерживаемости кода и эффективности разработки.
В статье представлены четыре подхода к структурированию Angular-приложений. Каждый из них имеет свои преимущества и недостатки, и выбор подходящего зависит от ваших требований.
👉 https://timdeschryver.dev/blog/creating-an-angular-application-thats-used-by-different-user-groups
👍4🔥2
✨ Продвинутые операторы RxJS
Поскольку RxJS остается важным инструментом в Angular и включает огромное количество операторов.
Сегодня мы рассмотрим дополнительные операторы, их комбинации и практические сценарии использования.
👉 https://www.angularspace.com/advanced-rxjs-operators-you-know-but-not-well-enough-pt-2/
Поскольку RxJS остается важным инструментом в Angular и включает огромное количество операторов.
Сегодня мы рассмотрим дополнительные операторы, их комбинации и практические сценарии использования.
👉 https://www.angularspace.com/advanced-rxjs-operators-you-know-but-not-well-enough-pt-2/
👍6🔥2
✨ Паттерн Фасад в Angular
Фасад (Facade) — это структурный шаблон проектирования, который предоставляет упрощенный интерфейс к сложной подсистеме или набору подсистем. При этом фасад не инкапсулирует функциональность сам по себе, а делегирует выполнение задач соответствующим классам, избавляя клиента от лишней сложности.
В Angular паттерн Фасад реализуется через создание сервиса (фасада), который взаимодействует с различными другими сервисами или логикой управления состоянием. Этот сервис служит единой точкой взаимодействия для компонентов, предоставляя простой и чистый API, который скрывает все сложности системы.
👉 https://angular.love/angular-facade-pattern
Фасад (Facade) — это структурный шаблон проектирования, который предоставляет упрощенный интерфейс к сложной подсистеме или набору подсистем. При этом фасад не инкапсулирует функциональность сам по себе, а делегирует выполнение задач соответствующим классам, избавляя клиента от лишней сложности.
В Angular паттерн Фасад реализуется через создание сервиса (фасада), который взаимодействует с различными другими сервисами или логикой управления состоянием. Этот сервис служит единой точкой взаимодействия для компонентов, предоставляя простой и чистый API, который скрывает все сложности системы.
👉 https://angular.love/angular-facade-pattern
💩11👍4❤3👏3🥱2
✨ Последние разработки в механизме обнаружения изменений
Обнаружение изменений всегда было горячей темой, и это неудивительно — это одна из ключевых концепций любого фреймворка.
В Angular этот вопрос особенно спорный, в основном из-за «магической» природы Zone.js. В последнее время в этой области произошли значительные обновления, особенно с появлением сигналов и возможностью отказаться от использования Zone.js.
Эта статья поможет вам понять новые механизмы обнаружения изменений в Angular и то, как эти концепции могут работать вместе.
👉 https://angular.love/the-latest-in-angular-change-detection-zoneless-signals
Обнаружение изменений всегда было горячей темой, и это неудивительно — это одна из ключевых концепций любого фреймворка.
В Angular этот вопрос особенно спорный, в основном из-за «магической» природы Zone.js. В последнее время в этой области произошли значительные обновления, особенно с появлением сигналов и возможностью отказаться от использования Zone.js.
Эта статья поможет вам понять новые механизмы обнаружения изменений в Angular и то, как эти концепции могут работать вместе.
👉 https://angular.love/the-latest-in-angular-change-detection-zoneless-signals
👍6❤3🔥1
✨ Хост директивы: ключ к декомпозиции
Хотя Directive Composition API появилось ещё в Angular 15, и мы о нём уже писали ранее, оно до сих пор не привлекло должного внимания.
Александр Инкин в переводе своей статьи стремится привлечь больше интереса к этому инструменту, демонстрируя его потенциал и возможности.
👉 https://habr.com/ru/companies/tbank/articles/867276/
Хотя Directive Composition API появилось ещё в Angular 15, и мы о нём уже писали ранее, оно до сих пор не привлекло должного внимания.
Александр Инкин в переводе своей статьи стремится привлечь больше интереса к этому инструменту, демонстрируя его потенциал и возможности.
👉 https://habr.com/ru/companies/tbank/articles/867276/
👍7🔥5👏2
✨ Рецепты TypeScript: простое тестирование типов
Утилитарные типы можно применять с заданными ограничениями: если типы не соответствуют этим условиям, TypeScript генерирует ошибку. Это свойство делает их удобным инструментом для тестирования.
Константин Логиновских продемонстрировал, как проверять корректность типов, чтобы уверенно и безопасно вносить изменения даже в самые сложные конструкции.
👉 https://habr.com/ru/companies/cloud_ru/articles/865118/
Утилитарные типы можно применять с заданными ограничениями: если типы не соответствуют этим условиям, TypeScript генерирует ошибку. Это свойство делает их удобным инструментом для тестирования.
Константин Логиновских продемонстрировал, как проверять корректность типов, чтобы уверенно и безопасно вносить изменения даже в самые сложные конструкции.
👉 https://habr.com/ru/companies/cloud_ru/articles/865118/
👍2🔥1
✨ NG-BE 2024
Недавно прошла конференция NG-BE в Бельгии, и все записи теперь доступны онлайн.
В основном докладе Минко Гечев (Minko Gechev) поделился достижениями Angular за последние несколько лет и заглянул в будущее фреймворка.
Также прозвучали доклады о производительности, формах, архитектуре, TypeScript и многом другом.
👉 https://youtube.com/playlist?list=PL9pV_RwZceNg6bl_hBEgGevOP-QvLXHRt
Недавно прошла конференция NG-BE в Бельгии, и все записи теперь доступны онлайн.
В основном докладе Минко Гечев (Minko Gechev) поделился достижениями Angular за последние несколько лет и заглянул в будущее фреймворка.
Также прозвучали доклады о производительности, формах, архитектуре, TypeScript и многом другом.
👉 https://youtube.com/playlist?list=PL9pV_RwZceNg6bl_hBEgGevOP-QvLXHRt
👍9🔥4❤2
✨ Анонс NgRx 19
Библиотека NgRx Signals, впервые представленная в версии 18, была разработана с нуля на основе Angular Signals.
В этом выпуске она получила обновления и улучшения, направленные на повышение удобства работы разработчиков. Полный список изменений доступен в репозитории на GitHub.
👉 https://dev.to/ngrx/announcing-ngrx-19-ngrx-signals-features-action-signals-and-more-2b35
Библиотека NgRx Signals, впервые представленная в версии 18, была разработана с нуля на основе Angular Signals.
В этом выпуске она получила обновления и улучшения, направленные на повышение удобства работы разработчиков. Полный список изменений доступен в репозитории на GitHub.
👉 https://dev.to/ngrx/announcing-ngrx-19-ngrx-signals-features-action-signals-and-more-2b35
💩4👍3👏2🤝1
✨ Использование 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/
В новом релизе NgRx представил функцию withProps, которая позволяет добавлять произвольные свойства в стор.
Эта статья показывает, как использовать withProps для работы с Resource API внутри SignalStore.
👉 https://www.angulararchitects.io/en/blog/using-the-resource-api-with-the-ngrx-signal-store/
👍2👎1
✨ Основные способы взаимодействия компонентов
В Angular существует множество методов взаимодействия между компонентами.
В статье наглядно показывается, как компоненты могут обмениваться данными — от простых методов до более сложных, таких как передача данных через роутер.
👉 https://www.angularspace.com/mastering-component-communication-in-angular/
В Angular существует множество методов взаимодействия между компонентами.
В статье наглядно показывается, как компоненты могут обмениваться данными — от простых методов до более сложных, таких как передача данных через роутер.
👉 https://www.angularspace.com/mastering-component-communication-in-angular/
👍8❤3
✨ State of JS 2024
State of JS был создан для выявления новых тенденций в экосистеме веба, чтобы помочь разработчикам принимать технологические решения.
В этом году он проводился с 13 ноября по 10 декабря и собрал 14015 ответов.
👉 https://2024.stateofjs.com/en-US/
State of JS был создан для выявления новых тенденций в экосистеме веба, чтобы помочь разработчикам принимать технологические решения.
В этом году он проводился с 13 ноября по 10 декабря и собрал 14015 ответов.
👉 https://2024.stateofjs.com/en-US/
👍6❤3🔥2
✨ Новый стиль написания кода
Если вы интересуетесь современными подходами к разработке на Angular.
В статье представлены ключевые изменения и рекомендации, которые помогут улучшить ваш код. Эти подходы можно адаптировать под ваши потребности, сочетая общепризнанные практики с индивидуальными предпочтениями.
👉 https://angularexperts.io/blog/new-angular-coding-style
Если вы интересуетесь современными подходами к разработке на Angular.
В статье представлены ключевые изменения и рекомендации, которые помогут улучшить ваш код. Эти подходы можно адаптировать под ваши потребности, сочетая общепризнанные практики с индивидуальными предпочтениями.
👉 https://angularexperts.io/blog/new-angular-coding-style
👍14🔥9
✨ Интеграция CSS-фреймворков в Angular
При интеграции CSS-фреймворков в Angular могут возникнуть трудности, связанные с инкапсуляцией стилей, динамическим изменением классов и использованием JavaScript-компонентов.
Статья подробно объясняет причины этих сложностей и дает рекомендации, как правильно интегрировать CSS-фреймворки в Angular.
👉 https://habr.com/ru/articles/870192/
При интеграции CSS-фреймворков в Angular могут возникнуть трудности, связанные с инкапсуляцией стилей, динамическим изменением классов и использованием JavaScript-компонентов.
Статья подробно объясняет причины этих сложностей и дает рекомендации, как правильно интегрировать CSS-фреймворки в Angular.
👉 https://habr.com/ru/articles/870192/
❤2👍1🔥1
✨ 5 CSS-сниппетов, которые должен знать каждый front-end разработчик в 2024 году
Если вы пропустили все последние новшества в CSS, то самое время наверстать упущенное.
В статье представлены пять мощных CSS-инструментов, которые уже доступны для использования.
👉 https://www.angularspace.com/5-css-snippets-every-front-end-developer-should-know-in-2024/
Если вы пропустили все последние новшества в CSS, то самое время наверстать упущенное.
В статье представлены пять мощных CSS-инструментов, которые уже доступны для использования.
👉 https://www.angularspace.com/5-css-snippets-every-front-end-developer-should-know-in-2024/
🔥5👍4❤1
✨ Создание приложения для перевода
Перевод контента в интернете традиционно требует использования серверной инфраструктуры. Однако с недавнего времени в Chrome стала доступна локальная языковая модель (LLM), которая позволяет использовать Translator API.
Это открывает возможность создавать приложения для перевода без настройки серверной части и дополнительных затрат на использование LLM.
👉 https://dev.to/railsstudent/build-a-translation-app-with-chrome-built-in-ai-in-angular-5636
Перевод контента в интернете традиционно требует использования серверной инфраструктуры. Однако с недавнего времени в Chrome стала доступна локальная языковая модель (LLM), которая позволяет использовать Translator API.
Это открывает возможность создавать приложения для перевода без настройки серверной части и дополнительных затрат на использование LLM.
👉 https://dev.to/railsstudent/build-a-translation-app-with-chrome-built-in-ai-in-angular-5636
🔥6👍5☃1
✨ Что такое реактивное программирование?
Реактивное программирование — современный подход, который открывает разработчикам возможности создавать отзывчивые, масштабируемые и высокоэффективные приложения.
Эта статья станет вашим первым шагом в мир реактивного программирования, предоставляя понятное и доступное введение для начинающих.
👉 https://habr.com/ru/articles/871244/
Реактивное программирование — современный подход, который открывает разработчикам возможности создавать отзывчивые, масштабируемые и высокоэффективные приложения.
Эта статья станет вашим первым шагом в мир реактивного программирования, предоставляя понятное и доступное введение для начинающих.
👉 https://habr.com/ru/articles/871244/
👍7👏2
✨ Прототип форм на основе сигналов
Формы являются центральной частью многих Angular приложений, и официальное решение на основе сигналов с нетерпением ожидается сообществом.
Эта директория содержит прототип кода, демонстрирующего, как может выглядеть и работать будущая версия Angular Forms.
👉 https://github.com/angular/angular/tree/prototype/signal-forms/packages/forms/experimental
Формы являются центральной частью многих Angular приложений, и официальное решение на основе сигналов с нетерпением ожидается сообществом.
Эта директория содержит прототип кода, демонстрирующего, как может выглядеть и работать будущая версия Angular Forms.
👉 https://github.com/angular/angular/tree/prototype/signal-forms/packages/forms/experimental
👍7❤2🔥1