SPA-переходы без фреймворков: асинхронная смена страниц с клонированием DOM

Главная сложность плавных переходов между страницами — нужно одновременно держать в DOM старую и новую страницу, чтобы анимировать их crossfade. Готовые решения скрывают эту механику, но если требуется тонкая настройка, лучше разобраться, как всё устроено внутри.

В туториале показывают, как собрать лёгкий SPA-роутер на чистом JS, GSAP и Vite. Ключевой приём: клонировать контейнер, подгрузить HTML новой страницы, запустить параллельную анимацию и только потом удалить старый DOM.

Помимо роутинга с перехватом кликов и обработкой popstate, разбирают организацию страниц как модулей с init/cleanup, анимацию входа для элементов и блокировку повторных переходов.

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

Детали и код — в материале.

#spa #javascript #vite

React vs Vue в 2026: сравнение по 12 критериям с бенчмарками

React лидирует по загрузкам npm — 429 млн в месяц против 47 млн у Vue. Вакансий с React в 3–4 раза больше. Казалось бы, выбор очевиден. Но у Vue есть аргументы, которые на собеседовании не спросят.

React 19.2 и Compiler v1.0 — важные события. Компилятор автоматически мемоизирует компоненты, устраняя необходимость в useMemo и useCallback. По данным Meta, это сократило количество лишних ре-рендеров в их приложениях на 40%. Vue тем временем готовит Vapor Mode — рендеринг без виртуального DOM, по принципу Svelte: компиляция шаблонов напрямую в DOM-операции.

В статье мы сравнили оба фреймворка по производительности, экосистеме, TypeScript-поддержке, размеру бандла, кривой обучения и рынку вакансий — с актуальными данными на март 2026.

Читать: https://tproger.ru/articles/react-vs-vue-v-2026-godu--kakoj-frejmvork-vybrat

#javascript #frontend @tproger

@tproger_web
Читайте также в VK и Max

Cloudflare выпустила EmDash — open-source CMS на TypeScript, где каждый плагин в изолированной песочнице

96% уязвимостей WordPress-сайтов приходит из плагинов. Причина архитектурная: в WordPress плагин — это PHP-скрипт, который встраивается в ядро с полным доступом к базе данных и файловой системе. Без изоляции, без ограничений. Установить плагин — значит полностью ему доверять.

Cloudflare выпустила EmDash v0.1.0 — CMS с принципиально другой моделью. Каждый плагин запускается в собственном изолированном воркере (Dynamic Worker, v8-песочница) и декларирует нужные разрешения в манифесте:

definePlugin({
  capabilities: ["read:content", "email:send"],
  // плагин не может сделать ничего сверх этого
})

Под капотом: Astro, serverless-архитектура, Portable Text вместо HTML, встроенный MCP-сервер для ИИ-агентов. Лицензия MIT. Проект создан за 2 месяца с помощью ИИ-агентов и за сутки набрал 3 200+ звёзд на GitHub.

Подробнее: https://tproger.ru/news/cloudflare-zapustila-emdash---open-source-cms-na-typescript--kot

#javascript

Автор react-motion выпустил библиотеку для вёрстки текста без DOM

Cheng Lou (React core, Midjourney) открыл pretext — 15 КБ, zero deps. Суть: стандартные getBoundingClientRect и offsetHeight вызывают layout reflow — браузер пересчитывает геометрию всей страницы. При 60fps бюджет кадра 16.7 мс, а один reflow на сотне текстовых блоков легко его съедает.

pretext идёт другим путём: замеряет текст через Canvas font engine один раз, а вёрстку для любой ширины считает чистой арифметикой — DOM не трогает вообще.

const prepared = prepare('Hello world', '16px Inter')
const { height, lineCount } = layout(prepared, 320, 20)

Работает с React, Vue, Svelte, vanilla JS, в браузере и на сервере. За первые 48 часов — 14 000 звёзд.

GitHub
Демо

#javascript #производительность

Формы в Angular всегда были той ещё головной болью — кажется, это начинает меняться

В Angular 21 появились Signal Forms — экспериментальная альтернатива привычным реактивным формам. Главная идея: форма и данные синхронизируются сами, без ручного перекладывания значений туда-обратно.

Грубо говоря, вместо вот этого:

ngOnChanges() {
  this.loginForm.patchValue({ ...this.login });
}

Теперь просто:

loginForm = form(this.login);

Форма сама следит за состоянием. Меньше кода, лучше типизация, встроенные debounce, hidden, disabled, readonly и валидация — синхронная и асинхронная.

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

#javascript

@prog_point (теперь ещё в VK и Max)

60–90 КБ в вашем бандле браузер уже умеет сам

К package.json мы обычно ходим с вопросами про уязвимости и версии, но редко с вопросом, делает ли библиотека что-то, чего платформа ещё не умеет. Разбор в Smashing Magazine оценивает цену этой привычки: в среднем приложении 60–90 КБ после минификации и сжатия весят зависимости, которые дублируют то, что браузер уже умеет сам.

Самый жирный кусок — форматирование. timeago.js на 1 КБ заменяется на Intl.RelativeTimeFormat, numeral на 3,9 КБ — на Intl.NumberFormat, humanize-duration на 6,6 КБ — на Intl.DurationFormat. Самописные функции, склеивающие массив в строку через запятую, закрывает Intl.ListFormat, вместе с оксфордской запятой.

Отдельно разобран случай, когда менять не надо вовсе. Temporal лучше Date, но в стабильном Safari его пока нет, а официальный полифил весит 44 КБ против 3 КБ у dayjs. Сегодня такая замена не экономит, а добавляет к бандлу около 41 КБ, поэтому dayjs остаётся на месте до тех пор, пока Temporal не доедет до Safari.

Рекомендую перепроверять зависимости раз в квартал, за это время как раз может выйти полезное обновление. Смотреть статус фич можно на webstatus.dev, значок Baseline есть на каждой странице MDN, а для проверки пачкой в сборке ставится пакет web-features.

#javascript

Chrome 152: закрыть диалог кликом по подложке без вычисления координат

Раньше для «закрыть модалку при клике мимо» ловили клик на dialog и сверяли getBoundingClientRect с курсором. Теперь CSSPseudoElement в JavaScript, кроме ::before, ::after и ::marker, отдаёт ::backdrop, ::scroll-marker и ::view-transition. Клик по подложке становится обычным событием.

Вторая новинка — CPU Performance API: возвращает «tier» производительности процессора, чтобы снижать детализацию графики на слабых устройствах; работает в связке с Compute Pressure API. Пользователь и админ могут переопределить уровень (политика CpuPerformanceTierOverride), так что значение не истина.

Третья — заголовок Connection-Allowlist: список URL-паттернов, куда документу и его воркерам разрешено ходить. Браузер сам режет остальные исходящие запросы, включая те, что делают сторонние скрипты.

Рейчел Эндрю собрала релиз по пунктам; origin trial Connection Allowlists шёл с Chrome 148 по 151, в 152 заголовок включён по умолчанию.

#браузеры #javascript #безопасность

Safari расширяет случайность в CSS: random-item() и random() в custom properties

Сегодня WebKit выложил Safari Technology Preview 251. random() в Safari уже есть со стабильной 26.2, а теперь добавились random-item() для выбора из списка значений, random() внутри custom properties и ключевые слова кеширования property-scoped и property-index-scoped. Разброс блоков в галерее и вариации анимаций описываются в CSS без скрипта с инлайн-стилями.

Из той же сборки стоит примерить: corner-shape (скошенные и вогнутые углы поверх border-radius), @supports at-rule(...) и popover=hint для подсказок, которые не закрывают другие поповеры.

В JavaScript главное import defer: модуль грузится сразу, а выполняется при первом обращении, это ускорение старта без ленивых import(). Плюс Iterator.zip(), chunks(), windows() и WebAssembly Memory64. Убрали процентное значение -webkit-line-clamp: если оно есть в вашем CSS, вёрстка поедет.

Полный список в заметках к релизу.

#браузеры #css #javascript

Плавающий виджет поверх всех окон одним вызовом API

Firefox 151 включил Document Picture-in-Picture API, до этого он был только в Chrome. В отличие от PiP для видео, documentPictureInPicture.requestWindow() открывает окно поверх вкладок и других приложений с любым HTML внутри: тикер, чат, таймер, заметки. Раньше это требовало расширения или Electron.

CSS-Tricks разобрал API на примере тикера акций. Стили в новое окно не наследуются: <style> и <link rel=stylesheet> клонируют через querySelectorAll() в createDocumentFragment() и одним append кладут в <head>. Ширину и высоту задают только парой, иначе размер выбирает браузер. Фокус уходит в PiP-окно, поэтому кнопка-переключатель закрывает его со второго клика.

@supports не поможет: at-rule() есть только в Chrome, остаётся "documentPictureInPicture" in window и скрытие кнопки. Стили под окно пишут через @media (display-mode: picture-in-picture). Только десктоп, Safari мимо, в iframe не запускается.

#браузеры #css #javascript

htmx 4.0 вышел и намеренно не стал версией по умолчанию

Восемь месяцев работы, релиз сегодня. Для пользователя четвёртая версия почти совпадает со второй, но внутри библиотека переехала с XMLHttpRequest на fetch() — ради этого всё и затевалось.

Главных изменений авторы называют три, и заметнее прочих наследование атрибутов. В htmx 2 атрибут на родителе по умолчанию действовал на потомков, как в CSS: hx-confirm на div спрашивал подтверждение у каждой кнопки внутри. В htmx 4 наследование включается явным суффиксом:

<div hx-confirm:inherited="Точно?">
<button hx-delete="/item/1">Удалить</button>
</div>

hx-disinherit при этом исчез, его следует убрать. Дальше — имена событий, приведённые к схеме htmx:<фаза>:<система>, и история навигации, которая перестала по умолчанию храниться локально: авторы называют старый кэш источником многих обращений в поддержку. Полный список несовместимостей длиннее трёх пунктов и лежит в руководстве по миграции.

Тег latest в npm остался на ветке 2.x примерно до начала 2027 года, чтобы не переключить силой тех, кто подключает htmx с CDN без указания версии; четвёртая ветка живёт под next. Места, которые надо чинить, ищет команда upgrade-check из комплекта.

#javascript #фронтенд

Zod научился компилировать схемы и стал быстрее в разы

До версии 4.5 парсер интерпретировал схему прямо во время валидации: на каждый parse() Zod обходил дерево и по ходу решал, что проверять. Во вчерашнем релизе появился z.compile() — он один раз проходит схему целиком и генерирует под неё плоский JavaScript без циклов, который выполняется через new Function(). На валидных данных срабатывает быстрый путь, на невалидных Zod возвращается к обычному парсеру за подробной ошибкой.

Собирать ничего не нужно, всё происходит в рантайме: import "zod/compile" в точке входа или флаг node --import zod/compile включают компиляцию для всех схем сразу. Ускорились и отказы — .safeParse() перестал захватывать стек-трейс и на неудачном пути стал быстрее примерно в 7,5 раза.

Перед обновлением проверьте два места: z.iso.datetime() больше не принимает время без секунд (2020-01-01T06:15Z теперь ошибка), а .min(), .max() и .length() у строк считают кодовые точки Unicode вместо кодовых единиц UTF-16.

#javascript #перформанс

Уберите тормозящую задержку из многоуровневого меню — её заменяет геометрия

Пользователь ведёт курсор по диагонали от пункта к подменю, задевает по дороге соседнюю строку, и содержимое переключается прямо под мышью. Обычное лечение — задержка перед сменой подменю, из-за которой интерфейс ощущается медленным. В большом меню Shop by Department на Amazon задержки нет, и промаха тоже.

Синий треугольник на схеме — предполагаемый путь курсора. Его вершины: текущая позиция указателя и правые верхний и нижний углы открытого меню. Если следующая позиция попадает внутрь, человек, скорее всего, идёт к подменю, и оно остаётся открытым чуть дольше, даже когда курсор на секунду оказался над соседним пунктом. Вышел за треугольник — подменю переключается мгновенно.

Механизм разобрал Бен Кеймeнс в 2013 году и выпустил по мотивам плагин jQuery-menu-aim, который позже применили в меню Khan Academy. Приём описывает геометрию намерения пользователя, поэтому живёт дольше любой библиотеки.

#javascript #фронтенд

Ваш код не медленный, он просто держит главный поток

Скролл подёргивается, кнопка отвечает с задержкой, буквы в поиске появляются на полтакта позже. Первый рефлекс: искать медленный алгоритм. Автор разбора показывает, что чаще проблема не в скорости кода, а в том, что он занимает единственный поток, где живут и JavaScript, и стили, и layout, и paint.

Бюджет на кадр при 60 Гц около 16,6 мс, из которых практически доступны примерно 10; на 120 Гц вдвое меньше. Функция на 200 мс замораживает экран на 200 мс, и никакой бандл-оптимизацией это не лечится. Отсюда четыре приёма на самом потоке: делить длинные задачи, группировать частые, расставлять приоритеты, откладывать необязательное. И три способа увести работу с потока: на композитор, в worker, или не делать её вовсе.

Внутри интерактивные демо: чат, куда прилетают сотни сообщений в секунду, и разница между «рисовать сразу» и «отдавать поток каждые 20 сообщений». Yield не делает работу быстрее, но возвращает интерфейсу отзывчивость. Я бы прошёл этот текст перед следующим разбором INP. Разбор в блоге kciter.

#перформанс #javascript

Три попытки собрать текстовый редактор в браузере: Canvas, contenteditable и textarea

Дэвид Бушелл решил написать свой редактор и прошёл все грабли по очереди. Canvas даёт полный контроль над отрисовкой и ничего бесплатно: ни выделения, ни undo, ни вставки нескольких строк, ни прокрутки, а курсор и стрелки пришлось программировать с нуля при заметной нагрузке на CPU.

Второй заход: contenteditable="plaintext-only" с отключёнными autocapitalize, autocorrect, spellcheck и translate. Проверка орфографии давала скачки задержки ввода. Но на длинном тексте выяснилось, что обычный <textarea> заметно производительнее. Итоговая схема: textarea принимает ввод, отдельный слой сверху рисует подсветку синтаксиса, а Tree-sitter обрабатывает только видимые строки, потому что слишком много CSS Highlights само становится узким местом.

Бонус для тех, кто считает символы: "🍋‍🟩".length даёт 5, spread даёт 3, а Intl.Segmenter честно видит один графем. Разбор у автора.

#javascript

Автор ESLint-плагина прогнал свои правила по тестам конкурента и проиграл 51 к 71

Офри Перец вытащил из npm-пакета eslint-plugin-security 84 негативных примера и прогнал их через оба плагина. Конкурент поймал 71, его eslint-plugin-node-security 51, честные 61% покрытия. 29 из 33 промахов пришлись на одно правило, detect-buffer-noassert, которое ловит аргумент, удалённый из Node.js ещё в версии 10: в Node 24 readUInt8(0, true) просто игнорирует его.

Без этого правила счёт 51 из 55, то есть 93%. Обратная сторона: конкурент пропустил 13 примеров, которые поймал автор, а вместе два плагина закрывают 84 из 84. Но на 61 файле обычных automation-скриптов автор получил 279 срабатываний, и все проверенные оказались ложными.

Метод на 40 строк можно повторить для любой пары линтеров, а вывод универсален: «кто цитирует одно число, цитирует то, которое ему выгодно». Замер от 12 августа на eslint-plugin-security 4.0.1 и ESLint 9.39.2. Разбор на dev.to.

#безопасность #javascript

Языковая модель во вкладке: WebLLM считает на видеокарте пользователя через WebGPU, сервер не нужен

Библиотека от команды MLC AI (18,8 тыс. звёзд, Apache-2.0) скачивает модель один раз, кладёт в Cache API, IndexedDB или OPFS и запускает инференс прямо в браузере. API повторяет OpenAI: engine.chat.completions.create({ messages, stream: true }), так что фронтенд чата переносится почти без правок. Тяжёлую работу можно вынести в Web Worker или Service Worker, чтобы не вешать интерфейс.

Что это стоит пользователю: предсобранные модели просят от 0,7 ГБ видеопамяти (gemma3-1b) до 6,4 ГБ (Qwen3.5-9B), первый запуск ждёт скачивания весов, а без WebGPU ничего не заработает. Зато промпты не уходят с устройства, а инференс не стоит вам ни копейки. Попробовать без кода можно на chat.webllm.ai. Установка, код, замеры скорости против нативного запуска и FAQ на сайте.

#javascript #ии

Каждая цепочка filter и map создаёт два лишних массива

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

Методы массивов жадные: выполняются сразу и возвращают новый полностью заполненный массив. Iterator helpers ленивые: тянут значения по одному и ровно столько, сколько попросили. Для потоков и бесконечных последовательностей это разница между работающим кодом и упавшей вкладкой.

Приятная часть: это уже нативно, без библиотек, полифилов и шага сборки. Chrome 122, Firefox 131, Safari 18.2. Разбор с примерами.

#javascript

Достаньте точный цвет пикселя из картинки прямо в браузере

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

Работает это через Canvas — элемент HTML, на котором можно рисовать и, что важнее, читать нарисованное по пикселям. Порядок такой: загрузить изображение, нарисовать его на canvas, забрать массив пикселей и достать нужный. В массиве каждый пиксель занимает четыре числа: красный, зелёный, синий и прозрачность.

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

#javascript

У вас есть широта и долгота: что с ними делать, кроме метки на карте

Пара чисел вроде 40.7128 и −74.0060 обычно заканчивается маркером на карте, и на этом всё. А достать из неё можно заметно больше: найти заведения рядом, определить город и район, посчитать расстояние до другой точки.

Для новичка это удобная тренировка работы с внешним API: отправить запрос с координатами, получить JSON, разобрать его и показать результат. Заодно всплывают вещи, о которых туториалы обычно молчат: что делать, если сервис ничего не нашёл, и почему расстояние по прямой не равно расстоянию пешком.

Разбор на JavaScript годится как основа для маленького проекта «что рядом со мной»: одна форма, один запрос, один список результатов.

#javascript

Ноль зависимостей и ноль сборки: что вышло из 59 утилит на голом JavaScript

Автор Antigravity Tools поставил себе ограничение и выдержал его 59 раз подряд: без бэкенда на Node, без пакетов npm, без webpack, vite и parcel, без аналитики и куки. Только нативные браузерные API.

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

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

#javascript