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

✨ RFC: Incremental Hydration В новом RFC обсуждается добавление функции "Incremental Hydration" в Angular, что позволит улучшить ключевые метрики производительности страниц. Эта функция будет особенно полезна для больших приложений и страниц с динамическими элементами. 👉 https://github.com/angular/angular/discussions/57664

✨ Рекомендации по настройке VS Code Как разработчики, мы проводим много времени в редакторе, поэтому важно настроить его по своему вкусу. Правильная настройка — важный шаг для улучшения рабочего процесса. В статье показано, как, изменив несколько настроек в VS Code, вы сможете сделать свою работу более эффективной и приятной. 👉 https://timdeschryver.dev/blog/my-recommendations-to-configure-visual-studio-code-for-angular-development

✨ Снова any Если вы всё ещё используете any, стоит задуматься о его влиянии на качество кода. В статье разбираются случаи, когда этот тип действительно оправдан, например, при миграции с JavaScript. Однако для повышения безопасности и предсказуемости кода лучше использовать unknown, если точный тип данных неизвестен. 👉 https://habr.com/ru/articles/843116/

✨ Разработка веб приложения для поиска авиабилетов Если вы хотите разобраться в том, как создать приложение на Angular с нуля, то этот цикл статей станет вашим идеальным помощником. Александр Серенко описал весь процесс создания, начиная с генерации и заканчивая интеграцией с внешним API. 👉 https://dev.to/fafnur/razrabotka-vieb-prilozhieniia-dlia-poiska-aviabilietov-na-angular-18-4clf

✨ Топ-10 ошибок в архитектуре Angular, которых стоит избегать Команда Angular в последнее время представила множество потрясающих вещей, но они не оказывают особого влияния на архитектуру. Основные архитектурные ошибки по-прежнему остаются вызовом для разработчиков, и их избегание имеет критическое значение для успеха проекта. Надеемся, вы найдете в этой статье хотя бы пару действенных советов, которые сможете применить на практике. 👉 https://angularexperts.io/blog/top-10-angular-architecture-mistakes

✨ Когда (не) стоит использовать эффекты Как упоминается в документации Angular, эффекты редко требуются в большинстве приложений, из-за чего возникает некоторая путаница по поводу того, как и когда их применять. Manfred Steyer постарался осветить эту тему объективно и без эмоций. 👉 https://www.angulararchitects.io/en/blog/when-not-to-use-effects-in-angular-and-what-to-do-instead/

✨ Анонс TypeScript 5.6 Вышел TypeScript 5.6, о beta и RC версиях которого мы уже писали ранее. В этом релизе не удалось решить проблему с открытием множества связанных проектов, поэтому было возвращено прежнее поведение. Новое поведение для поиска tsconfig.json ожидается в TypeScript 5.7. 👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-6/

✨ Сверхспособности с Директивами и Внедрением Зависимостей Директивы — самая недооцененная часть Angular. Они предоставляют мощный набор инструментов для выполнения "магии" в шаблонах, но в большинстве проектов они используются в самом простом варианте. Следующая недооцененная вещь — это внедрение зависимостей (Dependency Injection). Это отличный концепт для создания повторно используемых компонентов, но 95% использования DI в Angular сводится к сервисам. Сегодня мы изучим, как оба этих концепта можно использовать, чтобы значительно упростить приложения. 👉 https://www.angularspace.com/mega-article-superpowers-with-directives-and-dependency-injection/

✨ Ваша архитектура как место преступления Хорошие границы домена помогают сделать систему поддерживаемой в долгосрочной перспективе. Но как определить, жизнеспособна ли изначальная структура? Статья показывает, что криминалистический анализ, который рассматривает не только текущий код, но и историческое развитие проекта, может выявить скрытые проблемы в архитектуре Angular-приложения. Для этого используется инструмент Detective, основанный на идеях книги Your Code as a Crime Scene. 👉 https://www.angulararchitects.io/en/blog/your-architecture-as-a-crime-scene-forensic-analysis-for-your-angular-solutions/

✨ Аутентификация по отпечатку пальца и Face ID Web Authentication API (WebAuthn) — это современный способ улучшить пользовательский опыт, обеспечивая более высокую безопасность и удобство при входе в приложение. В этом руководстве рассматривается интеграция биометрической аутентификации с Angular с использованием WebAuthn. 👉 https://dev.to/this-is-angular/integrate-fingerprint-and-face-id-authentication-in-your-angular-app-using-webauthn-a-step-by-step-guide-3o2b

✨ Получаем тип элемента массива Вы наверняка встречались со странным синтаксисом Array[number], который позволяет получить тип элемента массива. Статья объясняет механизм работы этой конструкции и показывает, как она может быть полезна в различных сценариях. 👉 https://www.totaltypescript.com/get-the-type-of-an-array-element

✨ Будущее за standalone В Angular 14 были представлены standalone-компоненты, которые впервые позволили создавать приложения, не зависящие от NgModules. Теперь в Angular 19 опция standalone: true будет использоваться по умолчанию для компонентов, директив и пайпов. 👉 https://blog.angular.dev/the-future-is-standalone-475d7edbc706

✨ Настройка алиасов путей с помощью subpath imports Subpath imports — это опция в Node.js, позволяющая задавать внутренние алиасы путей в коде. Поддержка subpath imports была добавлена в TypeScript, начиная с версии 5.4, однако на практике их настройка может быть достаточно сложной задачей. Виталий Потапов поделился своим опытом их конфигурации. 👉 https://habr.com/ru/articles/840240/

✨ Как быстро поднять API backend на TypeScript Если вы хотите развернуть бэкенд с помощью облачных сервисов Firebase. В статье подробно описывается процесс его создания на TypeScript с использованием NestJS и Firebase, с конкретными примерами конфигурации и настройки проекта. 👉 https://habr.com/ru/articles/835124/

✨ Верстка: Быстро, Пиксель в Пиксель, Без Стресса Если вы тратите слишком много времени на верстку, эта статья для вас. Никита Борисов расскажет, как эффективно работать с Figma и значительно ускорить процесс. 👉 https://dev.to/niko_doing_dev/making-ui-layout-fast-pixel-perfect-without-stress-1n5m

✨ Создание RAG-приложения RAG — это метод, который объединяет извлечение информации с генерацией текста. Он используется для того, чтобы LLM могла обращаться к актуальной информации в базе данных и генерировать более точные и содержательные ответы. В статье показано, как использовать Langchain, NestJS и Gemma 2 для создания RAG-приложения на основе книги по Angular. 👉 https://dev.to/railsstudent/build-a-rag-application-to-learn-angular-using-langchhtainjs-nestjs-htmx-and-gemma-2-5ggk

✨ Анонс TypeScript 5.6 RC Что нового с момента выхода бета-версии? В бете языковая служба поднималась по уровням каталогов, пытаясь найти каждый возможный файл проекта с именем tsconfig.json. Поскольку это могло привести к открытию множества связанных проектов, это поведение было отменено. BuiltinIterator был переименован в IteratorObject, и теперь имеет несколько подтипов, таких как ArrayIterator, MapIterator и т.д. Для режима --build был добавлен новый флаг --stopOnBuildErrors. Это приближает поведение к предыдущим версиям TypeScript, так как начиная с версии TypeScript 5.6 компиляция всегда продолжалась даже при наличии ошибок. 👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-6-rc/

✨ Как создать NPM пакет Хотите научиться публиковать свои пакеты на npm? Мы нашли пошаговое руководство, которое поможет вам разобраться во всех деталях этого процесса! В нем рассмотрен каждый шаг, который вам нужно предпринять для публикации. 👉 https://www.totaltypescript.com/how-to-create-an-npm-package

✨ Инструменты для тестирования доступности Доступность (a11y) — это важный аспект разработки, который гарантирует, что веб-приложения могут быть использованы всеми, включая людей с ограниченными возможностями. Автоматизированные инструменты тестирования, такие как lighthouse, помогают выявить основные проблемы с доступностью, но не могут заменить ручное тестирование, которое охватывает более широкие аспекты. Надеемся вы попробуете некоторые из рекомендованных инструментов и выберете свой любимый. 👉 https://www.angulararchitects.io/en/blog/accessibility-testing-tools/

✨ Сериализация сущностей с помощью декораторов на TypeScript Иногда нужно сохранить объект в виде строки, например, для localStorage. Для простых объектов это легко сделать, но в случае сложных структур приходится вручную управлять процессом сериализации. Это увеличивает сложность кода и повышает риск ошибок. Константин Харламов рассказал о том, как использовать декораторы в TypeScript для этой задачи. 👉 https://habr.com/ru/articles/836746/