🦊 Angular Fox 🚀 — русскогорящие новости сообщества
3.97K subscribers
1.21K photos
7 videos
1.06K links
Как костыль на реактивно-лисьей тяге 🔥🦊

Нравится канал? Подпишись на меня!
👉 twitter.com/thekiba_ru
💖 twitter.com/thekiba_io
medium.com/@thekiba
github.com/thekiba

Чаты @angular_ru @angular_jobs
Download Telegram
Вставляем HTTP-заголовки

Когда мы работаем с запросами в Angular к внешнему API, иногда нам нужно добавить или отправить заголовки.

Лучший вариант— использовать для этого перехватчики. Давайте рассмотрим, как это сделать.

👉 https://www.danywalls.com/how-to-add-http-headers-to-requests-with-functional-interceptors-in-angular
🥱15👍4👎21
Standalone в Angular

Если вы пропустили standalone компоненты в Angular 14 или хотите мигрировать с модулей.

В статье рассматриваются шаги по созданию standalone компонента и даются рекомендации по миграции существующего приложения.

👉 https://habr.com/ru/articles/820051/
🔥13🥱11👍8
Защита от бесконечных циклов обнаружения изменений

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

👉 https://justangular.com/blog/protect-your-app-from-infinite-change-detection
👍7
Опыт миграции на standalone-компоненты

Если вы выбираете между модулями и standalone-компонентами.

Антон Горелов поделился своим опытом применения обоих подходов. Он подробно рассмотрел как автоматический, так и ручной методы миграции, подчеркнув их особенности и подходящие случаи применения.

👉 https://habr.com/ru/companies/selectel/articles/820593/
👍12🔥2🎉2
Улучшаем код

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

Она охватывает следующие темы: чистые функции, управление состоянием компонентов, композиция против наследования, ::ng-deep, вложенные подписки.

👉 https://medium.com/p/b169d4a1c786
👍8👏1
Основы TypeScript

Недавно вышел перевод третьего издания книги Адама Фримена о TypeScript.

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

👉 https://habr.com/ru/companies/piter/articles/820027/
👍6💩3🤔1
Сигналы в Angular Auth OIDC клиенте

В 18-й версии библиотеки Angular Auth OIDC (angular-auth-oidc-client) добавлены сигналы для доступа к состоянию аутентификации и данным пользователя.

Это упрощает использование состояния аутентификации и пользовательских данных по сравнению с реализацией на Observables.

👉 https://timdeschryver.dev/blog/signals-in-angular-auth-oidc-client
👍4🔥2
Юнит-тесты для отложенных представлений

Отложенные представления позволяют загружать части приложения по мере необходимости, улучшая производительность.

В статье подробно рассматриваются подходы к тестированию, с учетом различных сценариев.

👉 https://angular.love/en/learn-how-to-unit-test-the-deferrable-views/
👍9🔥1
Управление побочными эффектами с помощью NgRx Effects

Обработка побочных эффектов является одной из самых распространенных задач в разработке приложений.

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

👉 https://www.danywalls.com/how-to-handle-side-effects-in-angular-using-ngrx-effects
👎4👍3
Объединяем localStorage с сигналами

Работа с локальными хранилищами достаточно проста, но иногда может не хватать реактивности.

В этой статье рассказывается, как абстрагировать localStorage в сервисе и использовать сигналы для синхронизации значений.

👉 https://dev.to/this-is-angular/synchronized-web-storage-with-signals-5b05
👍1242👎1🐳1
Angular Platforms: как запускать приложение где угодно?

Angular — мощная технология для разработки фронтенда. Но ограничивается ли она только вебом?

Олег Соловьев рассмотрел встроенные платформы и способы запуска Angular-приложений в самых неожиданных местах, даже в терминале.

👉 https://www.youtube.com/watch?v=1ODglCYgzwc
👍20🔥8🏆1
Анонс TypeScript 5.5

С момента выхода бета-версии было внесено несколько изменений:

- Поддержка новых методов Set из ECMAScript.
- Скорректировано поведение проверки регулярных выражений.
- Улучшена производительность.

Релиз получился интересным, настоятельно рекомендуем ознакомиться с ним.

👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-5/
👍5
Перенаправление маршрутов

В Angular 18 redirectTo получил возможность принимать функцию, что позволяет выполнять логику и перенаправлять на различные пути в зависимости от определённых критериев.

В статье рассказывается о новой функции на примере обработки опечаток в URL.

👉 https://dev.to/railsstudent/made-typos-in-routes-redirect-routes-with-functions-5dhc
🔥9👍3
Квест на Node.js — борьба с утечкой памяти

Утечки памяти — это ситуации, когда приложение продолжает потреблять больше памяти, чем необходимо, из-за того, что не освобождаются объекты, которые больше не используются.

Артём рассказал о своём опыте борьбы с ними при вызовах gRPC между микросервисами.

👉 https://habr.com/ru/companies/simbirsoft/articles/823884/
👍5🔥1
Angular Router — все, что вам нужно знать

Маршрутизация в Angular — важнейшая функция, позволяющая создавать динамические одностраничные приложения (SPA). Этот механизм обеспечивает плавную навигацию внутри приложения, не требуя полной перезагрузки страницы.

В этой статье рассмотрены основные принципы маршрутизации, от базовых настроек до продвинутых техник.

👉 https://angular.love/en/angular-router-everything-you-need-to-know-about/
👍5🔥3
SSR в Angular

Уверены, вы уже слышали о рендеринге на стороне сервера (SSR).

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

👉 https://www.thisdot.co/blog/ssr-finally-a-first-class-citizen-in-angular
👍6🤔1
RFC: Взаимодействие с DOM в Angular

Сейчас при серверном рендеринге Angular использует библиотеку Domino для реализации подмножества браузерных API.

Однако такой подход имеет некоторые недостатки:

Поскольку эмуляция DOM реализует только подмножество DOM, она отлично работает в одних случаях, но даёт сбои в других.

Ручное управление DOM может быть полезным, но оно не позволяет Angular иметь полное представление о состоянии DOM.

Рассмотрев то, как разработчики взаимодействуют с DOM, команда Angular считает, что есть возможность сделать этот API более эргономичным и в то же время применить механизмы для создания высокопроизводительных приложений.

👉 https://github.com/angular/angular/discussions/56498
👍6🔥3😢1
Как выстрелить себе в ногу, не соблюдая паттерны

Наверняка многим приходилось решать задачу с динамической формой, поля в которой создаются через админку. На первый взгляд она кажется простой, но из-за динамики могут возникнуть сложности, которые приведут к неправильным подходам.

В статье автор поделился своим опытом решения подобной задачи.

👉 https://habr.com/ru/articles/825322/
👍7
Zoneless

В Angular 18 появилась экспериментальная возможность отказаться от zone.js.

Леонид Яковлев рассказал о своем опыте с новым подходом к обнаружению изменений.

👉 https://habr.com/ru/articles/825764/
👍153👏2🤔1
Полное руководство по рендерингу на стороне сервера

Внедрение Server-Side Rendering (SSR), Static Site Generation (SSG), Hydration и Event Replay значительно повышает производительность начальной загрузки.

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

👉 https://www.angulararchitects.io/en/blog/complete-guide-for-server-side-rendering-ssr-in-angular/
👍4🔥3👏2