🔥

Тред (Павел Лосев)


Сегодня будет тред про legacy (англ. наследие) в мире JavaScript. Под легаси я имею ввиду старые фреймворки, модули и библиотеки, которые до сих пор очень активно используются, несмотря на то, что 80% API уже есть в языке / рантайме.

Думаю, что тред получится довольно субъективным (т.к. для многих это не проблема вовсе), но постараюсь опираться на факты.

Сначала подумаем, почему вообще возникает легаси. По моему мнению, оно появляется ввиду того, что JavaScript очень быстро развивается, как экосистема, так и сам язык.

Логично, что более старые фреймворки (например jQuery для фронта, или Express для бэка) будут популярнее новых, просто ввиду того что у них было больше времени на развитие и рост популярности.

В то время, когда появлялись эти библиотеки, JavaScript был не настолько развит, или просто хотелось использовать какой-то метод из спеки (или даже не из спеки, но потом там появилось), который ещё не поддерживался рантаймом / браузерами.

К примеру, возьмём Object.setPrototypeOf. Метод был добавлен в ECMAScript в 2015 году, а ES2015 стал полностью поддерживаться только с версии Node.js 0.12.18, но нужно было поддерживать ещё более старую версию ноды...

Такой случай у Express, он включает в себя этот полифилл, но зато поддерживает 0.10 версию. Как видим, у setprototypeof 22M скачиваний в неделю...

И поэтому приходилось добавлять полифиллы – фичи языка, которые ещё не добавлены в спеку ECMAScript (или в Node.js), но которые можно вручную воссоздать и использовать.

С полифиллами есть одна большая проблема. Большинство полифиллов рано или поздно становятся ненужными, потому что JS очень быстро развивается, и большинство часто используемых методов либо уже были добавлены, либо будут добавлены в ближайшем будущем.

Ещё одна проблема – бессмысленная поддержка старых версий браузеров и ноды. Некоторые фреймворки стараются работать даже на древних версиях (Express работает на Node 0.10), при это используя огромное кол-во зависимостей, несмотря на то, что эти фичи уже как несколько лет в ноде.

В браузерах похожая ситуация, бандлеры целятся на поддержку ES6 (и ранее), запихивая бесполезные полифиллы в бандл. ES6 это стандарт 2015. На момент написания треда 2020. То много фичей от 2015 до 2020 заменяются полифиллами (или просто подгружаются в случае если таковых нет).

Не имеет особого практического смысла целиться на версии браузеров 5-ти летней давности. Но сборщики и компиляторы при этом до сих пор ориентируются на них. В следствие чего, имеем кучу мусора в бандле, которого могло и не быть.

Конечно, это всё можно настроить, но дефолтные настройки @babel/preset-env не так часто меняют. Теперь подумаем, что можно сделать с этим "наследием", на обоих концах (фронт и бэк).

На фронте можно попытаться избавиться от легаси несколькими способами. Во-первых, не использовать старые фреймворки, а ориентироваться на то что актуально сейчас. jQuery до сих кладёт в сборку $.each, хотя уже как 5+ лет существует Array.forEach (github.com/jquery/jquery/…).

Вместо жиквери можно либо переключиться на современные ремейки (например cash.js), либо использовать популярные UI библиотеки по типу Preact (preactjs.com/about/browser-…), который активно развивается до сих пор, и не ориентируется на совсем устаревшие браузеры.

Также, как было упомянуто раньше, желательно целиться на новые браузеры версий прошлого или позапрошлого года, в случае если ваши пользователи это люди, например Firefox 65, Safari 12.1 и Chrome 64. Может помочь сэкономить несколько десятков (или сотен) байтов.

На бэке размер кода не так важен, потому что он влияет только на parse time. Я не знаю каких-то особых способов избавления от легаси, как просто поменять фреймворк / библиотеку на современный аналог. Обычно на gh есть несколько аналогов популярным библиотекам.

Среди веб-фреймворков, относительно современные это Koa, Fastify, Polka. Если вам не хочется расставаться с API Express'а, можно попробовать мой фреймворк - tinyhttp. Он пытается быть ближе к Express, не делая кардинальных изменений снаружи (как например это сделала Koa).

ссылка на фреймворк: github.com/talentlessguy/…

тут кусок текста съехал, вот правильный вариант: "Обычно много фичей от 2015 до 2020 заменяются полифиллами (или просто подгружаются рядом в случае если API уже есть в браузере)."


и Koa, и Fastify, имеют большое комьюнити (tinyhttp пока таким не обладает :D) так что не нужно бояться что вам никто не поможет с переходом на новые фреймворки

(под проблемой имеется ввиду что куча ненужного кода идёт в рантайм / бандл в зависимости от среды)

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

*писать а не рисовать )))