Comments 42
у Svelte мало статей, где можно найти лучшие практики
На мой взгляд, там всё просто и официальной документации вполне достаточно.
У Svelte прекрасная документация, но не хватает информации по построению архитектуры. Куда вынести стор, как организовать папки, а можно ли занести scss и т.д.
Опробовал данный фреймворк на маленьком приложении — списочек с фильтрами на чекбоксах, документации мне не хватило — не нашел в ней:
1) что блоки script и style должны идти именно в такой последовательности как в примерах (впрямую нигде не нашел упоминаний, мне было не очевидно)
2) что собственные компоненты должны называться с большой буквы, иначе они тихо не рендерятся
3) дебаггер chrome умудряется попадать дважды в onMount, пчм — так и не понял
4) что последовательность инициализации компонентов такая, что внутри onMount передаваемые проперти еще не инициализированы, приходится писать костыли
Несмотря на все это фреймворк понравился, буду следить и пробовать еще.
по части 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 будем благодарны за репорт.
1) All three sections — script, styles and markup — are optional… Очевидно в этом случае последовательность не может быть важна.
Строго говоря не очевидно, опциональность блоков не обязана включать свободу их следования, блоки могут быть опциональны, но с возможностью появления только в строго определенном порядке. Впрочем в данном случае это не важно — я попробовал поменять в своем рабочем коде блоки местами и все осталось рабочим, видимо проблемы были с чем-то другим.
По части 4 репорт уже есть — github.com/sveltejs/svelte/issues/3470,
Это ишак о другом. Вы писали, что пропсы не инициализированы в onMount, а там речь только про reactive declatarions, которые не могут быть пропсами. То о чем писали вы работает прекрасно: REPL
Строго говоря не очевидно, опциональность блоков не обязана включать свободу их следования, блоки могут быть опциональны, но с возможностью появления только в строго определенном порядке.
Не исключаю, что это может быть не очевидным тем, кто раньше не работал с SFC, в том же VueJS, например. В таком случае, в принципе, нет проблем если вы будете соблюдать порядок секций. От этого ваши компоненты станут только аккуратнее)
Не исключаю, что это может быть не очевидным тем, кто раньше не работал с 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 и всеми этими фреймворками. Мне кажется что дольше должна быть какая-то принципиально новая идея, которая позволить делать быстрее и лучше.
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 — предоставляют рантайм, который занимается перерисовкой, в этом плане, отличие довольно принципиальное
Я для себя сейчас выбрал DerbyJS. Он довольно стар и непопулярен, зато все работает и очень удобно.
Для роутинга и SSR есть https://sapper.svelte.dev/
<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
this.pushState({ arr: 1 });
Представляете? Безобразие я считаю, похоже реакт не стоит использовать дальше песочницы. Изучать доки и апи, я конечно же не хочу. Просто хочу чтобы работало так, как мне кажется должно работать.
Можно на это посмотреть и с другой стороны:
В React есть API документация в которой подробно расписано, что есть и чего нет.
В Svelte используется свой особый SvelteScript c очень негустой документацией по этому поводу. Неудивительно, что у некоторых пользователей возникают проблемы.
Там вполне достаточно и понятно написано, почему нельзя использовать push, и что нужно делать https://ru.svelte.dev/docs#2_Prisvaivaniya_reaktivny. Документация действительно короткая, да и ту не читают.
- export creates a component prop
- Assignments are 'reactive'
- $: marks a statement as reactive
- Prefix stores with $ to access their values
Уверен, что абсолютное большенство программистов способно запомнить эти 4 пункта. Другое дело, люди не хотят читать документацию того, чем пользуются. Что подтверждается статьями вроде Боль и слёзы в Svelte 3.
Ну и кажется, что все программисты должны понимать что такое assignments в JS. В этом смысле assignments это и есть апи, такое же как this.setState в React.
1) склоняет к иммутабильности, а значит в более точному change detection на сложных типах
2) в случае с массивом, например, позволяет синхронизировать его с отображением после нескольких мутаций (пару раз пригождалось на практике)
arr.push(1); // не обновляет DOM
arr.pop();// не обновляет DOM
arr = [ ...arr ]; // только когда мы явно этого захотели
Facebook агитировали за immutable.js. Смысл в немутируемости объектов:
arr = arr.push(1);Да и в целом тренд на иммутабельность начался задолго до Svelte.
Большая такая компания, отец Реакта, продвигает в массы иммутабельность. Можно прислушаться, как мне кажется.
Если сам фреймворк весит 9 кб, но зато код написанный на нём увеличивается в 7 раз в размерах, это не значит, что он лёгкий.
И как то не логично сравнивать размеры сайтов, при условии что на SvelteJS написано крайне мало сайтов и скорее всего очень мелких, как ваш стартап.
На официальном сайте топовые примеры. Пишешь 11 строчек кода, после преобразований становится 78.
В реальном мире магии к сожалению не существует. Svelte всего лишь позволяет вам писать мало, а делать много. Именно поэтому вы не пишете 85% кода.
Как мне оптимизировать код, если он под капотом фреймворка меняется?
В отличии от других фреймворков, вы можете открыть итоговый код своих компонентов и прочитать его ВЕСЬ. В отличии от черных коробок, которые предоставляют классические решения.
Если сам фреймворк весит 9 кб, но зато код написанный на нём увеличивается в 7 раз в размерах, это не значит, что он лёгкий.
Svelte не весит нисколько. Его рантайм состоит из набора хелперов, которые автоматически подключаются в итоговый код по мере надобности.
И как то не логично сравнивать размеры сайтов, при условии что на SvelteJS написано крайне мало сайтов и скорее всего очень мелких, как ваш стартап.
Так сравниваются же обычно сайты одинаковых размеров, либо даже один и тот же сайт, написанный на разных решениях, как RealWorld проект. Так что сравнение такое вполне себе имеет право на жизнь и может считаться объективным.
Как мне оптимизировать код, если он под капотом фреймворка меняется?
Как по мне, возможность видеть скомпилированный код дает более широкие возможности для дебага.
Если сам фреймворк весит 9 кб, но зато код написанный на нём увеличивается в 7 раз в размерах, это не значит, что он лёгкий.
И все равно получается меньше, чем брать Реакт.
Кибернетически улучшенные Web-приложения