Апіі веб-браузераў заменяюць популярныя пакеты npm у 2026 годзе
Пасвячаецца таму, як вбудованыя функцыі JavaScript і CSS, такія як Signals, аператар пайплайну, Temporal і Anchor Positioning, заменяюць популярныя пакеты npm.
Вартаеся на момант рассмотрзець ваш package.json: скількі з тых элементаў існуе проста для імітавання можнасця, якое браузер вже научыўся выкарыстоваць сам?
Працэса апошніх дзесяць гадоў стандартным рашэнням практычна для кожных проблем фронтэнду было „зняць пакет“. Патрэбна адарожненне стану? Выберыце Redux, Zustand або MobX. Патрэбны даты? Moment або dayjs. Патрэбны дапаможнікі? lodash. Патрэбны анімазіі? GSAP або Framer Motion. Кожная фрэймворк скупляла свой сабець код для заполнення прасоў у платформе.
Да 2026 году гэтыя тэндэнцыі зміняюцца быстрей, чым большасць команд усвядомляе. TC39 і ведучыя виробнікі прыгледзачаў за астаннія калькі гадоў стабільна ствараюць натыўныя адпаведнікі для цэлых катагорый інструментаў трохі чужых разработчыкаў. Ёсць пяць пакетаў, якія вы можете серйозна рассмотрыць для адмовы ад іх викорыстання ў своіх залежнасцях праўяўтара, а таксама ўжо два пакеты, якія толькі напалову сталаўшыся застарэлымі.
1. Бібліятекі для керавання станам — натыўныя Signalы ўжо доступны
Заменяе: Redux, Zustand, MobX, Recoil, Jotai, а таксама власныя механізмы реактыўнасці фрэймворкаў, такія як реактыўныя канстанты у Vue
Заменены на: стандартызаваныя прімітівы Signal (State, Computed і дапаможны элемент sub для падпіску)
Мало які проблемы так сильна адзьякравала развіцце фронтэнд-разработкі, як выбор спосабу керавання стацыямі. Экасистема React перайшла ад Redux, потым да Zustand, пасля да Jotai, а потым да Recoil. Vue створыла свае сабе прымітывы рэактыўнасці, а пазней дадаўшы ўжо Pinia. Тым часам Solid і Svelte з самага пачатку былі створаны на адной основе — сігналах. Кожны фрэймворк стварыў сваю версію прымітыва рэактыўнасці, што значыла, перадача логікі керавання стацыямі между фрэймворкамі была практычна немагчымая.
Гэтая обмежэннасць зменшылася у 2026 году, калі праект TC39 з сігналамі быў рэалізаваны. Тепер прымітыв рэактыўнасці знаходзіцца безпасулькі ў самым двыжку JavaScript:
// No library. This runs in the browser as-is.
const counter = new Signal.State(0);
const doubled = new Signal.Computed(() => counter.get() * 2);
Signal.sub(() => {
console.log(`count: ${counter.get()}, doubled: ${doubled.get()}`);
});
counter.set(1); // triggers the subscription automatically
Ось што даў вам гэты перакід:
- Логіку керавання стацыямі можна стварыць раз і вжываць усюды — React, Vue, Solid і Svelte можаць чытаць з таго ж самога прымітыва
Дзеяры інжынераў адносна гэтага прыводзяць тое, што завершылася дэкада супернічання между фронтэнд-фрамворкамі. Калі реактыўны ядро стане спяшчаным у розных экосістэмах, засталыя разлікі между фрамворкамі будуць супакоўвацца ў синтаксысе шаблонаў і структуры компанентаў — а не ў механізмах распространення абнавлень стата.
2. lodash — аператар пайплайну заканчывае „кузена калектывацыйскага пекла“
Заменяе: lodash, ramda і большасць выкарыстання _.chain()
Заменяецца на: аператар пайплайну, |>
Ў вас, верагодна, ўжо былі сцэны, калі вы пісалі ўдзець такое:
const result = fn3(fn2(fn1(data)));
Такі вкладаныя вызывы функцый — калі трэба чытаць іх знізу вверх, каб з’ясавіць рэальную параду выконання — ўжо давно є аднамі з найбольшых прычын пагоршання читаемасці коду на JavaScript. Функцыя _.chain() з бібліятэкі lodash раней падменяла гэту проблему, але для таго, каб код выконвался у болей чыстай параде, давалася можлівасць выкарыстоўваць цэю цалую бібліятэку.
З 2026 года оператор пайплайну перайшоў у 4-ю стадію ў ES2026. Тэпер тая ж выразнасць чытаецца у натуральной парадзе зверху вниз:
const result = data
|> fn1
|> fn2
|> fn3;
У поўнай злагодзе з вбудованым падтрымкам await, асінхронныя пайплайны стаюць майже наступніками шэл-скрыптав:
const user = userId
|> fetchUser
|> await
|> extractProfile
|> await
|> formatOutput;
Аператар пайплайна спрыяе падборчым якостям коду, тады калі lodash большасцю выкарыстоўвался для рашэння старэйшай проблемы — адсутнасці функцыйнальных інструментаў у самай мове. Ёжы ўжо є вбудаваным, методы Array.prototype сталі болей зрэлымі, а structuredClone є доступным у всіх браузерах, таму праблема, якая спрычыніла наявнасць lodash, значна зменшылася. Якщо ў 2026 году ён все ўсёле прыналежыць да вашых залежнасцяў, яго адключэнне, верагодна, будзе найпростым спосабам зменшыць розмер пакета.
3. dayjs і moment — APITemporal досягае 98% падтрымкі браузераў
Заменяе: moment.js, dayjs і date-fns у большасці випадкаў выкарыстоўвання
Заменяецца на: API Temporal
Этый варыянт ў спісе ёсць наіменш спраўны. moment.js годзінамі працюе толькі у режыме тыльнага адтрымання, а нават „лёгкі“ dayjs прыносіць дадатковае запрашанне праз 2KB у ваш бандл. Тым часам API Temporal падтрымваецца 98% прыстроёў-браузераў.
// dayjs
const d = dayjs('2026-09-11').add(1, 'month').format('YYYY-MM-DD');
// Temporal
const d = Temporal.PlainDate.from('2026-09-11').add({ months: 1 }).toString();
Temporal — гэта не толькі аптимальная сынтаксіс; ён таксама усуняе рэальныя багі, з якімі бібліятекі для роботы з датамі сталкваліся годзінамі:
- Работа з часовымі зонамі ўбудоўаная, таму не трэба окалічнага плагіна для часовых зон
- Падтрымка календарных систем ўбудоўаная, укладаючы негрэгорянскія календары
- Экземпляры є незменнымі, чыгучыя ад класычнай проблемы moment.js, калі нехта випадкова мутуюць об’ект, які, як думалася, застаўся недаступным
- Размах бандлу зменшыцца на 10–50KB
Для проектаў, які прызначеныя для активных корыстувачаў на мобільных прыстроях, такое зменшэння розмеру на 10–50 КБ — не проста практычная фіча; гэта безпасова плынуе ў лепшыя значэння показніка LCP.
4. Popper.js і Floating UI — пазыціонаванне анкера тепер ў бяжучым CSS
Заменяе: Popper.js, Floating UI, Tippy.js
Заменяецца на: CSS пазыціонаванне анкера
Якщо вы калі-небудзь стваралі падказкі, вы ведаеце, як гэта працюе. Патрэбна падказка, якая з’яўляецца прымо пад кнопкай. Стары спосаб — position: absolute, ручны расчэт значэнняў top і left, а таксама налаштаванне слухачаў scroll і resize, ўбеджваючыся, што падказка застаецца на своім месцы. Алеў жо можна викорыстаць Popper.js або Floating UI, чым дадаць ўсё больш як дзесятак кілабайтаў толькі для керавання пазыціяй.
Да 2026 году CSS Anchor Positioning рашыяе гэта на рэвэлю платформы:
/* Step 1: name the anchor element */
.button {
anchor-name: --my-trigger;
}
/* Step 2: pin the floating element to it */
.tooltip {
position: anchor(--my-trigger);
inset-area: bottom; /* below the anchor */
}
І гэта ўсё — весь раўянак. Ні JavaScript, ні ручных вычыслаў для абсалютнага пазыціонавання, ні зовнішніх бібліятэкаў. Уявіце сабе Anchor Positioning як GPS-фіксацыю для элементаў інтэрфейсу, якія плаваюць: наставіце яго на кнопку-трыгер, і ён застанется на сваім месцы незалежна ад таго, як скролліваецца сторана чы вырашаеся вікна прэвю.
5. Sass і PostCSS — натыўнае вярсткаванне, @layer і @scope
Заменяе: Sass, Less, PostCSS і ўсю екасістэму яго плагінаў
Заменяецца на: натыўнае вярсткаванне CSS, @layer і @scope
Быў час, калі Sass і Less здаваліся неабходнымі. Зменны, вярсткаванне, міксы, функцыі, якія можна перадаўаць знову — звычны CSS проста не меў нічога з гэтага. У 2026 году так уже няма.
Натыўнае вярсткаванне:
.card {
background: white;
& .title { font-weight: 600; }
&:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
}
@layer для кантролю порядку каскадавання:
@layer reset, base, components, utilities;
@scope для лёгкай ізоляцыі стыляў:
@scope (.card) to (.card__content) {
:scope { border-radius: 8px; }
}
OKLCH стала стандартным форматам кольцаў:
:root {
--color-primary: oklch(0.65 0.2 250);
--color-hover: oklch(from var(--color-primary) calc(l - 0.1) c h);
}
Да гэтага даўаюцца кэранты-запыты, точная выравнаванне тексту за допамогай text-box, пазыціонаванне на адной лініі за дапамогай sibling-index() і анімазіі, якія працуюць пад час скроллу — усе гэта будзе стабільна ў всіх браузерах да 2026 года — і таму Sass перастаў быть обав’язковым элементам і стаў факультатывным інструментам для большасці проектаў. Якщо ён усё яшчэ автаматычна дадаецца да вашага набора інструментаў, варта пераканацца, сколькі з функцыяй, для якіх вы яго вжываеце, тепер можна рэалізаваць натыўна.
Два пакеты, якія заменены толькі часткова
Не кожны пункт у гэтым списку ўжо мае повную натыўную замену. Два з іх ўжо блізкія да гэтага, але платформа ўсё яшчэ не доўгачка наздагнала іх.
Бібліятэкі анімацый — GSAP і Framer Motion проты вбудованых View Transitions. API View Transitions стала стабільной з выходам React 19.3, і ўсёе её компонента <ViewTransition> можа автаматычна анімаваць элементы, калі яны входзяць, выходзяць, перажываюць або зменшваюць/збільшваюць размер. Анімацыя, калі яна запускаецца пад час прасування, за дапамою animation-timeline: scroll(), дае вам показчыкі прагрэсу, эфекты паралаксу і плавныя переходы без якога-лібо JavaScript. Аднак для сложных, ручна складзеных анімацыйных секвэнсаў — такіх, у якіх спецыялізуецца GSAP — вбудованыя інструменты яшчэ не ўсунуліся на месца повнай замены.
Інферэнція AI — ONNX Runtime Web проты WebNN. Для інферэнціі модэлей у браузере API WebNN можа безпасяродна выкарыстоўваць прышвартаванне NPU на рэвэле системы, тады як не трэба завантажваць дзесяткі мегабайтаў коду ONNX runtime.
const context = await navigator.ml.createContext();
const builder = new MLGraphBuilder(context);
// build the inference graph...
const output = await context.compute(graph, inputs);
Абяцкае обмежэнне: WebNN даўжа не мае повнага падтрымкі з боку прыгледачоў, таму ONNX Runtime Web зараз застаецца болей надзеяным выборам.
Удаленне ўсіх пяці гэтых катагорыяў з кодбазы фронтэнда середніх размераў можа зменшыць розмер завіснасця на 100–300 КБ. Пры медленным мобільным з’ѐеднанні такое зменшэнне можа прыняць форму скорачэння часу адразу пасля атрымання зместу на 1–2 секунды.
Вывад
Развіцце фронтэнда ў 2026 годзе адбываецца на тле вярнення падтрымкі натыўных платформ. TC39 і прыгледачовыя двыжкі перабираюць у себе тыя функцыі, якія раней належалі выключна екосыстэме npm — кераванне станам, функцыйныя дапаможнікі, обробка дат, пазыціонаванне елементаў на экране і прадзействаванне CSS. Проблемы, якія раней вымагалі включэння додатковых пакетаў, тепер маюць рашэння, якія ўжо є вбудованымі ў сам прыгледач.
JavaScript пачатуе выглядаць як сапраўдна самастатковая мова платформы. Навык, які варта развіваць, — это не глыбокая экспертыза ў якой-небудзь адной платформе чы рэпазітарыі, а здатнасць адначасова ацэніць, калі платформа вже достатня, а калі якаясь залежнасць все ўсё залишаецца важлівай.
Таму загляніце у ваш package.json: сколькі рэядкоў вы моглі б выдаліць сёння?
Спадневаная літэратура
- Як практычна расіяваць проблемы Race Conditions, якія немагчыма рашыць за дапамой debouncing у інтерфейсах пошуку — Дазнаецеся, чаму сама расіяваць не можа запобiec тому, каб застарэлыя адпаведзі API перазапісвалі свежы стан інтерфейса, а таксама пазнаеце чатыры практычныя спосабы выканання правільнага порядку запытак.