JS !== v8

Последнее время особенно, когда постоянно появляются новые рантаймы использующие всевозможные движки для исполнения JS. И чтобы знания не были ограничены лишь самым популярным движком v8, я предлагаю объединить усилия в сборе различной информации о всех движках и рантаймах. Интересует в данном случае больше глубокое их изучение, а не поверхностное использование.

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

Поэтому я набросал черновик проекта JSE(JavaScript Engines). В рамках которого и хотелось бы собрать всю полезную информацию для изучения.
Поскольку проект очень молодой, то любая помощь:
- перевод
- дополнения
- предложения
- запросы
и тп будут восприняты очень тепло и радостно

Я верю, что совместными усилиями мы сможем преодолеть дефицит информации по движкам и упростить их изучение!

Такс, для frontend-разработчиков caniuse не пустой звук. Но что делать если речь идет о рантаймах отличных от браузера коих сейчас расплодилось немало?

Ну тут к нам и приходит на помощь новый инструмент runtime-compat(Github) от unjs,
runtime-compat выдает нам таблицу современных рантаймов JS-а и их поддержку отдельных фичей. Также имеется дополнительный фильтр по совместимости со спецификацией от WinterCG о которой я писал ранее. Несмотря на схожесть с тестами в браузере, тесты для рантаймов несколько сложнее, так как часто требуется индивидуальный подход для вызова функионала того или иного рантайма. За основу были взяты тесты для браузеров в mdn-bcd-collector. Также стоит отметить, что тесты во многом автосгенерированы и могут быть несколько неточными по этой причине.

Я бы хотел рассказать тут еще подробнее и про unjs. Но это заслуживает отдельного поста, так как нужно будет рассуждать на тему философии развития экосистем фреймворков

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

Состоялся крупный релиз. Vitepress наконец-то получил свою долгожданную версию 1,0,0 (и все это после 45 release candidate).

Что это за фрукт? Изначально продукт назывался Vuepress и был предназначен для генерации статики в экосистеме Vue. Стоит отметить, что несмотря на заявленный SSG для Vue, люди оставляют неоднозначные отзывы про такое использование. а вот для контентных сайтов/документаций он подходит прямо отлично. Легко встроить в любой уже существующий проект, чтобы дать ему документацию.

Как можно понять, то основной движок при всем теперь: vite, а работает внутри как фреймворк все еще vue. Контент пишется на markdown c интеграцией Vue компонентов прямо внутри. Это действительно удобно, так как Vue полностью встраивается в markdown так как его синтаксис шаблонов полностью поддерживается парсерами HTML. Все докуменетации во Vue экосистеме написаны именно с использованием Vitepress(исключение экосистема Nuxt, но про нее позже).

На самом деле все больше в интернете вижу различных сайтов использующих Vitepress, даже если они никак не связаны с Vue, например сайт Hono или Mermaid.

В целом я сам использую переодически Vitepress и всем советую хотя бы попробовать познакомиться с ним. А команду поздравляю с действительно долгожданным релизом

Такс, особо не расслабляемся, сразу ходом пошел 1-ый release candidate у SolidStart(старая дока) и выход из статуса beta-версии. Это решение из разряда мета-фреймворков. Те нечто схожее по смыслу с Next.js(React) / Nuxt(Vue) / Analog(неофициальное решение для Angular) / SvelteKit(Svelte) но теперь, как можно долгадаться, для Solid.js.

Нам сходу заявляют о 3-ех режимах работы CSR(client-side rendering), SSR(server-side rendering), SSG(static site generator), те все по классике. В комплекте идут пресеты для развертывания на различных решениях: Netlify, Vercel, AWS, и Cloudflare.

Никого уже не удивить и роутинге основанном на файлах в папке routes. Отдельно выделены API Routes, для серверного API и они тоже работают на основе файлового роутинга.

"use client"/"use server" тоже идут в комплекте. Те опробовать мощь server functions можно и в нем.

Что у нас под капотом? SolidStart основан на Vinxi + Vite. Vinxi это по своей сути движок/набор примитивов для помощи в создании полноценных FullStack фреймворков на JS. Vinxi же держит под капотом Nitro, что достаточно любопытно. Nitro это решение для написания веб серверов со спецификой мета-фреймворков. Разрабатывается же Nitro как часть экосистемы unjs для нужд Nuxt-а. Нитро в свою очередь является надстройкой над h3. h3 - тоже часть экосистемы unjs и выполняет функцию высокопроизводительного аналога express-like решения для серверного фреймворка.

В остальном по тому что я вижу (я не разрабатывал конкретно на SolidStart еще), то решение пока сыроватое и ему нужно дать время окрепнуть и обрасти жирком.

Мне нравится Solid.js и я желаю этому фреймворку удачного развития и покорения рынка на смену React.js :D
Теперь ждем действительно первый релиз 1,0,0

А я напоминаю что сегодня у вас еще есть время чтоб проглядеть курсики по Vue которые вам интересны от vueschool.

И нет, это не реклама, а рекомендация от себя, так как часто спрашивают, какие брать курсы по Vue.
Так почему бы не воспользоваться шансом сделать это бесплатно?

Antfu вновь доказывает, что DX в мире JS-туллинга можно еще развивать и развивать.
Если вы его еще не знаете, то самое время познакомиться, но для начала о его новом решении: eslint-typegen

Кратко: решает проблему с отсутствием типизации в конфигах ESlint на основе кодогенерации. Те при первом прогоне он создает .d.ts файл основываясь на переданных правилах ESlint.

Имеется 2 варианта использовать:
- кодогенератор на основе переданного конфига (основной)
- Low Level API с преобразованием к строке для последующей записи в нужное место

Работает все это чудо основываясь на JSON Schema, которая указывается у правил в ESlint. Далее прогоняется через json-schema-to-typescript и далее небольшие трансформации для приведения к нужному виду. Готово. Общий объем библиотеки менее 300 строк кода, так что можно вполне изучить его за пару часов.

Из любопытного:
- если вы пользуетесь @antfu/eslint-config, то вам можно это дело не подключать, все уже настроено из коробки
- автором идеи он называет @Shinigami92

Если вас давно раздражает, что никаких подсказок в ESlint толком нет, то вот способ это исправить

Ура! Спустя N лет документация доступна на русском. Чуть-чуть тоже прикладывал усилия в переводе и планирую продолжить. По поводу багов и очепяток писать сюда: https://github.com/vuejs-translations/docs-ru/issues

Сайт: https://ru.vuejs.org/

To close or not to close

Забавная дискуссия(на самом деле самый настоящий холливар) выдалась в одном ишьюсе в репозитории Svelte.

Кратко: Рич Харрис(создатель Svelte) только сейчас обнаружил, что

<div /> Hello

Это не

<div></div> Hello

А

<div> Hello</div>

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

Вначале разберемся с ситуацией в HTML:
HTML - не имеет понятия self-closing element. Вместо этого есть void elements: br / hr / input и тп. Так же есть допущение для внешних элементов: svg/mathml, которые реализованы на основе XML. В стандарте XML self-closing tags называются empty-element tags(элементы у которых нет контента). В остальных случаях HTML просто... игнорирует завершающий /, но с 1 исключением

<a href=login/>  

<a href="login/"> тоже самое
<a href="login" /> не верно (Svelte и этот тест провалил)

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

JSX(React. Solid etc...) - поддерживает self-closing tags
Angular - только с 16-ой версии начал их поддерживать для своих компонентов, в остальном все как HTML. Кстати, там тоже была бойня, хоть и поменьше
Lit - все согласно HTML. Кстати, согласно спеке даже custom elements не могут быть самозакрывающимися. Один человек недовольный отказом, даже сделал расширение добавлющее этот функционал
Ember - официально поддерживает self-closing tags, как часть расширения HTML
Vue - тут все сложнее.
1) Если используется рантайм компиляция шаблонов из HTML, то работают правила HTML и все работает согласно спеке
2) Если происходит этап билда шаблонов, например со сборщиком, то self-closing tags доступны.
При этом в vue eslint можно четко разграничить желаемое поведение. Но и это было не всегда и сам Эван был против self-closing tags, но с появлением vue-loader все-таки поддержали данный функционал.

Как мы видим единого мнения в сообществе вообще нет. На одной чаше удобство, на другой плашка "соответствует HTML5"и куча различных трейдоффов.

А что считаете вы, как должны поступать фреймворки?

Ну вот и день Х. Чуть позже залетит сюда преза и исходники даже для тех, кого нет на холи

Так. Это заняло некоторое время (пришлось написать текстовое описания слайдов и поднастроить репу, чтобы я мог множество презентаций в ней хранить). О итогах моей поездки и Holy в целом сообщу чуть позже.

А вот пока и обещанная презентация с исходниками к ней.
А вот исходники к шуточному Vueact.

PS. Управление презентаций стрелочками, либо мышкой направить в левый нижний угол.
Там же можно включить режим спикера и увидеть текстовое описание к каждому слайду (оно достаточно сильно отличается от того что было на Holy, но в достаточной мере, чтобы поработать с материалом самостоятельно и без видеозаписи)

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

С последнего поста народу тут явно поприбавилось. Welcome!
Поэтому кратенько о себе:
Я - Чернов Денис. Работаю в Спортмастер-е на Vue-хе. Влюблен в кодинг уже 13+ лет
Увлекаюсь IT-шкой в широком смысле. Внимательно слежу за всеми колебаниями в области фронтенда.

Что можно увидеть на канале:
1) Новости которые показались мне наиболее интересными. Обязательно с разборами и кучей ссылок на источники
2) Интересные моменты из Frontend-разработки и не только
3) Отчеты и доп материал по моим докладам.

Говорю я о всех фреймворках, но особой любовью тут пользуется именно Vue.
Что впрочем и стало причиной моего последнего доклада на Vue Msk.
Это стал заключительным выступлением в моем первом "спикерском сезоне". За пол года 3 конфы и 1 митап (все доклады разные, но один модификация более старого)

Выступление было на тему подкапотной реактивности во Vue.
Итого презентация: преза, исходник (напоминаю, что управление стрелками или мышкой в нижнем левом углу)
Видео с выступления: youtube

Материал для дальнейшего изучения:
1) chibi vue - буквально лучшего руководства не найти в духе с 0 до своего мини-Vue. Позволяет хорошо прочувствовать работу под капотом
2) rfc effectscope - хорошо разбирается тема с effectScope
3) watch with @vue/reactivity - в докладе я говорю про отсутствие watch/watchEffect внутри @vue/reactivity. В статье Энтони разбирает подкапотную работу реактивности во Vue и как все-таки вернуть watch
4) reactivue - шуточный (или нет) способ объединить "лучшее" по мнению Энтони между react и vue. Как раз способ запустить @vue/reactivity внутри react.
5) vue-lit - PoC как запустить реактивность vue внутри lit-html
6) исходники @vue/reactivity, Но внутри @vue/runtime-core тоже хватает интересностей (scheduler, apiWatcher/apiComputed)

Всем привет. Тем временем Holy.js сделал подарок и выложил сразу 4 видео по 4 наиболее популярным фреймворкам

- как работает Next.js
- как человек делает свой фреймворк a la Svelte
- мой доклад по Vue Renderer-ам
- и доклад с точно такой же сутью как у меня только по Angular (только тут делают на примере консольного приложения).

Так что можете выбрать доклад по своему любимому фреймворку и посмотреть.

И вот вам список докладов, но относительно работы рендереров в разных фреймворков:

- Мой доклад по Vue Renderer-ам. Тут я упоролся и сделал рендерер из Vue в React дерево элементов.
- Angular Universal. Разбирается на примере рендера в консоль
- React Reconciler с примером рендеринга в Figma
- Solid Universal. Доклад от самого создателя Solid.js (естественно на английском)
- Конкретно по рендерерам Svelte ничего конкретного не нашел. Но вот есть такое видео, где Svelte приделывают фичу по рендеру из маркдауна в компонентах в HTML. (если у кого есть больше инфы, обязательно поделитесь)

PS. Повторно прошу прощения за ввод за заблуждение неймингом доклада про Canvas. Изначально он был в концепции, но потом я увидел решения существующие и что описывать его будет не так весело, как ресерч рендерера в React. Дополнительно напомню, что главная цель этого рендерера -- это пощупать гибкость рендереров Vue даже на таком экзотическом примере, а не реальное использование на продакшене. Для тех кому все-таки интересен в canvas: vuvas (код рендерера).

И так. спустя более чем полгода мы все-таки получили результаты от State Of JS 2023(я уже и не ждал). Все задержалось из-за того что организатор опроса выгорел и попросил помощи других людей с анализом собранных данных. Может поэтому в некоторых местах пугающие цифры по объемам данных которые "не учли". Чуть позже поймете о чем я.

Проведу небольшие итоги от себя:

1) Народ считает самой главной проблемой в JS:
1.1) Отсутствие статической типизации из коробки. Причем лидирует этот пункт с большим отрывом (33% vs 9% у второго места). Оно же лидирует в списке "фичей которых не хватает"
1.2) борьбу между CommonJS и ES Modules
1.3) Болезненность работы с датами
2.3) 84% ответов не смогли определить куда-то в конкретное место. Число зашкаливающее

2) Народ считает самой главной проблемой при работе с браузерами:
2.1) Поддержка браузерами. Достаточно спорный пункт на мой взгляд. Вспомнить что было лет 15 и даже 10 лет назад, то сейчас кроссбраузерность гораздо меньшая проблема. Возможно этот пункт стоит скорее считать как "скорость поддержки". Те, люди видят классные фичи, а потом понимают, что N лет все равно не смогут ими воспользоваться. Вот это уже действительно несколько огорчает. Процент отметивших этот пункт 32%, что тоже ЗНАЧИТЕЛЬНО выше второго места с 6%
2.2) Safari. Когда я проходил опрос этого пункта не было, но это не помешало ему забраться на второе место... Думаю этого достаточно, чтобы понять всю радость программистов от этого "инструмента".
2.3) 76% ответов не смогли определить куда-то в конкретное место. Это что-то перебор. Думаю, что потеряли большое кол-во информации

Далее переходим к самому интересному разделу: библиотеки
Тут можно написать 1 слово: Vite. Vite буквально рвет все топы. Из 6 "наград" опроса Vite взял 3. При этом еще в 1 отстав всего на 2% процента от... Vitest, который тоже замечательно показал себя заняв топ тир среди инструментов тестирования. А вот Webpack четко летит на дно по показателю удовлетворенности. 48% респондентов отметило его как "использовал его, впечатления неприятные". Я могу его назвать самым быстропадающим с точки зрения впечатлений о нем. Забавный момент, что на приложенном графике. То где сейчас находится Vite, это то где в 2017ом был Webpack. Так что, возможно, лет через 6 Vite может ждать такая же судьба.
Что касается других сборщиков, то SWC и esbuild также попали в топ тир. А вот строчки аутсайдеров занял Parcel и Webpack.

Теперь идем к тому чего я больше всего ждал: Frontend Frameworks. И тут ситуация любопытная. Разберемся с каждым фреймворком по отдельности. При этом я оставлю предупреждение:
Опросы всегда штука специфичная и может давать ошибки в зависимости от захваченных групп опрашиваемых. Обычно люди проходящие опросы более заинтересованы в разработке, чем люди их игнорирующие. При этом люди проходящие опросы тоже чаще являются early adopters(люди берущие на вооружения или пробующие что-то малопопулярное/свежевышедшее). Поэтому стараемся учитывать эту погрешность и не принимать результаты опроса близко к сердцу. Конец предупреждения.

React. Мягко говоря cдает позиции относительно опроса. При этом он не падает в популярности (а даже растет), но вот процент недовольных им очень быстро растет. (это можно увидеть на том же графике с "кометами"). И черная полоса пошла с 2019. Я это связываю с подниманием головы других решений: Vue3, Svelte/Solid. Народ буквально увидел, что можно решать проблемы иначе. Далее команда реакта начала жить своей жизнью, время от времени повергая в шок программистов своими новыми фичами, которые приходилось откатывать после волны справдливого хейта. Опрос был сделан в декабре 2023, так что в 2024 интересно увидеть динамику после выхода React 19, все большего доминирование Next и нового React Compiler-а. Но сколько не ругай реакт, а с точки зрения популярности он все еще только растет. А вот Next.js прям очень сильно скакнул вниз по "уровню счастья". Сомнительные решения и app router, думаю, приложили к этому свою руку.

Angular. Все еще показывает результаты угасающей звезды. Популярность по данному опросу падает, но вот с точки удовлетворенности поддерживается на 1 уровне. Возможно в 2024ом будет некоторое смещение в сторону большего количество положительных впечатлений о нем. Все-таки с начала года команда Angular подарила много чего: обновила полностью сайт документации и логотип, активно внедряет новые фичи, Люди узнают о Analog.js. Так что будем ждать нового опроса.

Vue. Крайне любопытные результаты, но вполне предсказуемые. Итак, мы можем видеть что в 22-ом график у Vue был очень даже грустный. Резко скануло вниз и кол-во использований и удволетворенность. Причина же тут крайне простая: Миграция Vue2 -> Vue3 это та еще боль. Куча людей разочаровалось в фреймворке. Однако время идет и народ все-таки начал получать плюсы от всех изменений Vue3. Количество адептов значительно возросло, фреймворк окреп и готов к серьезным вызовам. Это и можно видеть на графике с скачком и по кол-ву использований и по кол-ву положительных отзывов. Жду и в новом году от него положительной динамики, так как в инфопространстве наблюдаю лишь большое кол-во положительных отзывов о нем. Но ложка дегтя есть: после обновления TS5 вначале год колбасило багами WebStorm, а в 2023 после обновление Volar до v2 и пользователей VSC. И вот тут порой звучат отзывы крайне разочаровывающие. Будет любопытно посмотреть как же это скажется.

Svelte. Ну у него все хорошо. Потихоньку набирает жирку в виде использований, слегка подрастерял в "уровне счастья", но этот показатель достаточно велик, чтобы пока на это внимания не обращать. На момент конца 2023, насколько я помню. руны только только были анонсированы, поэтому влияние предстоящего Svelte5 в опросе маловероятно. А вот в новом году очень будет любопытно посмотреть. Общее настроение от изменений Svelte5 можно описать как: неоднозначное. Что-то улучшили, что-то испортили. Запаха react от Svelte сильно возросло (возможно это связано с тем, что в прошлом году Рич Харрис, создатель Svelte, был нанят компанией Vercel, чьим главным продуктом является Next.js, aka главный способ использования React на данный момент).

Solid. Что-то выкинуло его из ответов. Ничего особо интересного по нему сказать нельзя. Слышали о нем людей побольше, "уровень састья" стал поменьше. Никаких громких апдейтов от него нет, предсказать что-то трудно. Из хоть каких-то факторов: у него вышел мета-фреймворк SolidStart, но отзывов о нем я пока не слышал. Самолет пока не взлеает и шансов что это изменится в новом году нет. Что в целом не делает этот фреймворк хуже и я все еще его могу рекомендовать как "React здорового человека".

Отдельно отмечу здесь Astro, хоть это и не Frontend-фреймворк. Народ с него просто тащится. Шикарные результаты и темпы развития. Пожелаем удачи. Крайне рекомендую с ним всем ознакомиться.

Что же касается общего впечатления по Frontend-фреймворкам то он начиная с 2018-ого показывает нисходящий тренд. Удивляться тоже нечему: народ все рвется на сервер к SSR/SSG/ISR и тп, а это резко увлечивает сложность разработке в конечном итоге. Фреймворки сильно усложняются. Народ плохо поспевает за "новомодными трендами". А главный локомотив фронтенд-фреймворков выдает очень спорные решения, что еще больше повышает градус недовольства. Ожидаю в новом году еще большего снижения этого показателя.

Кратко об инструментах тестирования: есть Jest, а есть Vitest. И у того и у того все замечательно. Для E2E все шикарно у playwright. Еще у нас есть Storybook проблема которого: отсутствие хоть каких-то конкурентов.

Отдельно отмечу, что в опросе прекрасно себя показал pnpm. Вполне заслуженно. Быстрый, простой. А что еще надо для счастья? Если ищете замену yarn/npm, то это самое оно и для монореп тоже неплохо подходит.

В целом из интересного для меня это все. На самом деле информации можно гораздо больше выцепить, но она будет более нишевая или потребует куда большего анализа. Результаты опроса достаточно предсказуемыe и каких-то неожиданностей для меня не было. Советую другим тоже изучить информацию и сделать какие-то свои выводы. Буду рад с вами их обсудить.

Раз уж забегался я по конфам в последнее время, то хотел бы и подсказать классную ссылку с IT-мероприятиями Networkly Google Calendar,
Тут IT-ивенты всех категорий по РФ. Если вам нужны ивенты по категориям, то тут лучше идти на главный сайт.

Для других стран скорее всего есть свои календари и будет круто если вы ими поделитесь.
Но из международных приличных пока нашел только dev.events.

Но для чего вообще эти мероприятия? У каждого будет свой ответ. Для меня это главным образом
1) Мотивация довести реализацию до конца чтобы с ней выступить
2) Способ расшарить знания на публику
3) Способ вживую пообщаться с невероятным количеством очень крутых ребят
4) Ну и конечно же: хорошо провести время

Мои субъективные советы по конфам:
1) Если у докладов есть запись, то посмотреть ее вы сможете и дома. Если есть в планах занятия поинтереснее на конфе, займитесь ими
2) Составьте маршрут посещения докладов и знакомств с людьми заранее, так проще будет перемещаться и находить время на какие-то активности
3) Очень большая часть знаний и живого общения происходит именно на afterparty в неформальной обстановке, советую приберегать на него силы

PS. уже на этой неделе и следующей проведу серию стримов по различным темам. Так что можете накидывать идей

Такс, косякнул с стримами на прошлой неделе. Виноват перед вами.

Были некоторые обстоятельства рабочие и семейные. Но план по контенту не отменяется
Сейчас и в субботу совместный стрим c siberiacancode

В воскресение (4 августа) будет стрим с перезапуском по истории фронтенда
А во вторник (7ого) будет стрим посвященный разбору V8

Всем привет.
Сегодняшний стрим по истории фронтенда перенес на завтра.

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

Итого основной контент завтра.
А сегодня общаемся, делюсь новостями и поясняю за разработку
https://www.twitch.tv/izede

Какое-то время меня не было на этом канале. И я все ждал с чем вернуться в новом году к вам. И решил начать не со своих новостей (а они будут!)

Но сейчас я к вам пришел со стримом от моего друга siberiacancode и сегодня он выступит с докладом который крайне для него важен: Дмитрий Бабин - Вам не нужен state менеджер
Обсудим когда нужны и не нужны стейт менеджеры в мире реакта, думаю будет интересно, хотя уверен, что многие будут не согласны с его видением, так что не стесняйтесь задавать ему вопросы и докапываться :D

для тех кому комфортнее на твиче: https://www.twitch.tv/siberiacancode

Приятного просмотра и ждите новостей от меня уже в скором времени!