Привет! На этой неделе с вами будет TrySound.
Я занимаюсь svgo и избавляюсь от node_modules.
Мой гитхаб github.com/TrySound

Занимаюсь фротендом 7 лет. Работаю в realadvisor.ch вместе с @chicoxyzzy @icelabaratory @rpominov и другими крутыми разработчиками.

В прошлом так же был мейнтейнером rollup и postcss.

Мой настоящий твиттер @IAmTrySound

Девушки, с праздником! Пусть баги легко воспроизводятся, а код легко дебажится.

Итак, есть такой популярный оптимизатор svg - SVGO. В последние годы у мейнтейнеров не было достаточно времени чтоб… twitter.com/i/web/status/1…

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

Затем решил очень старую проблему, которую помню еще со времен работой над cssnano. SVGO асинхронный. Это мешает за… twitter.com/i/web/status/1…

Ну и раз уж мы делаем breaking changes, надо поправить фасад. SVGO класс превратился в optimize функцию. Упростил ж… twitter.com/i/web/status/1…

Изначально пакет писался для ноды. Инструменты вроде svgomg запускают svgo в браузере. Специально для них добавил e… twitter.com/i/web/status/1…

Баги я решил не трогать до релиза. Важно было решить крупные проблемы и немного познакомиться с кодом. Поэтому 2.0… twitter.com/i/web/status/1…

В вебстандартах звучала мысль, что новые мейнтейнеры могут перевернуть все с ног на голову и в какой-то степени исп… twitter.com/i/web/status/1…

Добавляйтесь в наш дискорд сервер, если хотите участвовать в обсуждениях.
discord.gg/z8jX8NYxrE

С новым мейнтейнером хорошо бы и логотип освежить. В этом нам помог André Castillo из Мексики.

Вот она, сила коммь… twitter.com/i/web/status/1…

Итак, время баг фиксов. В первую очередь быстро закрыл собственные косячки, затем приступил к старым багам. Несколь… twitter.com/i/web/status/1…

В ишьюсах кинули, что svgcleaner запускает visual regressions тесты и выставляет svgo не в лучшем свете.… twitter.com/i/web/status/1…

Пришло время взрослого кодинга
Регрессии поймали пару проблем с path data. Раньше svgo парсил с помощью регулярок.… twitter.com/i/web/status/1…

Следующий челендж - это стили. Было открытием что у аттрибутов самый низкий приоритет. Поэтому конвертировать стили… twitter.com/i/web/status/1…

И все равно много багов в плагинах которые опираются только аттрибуты и инлайн стили.
Пришлось пилить свой аналог g… twitter.com/i/web/status/1…

И наконец я начал вести jsunderhood, чтобы рассказать обо всем. Впереди еще много работы.

Самое важное это много н… twitter.com/i/web/status/1…

Замена нынешнего ast формата на "стандарный" xast от автора remark, micromark, mdx. Это позволит интегрировать суще… twitter.com/i/web/status/1…

Сегодня расскажу как я мигрировал больше приложение с express на нативный нодовый сервер.

Идея пришла когда я взгл… twitter.com/i/web/status/1…

Express патчит req и res своими пропертями и даже перезаписывает нативные. Такая конструкция очень напоминает дженг… twitter.com/i/web/status/1…

Например, вот JSON ответ

res.writeHead(200, { 'Content-Type': 'application/json' })
res.end(JSON.stringify(data))… twitter.com/i/web/status/1…

У редиректа аналогичная структура

res.writeHead(302, { Location: url })
res.end()

Для большинства случаев двух ме… twitter.com/i/web/status/1…

Самая неприятная проблема express это отсутствие поддержки async/await. Middleware как бы могут быть асинхронными,… twitter.com/i/web/status/1…

Решают эту проблему оборачивая каждый роут в try/catch, что, конечно, не очень практично и легко забыть.

const mid… twitter.com/i/web/status/1…

Вернемся к началу, как создать нодовый сервер. Для примера буду использовать http. Конфигурация https не сильно отл… twitter.com/i/web/status/1…

appRoute сам обрабатывает ошибки и может быть асинхронным. Весь код оборачивается в общий try/catch как централизов… twitter.com/i/web/status/1…

Если использовать пакет вроде github.com/jshttp/http-er… или кастомные ошибки, можно подменять код с фолбеком на 500
r… twitter.com/i/web/status/1…

Если код ни один роут не сработал, выкидываем 404.
res.headersSent - полпулярный способ проверки, отправился ли рес… twitter.com/i/web/status/1…

Теперь приступим к роутам.

Отделим желток от белка

const [pathname, search] = req.url.split('?')

и взобьем венчи… twitter.com/i/web/status/1…

Однако бывают требования с параметрами в роутах, к примеру, /user/:id. Воспользуемся старым добрым регэкспом

const… twitter.com/i/web/status/1…

Если приложение большое и параметров много, можно воспользоваться микро роутером, с которым можно подстраивать под… twitter.com/i/web/status/1…

Альтернатива req.query

В ноде уже давно появилcz совместимыq с вебом класс URLSearchParams. Он проще с точки зрени… twitter.com/i/web/status/1…

const [pathname, search] = req.url.split('?')
const searchParams = new URLSearchParams(search)
searchParams.get('id… twitter.com/i/web/status/1…

Альтернатива req.body

Каждый роут знает в каком формате и какие данные ему необходимы. К примеру данные переданы п… twitter.com/i/web/status/1…

И наконец, что если необходимо переиспользовать готовый express middleware.

await new Promise((resolve, reject) =>… twitter.com/i/web/status/1…

очепятка
const data = JSON.parse(await getStream(req))

И в заключение немного мнения. Не стоит использовать абстракции, если доступны простые решения. Разбираться в черно… twitter.com/i/web/status/1…

Поговорим немного о node_modules и как сделать их меньше.

Зачем тратить на это время? Мой личный мотив это опен со… twitter.com/i/web/status/1…

Важно рассматривать несколько факторов, например, размер пакета. Пакет может дублироваться между раными репозитория… twitter.com/i/web/status/1…

В пакетах может быть опубликовано много лишнего, например тесты, фикстуры, конфиги редакторов.
Мой любимый пример,… twitter.com/i/web/status/1…

Решение тут простое, добавить поле "files" в package.json со списком который нужно опубликовать.
Поддерживать такой… twitter.com/i/web/status/1…

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

Нельзя сказать что с… twitter.com/i/web/status/1…

.npmignore напротив довольно неэффективное решение. Список ненужного вести достаточно тяжело и такой список начинае… twitter.com/i/web/status/1…

Следующий фактор - это количество прямых и транзитивных зависимостей, зачастую необоснованное.

К примеру, тот же l… twitter.com/i/web/status/1…

Другой пример нобосновынных зависимостей это micromatch - популярный glob matcher. Версия три поддерживала старую н… twitter.com/i/web/status/1…

Большое количество зависимостей/модулей так же негативно влияет на время запуска node приложений.
Даже если лениво… twitter.com/i/web/status/1…

Как я анализирую node_modules.

Самое простое (bash only), это вывести список веток и отсортировать их размер
du -c… twitter.com/i/web/status/1…

Второй вариант это написать утилиту которая которая берет размер из статы каждого файла в node_modules и показывает… twitter.com/i/web/status/1…

Очень много дублированных пакетов одной версии появляется со временем после множества манипуляций с зависимостями.… twitter.com/i/web/status/1…

Еще один способ анализа это чтение локфайла. У yarn.lock достаточно приятный синтакс, с package-lock.json чуть по с… twitter.com/i/web/status/1…

В последнее время появляется очень хорошая тенденция избавляться от большой цепочки зависимостей. Так webpack выкин… twitter.com/i/web/status/1…

Есть и проблемные места. Тот же jsdom не собирается отказываться от "request" который некоторое время назад задепре… twitter.com/i/web/status/1…

Причем вы можете увидеть что полифилы - это не безвредные однострочники в данном случае
packagephobia.com/result?p=array…

Такие проекты как find-up и множество производных, можно заменить на миниатюрный escalade или просто скопировать ре… twitter.com/i/web/status/1…

Бампить мажорные версии полезно вместе с поддержкой только последних lts ноды. Тогда множество пакетов такие как ut… twitter.com/i/web/status/1…

Резюмируя

На этом все. С вами был @IAmTrySound
Спасибо за просмотр!

Сорян, что было всего три темы.