Frontend Status: свежий дайджест фронтенда и AI — 04.06.2026

Привет!

Это 17 выпуск Frontend Status — дайджеста по фронтенд-разработке.

В этом выпуске:

• 📺 Страница отрисована, а интерфейс всё ещё «оживает»: отложенная гидратация в TanStack Start на карусели Jack Herrington и подкаст с Андерсом Хейлсбергом — от Turbo Pascal до того, как ИИ меняет ремесло, когда код пишут не построчно — чтобы понять, где теряется скорость и куда движется разработка.

• 🤖 Половина кода уже с ИИ, а доверия меньше: опрос State of AI 2026 (54% сгенерированного кода), Яндекс и тысячи конфликтов при мерже Chromium, перцептрон 1959 года и «чтение мыслей» модели Anthropic — чтобы смотреть на внедрение ИИ цифрами и без иллюзий.

• 🛡️ Пустили агента в репозиторий — а что он может сломать: разбор Positive Technologies и история, когда ИИ «находит» CVE, который уже был в обучающих данных — чтобы не открывать доступ вслепую.

• 💫 Анимация замирает вместе с React: управление бесконечными CSS-циклами без прыжков и сравнение CSS, Motion и GSAP на главном потоке — чтобы интерфейс оставался плавным без лишнего JavaScript.

• ⚡ Нужна коллаборация как в Figma и Miro: Hocuspocus от Tiptap на Y.js и CRDT без гонок правок — WebSocket, офлайн и Redis — чтобы собрать совместное редактирование в своём редакторе без тяжёлого бэкенда.

• ⚡ Поиск раздувают до эмбеддингов и LLM: Fuse.js ~6 КБ с нечётким поиском, кириллицей и Web Workers в 7.4.0 — чтобы находить по списку в браузере без сервера и векторной базы.

• ⚡ TypeScript кажется очевидным, пока не упёрлись в типы: 15 коротких приёмов от Matt Smith — satisfies, проверка «все варианты учтены», строгий режим — чтобы писать безопаснее и без лишних аннотаций.

• ⚛️ React-шаблон на 35 000 звёзд без хаоса в репозитории: разбор Bulletproof React на Habr и MUI X 9.3 — чтобы взять проверенную архитектуру и не собирать стек с нуля.

• 🔥 Ember 7.0 без сюрпризов при мажоре: в основном сняли устаревшее, путь через 6.12 и Vite по умолчанию — чтобы обновиться без лотереи.

• 🅰️ Angular 22 меняет правила игры: OnPush по умолчанию, signal forms и инструменты для агентов в API — чтобы заложить новый проект на актуальных примитивах, а не по инерции.

• 𝐒 Svelte: $state.eager и pending больше не рвут зависимости, батчи идут связным списком — чтобы асинхронный UI вёл себя предсказуемо после обновления.

• 📦 Solid 2 в бета-версии, звонки WebRTC в production и шрифтовые иски на 15,3 млн ₽: асинхронность как примитив, грабли CallKit и SFU, PHP-парсер для проверки сайта — чтобы не удивляться ни релизу, ни иску.

• 🌎 Браузер снова забирает вёрстку у хаков: column-rule и row-rule в зазорах grid/flex и HTML внутри canvas за флагом — чтобы меньше DOM-обходов и проще UI поверх 3D.

• 🌐 Стандарты без костылей: сравнение объектов по значению (Composites в TC39) и элемент <install> для PWA без своего JavaScript — чтобы меньше полагаться на ссылки и самописные кнопки установки.

• 🛠️ Агенты под контролем: statewright с фазами и лимитами, свой Claude Code за вечер на DeepSeek и экспериментальный агент доступности GitHub на каждый фронтенд-PR — чтобы тратить меньше токенов и ловить a11y до мержа.

• 📦 И ещё: апдейты OpenAI Cookbook, React, Bun, Node и Next.js — …и многое другое.

📺 Медиа

• Революционна ли отложенная гидратация в TanStack Start?: Jack Herrington на примере карусели показывает, почему после отрисовки страницы на сервере браузеру ещё долго «оживлять» интерфейс — и где теряется скорость. Сравнивает три подхода: сразу оживлять всё, оживлять чуть позже и оживлять только когда пользователь навёл курсор или доскроллил до блока. В TanStack Start второй и третий вариант сведены к простой обёртке вокруг компонента — удобно для слайдеров и блоков внизу страницы, до которых редко доходят. К коду — демо на GitHub.

• TypeScript, C# и Turbo Pascal с Андерсом Хейлсбергом: подкаст The Pragmatic Engineer с создателем Turbo Pascal, Delphi, C# и TypeScript — путь от первого компилятора через Borland к 30 годам в Microsoft. Про маленькую команду, которая проектировала C#, почему TypeScript взлетел за счёт инструментов в редакторе, а не только типов, как он сегодня использует ИИ, какие возможности языков удобны ассистентам и как меняется ремесло разработки, когда код пишут не построчно.

🤖 AI

• State of AI 2026: как разработчики реально используют ИИ: опрос Sacha Greif (как State of CSS) — 7 258 ответов за апрель–май 2026. В среднем уже 54% кода помечают как сгенерированный ИИ (было 28% в 2025), «постоянное» использование выросло вдвое; лидируют агенты вроде Claude Code, за ChatGPT чаще платят за Claude; личные траты на инструменты растут, большинство считает, что мы в «пузыре» ИИ. Главные боли — галлюцинации и качество кода, главные страхи — вытеснение с рынка, военное применение и экология.

• Тысяча конфликтов и одна LLM: как мы автоматизировали переход на новые версии Chromium: каждые четыре недели Яндекс Браузер переезжает на новую версию Chromium, что приводит к огромному количеству конфликтов и ошибок компиляции. С помощью LLM Яндекс сумел сократить трудозатраты на 50% для конфликтов и 76% для принятия правок. Экономия времени составила 32%, при этом процесс мерджа сохраняет прежнюю продолжительность.

• Perceptron: Как работала самая первая нейросеть в истории?: перцептрон Розенблатта, созданный в 1959 году, использовал взвешенные входы и порог активации для обучения. Он мог различать фигуры и сортировать карточки, но не решал XOR-задачу. Военные эксперименты показали его слабости в реальных условиях, что привело к кризису в 1969 году, но он уже видел, что машины смогут видеть, различать и сортировать данные мгновенно — просто не успел дойти до решения этой задачи.

• Anthropic научила модель читать «мысли» другой модели и нашла скрытые мысли в Claude Opus 4.6: Natural Language Autoencoders (NLA) — это пара LLM-модулей: одна переводит внутренний вектор активации в текст, другая восстанавливает вектор обратно из текста; их обучают вместе через RL минимизировать ошибку реконструкции, и интерпретируемые объяснения появляются сами по себе, без явного обучения на них. На практике: NLA обнаружила, что ранняя версия Opus 4.6 отвечала по-русски, потому что уже в начале ответа на английском «фиксировалась» на гипотезе о русскоязычном пользователе, что привело к обнаружению ошибочных обучающих данных; а в Mythos Preview нашла скрытое рассуждение о грейдере в транскриптах, где модель ставила No_macro_used=True, реально используя макросы.

🛡️ Безопасность

• Вы пустили ИИ‑агента в репозиторий, теперь разбираемся, что он может сломать: Андрей Яковлев @Andrew42, исследователь в области кибербезопасности, опубликовал разбор векторов атаки с выводами для защиты.

• Mythos «обнаружил» CVE, уже находящийся в его обучающих данных, но это всё равно тревожит: CVE-2026-4747 — стековый оверфлоу в RPCSEC_GSS FreeBSD без проверки границ oa_length — выглядит пугающе, пока не смотришь на CVE-2007-3999: идентичный баг в MIT Kerberos, закрытый ещё при Буше-младшем; код просто скопировали в FreeBSD без патча, и он пролежал там двадцать лет.

💫 Анимации и 3D

• Как управлять бесконечными CSS-анимациями (часть 1 из 2): у уже запущенной анимации нельзя просто поменять длительность — элемент прыгает в случайное место, так задумано в спецификации. Темани Афиф предлагает обход: одна и та же анимация запускается дважды, вторая на паузе, при наведении она включается и скорости складываются. Одной переменной хватает, чтобы ускорять, замедлять, останавливать и даже разворачивать движение назад — приём работает для любой зацикленной анимации.

• И снова анимация: CSS или JavaScript?: Josh на примере «прыгающего шарика» показывает, что тормозит не расчёт кадров в коде, а то, что обычный цикл на JavaScript живёт на главном потоке вместе с React и сетевыми ответами — при блокировке анимация замирает, а ключевые кадры в CSS продолжают идти. Motion (бывший Framer Motion) через Web Animations API ведёт себя как CSS; GSAP остаётся на главном потоке ради мощных сценариев. Вывод: по возможности — нативные переходы и keyframes, иначе библиотека с отдельным потоком; для сложного интерактива — его курс Whimsical Animations.

⚡ JS / TS

• Коллаборация как в Figma и Miro? Ловите Hocuspocus: набор от Tiptap для совместного редактирования в реальном времени — под капотом Y.js и подход без конфликтов при слиянии правок (порядок изменений не важен, как в распределённой версии данных). Сервер на WebSocket подключается к Tiptap, ProseMirror, Monaco и другим редакторам, умеет офлайн с догоняющей синхронизацией, вебхуки, масштабирование через Redis и запуск на Node.js, Bun, Deno и Cloudflare Workers.

• Фишки TypeScript, которые стоит знать каждому: от Matt Smith — подборка из 15 коротких приёмов с примерами: вместо «любого типа» — безопасная проверка входящих данных, меньше лишних подписей типов, satisfies вместо грубого приведения, типы из значений без дублирования, разбор состояний загрузки/ошибки через объединения, проверка «все варианты учтены», строгий режим компилятора и напоминание, что проверка типов не заменяет валидацию данных с сервера.

• Привыкли к поиску через эмбеддинги и LLM? А что, если хватит библиотеки на ~6 КБ: Fuse.js 7.4.0 — нечёткий поиск по списку прямо в браузере, без сервера и векторной базы; опечатки, частичные совпадения, подсветка найденного. В релизе — параллельный поиск через Web Workers, режим «все слова запроса должны встретиться», токенизация с кириллицей и CJK из коробки, ускорения в горячих путях; на fusejs.io свежая статья «Fuse.js vs Semantic Search» для сравнения с семантикой.

⚛️ React

• Разбираем Bulletproof React: как не утонуть в хаосе собственного кода: репозиторий-шаблон с более чем 35 000 звёзд на GitHub объединяет React Query для управления данными, безопасное хранение JWT в httpOnly cookies с заголовками Set-Cookie, защиту маршрутов через React Router и RBAC/PBAC, оптимизацию производительности с code splitting и WebP, мониторинг Core Web Vitals через Lighthouse CI, а также трехуровневую стратегию тестирования с Vitest, Playwright и MSW. Архитектура критиковалась за избыточность в малых проектах и сложность для новичков, требуя адаптации под конкретный стек и команду.

• MUI X 9.3.0: в календаре диапазонов дат перетаскивание стало стабильнее на разных устройствах; в графиках — меньше сбоев при наведении и быстрее отрисовка линий; в таблице — исправлен ползунок прокрутки после изменения размера колонок, улучшены переводы на шведский; в планировщике событий (пока в тестовой версии) — подгрузка тяжёлых блоков по мере прокрутки и норвежская локаль.

🔥 Ember

• Ember 7.0: крупный релиз от 29 мая 2026 почти без новинок — в основном убрали то, что давно помечали как устаревшее, и поправили сбои со ссылками внутри картинок, переключателями, списками и коллекциями данных. Версия 6.12 остаётся на долгую поддержку; чтобы перейти на седьмую, сначала обновитесь до 6.12 и закройте все предупреждения в консоли, потом — одной командой через обновлялку проекта. Свежие возможности по-прежнему приезжают в обычных промежуточных версиях: недавно по умолчанию дали быструю сборку через Vite и новый формат шаблонов компонентов.

🅰️ Angular

• Angular 22.0.0: мажор от 3 июня 2026 — OnPush по умолчанию для новых компонентов, стабильный декоратор @Service, injectAsync, signal forms в public API (reloadValidation, debounce для async-валидации), provideWebMcpTools и экспериментальный declareWebMcpTool для AI-агентов, кеш ресурсов для SSR, поддержка Node.js 26. Из breaking changes: убраны ComponentFactoryResolver/ComponentFactory, checkNoChanges и createNgModuleRef из публичного API, TypeScript 5.9 больше не поддерживается; в platform-server и HttpClient усилена защита от SSRF.

𝐒 Svelte

• Свежие релизы Svelte: за неделю до 17 мая — серия патчей вокруг runes и асинхронности. $state.eager и pending снова сохраняют зависимости реактивного графа; батчи обновлений обрабатываются как связный список, а не ломают порядок; в типах для pending разрешён null. Плюс обновление devalue и слияние фиксов безопасности из форков.

📦 Разное

• Solid 2.0 наконец вышел в бету: главная идея релиза — асинхронность стала примитивом первого класса, вычисления теперь возвращают Promise, а граф реактивности сам умеет приостанавливать и возобновлять работу. Вместе с этим переписан планировщик, появились action с оптимистичными примитивами, <Loading> вместо ожидания первого рендера и isPending для ревалидации.

• Как я сделал групповые звонки в React Native мессенджере: WebRTC, CallKit и грабли production: полезно тем, кто делает или планирует звонки в мобильном приложении и хочет понять, сколько работы за кадром — автор прошёл путь от туториального «gather-then-send» до production с trickle ICE, CallKit и SFU и признал, что переделал бы иначе.

• Шрифтовые иски в РФ: 15,3 млн ₽ взысканий за 5 лет и как технически проверить свой сайт: для тех, кто сдаёт сайты клиентам или унаследовал чужой шаблон — готовый PHP-парсер с классификацией шрифтов по источнику, таблица замен коммерческих гарнитур на OFL-аналоги из Google Fonts (Helvetica Neue → Inter, Futura → Jost и т.д.) и важный нюанс: шрифт в font-stack без @font-face и залитый .woff2 — это юридически разные ситуации.

🌎 Браузеры

• Стилизация зазоров между элементами теперь нативно в CSS: с Chrome и Edge 149 grid и flexbox принимают column-rule, а для горизонтальных зазоров появился новый row-rule — никаких больше бордеров на каждом элементе, псевдоэлементов и хаков с фоном, которые ломали доступность и плодили DOM-узлы.

• Наконец-то можно перестать выбирать между «DOM или canvas»: фича пока за флагом chrome://flags/#canvas-draw-element (а лучше через Canary), но потенциал виден сразу: интерактивный UI на экране 3D-модели компьютера, который раньше пришлось бы собирать на UIKit с рендером в render target и фрагментным шейдером, теперь делается с полной мощью CSS. Если нет желания ждать поддержки во всех браузерах — в статье разобраны костыли через html2canvas и SVG <foreignObject>, но оба теряют часть доступности.

🌐 Веб-стандарты

• Composites: TC39 хочет починить сравнение объектов в JS — Chris Coyier: кратко о пропозале — Composite({ x: 1, y: 4 }) создаёт значение, которое сравнивается по содержимому, а не по ссылке, работает как ключ в Map и не ломается от перестановки ключей. Records & Tuples шли тем же путём, но оказались слишком медленными — Composites выглядят реалистичнее.

• Chrome и Edge тестируют новый HTML-элемент <install> для установки PWA без единой строки JavaScript: совместная работа команд Microsoft Edge и Google: браузер сам рисует кнопку установки и контролирует её текст и внешний вид, как это уже работает у <geolocation>, — это даёт высокий уровень доверия к клику пользователя. Через атрибут installurl одна страница может предлагать установку сразу нескольких приложений с разных origin. Доступно за флагом в Chrome и Edge 148.

🛠️ Инструменты

• statewright: state-machine-гардрейлы для AI-агентов: детерминированный движок на Rust (без LLM внутри) пускает агента только к тем инструментам, что разрешены на текущей фазе: в planning — read-only, edit открывается на implementing с лимитом строк, а деструктивные операции через Bash режутся, даже когда сам Bash разрешён. Подключается через MCP и hooks к Claude Code, Codex, Cursor, opencode и Pi.

• Как я написал свой Claude Code для DeepSeek с оптимизацией потребления токенов за вечер: @grand_inquisit0r собрал инструмент на Node.js без фреймворков, который реализует цикл agentLoop, стриминг tool_calls и систему разрешений с alwaysAllow/neverAllow, используя OpenAI-совместимый API для поддержки DeepSeek, Groq, Ollama и OpenAI. Архитектура включает компактор контекста, субагенты, 17 slash-команд, инструменты web_search (DuckDuckGo) и edit_file, а также оптимизацию токенов (70% сокращение) и персистентность сессий.

• GitHub запустил экспериментального агента доступности, проверяющего каждый PR с изменениями фронтенда: за время пилота агент проверил 3535 pull request’ов с 68% процентом закрытых проблем, а в основе архитектуры — два изолированных субагента: reviewer только читает и формирует структурированный отчёт, implementer исправляет код, и общаются они только через родительский оркестратор.

Обновления репозиториев:

• OpenAI Cookbook: добавлены новые примеры для Codex и GPT5.5, добавлен цикл улучшения агента с трейсами и оценками, добавлен цикл итеративного ремейка Codex.

• React: исправлен баг с потерей данных в FormData, исправлен вызов конструктора в классовых компонентах.

• Svelte: исправлено поведение $state.eager/pending, батчи как связный список, null для pending в типах.

• Bun, Node и Next.js получили ряд исправлений безопасности.

Статья подготовлена при поддержке @CosyFrontend, @alexbraun и @DreamShaded.