Как стать автором
Обновить

Комментарии 19

Два раза перестраховались фразой о личном мнении. Неужели столько хейта в комментах на хабре. А статья хорошая, спасибо!
Спасибо за статью и личный опыт. Уже около года слежу за ростом активности и популярности Svelte. Интересно ваше мнение — насколько он подходит для более крупных приложений, нежели обособленные виджеты? Будет ли выигрышно с точки зрения производительности, скорости разработки и удобства сопровождения заменить им один из фреймворков популярной тройки?
Спасибо за комментарий!
Нужно всегда отталкиваться от требований. Мне кажется на все Ваши вопросы может ответить видео Ильи Климова. Он там подробно разбирает случаи, когда Svelte может подойти, а когда нет. Очень рекомендую. Оно немножко устарело в замечании с typescript, но большая часть там актуальна.
Можно ли ознакомиться с исходниками виджета в учебных целях?
Размер в runtime (gzip + min) 39,5 Кб + 2,6 Кб 22.8 Кб 90, 1 Кб (bundlephobia)

Каким образом размер npm пакета стал размером runtime? Весь npm пакет это не есть размер runtime отдельного приложения/виджета. Также стоит учитывать AOT/Ivy/tree-shaking.
Спасибо за комментарий!
Имелось ввиду, сколько станет размер бандла если добавить только пакет(ы) React/Angular/Vue. Именно это показывает bundlephobia. У vue и angular действительно есть tree-shaking о чем у них тоже сказано. Но они все равно не сравнятся со svelte или preact.
image
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?

Не проще. Если бы писалось на ванильном JS, то время тратилось на вещи, которые в фреймворках есть уже из коробки. Создавать с нуля их, зачем, если есть готовые решения? Например, обновлять DOM, если состояние компонента зависело от какой-то переменной, которая изменилась и не обновлять, если не изменилась.
Если говорить про 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 у вас есть что-то такое в процессе?

У меня в вебпак зашит webpack-bundle-analyzer + проверяю пакеты с помощью import-cost. Но тут, безусловно, на уровень CI внедрить, тоже не помешает. Спасибо за идею.

Отличная статья для старта мини-серии статей! Если будет возможность углубиться в технические тонкости и примеры (можно сделать их абстрактными, чтобы не конфликтовать с внутренними политиками организации) – огонь.

Спасибо за статью. Заинтересовался, начал смотреть svelte и сразу же вопрос

Какой смысл сравнивать размеры фреймворков если 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 вам особой компактности и не принес

Бандл весит столько, из-за библиотек/изображений от которых я не смог отказаться. Например, sentry.

Использовал бы я реакт, было бы все то же самое, только еще:
1. 42 Кб сходу
2. Большое кол-во бойлерплейта в коде (+ меньше скорость разработки)

Без mobx/redux/effector также уменьшится скорость разработки.

Неплохое начало! Мы используем Preact для виджета, размер не большой, работает шустро, развитая эккоситсема, вообщем пока ни разу не пожалели.
Если планируете продвигать виджет на другие сайты, встретите много разных проблем, одни из главных изоляция вашего кода от кода сайта, сбор ошибок и борьба с Same-origin-policy и прочими секьюрными вещами.
Такие утверждения подрывают доверие ко всей статье.
Preact тут проигрывает, так как это React внутри

Это с каких пор Preact это React внутри?
Зарегистрируйтесь на Хабре , чтобы оставить комментарий