ReactJS *

WYSIWYG-редактор в Next.js App Router затрагивает несколько слоев приложения. Quill работает с DOM и browser API, поэтому сам редактор живет на клиенте. Контент нужно хранить отдельно от экземпляра Quill, передавать в компонент при смене сущности, сохранять на сервер и затем показывать без toolbar и режима редактирования.
Если хранить результат Quill как HTML, редактор и viewer могут работать с одной строкой contentHtml. Editor меняет HTML через onChange. Autosave отправляет новую версию после паузы во вводе. Viewer получает сохраненный HTML и отдельно обрабатывает элементы, которые Quill использует для code blocks. Для подсветки кода добавляется highlight.js.

Начиная с React 18 рендер можно прервать: срочные обновления обгоняют несрочные, даже если React уже взялся за несрочное. Если задуматься, вопросов много:

Как React посреди рендера отдаёт поток браузеру, чтобы тот обработал ввод, а потом продолжает с того же места?

Почему до React 16 он так не умел?

Кто решает, какие обновления срочные, и почему большинство рендеров не прерывается вообще?

Что происходит с незакоммиченными обновлениями, когда пришло что-то срочное?

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

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

Готовиться к таким задачам на русском оказалось почти негде, особенно если вы пишете на JS или TS не только во фронте, но и на бэке. Поэтому мы сделали ПаровоJSик. Под катом рассказываем, что внутри, как тесты запускаются прямо в браузере и что будет дальше.

Во время разработки библиотеки morphing-scroll я пришёл к необычному способу организации локальных данных в React-компоненте. Это не было заранее придуманной архитектурой. Я экспериментировал с обновлениями, постепенно убирал лишние состояния и в какой-то момент получил код, который оказался заметно проще прежнего. Для меня это стало настоящим открытием.

Я преподаю детям программирование и вижу одну и ту же картину: на обычных тренажёрах печати дети быстро устают, начинают отвлекаться, а некоторые просто просят выключить. Тренажёра для детей с дислексией я не нашла ни одного. Ждать, пока его кто-то придумает, я не стала и сделала свой — Клавитраж.

Идея пришла не только с занятий: у меня самой дислексия, и именно клавиатура когда-то помогла мне справиться с письмом. Как я живу с этим и почему печать стала для меня спасением, расскажу в отдельной статье.

Здесь — о том, что я придумала, что из этого сработало, а в чём я ошиблась.

Хабы: JavaScript, WebRTC, Разработка веб-сайтов, Сетевые технологии, Браузеры
Теги: webrtc, rtcdatachannel, sctp, turn, stun, opfs, compressionstream, p2p

Введение

Представьте, что вам нужно отрендерить в React-приложении таблицу с 100 000 объектов, которые непрерывно обновляются в реальном времени через WebSocket. Каждые 50 мс прилетает батч из 5000 дельт (изменений).

Стандартный подход с useState или классическим Redux (с Immer) убивает браузер за несколько секунд:

▎ Может он и быстр, только экосистема нулевая. Ну и ещё система модулей кастомная, что полностью убивает любые готовые инструменты. Так что $mol — по сути одной ногой в могиле.
▎ Был у меня сложный компонент, допустим weather_widget. И вот в 20 местах на него наложили оверрайды. А потом я пересобрал этот widget. Что произойдёт с оверрайдами, которые знают внутреннюю структуру зависимости? Правильно, всё пойдёт крахом.

▎ Вот вы реально готовы поставить свой доход на вот это?

На примере панели профиля вынесем логику и подготовку данных в useSetup[Component], а в компоненте оставим разметку. Затем отдельно проверим setup-хук, компонент через Shallowly и взаимодействие через React Testing Library. В конце — полный пример с Vitest, который можно забрать и запустить.

Если следить за React только по крупным релизам, легко пропустить момент, когда библиотека тихо меняет направление. React 19.3 — как раз такой случай. Сам релиз вышел 9 сентября 2026 года. И я хочу поделиться парой моментов из этого обновления. Рассмотрим пару хуков это ViewTransition и Fragment Refs. Еще, что я могу выделить, это новые возможности для SSR, Server Components и работы с браузерными API.

Зелёный тест на учебном стенде ещё ничего не гарантирует, на реальном проекте он может падать через раз.

Рассказываю о тренажёре, который начинается как обычный курс, а потом включает Hard Mode: надоедливые попапы, медленный бэкенд и промо, которое перекрывает экран в самый неудобный момент.

Что внутри: курс из 11 уроков, Hard Mode с воспроизводимыми флаками и Flake Score, который показывает, переживёт ли тест реальный проект.

Привет, Хабр! Меня зовут Егор Смирнов, я руководитель команды Backend for Frontend в VK. Одна из зон нашей ответственности — поддержка и развитие инфраструктуры для фронтенда ВКонтакте. 

Веб-версии ВКонтакте в 2026 году исполнилось 20 лет. За это время наш фронтенд прошёл путь от AJAX до современного веб-приложения. Раньше мы вручную манипулировали DOM, сборка иконок превращалась в приключение, а деплой и откат занимали по полчаса. К середине 2026 года мы выстроили масштабируемую архитектуру, в которой компоненты, сборка и деплой работают как единая система.

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

Карточка в каталоге обычно ведёт на detail page. Для прямого перехода нужен отдельный URL вроде /events/123. Для просмотра нескольких карточек подряд удобнее оставить список на экране и открыть detail поверх него. Если modal хранится только в useState, адрес страницы не меняется. Прямую ссылку на открытый объект получить нельзя. После reload остаётся список, а поисковый робот видит только исходную страницу.
App Router поддерживает другую схему. Один detail URL открывается как modal при client-side переходе из списка и как обычная страница при прямом запросе или reload. Для этого используются Parallel Routes и Intercepting Routes. Next.js описывает тот же паттерн для modal поверх gallery или другого списка. В учебном EventMap этот маршрут используется для событий.

Организованная разработка фронтенда должна отвечать на три вопроса: компоненты, ререндеринг, стилизация. И LandTS легко на них отвечает.

Привет, Хабр. Расскажу про проект, который делал последние несколько месяцев. Это не очередная «убийца HH» и не «революция в рекрутинге». Это попытка решить одну конкретную проблему, которая бесит меня лично.

Живая ссылка: https://devraid.ru

В релизах ветки 16.x мы постепенно внедряли новую модель разработки, которая решает многие проблемы, с которыми вы сталкивались с самого появления App Router:

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

Делает клиентские переходы в приложениях с серверным рендерингом мгновенными.

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

Эта модель называется Cache Components, и в Next.js 17 она будет использоваться по умолчанию.

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

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

Начиная с Next.js 16.4, мы с уверенностью рекомендуем Cache Components как лучший выбор для любого приложения на Next.js.

Корпоративный сайт на пяти языках: около сотни страниц, блог, новости и 100–150 тысяч пользователей в месяц. Два года он жил на Webflow. Переезд на Next.js 15 и Payload CMS сейчас на финишной прямой, и шёл он без дня Х: страница за страницей, на одном домене со старым сайтом.

Разбираю, как это устроено. Счёт Webflow по строкам, Next.js под /app на Webflow Cloud и 301-редиректы с пятью локалями, перенос CMS-коллекций в Lexical, next-intl и проверки в CI, которые ловят то, что раньше находил только дизайнер через месяц.

Чтобы React летал как Vue 3, достаточно забрать у него тяжелые вычисления и переложить их на плоский реактивный граф зависимостей с умным планировщиком транзакций на уровне микрозадач.

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

В этой статье про переход к первой Full Stack вертикали Enterprise GenAI Platform: React, ASP.NET Core, EF Core и PostgreSQL, модуль Chats, границы frontend и backend, observability, автоматические проверки и End-to-End acceptance.

Главный вопрос “как перейти от архитектурной модели к реализации, не разрушив её преждевременным усложнением”.

Я делаю мобильное образовательное приложение. В какой‑то момент понадобилось объяснять пользователям сложные сценарии, где объекты двигаются по строгим формальным правилам, и объяснять не текстом, а видео. Любая неточная траектория или неверно анимированное действие на видео закладывает неверный паттерн. Я собрал для этого конвейер на Remotion и React Three Fiber.