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

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

у Svelte мало статей, где можно найти лучшие практики

На мой взгляд, там всё просто и официальной документации вполне достаточно.

У Svelte прекрасная документация, но не хватает информации по построению архитектуры. Куда вынести стор, как организовать папки, а можно ли занести scss и т.д.

Зато есть шанс побыть у истоков, и когда/если svelte выстрелит снять сливки.
Это о каких сливках речь?)
Ну я вот делаю набор ui компонентов на svelte и ещё по мелочи всяких штук, для реакта или вью в этом мало смысла, а так есть шанс что этим будет пользоваться кто-то кроме меня, что приятно. Если появятся вакансии на svelte — уже будет опыт и проекты в портфолио. При этом я просто решаю свои потребности и решаю с удобством :)

Опробовал данный фреймворк на маленьком приложении — списочек с фильтрами на чекбоксах, документации мне не хватило — не нашел в ней:
1) что блоки script и style должны идти именно в такой последовательности как в примерах (впрямую нигде не нашел упоминаний, мне было не очевидно)
2) что собственные компоненты должны называться с большой буквы, иначе они тихо не рендерятся
3) дебаггер chrome умудряется попадать дважды в onMount, пчм — так и не понял
4) что последовательность инициализации компонентов такая, что внутри onMount передаваемые проперти еще не инициализированы, приходится писать костыли


Несмотря на все это фреймворк понравился, буду следить и пробовать еще.

1) Порядок блоков не важен. Пруф
2) Линтер говорит об этом

3)Можете рассказать про кейсы? Мне пока onMount не пригодились
4) Инициализируются. Пруф. Или я не понял ваш кейс

по части 4 — github.com/sveltejs/svelte/issues/3470
по части 3 — я хотел предобработать переданные параметры (начать загрузку ресурса, если указан урл)
по части 2 — у меня был нем как рыба, подозреваю дело в том что имя компонента было checkbox и он подумал что это новомодный html тэг
по части 1 — похоже что вы правы, сейчас когда я поменял местами пункты все осталось рабочим, возможно у меня что-то не так было с rollup, но ошибок при сборке не было, а при использовании последовательности из примеров все чинилось и работало
Скорее всего вы были просто не очень внимательны:

1) All three sections — script, styles and markup — are optional.. Очевидно в этом случае последовательность не может быть важна.
2) A capitalised tag, such as Widget or Namespace.Widget, indicates a component.

3, 4) Скорее всего вы ошиблись, хотя если сможете воспроизвести такое поведение в REPL будем благодарны за репорт.
По части 4 репорт уже есть — github.com/sveltejs/svelte/issues/3470, по части 3 если восстановлю версию когда пытался использовать onMount обязательно напишу
1) All three sections — script, styles and markup — are optional… Очевидно в этом случае последовательность не может быть важна.

Строго говоря не очевидно, опциональность блоков не обязана включать свободу их следования, блоки могут быть опциональны, но с возможностью появления только в строго определенном порядке. Впрочем в данном случае это не важно — я попробовал поменять в своем рабочем коде блоки местами и все осталось рабочим, видимо проблемы были с чем-то другим.
По части 4 репорт уже есть — github.com/sveltejs/svelte/issues/3470,

Это ишак о другом. Вы писали, что пропсы не инициализированы в onMount, а там речь только про reactive declatarions, которые не могут быть пропсами. То о чем писали вы работает прекрасно: REPL

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

Не исключаю, что это может быть не очевидным тем, кто раньше не работал с SFC, в том же VueJS, например. В таком случае, в принципе, нет проблем если вы будете соблюдать порядок секций. От этого ваши компоненты станут только аккуратнее)
Спасибо за repl, вспомнил еще одну трудность, совершенно не очевидно пчм если я делаю push или slice на массив, то чтобы стейт UI обновился я должен писать что-то вроде a=a. Читал про то что модификацию массивов Svelte не отслеживает, но есть впечатление что вызов метода, модифицирующего состояние массива, отследить должно быть не трудно.

Не исключаю, что это может быть не очевидным тем, кто раньше не работал с SFC, в том же VueJS, например
Я исключительно про логику, опциональность и порядок появления это два разных свойства, как красный и круглый для физических объектов.

Assignments are 'reactive'
Как раз присвоение делает выражение реактивным, поэтому а=а вызывает обновление.

вспомнил еще одну трудность, совершенно не очевидно пчм если я делаю push или slice на массив, то чтобы стейт UI обновился я должен писать что-то вроде a=a.

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

Читал про то что модификацию массивов Svelte не отслеживает, но есть впечатление что вызов метода, модифицирующего состояние массива, отследить должно быть не трудно.

Дело не в трудности. Чтобы «отслеживать» вызов метода инстанса JS класса, необходимо пропатчить прототип этого встроенного класса. В данном случае нужно было бы пропатчить Array.prototype.push/etc. Или же использовать proxy, оборачивая в них весь стейт компонентов, как это делает Vue. Это не наш метод. В документации, четным по белому написано Assignments are 'reactive'. Если вам удобнее изучать документацию на русскому, прощу ознакомиться с нашим переводом. Возможно это звучит понятнее.

Я исключительно про логику, опциональность и порядок появления это два разных свойства, как красный и круглый для физических объектов.

А я про SFС — формат html-based компонентных файлов, который принят не только в Svelte, но и во Vue, Riot и Ractive, с ± небольшими отличиями. Если вы не знакомы ни с одним из этих фреймворков, то я понимаю почему у вас возник подобный вопрос. Благо этот вопрос легче легкого проверить простым экспериментом.

Возможно я не внимательный, но аббривиатур SFC и их объяснений ни в туториалах ни в апи не помню. Собственно мой поинт как раз о том что возможно было бы круто ввести это понятие, рассказать о нем в документации, тем более что уже видел рекомендации смотреть Svelte как первый инструмент для написания современного фронтенда, вперёд Vue, Angular и React.


Насчёт splice, push и т.д. вы немного перегибаете, на мой взгляд: Svelte как я понимаю это компилятор js в js, т.е. он читает тот js что я написал и делает свой, который выполняет то что я задумал и объяснил посредствам спецсинтаксиса в js и html. Он видит оператор "=" и генерирует код, который обновляет всю зависимую от стоящей слева переменной разметку. Что мешает видя вызов, например, push() добавлять такой же код относительно переменной к которой метод вызван? сложности с выводом типа этой переменной в момент компиляции?

Возможно я не внимательный, но аббривиатур SFC и их объяснений ни в туториалах ни в апи не помню.

Да, потому что Single File Component это общепринятое понятие и уже довольно устоявшееся. Хотя наверное я слишком долго в этом варюсь и для новичков все может быть не так очевидно.

Что мешает видя вызов, например, push() добавлять такой же код относительно переменной к которой метод вызван? сложности с выводом типа этой переменной в момент компиляции?

Ну конечно, кроме того непонятно какие вызовы методов каких объектов мутируют стейт. Например:

a.push();
b.push();


Вы компилятор, а я программист написавший это. Для какой из двух строк будете генерировать код обновления DOM и связанных данных? Подсказка — по моему замыслу, только одна из строк реально мутирует объект. Вторая имеет иное предназначение.

Не совсем ясно почему "кибернетически"
Я люблю изучать новые фреймворки. Хотя до svelte пока не дошел но например работал с riot (и даже сделал реализацию realworld-app)
Но честно говоря после выхода очередного нового лучшего чем все предыдущие уже хочется спросить "Шо, опять?". Я не уверен что между подходами всех перечисленных Вами фреймворков есть принципиально существенная разница, как например между jquery и всеми этими фреймворками. Мне кажется что дольше должна быть какая-то принципиально новая идея, которая позволить делать быстрее и лучше.

Rich Harris в issue на гитхабе упоминал, почему был выбран именно такой слоган: github.com/sveltejs/svelte/issues/3269#issuecomment-516397747

Someone: «Cybernatically» sounds 100% like 80s RoboCop corn
Rich Harris: Exactly our goal! JavaScript tools are boooooring. We shouldn't take ourselves so seriously.

Насчёт разницы между фреймворками — смотря с какой стороны посмотреть, например, Svelte — компилятор, а React/Vue — предоставляют рантайм, который занимается перерисовкой, в этом плане, отличие довольно принципиальное
Сделайте роутинг, SSR, удобную синхронизацию данных с бекендом и будет довольно круто.

Я для себя сейчас выбрал DerbyJS. Он довольно стар и непопулярен, зато все работает и очень удобно.
Svelte рано куда либо дальше песочницы на поиграться. Простой пример:
<script>
	let arr = []
	
	function add() {
		arr.push(1)
	}
</script>

<h1>Array length is {arr.length}</h1>

<button on:click={add}>
	add
</button>

Тут у нас всегда будет надпись Array length is 0

Если функцию add() переписать вот так, то всё работает, но так писать не комильфо
function add() {
	arr = [...arr, 1]
}


UPD: ЧСХ в доках точно такой же пример тоже не работает тыц

Особенности Svelte. Если вам принципиально наличие push, то можно сделать так


<script>
    import {writable} from 'svelte/store'
    const arr = writable([])
    function add() {
        arr.update(state=>{
            state.push(1)
            return state
        })
    }
</script>

<h1>Array length is {$arr.length}</h1>

<button on:click={add}>
    add
</button>
UPD: ЧСХ в доках точно такой же пример тоже не работает тыц

Доки работают по принципу «попробуй сделать сам, а если нет — есть кнопка Show me, которая все сделает за тебя».
monosnap.com/direct/C0g0VfTT2Of4jr6GReCcHGR79RI0NO
Ладно, согласен тут я не углядел, но сам факт того, что вместо привычного push придётся городить костыли удручает. Получается какая-то реактивность не до конца.
Блин, вот незадача, а в React например не работает вот так:

this.pushState({ arr: 1 });

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

Можно на это посмотреть и с другой стороны:


В React есть API документация в которой подробно расписано, что есть и чего нет.


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

Там вполне достаточно и понятно написано, почему нельзя использовать push, и что нужно делать https://ru.svelte.dev/docs#2_Prisvaivaniya_reaktivny. Документация действительно короткая, да и ту не читают.

Если комменты подобные этому возникают под каждой статьей о Svelte, то, видимо, недостаточно подробно.

Так проблема то не в том, то плохо написано, а в том, что "мужики инструкции не читают".
Там всего три абзаца в этом разделе и один из абзацев конкретно про push и splice.

В SvelteScript всего 4 особенности по сравнению с Javascript и они очень хорошо описаны в документации:

  1. export creates a component prop
  2. Assignments are 'reactive'
  3. $: marks a statement as reactive
  4. Prefix stores with $ to access their values

Уверен, что абсолютное большенство программистов способно запомнить эти 4 пункта. Другое дело, люди не хотят читать документацию того, чем пользуются. Что подтверждается статьями вроде Боль и слёзы в Svelte 3.

Ну и кажется, что все программисты должны понимать что такое assignments в JS. В этом смысле assignments это и есть апи, такое же как this.setState в React.
НЛО прилетело и опубликовало эту надпись здесь
Оно не бесполезное, потому что апи Svelte подразумевает что только assignments are 'reactive'. Вы написали это самое присвоение и получили реактивность, не написали — не получили. Отслеживать мутации массива слишком дорого и совершенно не нужно. Более того, такой подход дает 2 плюса:

1) склоняет к иммутабильности, а значит в более точному change detection на сложных типах
2) в случае с массивом, например, позволяет синхронизировать его с отображением после нескольких мутаций (пару раз пригождалось на практике)

arr.push(1); // не обновляет DOM
arr.pop();// не обновляет DOM
arr  = [ ...arr ]; // только когда мы явно этого захотели
НЛО прилетело и опубликовало эту надпись здесь
А, я видимо не так интерпритировал смысл высказывания)

Facebook агитировали за immutable.js. Смысл в немутируемости объектов:


arr = arr.push(1);

Да и в целом тренд на иммутабельность начался задолго до Svelte.

НЛО прилетело и опубликовало эту надпись здесь

Большая такая компания, отец Реакта, продвигает в массы иммутабельность. Можно прислушаться, как мне кажется.

НЛО прилетело и опубликовало эту надпись здесь
JS действительно быстрый за счет современных JIT, но его довольно легко можно сделать медленным. React не быстрый, но достаточно быстрый для задач Facebook. PureComponent/useMemo/useCallback — это костыли решающие проблемы только React и VDOM. Но иммутабильность — это средство решения проблем JS в целом, и даже можно сказать обще-языковых. Так как реальным значением переменной сложного типа является ссылка, понять что данная переменная изменилась можно только изменив значение, то есть эту ссылку. Определение какие именно мутации произошли внутри сложного типа крайне затратная штука, поэтому проще изменить значение и использовать строго стравнение. А этом смысл иммутабильности, а immutable.js это не более чем один из инструментов работы с ней. Лично мне он не нравится ни разу, но он в свое время был хорошо распиарен тем же Facebook.
На официальном сайте топовые примеры. Пишешь 11 строчек кода, после преобразований становится 78. Как мне оптимизировать код, если он под капотом фреймворка меняется?

Если сам фреймворк весит 9 кб, но зато код написанный на нём увеличивается в 7 раз в размерах, это не значит, что он лёгкий.

И как то не логично сравнивать размеры сайтов, при условии что на SvelteJS написано крайне мало сайтов и скорее всего очень мелких, как ваш стартап.
На официальном сайте топовые примеры. Пишешь 11 строчек кода, после преобразований становится 78.

В реальном мире магии к сожалению не существует. Svelte всего лишь позволяет вам писать мало, а делать много. Именно поэтому вы не пишете 85% кода.

Как мне оптимизировать код, если он под капотом фреймворка меняется?

В отличии от других фреймворков, вы можете открыть итоговый код своих компонентов и прочитать его ВЕСЬ. В отличии от черных коробок, которые предоставляют классические решения.

Если сам фреймворк весит 9 кб, но зато код написанный на нём увеличивается в 7 раз в размерах, это не значит, что он лёгкий.

Svelte не весит нисколько. Его рантайм состоит из набора хелперов, которые автоматически подключаются в итоговый код по мере надобности.

И как то не логично сравнивать размеры сайтов, при условии что на SvelteJS написано крайне мало сайтов и скорее всего очень мелких, как ваш стартап.

Так сравниваются же обычно сайты одинаковых размеров, либо даже один и тот же сайт, написанный на разных решениях, как RealWorld проект. Так что сравнение такое вполне себе имеет право на жизнь и может считаться объективным.
Как мне оптимизировать код, если он под капотом фреймворка меняется?

Как по мне, возможность видеть скомпилированный код дает более широкие возможности для дебага.


Если сам фреймворк весит 9 кб, но зато код написанный на нём увеличивается в 7 раз в размерах, это не значит, что он лёгкий.

И все равно получается меньше, чем брать Реакт.

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.