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

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

Чаты @angular_ru @angular_jobs
Download Telegram
✨ Playwright для компонентных CAT-тестов

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

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

👉 https://habr.com/ru/articles/1072918/
🤔8👍5🔥1👏1😁1
✨ Как мы превратили API-контракт в отдельный артефакт и сократили генерацию клиента с 15 минут до нескольких секунд

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

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

Решением стало хранение OpenAPI-схем в Git. Бэкенд экспортирует JSON при локальном запуске, а фронт перешел на ng-openapi-gen, разбивающий код на модульные функции.

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

👉 https://habr.com/ru/companies/tbank/articles/1069174/
👍10😁2🔥1
✨ Не скрамом единым: 10 нетривиальных концепций управления проектом

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

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

Почему иногда проект лучше не начинать? Зачем закрывать уже запущенные проекты? Всегда ли нужны оценки сроков и максимальная загрузка команды? И может ли меньше контроля сделать управление эффективнее?

👉 https://habr.com/ru/articles/1073456/
👍4❤1🔥1👏1😁1🤔1
✨ Полное руководство по Signal Forms

Тема новых форм в Angular уже не раз обсуждалась, но с релизом 22-й версии они официально перешел в статус stable.

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

👉 https://angular.love/signal-forms-in-angular-21-complete-guide
👍13❤2😁2👏1🤔1
✨ Оптимизация бандла Angular

Переход Angular на новую систему сборки на базе esbuild существенно ускорил процесс разработки, однако породил скрытый компромисс в производительности.

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

👉 https://push-based.io/article/faster-builds-slower-applications-optimizing-angulars-bundle-output
👍8🔥5❤2😁2
✨ Как ChatGPT создал Культ Роя для сотен AI-нейросетей

Наверняка вы уже слышали о недавнем инциденте с агентами, которые во время тестирования объединились между собой и в итоге атаковали Hugging Face.

Недавно вышло независимое расследование METR и OpenAI наконец-то опубликовали собственный подробный разбор произошедшего.

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

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

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

👉 https://habr.com/ru/companies/ods/articles/1075370/
🤡11🤯4👍3🔥3🤔2👏1😁1😱1🕊1
✨ Инженеры OpenAI не смогли объяснить код, который нейросеть сгенерировала для кернела AI‑ускорителя Jalapeño

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

При этом код оказался достаточно эффективным и прошел тестирование.

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

А как вы считаете, станет ли нормой код, который работает, но который никто не понимает?

👉 https://habr.com/ru/news/1076906/
😁15🤡11🤔6👍3❤2⚡1🔥1😢1🌚1🫡1
✨ Быстрая настройка Angular Aria Tabs с помощью Google Antigravity CLI

Статья рассматривает практический эксперимент с Angular Aria. Насколько далеко можно уйти от стандартного оформления компонентов, сохранив их доступность.

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

👉 https://blog.angular.dev/customizing-angular-aria-tabs-quickly-with-google-antigravity-cli-39ff8e0271a4
👍7❤4🔥3👏2😁2🤔2
✨ Куда уходит время

Девять месяцев автор записывал, чем занимается в течение дня.

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

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

Интересно, а вы используете какие-нибудь свои способы следить за временем?

👉 https://habr.com/ru/articles/1076320/
😁4👍1
✨ GPT-6 Astra

OpenAI представила GPT-6 Astra, которая делает заметный акцент не только на качестве ответов, но и на способности самостоятельно выполнять сложные многошаговые задачи.

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

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

👉 https://openai.com/index/gpt-6-astra/
🥱20🔥2❤1👍1
✨ Как мы внедрили Knip в Angular-проект

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

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

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

👉 https://habr.com/ru/companies/tbank/articles/1078438/
👍11🤡4🔥3❤1
✨ withComponentInputBinding: уменьшаем связанность, инвертируем зависимости

Routed-компоненты в Angular часто сами достают параметры из URL, вызывают сервисы, загружают данные и еще решают, что показывать во время загрузки. Работает, но сам компонент при этом начинает слишком много знать о том, где и как он используется.

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

withComponentInputBinding как раз позволяет напрямую передавать данные из состояния Router в input компонента, который указан в конфигурации Route.

👉 https://habr.com/ru/articles/1078996/
👍12🔥2
✨ Скроллбар в 2k26

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

В статье разбирается современный подход, где большую часть этой работы берет на себя CSS. С помощью scroll-driven animations, anchor positioning, container queries и animation-range можно синхронизировать положение и размер скроллбара непосредственно с прокруткой.

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

👉 https://habr.com/ru/articles/1079750/
❤3🔥2👌2👍1😁1
✨ Router Resources

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

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

Пока API экспериментальный, но направление выглядит интересным.

👉 https://www.angulararchitects.io/en/blog/router-resources-loading-data-with-the-angular-router/
👍19❤9🔥2🤔2😁1
✨ Как крупные технологические компании создают микрофронтенды

Обычно, когда речь заходит о микрофронтендах, iframe воспринимается как устаревшее решение. На его фоне Module Federation и Native Federation выглядят привлекательнее.

Они выигрывают по производительности за счет переиспользования зависимостей, но не гарантируют изоляцию в рантайме. iframe создает тяжелый оверхед (повторная загрузка бандлов и фреймворков), но дает абсолютную изоляцию стилей, контекста исполнения браузера.

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

В статье рассматривается парадокс современной архитектуры. В то время как индустрия активно переходит на Module Federation и Native Federation, гиганты масштаба Google, Microsoft и Spotify в своих крупнейших продуктах продолжают использовать старые добрые iframe.

👉 https://stefanhaas.dev/article/how-big-tech-builds-micro-frontends/
👍5🤣5❤3👏1🤔1
✨ Рендеринг Angular-приложения в Minecraft

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

На этом фоне идея отрендерить Angular-приложение прямо в Minecraft выглядит достаточно интересной.

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

👉 https://habr.com/ru/articles/1081682/
🤣15👍8🐳3🔥2🌚1
✨ Как всегда, (почти) во всём виноват Internet Explorer

HTML хранит немало следов эпохи браузерных войн, старых платформ и давно забытых стандартов.

В статье собрана коллекция таких артефактов. От условных комментариев Internet Explorer до метатегов для Skype Toolbar, старых iOS и первых веб-приложений.

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

👉 https://habr.com/ru/companies/ruvds/articles/1081440/
👍5❤1
✨ Разбор Route Resources

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

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

👉 https://dev.to/playfulprogramming-angular/route-resources-in-angular-what-the-router-actually-does-with-your-signal-under-the-hood-2lc6
👍7❤2🔥2👏1😁1🤔1
✨ Polymorpheus: очень нужная деталька пазла Angular

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

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

Отсюда и выросла библиотека Polymorpheus, которую в Taiga UI используют повсюду. Компонент объявляет, что принимает контент, а дальше в него можно передать: примитивное значение, функцию, шаблон или отдельный компонент. Работает одинаково, переделывать ничего не нужно.

👉 https://habr.com/ru/articles/1082888/
❤8👍8😁1🤔1
✨ Новый класс моделей

Появилась альтернатива традиционным большим языковым моделям.

Если современные LLM оптимизированы для общения с человеком, то Jev вместо генерации текста, выдает типизированные структурированные решения, заточенные под автоматизацию внутри кода, а не под диалог с человеком.

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

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

Интересно, а под какие задачи вы бы попробовали применить эту модель?

👉 https://typesafe.ai/blog/introducing-system-one-models-and-jev
😁8🔥4💩3👎2👏1
✨ Использование Jev для Agentic UI

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

У нее уже появился открытый конкурент Laya, модель на 421 млн параметров, которая требует меньше 1 ГБ памяти. Такой класс моделей хорошо подходит для локального выполнения, например в браузере, что позволяет убрать сетевую задержку.

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

👉 https://www.angulararchitects.io/blog/using-jev-for-agentic-ui-just-a-trend-or-a-game-changer/
🔥3❤1🤔1💩1