✨ Взаимодействие браузера, angular и zone.js
В Angular обнаружение изменений автоматически запускается после каждого асинхронного события. Предполагается, что большинство событий вызывают изменение состояния приложения, которое должно быть отражено в DOM.
Чтобы Angular знал, когда состояние приложения может измениться, ему необходимо знать, когда происходят эти события. Именно здесь в игру вступает библиотека zone.js.
👉 https://indepth.dev/posts/1510/rendering-cycle-in-angular-applications-browser-angular-and-zone-js-interaction
В Angular обнаружение изменений автоматически запускается после каждого асинхронного события. Предполагается, что большинство событий вызывают изменение состояния приложения, которое должно быть отражено в DOM.
Чтобы Angular знал, когда состояние приложения может измениться, ему необходимо знать, когда происходят эти события. Именно здесь в игру вступает библиотека zone.js.
👉 https://indepth.dev/posts/1510/rendering-cycle-in-angular-applications-browser-angular-and-zone-js-interaction
👍13🤯3🔥1
✨ Как работает реактивность с Zone.js
Продолжаем погружаться в работу с Zone.js.
Эта статья представляет собой углубленный взгляд на то, как работает Angular под капотом.
👉 https://unicorn-utterances.com/posts/angular-internals-zonejs
Продолжаем погружаться в работу с Zone.js.
Эта статья представляет собой углубленный взгляд на то, как работает Angular под капотом.
👉 https://unicorn-utterances.com/posts/angular-internals-zonejs
👍9
✨ Angular 15.1.0 делает код немного проще
Прошло некоторое время с момента выхода Angular 15. С тех пор команда Angular выпустила несколько минорных версий.
В статье рассказано о наиболее интересных исправлениях и функциях.
👉 https://medium.com/p/8680dbdea436
Прошло некоторое время с момента выхода Angular 15. С тех пор команда Angular выпустила несколько минорных версий.
В статье рассказано о наиболее интересных исправлениях и функциях.
👉 https://medium.com/p/8680dbdea436
👍12
✨ Обнаружение изменений и деревья компонентов
Мы можем представить себе приложение Angular как дерево компонентов. Под капотом для компонентов Angular использует низкоуровневую абстракцию под названием View.
В этой статье подробно рассматривается, как дерево компонентов соответствует дереву представлений.
👉 https://indepth.dev/posts/1512/change-detection-and-component-trees-in-angular-applications
Мы можем представить себе приложение Angular как дерево компонентов. Под капотом для компонентов Angular использует низкоуровневую абстракцию под названием View.
В этой статье подробно рассматривается, как дерево компонентов соответствует дереву представлений.
👉 https://indepth.dev/posts/1512/change-detection-and-component-trees-in-angular-applications
👍11
✨ Улучшаем производительность
Изображения на наших сайтах сильно влияют на общий вес страницы, а метрика Largest Contentful Paint (LCP) оказывает значительное влияние на воспринимаемую скорость загрузки.
В статье исследуется директива NgOptimizedImage, а также проверяется действительно ли она полезна.
👉 https://indepth.dev/posts/1511/improve-page-performance-and-lcp-with-ngoptimizedimage
Изображения на наших сайтах сильно влияют на общий вес страницы, а метрика Largest Contentful Paint (LCP) оказывает значительное влияние на воспринимаемую скорость загрузки.
В статье исследуется директива NgOptimizedImage, а также проверяется действительно ли она полезна.
👉 https://indepth.dev/posts/1511/improve-page-performance-and-lcp-with-ngoptimizedimage
👍5🔥1🤔1
✨ Разбираем ошибку ExpressionChangedAfterItHasBeenCheckedError
Одна из самых частых тем, связанных с Angular, на StackOverflow — это печально известная ошибка ExpressionChangedAfterItHasBeenCheckedError.
Для Angular это просто способ обеспечить однонаправленный поток данных и гарантировать, что состояние приложения и пользовательский интерфейс синхронизируются после одного прохода цикла обнаружения изменений.
👉 https://indepth.dev/posts/1514/deep-dive-into-the-infamous-expressionchangedafterithasbeencheckederror-in-angular
Одна из самых частых тем, связанных с Angular, на StackOverflow — это печально известная ошибка ExpressionChangedAfterItHasBeenCheckedError.
Для Angular это просто способ обеспечить однонаправленный поток данных и гарантировать, что состояние приложения и пользовательский интерфейс синхронизируются после одного прохода цикла обнаружения изменений.
👉 https://indepth.dev/posts/1514/deep-dive-into-the-infamous-expressionchangedafterithasbeencheckederror-in-angular
👍26🔥3
✨ Подборка материалов для погружения в Angular
Зачастую для освоения фреймворка достаточно документации — она способна ответить на большинство вопросов.
В статье собрана подборка материалов, чтобы было, чем разнообразить процесс изучения.
👉 https://habr.com/ru/company/selectel/blog/713876/
Зачастую для освоения фреймворка достаточно документации — она способна ответить на большинство вопросов.
В статье собрана подборка материалов, чтобы было, чем разнообразить процесс изучения.
👉 https://habr.com/ru/company/selectel/blog/713876/
🔥11👍5💩1
✨ Магия ContentChild, ViewChild и Template References
В Angular мы склонны писать декларативный код.
Это означает, что мы не должны вручную запрашивать что-то, когда нам это нужно. В фреймворке есть инструменты, которые позволяют нам это делать.
👉 https://medium.com/p/d1cbf7f819c4
В Angular мы склонны писать декларативный код.
Это означает, что мы не должны вручную запрашивать что-то, когда нам это нужно. В фреймворке есть инструменты, которые позволяют нам это делать.
👉 https://medium.com/p/d1cbf7f819c4
👍12🔥6💩3
✨ Осваиваем TypeScript
Cтатьи с лучшими практиками экономят время, но к сожалению не позволяют изучить вопрос досконально.
В этой статье мы углубимся в мир TypeScript и изучим 21 лучшую практику и, возможно, комментарии на хабре будут полезнее самой статьи.
👉 https://habr.com/ru/company/ruvds/blog/712548/
Cтатьи с лучшими практиками экономят время, но к сожалению не позволяют изучить вопрос досконально.
В этой статье мы углубимся в мир TypeScript и изучим 21 лучшую практику и, возможно, комментарии на хабре будут полезнее самой статьи.
👉 https://habr.com/ru/company/ruvds/blog/712548/
👍18💩3
✨ Angular и tRPC
tRPC — это легкий, высокопроизводительный RPC (Remote Procedure Call) фреймворк, разработанный для простого, быстрого и удобного использования.
Основное преимущество использования tRPC - безопасность типов без генерации кода.
👉 https://medium.com/p/a48c2fafd17e
tRPC — это легкий, высокопроизводительный RPC (Remote Procedure Call) фреймворк, разработанный для простого, быстрого и удобного использования.
Основное преимущество использования tRPC - безопасность типов без генерации кода.
👉 https://medium.com/p/a48c2fafd17e
👍6🔥3
✨ Jest ESM - полное руководство по ускорению тестирования
Под Jest ESM, имеется в виду работа Jest в режиме, когда он понимает и использует модули EcmaScript, особенно синтаксис импорта/экспорта ESM.
Давайте узнаем, как ускорить тесты и как решить все проблемы, которые обычно возникают на этом пути.
👉 https://angularexperts.io/blog/total-guide-to-jest-esm-and-angular
Под Jest ESM, имеется в виду работа Jest в режиме, когда он понимает и использует модули EcmaScript, особенно синтаксис импорта/экспорта ESM.
Давайте узнаем, как ускорить тесты и как решить все проблемы, которые обычно возникают на этом пути.
👉 https://angularexperts.io/blog/total-guide-to-jest-esm-and-angular
👍6❤1🔥1
✨ Осваиваем структурные директивы
Структурные директивы — это один из самых мощных инструментов Angular. Мы сталкиваемся с ними в самом начале изучения. Однако внутренняя жизнь директив часто остается загадкой.
В этой серии статей мы разберемся в их работе.
👉 https://dev.to/this-is-angular/mastering-angular-structural-directives-the-basics-jhk
Структурные директивы — это один из самых мощных инструментов Angular. Мы сталкиваемся с ними в самом начале изучения. Однако внутренняя жизнь директив часто остается загадкой.
В этой серии статей мы разберемся в их работе.
👉 https://dev.to/this-is-angular/mastering-angular-structural-directives-the-basics-jhk
👍10
✨ Все, что вам нужно знать о Route Guard
Маршрутизация является важным аспектом любого приложения, и защита маршрутов часто бывает необходима. Angular предоставляет набор встроенных механизмов, которые можно легко использовать для различных случаев.
В этой статье продемонстрированы возможности Guards и показано, как их использовать на примерах.
👉 https://dev.to/this-is-angular/everything-you-need-to-know-about-route-guard-in-angular-2hkn
Маршрутизация является важным аспектом любого приложения, и защита маршрутов часто бывает необходима. Angular предоставляет набор встроенных механизмов, которые можно легко использовать для различных случаев.
В этой статье продемонстрированы возможности Guards и показано, как их использовать на примерах.
👉 https://dev.to/this-is-angular/everything-you-need-to-know-about-route-guard-in-angular-2hkn
👍4
✨ Работа с window
Считается хорошей практикой преобразовывать неангулярные объекты, такие как window, в инжектируемые, вместо того чтобы использовать их напрямую. Но почему?
Когда мы используем SSR в Angular, объект window отсутствует. Чтобы преодолеть эту проблему и сделать приложение не зависящим от платформы, можно предоставить window через механизм Angular DI.
👉 https://medium.com/p/b20da0e02dd7
Считается хорошей практикой преобразовывать неангулярные объекты, такие как window, в инжектируемые, вместо того чтобы использовать их напрямую. Но почему?
Когда мы используем SSR в Angular, объект window отсутствует. Чтобы преодолеть эту проблему и сделать приложение не зависящим от платформы, можно предоставить window через механизм Angular DI.
👉 https://medium.com/p/b20da0e02dd7
👍13
✨ Перестаньте бояться InjectionTokens
InjectionToken, похоже, пугают многих разработчиков. Чтобы преодолеть страх перед этой функцией, важно иметь базовое представление о том, как работает инъекция зависимостей Angular.
Эта статья дает хорошее представление об InjectionToken и о том, что они означают.
👉 https://dev.to/this-is-angular/stop-being-scared-of-injectiontokens-2406
InjectionToken, похоже, пугают многих разработчиков. Чтобы преодолеть страх перед этой функцией, важно иметь базовое представление о том, как работает инъекция зависимостей Angular.
Эта статья дает хорошее представление об InjectionToken и о том, что они означают.
👉 https://dev.to/this-is-angular/stop-being-scared-of-injectiontokens-2406
👍9🤔1🤓1
✨ Реактивность с помощью сигналов
Команда Angular анонсировала прототип, который добавит в фреймворк реактивный примитив Signal. Реактивность с помощью сигналов может в корне изменить то, как мы пишем приложения.
В этом посте рассмотрены несколько ключевых вопросов, связанных с этим предложением.
👉 https://medium.com/p/152a2d26fe2f
Команда Angular анонсировала прототип, который добавит в фреймворк реактивный примитив Signal. Реактивность с помощью сигналов может в корне изменить то, как мы пишем приложения.
В этом посте рассмотрены несколько ключевых вопросов, связанных с этим предложением.
👉 https://medium.com/p/152a2d26fe2f
👍16
✨ Изучаем Angular с помощью Open Source
Иногда не хватает реальных приложений с открытым исходным кодом, которые можно посмотреть, чтобы увидеть, как профессионалы используют Angular в своих продуктах.
Сегодня мы делимся с вами списком из пяти приложений. Если вы знаете классный проект, пожалуйста расскажите о нем в комментариях.
👉 https://medium.com/p/c5def72e0e41
Иногда не хватает реальных приложений с открытым исходным кодом, которые можно посмотреть, чтобы увидеть, как профессионалы используют Angular в своих продуктах.
Сегодня мы делимся с вами списком из пяти приложений. Если вы знаете классный проект, пожалуйста расскажите о нем в комментариях.
👉 https://medium.com/p/c5def72e0e41
👍21
✨ Глубокое погружение в стратегию обнаружения изменений OnPush
Angular реализует две стратегии для управления поведением при обнаружении изменений на уровне отдельных компонентов.
Давайте рассмотрим эти стратегии более подробно.
👉 https://indepth.dev/posts/1515/deep-dive-into-the-onpush-change-detection-strategy-in-angular
Angular реализует две стратегии для управления поведением при обнаружении изменений на уровне отдельных компонентов.
Давайте рассмотрим эти стратегии более подробно.
👉 https://indepth.dev/posts/1515/deep-dive-into-the-onpush-change-detection-strategy-in-angular
👍11🤔1🤓1
✨ Введение в Directives Composition API
Directives Composition API может быть довольно полезным и простым в использовании инструментом для извлечения поведения в мелкие директивы и объединения их в более сложные.
В этой статье мы изучим новый API и посмотрим, как мы можем использовать его в наших компонентах.
👉 https://www.thisdot.co/blog/introduction-to-directives-composition-api-in-angular
Directives Composition API может быть довольно полезным и простым в использовании инструментом для извлечения поведения в мелкие директивы и объединения их в более сложные.
В этой статье мы изучим новый API и посмотрим, как мы можем использовать его в наших компонентах.
👉 https://www.thisdot.co/blog/introduction-to-directives-composition-api-in-angular
👍6💩2🎉1
🦄 История о миграции на Module Federation
Почти все монолиты похожи друг на друга, — бизнес-код, функциональщина, все перемешано.
Максим Смирнов, в первой части цикла статей, рассказал о том, что такое монолит, как навести в нем порядок, для комфортной разработки и о причинах пересмотра архитектуры приложения.
👉 https://habr.com/ru/company/oleg-bunin/blog/718302/
Почти все монолиты похожи друг на друга, — бизнес-код, функциональщина, все перемешано.
Максим Смирнов, в первой части цикла статей, рассказал о том, что такое монолит, как навести в нем порядок, для комфортной разработки и о причинах пересмотра архитектуры приложения.
👉 https://habr.com/ru/company/oleg-bunin/blog/718302/
👍6👎1🤮1💩1