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

✨ Преобразование Observables в Signals

Angular 16 поставляется с новым пакетом rxjs-interop, в котором появилась функция toSignal, преобразующая observables в signals.

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

👉 https://medium.com/p/4f5474c765a0

✨ Переход Angular CLI на Jest и Web Test Runner

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

Проведя опрос, команда Angular решила добавить первоначальную экспериментальную поддержку Jest в Angular 16, а также Web Test Runner в одном из будущих релизов.

👉 https://medium.com/p/ef85ef69ceca

✨ Что нового в Angular 16

Уже продолжительное время мы слышим об интеграции сигналов, но Angular 16 принесет гораздо больше.

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

👉 https://dev.to/this-is-angular/whats-new-in-angular-16-375b

🦄 Как ng-morph может помочь вам сохранить монорепозиторий чистым

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

Роман Седов показал несколько примеров того, как вы можете преобразовать свой проект с помощью ng-morph.

👉 https://medium.com/p/bbca8e62c4b3

🦄 Делаем декларативный роутинг диалогов

Часто нужно открывать модальные окна по определенному пути. Из коробки Angular не предоставляет этой возможности, так же как и популярные UI Kit библиотеки, и каждый раз приходится искать способ, как это сделать.

Дмитрий Пурис разобрал два подхода к созданию модальных окон, связанных с URL.

👉 https://habr.com/ru/companies/tinkoff/articles/731376/

✨ Сокращение типизации с помощью Utility Types

Utility Types облегчают преобразования типов, они доступны глобально и добавляют гибкости в создание типов.

В статье рассмотрены способы сократить количество типов/интерфейсов в Typescript, сделать их более лаконичными и сэкономить время себе и своей команде.

👉 https://habr.com/ru/articles/730906/

🦄 Введение в холодные и горячие Observable

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

Надеемся, статья поможет разобраться с особенностями потоков в RxJS.

👉 https://habr.com/ru/companies/tinkoff/articles/729808/

✨ ng-morph - ваш первый помощник в разработке Angular библиотек

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

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

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

👉 https://medium.com/p/ac06dbb00f99

✨ Будущее рендеринга на стороне сервера в Angular

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

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

Скоро рендеринг на стороне сервера станет встроенной частью Angular CLI. Планируется перенести все пакеты Angular Universal во фреймворк и инструментарий, чтобы обеспечить наилучший опыт работы с SSR.

👉 https://medium.com/p/2a6f27662b67

✨ Генерируем пифагоровы тройки на RxJS

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

Иван Клименко нашел интересное применение RxJS. Надеемся, оно развлечет вас и поднимет настроение.

👉 https://habr.com/ru/articles/729112/

✨ Автоматическая отмена конкурентных асинхронных цепочек

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

Артём Арутюнян рассказал про главную киллер-фичу redux-saga и rxjs и как теперь её можно получить проще, а так же про грядущие изменения в стандарте ECMAScript.

👉 https://habr.com/ru/companies/ruvds/articles/725208/

🦄 Трудности маскирования текстового поля

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

Барсуков Никита рассказал о особенностях реализации масок и коллекции библиотек Maskito.

👉 https://habr.com/ru/companies/tinkoff/articles/727368/

🦄 Продолжение истории миграции на Module Federation

В первой статье Максим Смирнов рассказывал, как разделить весь код по модулям, замкнув бизнес-логику в конкретном модуле, и вынести общие части в библиотеки.

Осталось достать пилу и отпиливать модули — сделав их отдельными приложениями.

👉 https://habr.com/ru/companies/oleg-bunin/articles/726880/

✨ Знакомство с оператором takeUntilDestroyed

Angular 16.0.0-next.6 представляет новые возможности в @angular/core/rxjs-interop, которые включают три новых оператора: fromSignal, fromObservable и takeUntilDestroyed.

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

👉 https://medium.com/p/d965b7263856

✨ Код ревью по-человечески

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

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

👉 https://mtlynch.io/human-code-reviews-1/

✨ Автоматическая миграция на Standalone компоненты

Хотя новые Standalone компоненты могут прекрасно сочетаться с традиционным кодом на основе NgModule, вы можете захотеть полностью перенести свои проекты.

Начиная с версии Angular 15.2, существует возможность автоматизировать эту задачу.

👉 https://www.angulararchitects.io/en/aktuelles/tutorial-automatically-migrating-to-standalone-components-in-3-steps/

✨ Возможности JavaScript и TypeScript последних лет

Перевод второй части статьи, посвященной нововведениям JS и TS последних трех лет, которые вы могли пропустить.

В первой части говорилось о возможностях JS, во второй разбирается TS.

👉 https://habr.com/ru/company/timeweb/blog/723332/

✨ Использование Inject

Начиная с Angular 14/15, появился альтернативный способ внедрения зависимостей, — функция inject может упростить код и помочь решить распространенные проблемы, связанные с инъекцией зависимостей.

В статье показаны два случая её использования.

👉 https://www.danywalls.com/using-the-inject-function-in-angular-15

✨ Как мы выбирали технологию для фронтенда и что из этого вышло

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

Иван Матвиенко рассказал, как они в компании выбирали единую технологию для фронтенда и с какими трудностями столкнулись.

👉 https://habr.com/ru/company/mango_telecom/blog/720184/

✨ Required Inputs в Angular

В Angular 16.0.0-next.4 — можно указать, что компонент или директива требуют определенных входных данных. Для использования этой функции надо установить новый параметр required в input. Например, @Input({ required: true }) elementId: string;

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

👉 https://netbasal.com/from-good-to-great-required-inputs-in-angular-47374c8a43cf