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

✨ Разработка веб приложения для поиска авиабилетов

Если вы хотите разобраться в том, как создать приложение на 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/

✨ Использование GitHub в качестве провайдера аутентификации

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

В статье объясняется, как его настроить для использования GitHub в качестве провайдера аутентификации для вашего Angular-приложения.

👉 https://dev.to/this-is-angular/using-github-as-an-authentication-provider-in-your-angular-app-with-pocketbase-3dcc

✨ Другой взгляд на TypeScript

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

В статье анализируются основные возможности TypeScript с точки зрения работы с множествами.

👉 https://www.rob.directory/blog/a-different-way-to-think-about-typescript

✨ Использование isolatedModules в Angular 18.2

В Angular появилась поддержка isolatedModules из TypeScript, начиная с версии 18.2. Благодаря этому производительность при сборке может увеличиться до 10%.

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

👉 https://blog.angular.dev/using-isolatedmodules-in-angular-18-2-68a7d3a6c03d