Всем привет! Я Павел Лосев (@v1rtlize), мне 16 лет, я веб-разработчик, занимаюсь Open Source. Также веду довольно п… twitter.com/i/web/status/1…

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

ссылки:

tinyhttp: github.com/talentlessguy/…

react-postprocessing: github.com/react-spring/r…

Помимо опенсорса работаю над закрытыми проектами для клиентов из России (и США). Делал простые сайты для российских… twitter.com/i/web/status/1…

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

Опечаточка, мой профиль: @v1rtl

Первой темой будут системы модулей в JavaScript. На данный момент самые популярные - это ECMAScript Modules (ESM),… twitter.com/i/web/status/1…

Самое простое определение: модуль — это переиспользуемый кусок кода, который содержит реализацию API. Обычно это ку… twitter.com/i/web/status/1…

Давным давно, ещё до существования Node.js и ES6, в JavaScript не было никакого другого способа разделять JavaScrip… twitter.com/i/web/status/1…

Таким образом работает IIFE (Immediately Invoked Function Expression) - он сразу же вызывает ф-цию с обёрнутым моду… twitter.com/i/web/status/1…

У такого подхода очевидно было много проблем - неудобство управления зависимостями и загрязнение глобального пространства.

Были вспомогательные модульные системы по типу System.js и AMD (Async Module Definition), но это не было стандартом… twitter.com/i/web/status/1…

В 2009 появилась такая штука как Node.js. И у неё тоже появилась своя модульная система, которая называется CommonJ… twitter.com/i/web/status/1…

Помимо уже трёх самых популярных IIFE, AMD и CommonJS появилась ещё одна система, которая объединяет в себе сразу в… twitter.com/i/web/status/1…

И вот наступает 2015... выходит ES6, в которой наконец-то появились модули. Теперь вместо поддержки 4х систем модул… twitter.com/i/web/status/1…

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

Вернёмся к ESM. Благодаря тому, что в ESM существуют именованные импорты, сборщикам гораздо проще делать tree-shaki… twitter.com/i/web/status/1…

Это касается только сборщиков, насколько я знаю в Node.js рантайме никакого tree-shaking нет, но им можно воспользо… twitter.com/i/web/status/1…

А что там у ноды? В Node.js (без флагов) ESM появился только лишь в 2019 году в версии 13.2.0. Чтобы запустить файл… twitter.com/i/web/status/1…

В чём смысл Node ESM? Во-первых, это следование стандарту (и унификация BE и FE кода). Во-вторых, именованные импор… twitter.com/i/web/status/1…

Однако, не всё так просто с ESM. Большинство модулей всё ещё CJS-only. Т.к. CommonJS не умеет в именованные экспорт… twitter.com/i/web/status/1…

Ещё есть один важный момент - в относительных путях всегда надо указывать расширение файла, иначе будет Cannot find… twitter.com/i/web/status/1…

Это поле позволяет инкапсулировать модуль, и экспортировать только определённые файлы, без всяких расширений. Причё… twitter.com/i/web/status/1…

Пример заполнения такого поля: github.com/talentlessguy/…

Теперь надо подумать, как это всё собирать, чтобы не писать параллельно несколько файлов для CJS и ESM? Существует… twitter.com/i/web/status/1…

Из самых популярных можно взять Rollup. esbuild также поддерживает как CJS так и ESM. Лично я использую обёртку над… twitter.com/i/web/status/1…

ссылки:

Rollup - github.com/rollup/rollup
esbuild - github.com/evanw/esbuild
tsup - github.com/egoist/tsup

ещё вспомнил - microbundle: github.com/developit/micr…

Я сейчас коллекционирую модули с Node ESM поддержкой, если кому интересно (добавить свой / посмотреть), то вот ссыл… twitter.com/i/web/status/1…

Вспомнил ещё один приём, чтобы не собирать две версии отдельно, можно импортировать CJS в ESM и потом прописать име… twitter.com/i/web/status/1…

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

Из встроенных модулей самым подходящим для веб приложений будет cluster. Суть cluster в том, что он позволяет запус… twitter.com/i/web/status/1…

Внутри себя использует child_process.fork() для создания форк-процессов и работает по алгоритму Round Robin (это ко… twitter.com/i/web/status/1…

В backend приложениях без БД, cluster легко интегрировать, нужно сделать проверку на то, что процесс является масте… twitter.com/i/web/status/1…

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

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

ссылки:

Mutexify: npmjs.com/package/mutexi…, Async Mutex: github.com/DirtyHairy/asy…

Дело в том, что mutex'ы полезны только когда у процессов есть общая память. Общая память у процессов в другом модул… twitter.com/i/web/status/1…

Т.к. в cluster у каждого процесса своя память, то нужно использовать распределённое блокирование (distributed lock)… twitter.com/i/web/status/1…

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

Из простых решений для кластеризации Node.js приложений (без использования cluster в коде, и не учитывая БД) можно… twitter.com/i/web/status/1…

Мультитрединг - довольно обширная тема, в которой у меня есть небольшие знания. Недавно я был в IT лагере (… twitter.com/i/web/status/1…

Я мог перепутать термины - речь в треде идёт об использовании потоков (форк-процессов (надеюсь я хотя бы это правил… twitter.com/i/web/status/1…

(сделал ретвит правки с моим комментарием если вдруг кто не так понял)

Поправка - не общая память, а память, которой можно обмениваться через SharedArrayBuffer

Сегодня будет тред про legacy (англ. наследие) в мире JavaScript. Под легаси я имею ввиду старые фреймворки, модули… twitter.com/i/web/status/1…

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

Сначала подумаем, почему вообще возникает легаси. По моему мнению, оно появляется ввиду того, что JavaScript очень… twitter.com/i/web/status/1…

Логично, что более старые фреймворки (например jQuery для фронта, или Express для бэка) будут популярнее новых, про… twitter.com/i/web/status/1…

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

К примеру, возьмём Object.setPrototypeOf. Метод был добавлен в ECMAScript в 2015 году, а ES2015 стал полностью подд… twitter.com/i/web/status/1…

Такой случай у Express, он включает в себя этот полифилл, но зато поддерживает 0.10 версию. Как видим, у setprototy… twitter.com/i/web/status/1…

И поэтому приходилось добавлять полифиллы – фичи языка, которые ещё не добавлены в спеку ECMAScript (или в Node.js)… twitter.com/i/web/status/1…

С полифиллами есть одна большая проблема. Большинство полифиллов рано или поздно становятся ненужными, потому что J… twitter.com/i/web/status/1…

Ещё одна проблема – бессмысленная поддержка старых версий браузеров и ноды. Некоторые фреймворки стараются работать… twitter.com/i/web/status/1…

В браузерах похожая ситуация, бандлеры целятся на поддержку ES6 (и ранее), запихивая бесполезные полифиллы в бандл.… twitter.com/i/web/status/1…

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

Конечно, это всё можно настроить, но дефолтные настройки @babel/preset-env не так часто меняют. Теперь подумаем, чт… twitter.com/i/web/status/1…

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

Вместо жиквери можно либо переключиться на современные ремейки (например cash.js), либо использовать популярные UI… twitter.com/i/web/status/1…

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

На бэке размер кода не так важен, потому что он влияет только на parse time. Я не знаю каких-то особых способов изб… twitter.com/i/web/status/1…

Среди веб-фреймворков, относительно современные это Koa, Fastify, Polka. Если вам не хочется расставаться с API Exp… twitter.com/i/web/status/1…

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

тут кусок текста съехал, вот правильный вариант:

"Обычно много фичей от 2015 до 2020 заменяются полифиллами (или п… twitter.com/i/web/status/1…

cash.js: kenwheeler.github.io/cash/

и Koa, и Fastify, имеют большое комьюнити (tinyhttp пока таким не обладает :D)

так что не нужно бояться что вам ни… twitter.com/i/web/status/1…

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

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

уже начал рисовать черновик

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

)))

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

Ссылка на фреймворк, если кто не читал прошлый тред: github.com/talentlessguy/…

Начну с проблемы. Вчера в треде про легаси я написал, что несмотря на то, что Express стар, он всё ещё самый популя… twitter.com/i/web/status/1…

Из проблем, не связанных с легаси, можно выделить отсутствие типов в самой либе (нужно ставить @types/express), отс… twitter.com/i/web/status/1…

Ещё одна субъективная проблема - код самого Express очень огромен и стар, в нём тяжело копаться. По крайней мере дл… twitter.com/i/web/status/1…

Так вот, я захотел написать свой фреймворк, который был бы такой же как Express, но с поддержкой TypeScript, async… twitter.com/i/web/status/1…

Читать было довольно тяжело, т.к. кода было очень много. Я решил поискать какие-то клоны Express с более простым ко… twitter.com/i/web/status/1…

ссылка: github.com/lukeed/polka

Для инструментов разработки решил взять pnpm, Rollup и changesets. pnpm - это пакетный менеджер, который переисполь… twitter.com/i/web/status/1…

Rollup для сборки модулей в ESM и CommonJS, changesets для автоматического апргейда версий, и зависимых модулей. По… twitter.com/i/web/status/1…

Ссылки:

tsup - github.com/egoist/tsup
changesets - github.com/atlassian/chan…

Для CI я выбрал Github Actions, для тестов Jest и покрытия - Codecov. Мб это я такой криворукий, но он у меня не ра… twitter.com/i/web/status/1…

При всём этом, пока что планирую юзать их, чтобы оставаться внутри экосистемы GitHub.

На днях ещё попробовал настр… twitter.com/i/web/status/1…

Ссылка на конфиг GH Actions: github.com/talentlessguy/…

Базовую рабочую версию tinyhttp я набросал довольно быстро. Только у этой версии не было поддержки next(). Сначала… twitter.com/i/web/status/1…

Не из-за того что там рекурсия, а потому что в обработчик применялся дважды, и next() всё ещё неправильно работал.

Немного подустав, я подумал что лучше посмотреть как это делают другие фреймворки (реализуют next() и применяют обр… twitter.com/i/web/status/1…

Решил взять его за основу, который тоже использует рекурсию, но внутри app.handle, а не сам app.handle.

Реализация в Polka: github.com/lukeed/polka/b…

Реализация в tinyhttp: github.com/talentlessguy/…

Параллельно с написанием нормального применения обработчиков, я начал фигачить расширения для req и res , котрые ес… twitter.com/i/web/status/1…

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

Ещё я начал делать документацию со всеми описания методов и свойств App, Request и Response. Также начал писать Lea… twitter.com/i/web/status/1…

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

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

Теперь перейдём к тому, как начать им пользоваться. Если вы хотите использовать ESM синтаксис, то в корне проекта н… twitter.com/i/web/status/1…

В остальном, работает идентично Express, за исключеним того, что настройки указываются в конструкторе App: tinyhttp.v1rtl.site/docs#settings

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

Ещё рекомендую прочесть вот эту маленькую статью, если нужно пошаговое введение (а ещё там показано как правильно о… twitter.com/i/web/status/1…

Из планов на будущее, нужно написать ещё больше тестов (хотя уже 72% покрытия на момент написания статьи), дописать… twitter.com/i/web/status/1…

Примеры кстати есть, вот с MongoDB: github.com/talentlessguy/…, вот с GraphQL: github.com/talentlessguy/…. Есть список ка… twitter.com/i/web/status/1…

tinyhttp открыт для контрибьютинга, можно предлагать свои идеи и правки, или работать над существующими issues. Сам… twitter.com/i/web/status/1…

Сегодня будет довольно весёлая и интересная тема - 3D в вебе. Тема довольно популярная, но сложная. Начнём с того,… twitter.com/i/web/status/1…

OpenGL - это спецификация frontend-а API для создания 2D и 3D графики. У этой спеки есть несколько реализаций - нап… twitter.com/i/web/status/1…

CPU отсылает данные по которым должен происходить рендеринг графики (Rendering data), и затем GPU производит рендер… twitter.com/i/web/status/1…

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

WebGL - это тоже особый стандарт, основанный на WebGL ES (Embedded Systems) 2, который предназачен специально для б… twitter.com/i/web/status/1…

Управление памятью происходит в JavaScript. GLSL выполняется на GPU, используя драйвер видеокарты, как и OpenGL ES… twitter.com/i/web/status/1…

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

Самая популярная библиотека - THREE.js. В ней всё разбито на классы, текстуры, объекты, геометрии, освещение и т.д.… twitter.com/i/web/status/1…

Помимо THREE.js существуют другие менее популярные абстракции над WebGL - Babylon.js (github.com/BabylonJS/Baby…) - JS… twitter.com/i/web/status/1…

Несмотря на то, что THREE.js сильно упрощает работу с WebGL, всё ещё получается очень много кода. К тому же, его до… twitter.com/i/web/status/1…

Для решения этих проблем появился react-three-fiber, React рендерер для THREE.js. С помощью react-three-fiber можно… twitter.com/i/web/status/1…

react-three-fiber ничего не заменяет и не добавляет в THREE.js, а трансформиует JSX в THREE.js код. Любой код на TH… twitter.com/i/web/status/1…

С r3f код выглядит гораздо чище, и на нём ещё проще писать 3D, которое легко потом внедрить в React и смешать с DOM… twitter.com/i/web/status/1…

use-cannon - это r3f либа с хуками и компонентами для добавления физики в 3D, с помощью библиотеки Cannon.js. Работ… twitter.com/i/web/status/1…

react-postprocessing - ещё одна r3f библиотека, которая оборачивает эффекты из либы postprocessing (… twitter.com/i/web/status/1…

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

Ну и напоследок react-xr - ещё один набор хуков и компонентов для создания VR/AR приложений в вебе, при помощи r3f… twitter.com/i/web/status/1…

Для чего всё это? 3D имеет несколько юзкейсов по визуализации, например CAD редакторы (SketchUp), презентация товар… twitter.com/i/web/status/1…

Сейчас ещё разрабатывается react-three-flex - <Flex /> компонент для THREE.js

будет ещё проще смешивать с DOM, и д… twitter.com/i/web/status/1…

Вот и закончилась моя неделя в @jsunderhood. Подведу итоги того что рассказывал, подытожу каждый тред, подумаю в чё… twitter.com/i/web/status/1…

На этой неделе как и планировалось, были треды по модульные системы, многопроцессность, легаси, tinyhttp и 3D в веб… twitter.com/i/web/status/1…

С многопроцессностью произошёл провал. Я сильно плавал в теме, и у меня в голове смешались знания, не связанные ме… twitter.com/i/web/status/1…

Благодарю @amel_true и других, за то что поправили во всех местах в том треде, теперь у меня больше нет путаницы в голове.

Ещё было пару мелких ошибок в треде по модулям, но они произошли из-за того, что меня в то время не было в IT (я на… twitter.com/i/web/status/1…

Тред по легаси получился довольно субъективным, но в целом вышло норм. Фактических ошибок не было, были только выск… twitter.com/i/web/status/1…

С 3D было проще всего. Большинство определений было легко достать из статей и StackOverflow вопросов (чтобы не допу… twitter.com/i/web/status/1…

Спасибо всем, кто читал мои треды, и я особенно благодарен тем, кто поправлял)

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

если кому-то захочется связаться, то я в телеге:

t.me/talentless_guy

ещё вот мой github: github.com/talentlessguy