Комментарии 19
Нужно всегда отталкиваться от требований. Мне кажется на все Ваши вопросы может ответить видео Ильи Климова. Он там подробно разбирает случаи, когда Svelte может подойти, а когда нет. Очень рекомендую. Оно немножко устарело в замечании с typescript, но большая часть там актуальна.
Размер в runtime (gzip + min) 39,5 Кб + 2,6 Кб 22.8 Кб 90, 1 Кб (bundlephobia)
Каким образом размер npm пакета стал размером runtime? Весь npm пакет это не есть размер runtime отдельного приложения/виджета. Также стоит учитывать AOT/Ivy/tree-shaking.
Vue 3 is tree shaking-friendly. The core runtime has gone from ~20kb in size, gzipped, to ~10kb, gzipped.github.com/LayZeeDK/ngx-ivy-minimal-rendercomponent-app
Но я не спорю с тем что именно для встраиваемых штуковин, как виджеты, svelte может быть рассмотрен как вариант.
Поддержу. Модальное окно с 4 полями ввода, никаких сложных состояний и переходов нет, а точно ли был нужен фреймворк с декларативными шаблонами? Не проще ли было обойтись ванильным JS?
Если говорить про Svelte, то он практически ничего не весит в runtime, потому что все свои работы делает на этапе компиляции и код в бандле получается, практически такой же, как если бы писался на ванильном js, да и пишется практически как ванильный.
К слову, вот пример с формой телефона, который я подсмотрел у AlexxNB, тут явно виден ванильный js.
function formatByPattern(node, pattern) {
const setCursor = () => {
const match = node.value.substr(2).match(/[\d]/gi);
const pos = match ? node.value.lastIndexOf(match.pop()) + 1 : 3;
node.setSelectionRange(pos, pos);
};
const formatValue = e => {
let digits = node.value
.substr(3)
.replace(/[^\d]/g, '')
.split('');
node.value = pattern.replace(/[*]/g, m => digits.shift() || m);
setCursor();
};
node.addEventListener('input', formatValue);
return {
destroy: () => node.removeEventListener('input', formatValue)
};
}
<input
use:formatByPattern={'+7 (***) ***-**-**'}
type="text"
bind:value={$phoneNumber}
placeholder="+7 (***) ***-**-**"
/>
Дежурное напоминание о том, что если вы выбираете какую-то технологию по размеру бандла, нужно обязательно добавлять мониторинг на размер бандла в CI. В противном случае одно случайное добавление зависимости lodash или чего-то подобного похерит все ваши успехи.
eilemust у вас есть что-то такое в процессе?
Отличная статья для старта мини-серии статей! Если будет возможность углубиться в технические тонкости и примеры (можно сделать их абстрактными, чтобы не конфликтовать с внутренними политиками организации) – огонь.
Какой смысл сравнивать размеры фреймворков если svelte компилируемый и генерирует огромную кучу динамичекого кода при деплое? Все то, что вы сэкономили, не подключая, например, vue, — вернется вам в виде сгенеренного кода. Просто в vue этот код УЖЕ включен, а тут он генерится на лету.
Да, кода может будет поменьше (ведь подключаются только нужные части), но сравнение размеров все равно как-то теряет смысл, не? К тому же vue/react и прочие вы подключаете через CDN, и он наверняка у юзера уже закешен, а свое придется тянуть со своего сервера. Причем, каждый раз новое.
Вот смотрю: одна фраза «Hello World» генерирует 39 строк на js svelte.dev/tutorial/basics
Или я чего-то не понял? Я без всяких претензий, просто интересно.
Все то, что вы сэкономили, не подключая, например, vue, — вернется вам в виде сгенеренного кода. Просто в vue этот код УЖЕ включен, а тут он генерится на лету
Не так. Тот код, который сгенерировал компилятор Svelte, во Vue постоянно считается в runtime. Svelte, заранее знает все состояния и не будет тратить каждый раз время на рассчитывание каких-либо изменений. (No virtual DOM)
Тот код который включен в Vue это вещи, без которых он не сможет работать в runtime, в Svelte размер этого кода 1.4кб.
Тот факт, что svelte компилируемый, кстати, дает ему возможность, не писать тонны кода как в React с useCallback, useMemo, useEffect, которые потом превращаются в сложные Proxy и также влияют на производительность. Да и в принципе относительно других фреймворков, будет значительно меньше кода, из-за этого. (Write less code)
Давайте посмотрим на факты:
Размер вашего бандла – 79 Кб. Размер реакта – 42 Кб, на код приложения остается 37 Кб. В этот объем можно вполне уместить требуемую функциональность, если не увлекаться mobx и redux, как мне кажется.
Так что, получается, что в вашем примере Svelte вам особой компактности и не принес
Использовал бы я реакт, было бы все то же самое, только еще:
1. 42 Кб сходу
2. Большое кол-во бойлерплейта в коде (+ меньше скорость разработки)
Без mobx/redux/effector также уменьшится скорость разработки.
Если планируете продвигать виджет на другие сайты, встретите много разных проблем, одни из главных изоляция вашего кода от кода сайта, сбор ошибок и борьба с Same-origin-policy и прочими секьюрными вещами.
Preact тут проигрывает, так как это React внутри
Это с каких пор Preact это React внутри?
Хороший ли выбор Svelte для реализации виджета?