This Week In React #270: Next.js, AI, Hermes-node и новые горизонты экосистемы
В выпуске #270 фокус смещается сразу на несколько ключевых тем: стремительное развитие Next.js и его "AI-клона", выход Hermes за пределы мобильного мира, движение в сторону полноценного CSS Grid в React Native и первые попытки запустить TanStack Router нативно. Параллельно обсуждаются роль тестов в эпоху агентного программирования и то, как меняется подход к инструментам для форм, навигации и асинхронного кода.
Новый этап для React: запуск React Foundation
Официальный старт React Foundation - важный сигнал для всей фронтенд-сцены. Эта организация должна стать центром координации экосистемы: от библиотек и тулов до образовательных материалов и обсуждения стандартов. С её появлением ожидания к "официальному" направлению развития React растут: сообщества и компании получают более предсказуемый вектор развития и понятные ориентиры, куда безопасно инвестировать усилия и ресурсы.
Next.js + AI: как за неделю переписали фреймворк
Один инженер в Cloudflare за одну неделю перенёс API-поверхность Next.js (App Router, React Server Components, Server Actions, middleware) на Vite, активно используя модели ИИ. Общая стоимость эксперимента составила примерно 1100 долларов.
Новый проект получил название vinext и использует стек Oxc/Rolldown. По замерам, сборка получается в 4,4 раза быстрее, а итоговые бандлы - на 57% меньше по размеру по сравнению с исходным решением. За счёт использования Vite Environment API удалось обойти ограничения OpenNext и обеспечить корректную работу на edge-платформах вроде воркеров в облачной инфраструктуре.
Vinext уже не просто игрушка: он проходит более 2000 тестов и покрывает 94% публичного API Next.js 16. Более того, сайт правительственной структуры (cio.gov) уже использует его в продакшене. В проект также добавили новые идеи, включая механизм "Traffic-aware Pre-Rendering" - рандеринг, учитывающий особенности и интенсивность трафика.
Почему этот эксперимент стал возможен
Главный вывод из этой истории - не про ИИ, а про качество исходного фреймворка. У Next.js есть:
- ясно определённая и хорошо описанная API-поверхность;
- масштабный и продуманный набор тестов;
- чёткая спецификация поведения основных подсистем.
Именно это позволило агентам и инструментам на базе искусственного интеллекта достаточно точно воссоздать поведение без постоянного участия человека. По сути, ИИ получил в руки отличный контракт в виде тестов и документации - и смог воспроизвести реализацию.
Для практиков TDD это не открытие: настоящая ценность лежит в спецификациях и тестах, а не в конкретном исходном коде. В условиях, когда нейросетевые агенты всё увереннее пишут и переписывают код, именно тесты, формальные описания и продуманный API становятся ключевым активом компании или опенсорс-проекта.
Все чаще обсуждается идея, что многие продукты будущего будут стартовать не с "прототипа на коленке", а с markdown-спецификации и тестового набора, а реализацию будут заполнять уже автоматизированные агенты. Некоторые проекты уже движутся в сторону закрытых тестовых наборов при открытом коде - такой подход давно используют, например, для баз данных, чтобы сохранить конкурентное преимущество.
Документация по версиям в Next.js: чтобы агенты и люди не путались
Пока Cloudflare экспериментирует с ИИ-версией фреймворка, команда "оригинального" Next.js внедряет важное улучшение - версионную документацию. С учётом частых релизов и значимых изменений это помогает:
- разработчикам - получать актуальные сведения именно для используемой версии;
- агентам и инструментам ИИ - не теряться в новых API и не путать сигнатуры и поведение.
В эпоху, когда большую часть рутинных задач всё чаще отдают ассистентам и автокодерам, качественная, версионная дока становится не просто "удобством", а ключевым компонентом экосистемы.
Метаморфозы тестирования: Tests Are The New Moat
В контексте эксперимента с vinext набирает актуальность идея, что именно тесты становятся главным "ровом" вокруг продукта. Если код может быть быстро воссоздан и оптимизирован, то настоящую ценность представляют:
- исчерпывающий набор проверок;
- точные сценарии использования;
- детализированные контракты API.
Обсуждается сценарий, при котором всё больше опенсорс-проектов будут открывать реализацию, но закрывать тестовые наборы. Тогда конкуренты не смогут так просто скопировать поведение, даже имея доступ к коду и документации. Уже сегодня есть популярные продукты, использующие именно такую модель - открытые исходники, но непубличная тестовая инфраструктура.
Формы без рутины: FormEngine Core для MUI
Отдельный пласт боли разработчиков - многоразовые формы на базе MUI, постоянно переписываемые из проекта в проект. Инструменты вроде FormEngine Core предлагают альтернативный подход: описывать формы в виде JSON-конфигураций и рендерить их без глубокого погружения в React.
Такая модель особенно удобна для:
- форм, управляемых с бэкенда;
- интерфейсов с условной логикой показа полей;
- сложных административных панелей;
- многошаговых мастеров ввода данных.
Сам формат ориентирован на отсутствие привязки к поставщику и простую интеграцию в корпоративные системы. Разработчик получает рабочую форму за минуты, а изменения чаще происходят на уровне схемы, а не вручную в JSX.
Hermes выходит за пределы мобильных устройств: Hermes-node
На стороне React Native особенно заметен прогресс движка Hermes. Команда представила Hermes-node - CLI-версию Hermes, совместимую с Node.js API. По сути, это слой совместимости, который позволяет:
- использовать существующие Node-модули без их переписывания;
- запускать код поверх Hermes вместо V8, не меняя привычный интерфейс.
В большинстве случаев модули "заводятся" без дополнительных правок, ведь Hermes-node повторяет поведение среды Node.js. Если в будущем движок активнее будут компилировать в бинарный код, это может дать:
- прирост производительности для серверных приложений;
- экономию ресурсов при массовых Node-сервисах;
- альтернативу V8 там, где важны контроль и предсказуемость рантайма.
В долгосрочной перспективе появление второго серьёзного движка для Node-окружения может повлиять на всю экосистему: от инструментов оптимизации до специфичных библиотек под Hermes.
CSS Grid и React Native: макеты нового поколения
Ещё одна важная линия развития - приход CSS Grid в React Native. До сих пор для сложных сеток в мобильных интерфейсах в основном использовали Flexbox и различные грид-подобные решения на его основе. Полноценная поддержка Grid обещает:
- более выразительные и понятные описания сложных макетов;
- упрощение адаптивной вёрстки между вебом и мобильными приложениями;
- снижение количества "костылей" и вложенных контейнеров.
Для команд, которые уже используют CSS Grid в веб-проектах, это особенно важно: логика построения интерфейсов становится ближе и единообразнее, а перенос дизайна между платформами - менее болезненным.
TanStack Router на нативных рельсах
TanStack Router, известный в веб-мире как мощный типобезопасный роутер, получил ранний Proof of Concept нативного запуска. Если развитие пойдёт дальше, это откроет путь к:
- единым паттернам навигации между вебом и нативом;
- глубокой интеграции с типизацией TypeScript в кроссплатформенных проектах;
- более предсказуемому роутингу без множества условных обёрток.
Пока это только первые шаги, но сама идея "переезда" инструментов из веба в нативную среду с минимальными изменениями вполне укладывается в общий тренд унификации стека.
Экосистема React Native: навигация, хранение и инструменты
На стороне React Native продолжается отточка ключевых частей стекa:
- React Navigation остаётся де-факто стандартом для навигации, обрастая улучшениями в работе со стеками экранов, табами и deep-linking.
- Async Storage стабилизируется как базовый механизм локального хранения данных, с более предсказуемым поведением и лучшей интеграцией с существующими библиотеками.
- Инструменты визуального тестирования и сценарного прогонки интерфейсов вроде Maestro упрощают регрессионное тестирование нативных приложений.
- Решения для быстрых пуш-уведомлений и экраны-обёртки (QuickPush, Screens и другие) формируют вокруг себя всё более зрелую инфраструктуру.
Параллельно развиваются и обучающие проекты вроде Expo Skills, помогающие разработчикам быстрее осваивать новые фичи и подходы в мобильном стекe.
Node.js, инструменты форматирования и TypeScript
На бэкенде и в сопутствующих инструментах тоже много движения:
- Отдельные команды экспериментируют с интеграцией альтернативных JS-движков (тот же Hermes-node) в Node-среду.
- Развиваются новые форматы и утилиты форматирования кода и данных (такие как специализированные форматтеры наподобие Oxfmt), нацеленные на скорость и предсказуемость результата.
- TypeScript продолжает выступать клеем для всего этого зоопарка инструментов, становясь неотъемлемой частью конфигурирования роутеров, форм и асинхронной логики.
Визуальные аспекты интерфейсов, такие как нестандартные формы рамок (border shape) и использование спрайтов, по-прежнему остаются важными для оптимизации графики и производительности во фронтенде, особенно когда речь идёт о сложных анимациях и высоконагруженных UI.
Почему всё это важно для разработчиков сегодня
Суммируя, можно выделить несколько ключевых тенденций, которые напрямую влияют на повседневную работу:
1. Спецификации и тесты важнее, чем когда‑либо. В мире, где ИИ может быстро генерировать реализацию, качественный тестовый набор становится главным активом.
2. Рантаймы становятся заменяемыми. Hermes-node показывает, что мы постепенно выходим к эпохе, где можно выбирать движок JS, не ломая экосистему.
3. Унификация веба и натива. CSS Grid, TanStack Router и общие подходы к навигации и верстке стирают границы между платформами.
4. Конфигурационный подход побеждает ручной труд. Формы, роуты и часть логики всё чаще описываются в виде схем и JSON, а не вручную в коде.
5. AI - не магия, а усилитель хорошей инженерии. Там, где уже есть чёткие контракты, тесты и документация, ИИ способен радикально ускорять разработку и миграции.
Текущий выпуск ещё раз подчёркивает: выигрывают те команды и проекты, которые инвестируют в чёткий дизайн API, автоматизированные проверки и понятную архитектуру. Всё остальное - вопрос времени, инструментов и, всё чаще, умных агентов.
