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

🦄 Nx Generator: имба или не стоит разбираться?

Nx Generator — инструмент от Nx, который отвечает за шаблонную генерацию кода в Nx workspace.

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

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

✨ Манипулируй DOM правильно

Angular способен работать на разных платформах. Для реализации этой возможности необходим уровень абстракции между API конкретной платформы и интерфейсами фреймворка.

Давайте разберемся как можно манипулировать DOM.

👉 https://habr.com/ru/companies/nspk/articles/745502/

✨ Fullstack Angular с Analog

Analog — метафреймворк, который помогает быстрее создавать приложения и веб-сайты на базе Angular.

Статья знакомит с его особенностями.

👉 https://dev.to/analogjs/fullstack-angular-with-analog-2mnj

✨ Примитивы были ошибкой

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

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

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

👉 https://ybogomolov.me/primitives-were-a-mistake

✨ Angular получил новый синтаксис шаблонов

В последние годы не так много менялось. Теперь Angular движется вперед со сверхсветовой скоростью.

Недавно команда Angular предложила перейти от текущих структурных директив NgIf, NgForOf, NgSwitch к новому синтаксису.

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

✨ Новый NGRX Signal Store

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

В статье показана текущая рабочая версия Signal Store, с различными вариантами использования.

👉 https://www.angulararchitects.io/en/aktuelles/the-new-ngrx-signal-store-for-angular-2-1-flavors/

✨ Angular Dependency Injection инфографика

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

Надеемся, эта инфографика упростит его изучение.

👉 https://christiankohler.net/angular-dependency-injection-infographic-updated

🎉 Анонс TypeScript 5.2 Beta

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

TypeScript 5.2 добавляет поддержку явного управления ресурсами в ECMAScript. Давайте рассмотрим мотивы и поймем, что нам дает эта возможность.

👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-2-beta/

✨ Как легко отлаживать приложения

Иногда поиск ошибки занимает больше времени, чем ее исправление.

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

👉 https://www.danywalls.com/how-to-debug-angular-applications-easy

✨ Полезные приемы Chrome DevTools

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

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

👉 https://indepth.dev/posts/1521/useful-chrome-devtools-techniques-when-debugging-change-detection-in-angular

✨ Не пропусти это при работе с Nx

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

Анастасия Анисимова предложила отправиться на изучение официальной документации и поискать лайфхаки.

👉 https://habr.com/ru/companies/skyeng/articles/743458/

✨ Как RxJS разделил мой мир на до и после

По RxJS есть много докладов, но еще ни один не показал его силу.

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

👉 https://youtu.be/Ibq3EPi2cH4

🦄 Maskito – новая коллекция библиотек для маскирования текстовых полей

Maskito — коллекция библиотек, упрощающих маскирование текстовых полей, с удобным и гибким публичным API.

Барсуков Никита рассказал о релизе первой мажорной версии.

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

🔥 RFC: Built-In Control Flow

Этот RFC предлагает новый синтаксис потока управления для Angular и представляет значительные изменения в фреймворке.

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

👉 https://github.com/angular/angular/discussions/50719

🦄 Работа с формами в Angular

Большая зависимость от UI-библиотеки при обновлении мажорной версии приведет к куче рефакторинга во всех формах.

Александр Бухтатый показал один из способов работы с формами, который упрощает создание новых форм и изолирует зависимость от внешней UI-библиотеки.

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

🦄 История о том, как мы на Module Federation съезжали

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

Максим Смирнов опубликовал заключительную часть трилогии о переезде на MFE.

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

✨ Пишем расширение для VSCode с помощью GPT-4

Можем ли мы использовать нейросеть для генерации всего кода программы без человеческого вмешательства?

В статье проверяется способность GPT-4 генерировать сложные программы.

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

✨ Берем данные из роутера

Начиная с 16 версии Angular, мы можем использовать inputs для объявления свойств, которые будут привязываться к параметрам маршрута.

В этой статье показано, как это работает.

👉 https://indepth.dev/posts/1519/router-data-as-components-inputs-in-angular-v16

✨ Занимаемся оптимизацией

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

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

👉 https://dev.to/brihoum/how-i-optimized-my-angular-website-3fd0

✨ TypeScript 5.0 и 4.9: оцениваем и сравниваем изменения

1 июня состоялся релиз TypeScript 5.1, в нем представили небольшое количество нововведений, о которых можно прочитать здесь.

В этой статье разобраны изменения предыдущих версий.

👉 https://habr.com/ru/companies/simbirsoft/articles/740224/