Что браузер забрал у микрофреймворков

Материал продолжает тему моих заметок о микрофреймворках 2011 года. Сравнение с возможностями современных браузеров и примеры кода подготовлены в октябре 2026 года.

В 2011 году я начал серию о микрофреймворках: хотелось брать небольшой инструмент под конкретную задачу. Во второй части были Qwery для поиска элементов в разных браузерах и Underscore с готовыми операциями над коллекциями без изменения встроенных объектов JavaScript. С таких операций проще начать: проверить, что именно делает наш код и доступны ли нужные возможности во всех браузерах, которые поддерживает сайт.

Допустим, на странице блога можно выбрать темы публикаций с помощью флажков. У каждого поля есть name="topic" и своё value. Чтобы получить значения отмеченных полей, достаточно такой функции:

export function selectedTopics(form) {
  const fields = form.querySelectorAll('input[name="topic"]:checked');

  return Array.from(fields, field => field.value);
}

В form передаём элемент формы. Если отмечены поля со значениями css и javascript, функция вернёт ["css", "javascript"]; если не отмечено ни одного — пустой массив. Поиск ограничен этой формой и отражает выбор на момент вызова. После изменения флажков функцию нужно вызвать снова. В примере нет загрузки данных и обновления интерфейса, поэтому назначение функции видно целиком.

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

Можно было бы спрятать поиск в свою функцию $, а преобразование результата в ещё один помощник. Для одной страницы это добавит новые имена, значение которых придётся выяснять. Обёртка полезна, когда в ней есть решение нашей повторяющейся задачи. Одного желания сократить querySelectorAll для меня мало.

С запросами переход не так механичен. В старом списке был Reqwest, теперь во многих задачах достаточно fetch. Но замена вызова библиотеки вызовом браузера ещё не делает поведение одинаковым. Например, ответ с HTTP-статусом 404 сам по себе не отклоняет промис fetch; код должен проверить ответ, например по response.ok. Ещё нужно решить, когда перестать ждать, как отменить ненужный запрос и что показать при ошибке. Если библиотека уже делала это по правилам проекта, удалить её без переноса этих решений не получится.

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

Для анимации вопрос другой. Подсветка ссылки или переход между двумя состояниями элемента часто выражаются в CSS. Там не нужен отдельный цикл, который на каждом шаге меняет значения стилей. Если же сценарий требует управления сложной последовательностью, одной записи transition будет недостаточно. Выбор здесь зависит от поведения интерфейса. Само наличие возможности двигать элемент средствами браузера ещё не описывает всё, что нужно анимировать.

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

Так зависимости можно пересматривать по одной. Удалить библиотеку для выборки элементов, оставить очистку HTML, отдельно разобраться с запросами. Не обязательно приводить весь проект к одному ответу «с библиотеками» или «без».

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