DOM manipulation performance - React, Svelte and Vue comparison
https://krausest.github.io/js-framework-benchmark
#benchmark #react #svelte #vue
https://krausest.github.io/js-framework-benchmark
#benchmark #react #svelte #vue
Большинство JS фреймворков в своей эволюции идут примерно по одному пути - SPA, SSR метафреймворк, Native Script для мобильных устройств
Vue от своего Vue Native давно отказалась, а вот Svelte развивает - Svelte Native
#native #svelte
Vue от своего Vue Native давно отказалась, а вот Svelte развивает - Svelte Native
#native #svelte
svelte.nativescript.org
Svelte Native • The Svelte Mobile Development Experience
У каких фреймворков есть реактивный state management из коробки.
Внутри компонента, и за пределами компонентов.
#illustration #benchmark #state #react #solidjs #svelte #angular
Внутри компонента, и за пределами компонентов.
#illustration #benchmark #state #react #solidjs #svelte #angular
Кроме Rolldown-a команда Vue на прошлой неделе выставила в open source еще один свой грандиозный проект - Vue Vapor, который уже можно попробовать в его песочнице.
Грандиозный потому, что это по сути переписывание бОльшей части фреймворка. При этом Vue API (код для Vue 3, который пишет разработчик) должен остаться тем же самым.
Современные фронтенд фреймворки бывают двух типов - runtime и compile time. Первые работают с
Compile time фреймворки вроде
Команда Vue хочет хотя бы частично попробовать внедрить compile time реактивность - можно будет указывать, какие пользовательские компоненты компилировать в конечный код (
#vapor #solid #svelte #vuejs #react
Грандиозный потому, что это по сути переписывание бОльшей части фреймворка. При этом Vue API (код для Vue 3, который пишет разработчик) должен остаться тем же самым.
Современные фронтенд фреймворки бывают двух типов - runtime и compile time. Первые работают с
Virtual DOM
- это такая абстракция на JavaScript, с которой взаимодействует пользовательская программа вместо реального DOM вебстраницы и, грубо говоря, являющаяся его зеркальным отображением. Делается это потому, что работа с браузерным DOM (рендеринг) - очень затратная операция, и фреймворк через Virtual DOM призван её оптимизировать - например, несколько изменений в DOM собрать вместе и зарендерить как одно. Так работают Vue.js
и React
, они предоставляют в runtime браузера прослойку для пользовательского кода (типа виртуальной машины), который работает только с объектами Virtual DOM.Compile time фреймворки вроде
Solid.js
или Svelte
не создают этой прослойки, и компилируют пользовательский код в код, который работает с браузерным DOM напрямую. В результате бандл получается меньше, а программа - быстрее. Сложность тут в оптимизации подобной компиляции. Для простых вещей она подходит, но что-то более сложное - и сompile time фреймворки уже могут проигрывать в скорости, и однозначно проигрывают Vue 3
в DX.Команда Vue хочет хотя бы частично попробовать внедрить compile time реактивность - можно будет указывать, какие пользовательские компоненты компилировать в конечный код (
Vapor mode
), а для каких использовать обычный Virtual DOM.#vapor #solid #svelte #vuejs #react
GitHub
GitHub - vuejs/vue-vapor: Vue Vapor is a variant of Vue that offers rendering without the Virtual DOM.
Vue Vapor is a variant of Vue that offers rendering without the Virtual DOM. - vuejs/vue-vapor
Vue-FAQ
Интересная табличка Google проверяет какие сайты проходят их тест на Web Vitals Как видим, у Vue результаты значительно лучше, чем и SSR-ного Nuxt, одним из заманивающих доводов которого вроде бы и является хорошие веб метрики. Также очень точно подтвердился…
Никто не заметил, что
На сайте есть ссылка на методику подсчета, выглядит вполне убедительно.
#svelte #nuxt #stats
Svelte
быстро догоняет Nuxt
на гугловской статистике?На сайте есть ссылка на методику подсчета, выглядит вполне убедительно.
#svelte #nuxt #stats
Тихо и незаметно вышел
Ну и стандартно за два дня уже три дополнительных минорных релиза
Из новинок декларируется:
- более высокая производительность
- более гранулированная система реактивности с рунами
- более выразительный синтаксис шаблонов с фрагментами (snippets) и атрибутами событий
- встроенная поддержка
- обратная совместимость с предыдущим синтаксисом
#svelte
Svelte 5
со своими рунами - самый близкий Vue
по духу фронтенд фреймворкНу и стандартно за два дня уже три дополнительных минорных релиза
Из новинок декларируется:
- более высокая производительность
- более гранулированная система реактивности с рунами
- более выразительный синтаксис шаблонов с фрагментами (snippets) и атрибутами событий
- встроенная поддержка
TypeScript
- обратная совместимость с предыдущим синтаксисом
#svelte
svelte.dev
Web development for the rest of us
Попался интересный сайт - cobalt.tools
На
#svelte
На
Svelte-Kit
. И выглядит круто, и функционально полезен (скачивать видео и аудио с youtube и прочего). Классный опенсорсный пет-проект.#svelte