🦊 Angular Fox 🚀 — русскогорящие новости сообщества

✨ Создаем формы с автосохранением Работа с формами в веб-приложениях имеет важнейшее значение, так как с их помощью мы взаимодействуем с пользователями. В этой статье мы научимся создавать формы с автосохранением в Angular. В процессе изучим несколько операторов RxJS и различия между реактивным и шаблонным подходом. 👉 https://medium.com/p/1a396d17ed7d

✨ Избегаем распространенных ловушек с ControlValueAccessors Одним из самых больших преимуществ Angular является разнообразие инструментов и решений, которые предлагаются разработчикам из коробки. Одним из них является пакет @angular/forms, который дает солидный опыт работы с любыми элементами управления пользовательского интерфейса. Но задумывались ли вы когда-нибудь, как именно это работает под капотом? 👉 https://medium.com/p/b8b81b366c19

✨ Создаем документацию Документирование проектов — это задача, которую разработчики нередко упускают из виду. Часто приходится работать над кодом, который был написан другими, а документация могла бы сэкономить много времени. Эта статья содержит советы и инструменты для начала документирования ваших проектов и улучшения опыта разработки. 👉 https://dev.to/this-is-angular/documenting-angular-projects-5ob

✨ 18 техник оптимизации производительности Несмотря на растущее число инструментов, помогающих оптимизировать производительность, работа с ней остается одним из самых сложных аспектов разработки. Опираясь на свой многолетний опыт работы, Кристиан и Майкл обсуждают методы оптимизации Angular приложений. 👉 https://christianlydemann.com/18-performance-optimization-techniques-for-angular-applications-podcast-with-michael-hladky/

✨ Angular DI: использование Inject вместо конструктора Как вы уже знаете, теперь мы можем использовать функцию inject() внутри компонентов. Netanel Basal назвал причины, по которым он выбрал Inject вместо конструктора для инъекции зависимостей. 👉 https://medium.com/p/d0782d434fb1

✨ Умный подход к бесконечному скроллингу Зачастую в веб-дизайне встречаются бесконечные прокрутки, если реализовывать их наивно, то это приведет к разрастанию DOM-дерева и проблемам с производительностью. Михаил Кириченко рассказал, как подходить к построению интерфейсов, чтобы улучшить производительность при скроллинге. 👉 https://habr.com/ru/company/bimeister/blog/686096/

✨ Использование Angular компонентов в Astro Astro — это относительно новый веб-фреймворк, ориентированный на то, чтобы помочь вам создавать быстрые сайты, позволяя другим фреймворкам визуализировать свои компоненты. В статье описывается способ создавать сайты, используя Astro с компонентами Angular. 👉 https://dev.to/brandontroberts/bringing-angular-components-to-astro-islands-52jp

✨ Оптимизация изображений с помощью директивы Angular Image В мае 2022 года команды Aurora и Angular объявили о совместной работе над директивой изображений для Angular. Недавно эта директива была выпущена для предварительного просмотра разработчиками как часть Angular v14.2. В этой статье рассказывается о том, как новая директива NgOptimizedImage, поддерживает оптимизацию изображений. 👉 https://developer.chrome.com/blog/angular-image-directive/

✨ Используем React в Angular приложениях Есть два сценария, которые могут потребовать использовать React в Angular приложении. Во-первых, в экосистеме React есть компонент, на разработку которого уйдут недели. Во-вторых, возможно вы приобрели компанию, использующую React, и необходимо интегрировать его в существующее приложение. В этой статье показывается, как интегрировать React в обоих случаях. 👉 https://medium.com/p/1bb907ecac91

✨ Учимся работать с inject Функция inject — это еще один способ получить зависимость. С ней мы можем разрабатывать многократно используемые функции, которые используют преимущества системы инъекции зависимостей Angular. В статье на примерах показано, почему функция inject такая замечательная. 👉 https://medium.com/p/ac281e7148d1

✨ Работаем с GraphQL в Angular Apollo Angular — это сверхгибкий клиент GraphQL для Angular, позволяющий добавить его в уже существующее приложение и начать использовать GraphQL только для части пользовательского интерфейса. В статье описан быстрый способ его настройки. 👉 https://medium.com/p/a6fccf5f3a0c

✨ Настраиваем CI/CD При работе с Git-репозиторием можно настроить сценарии, которые будут автоматически собирать, тестировать и развертывать приложение каждый раз, когда вносятся изменения. В этой статье объяснена концепция непрерывной интеграции, на примере приложения Angular с помощью GitLab. 👉 https://medium.com/p/9e4ae887ff2b

✨ Руководство по миграции на новый Firebase API Разработчики Firebase SDK проделали огромную работу, полностью переписав способ интеграции и использования библиотеки в приложениях. Теперь она стала более компактной и позволяет динамически импортировать модули, когда это необходимо. Благодаря этим изменениям наши приложения могут быть более легковесными и работать быстрее. 👉 https://medium.com/p/c6d80c1260b2

✨ Создаем простой модальный диалог Всплывающие окна стали распространенной особенностью веб-приложений. Не так давно для их создания мы полагались на библиотеки компонентов. С появлением HTML-элемента dialog, все может измениться. В этой статье показывается, как создавать минималистичные диалоговые окна. 👉 https://medium.com/p/277ea7f96da1

✨ Создаем свои Pipes Pipes — это простые функции, которые можно использовать в шаблонных выражениях для преобразования значений в другой формат отображения. В Angular есть несколько встроенных pipes, но мы можем создавать и собственные. В этой статье мы изучим пользовательские pipes в Angular. 👉 https://medium.com/p/e54bb400e3ce

✨ Динамические переводы Одним из распространенных подводных камней при использовании i18n является большой размер файлов перевода и невозможность разделить их для того, чтобы скрыть часть приложения от посторонних глаз. В статье предложен способ реализации переводов, который может вам пригодиться. 👉 https://medium.com/p/5eeed8466696

✨ Осваиваем Utility Types Для удобства в TypeScript есть Utility Types — с их помощью мы можем легко преобразовывать типы, извлекать, исключать, получать тип параметра или тип возвращаемого значения функции. В статье разобраны 15 наиболее используемых утилит. 👉 https://medium.com/p/6cf121d4047c

✨ Используем проекцию контента Модальные диалоги часто применяются, когда требуется взаимодействие с пользователем. В этой статье на их примере показано, как использовать проекцию контента для разработки по принципу DRY и строить диалоги гибко без излишней инженерии. 👉 https://medium.com/p/fb3064a608f

✨ Ленивая загрузка в Angular Представьте, что у нас есть большой сервис с множеством зависимостей и логики. Он должен использоваться только тогда, когда пользователь выполняет определенное действие, например, нажимает на кнопку. В статье показано, как можно отложить загрузку сервиса, лениво загрузив его в момент выполнения действия. 👉 https://medium.com/p/bcf8eae406c8

✨ Типизированные формы Многие уже знакомы с типизированными формами, которые появились в новом релизе Angular, они позволяют указывать явные типы. Александр Серенко рассмотрел различия между типизированными и нетипизированными формами и оптимизацию работы с ними. 👉 https://medium.com/p/f5bc6fb86f38