Svelte не является фреймворком в отличие от других традиционных фреймворков Javascript. Svelte - это компилятор, опережающий время (AOT), поэтому в конечном итоге отправляемый код представляет собой простой старый Javascript с минимальными издержками времени выполнения. Это одна из причин, почему Svelte так быстр, в некоторых случаях все мое приложение Svelte меньше всей библиотеки React.
Чтобы использовать Svelte, вы можете установить его cli tool или, если вы просто хотите поэкспериментировать, вы можете использовать его онлайн REPL. Для нашей настройки мы будем использовать онлайн REPL.
Давайте начнем со Svelte, создав наш первый небольшой виджет.
Наш виджет будет компонентом списка фильтров, подобным тому, который вы видите в веб-приложениях, таких как Slack, с его средством выбора каналов.
Мы начнем писать наш HTML-код в разделе App.html Svelte REPL. По мере продвижения вы заметите, что я определю несколько классов для каждого элемента HTML для стилизации компонента позже.
Элементы, которые нам понадобятся для этого виджета, - это поле ввода, в которое мы можем ввести наше значение:
<div class="filtering-list">
<div class="filter-search">
<input type="text" class="search">
</div>
</div>Теперь, когда у нас есть поле ввода, мы можем начать добавлять некоторые специфические свойства Svelte, чтобы сделать введенное значение динамическим и впоследствии доступным в нашем приложении. Для этого мы добавим свойство bind:value со значением q.
<input bind:value="q" type="text" class="search">Чтобы быстро увидеть, как это работает, давайте добавим этот фрагмент кода под закрывающим тегом div filter-search.
<div class="filtering-list">
<div class="filter-search">
<input bind:value="q" type="text" class="search">
</div>
{{q}}
</div>Вы можете заметить побочный эффект использования значения в
bind:value, которое не определено, по умолчанию значение q не определено, и оно будет выведено на экран. Назначьте q пустой строке на панели в правом нижнем углу, где указано имя в REPL.
Теперь, когда вы вводите текст в поле ввода, вы должны видеть, как значение печатается ниже по мере ввода.
Итак, теперь нам нужен список для входного значения для фильтрации.
<div class="filtering-list">
<div class="filter-search">
<input bind:value="q" type="text" class="search">
</div>
<ul class="filter-list">
{{#each list as name}}
<li>#{{name}}</li>
{{/each}}
</ul>
</div>Как и раньше, также назначьте список пустому массиву на панели в правом нижнем углу REPL. В противном случае это вызовет ошибку в REPL.
Теперь, когда это установлено, у нас есть большая часть нашего пользовательского интерфейса, настроенная и готовая к приему значений. Но вы, возможно, заметили, что в настоящее время нет связи между bind:value из q и списком. Здесь мы начнем писать фактический код Javascript.
Одна из приятных особенностей компонентов Svelte заключается в том, что вы пишете весь свой код HTML, CSS и Javascript в одном файле или, в данном случае, в одном столбце REPL.
Первый фрагмент кода, который нам нужен, - это export объект, в который мы будем писать код Javascript, связанный с Svelte.
<script>
export default {}
</script>Возможно, вы заметили тег
scriptи задаетесь вопросом, почему мы снова пишем наш встроенный Javascript, я подумал, что это плохо? к счастью, в случае Svelte, это неплохо, поскольку наш компонент после завершения будет загружен как внешний файл в наш фактический конечный продукт.
Ранее мы определили q и список в правом нижнем столбце REPL, но обычно я бы переместил это в эту часть нашего кода, чтобы дать виджету состояние по умолчанию. если он загружен без присвоенных значений.
<script>
export default {
data() {
return {
q: '',
list: []
}
}
}
</script>Измените значение списка на панели в правом нижнем углу на что-то вроде
["angular", "backbone", "ember", "glimmer", "react", "svelte", "vue"]
Теперь, когда у нас есть начальное состояние для нашего приложения, мы можем продолжить и добавить код, чтобы фильтрация работала должным образом. Для выполнения этой задачи воспользуемся вычисляемыми свойствами Svelte.
<script>
export default {
data() {
return {
q: '',
list: []
}
},
computed: {
filteredList(q, list) {
return q && q.length
? list.filter(item => item.toLowerCase().indexOf(q.toLowerCase()) != -1)
: list;
}
}
}
</script>
Мы назвали наше вычисляемое свойство filterList, и оно следит за нашими двумя начальными значениями, всякий раз, когда одно из этих значений изменяется, наше вычисленное свойство будет выполняться. Теперь даже при этом мы по-прежнему не увидим никаких изменений при вводе значения в поле.
Теперь мы можем вернуться к нашему предыдущему шаблону и изменить {{#each list as name}} на {{#each filteredList as name}}. Теперь наш полный код должен выглядеть так, как показано ниже.
<div class="filtering-list">
<div class="filter-search">
<input bind:value="q" type="text" class="search">
</div>
<ul class="filter-list">
{{#each filteredList as name}}
<li>#{{name}}</li>
{{/each}}
</ul>
</div>
<script>
export default {
data() {
return {
q: '',
list: []
}
},
computed: {
filteredList(q, list) {
return q && q.length
? list.filter(item => item.toLowerCase().indexOf(q.toLowerCase()) != -1)
: list;
}
}
}
</script>
Теперь у нас есть работающее приложение, которое делает то, что мы планировали делать вначале. Мы можем улучшить это еще больше, изменив его стиль, чтобы он выглядел лучше, и произведя некоторый рефакторинг кода. Вот ссылка на последний виджет с примененным CSS и отредактированным кодом фильтра.
Https://svelte.technology/repl?version=1.27.0&gist=d6909f77da67d9db0f2825992d036ec2
Один из вопросов, который могут задать некоторые люди: зачем использовать Svelte по сравнению с другими, доступными на рынке? С Svelte вы можете создавать универсальные виджеты, которые не привязаны к какой-либо структуре Javascript, поскольку конечным результатом Svelte является простой старый Javascript. и никакой библиотеки времени выполнения (это субъективно, поскольку библиотека времени выполнения минимальна и является частью фактического выходного кода), необходимой для ее запуска, вы можете перетащить ее в любые другие проекты, которые у вас есть.
Надеюсь, вам понравился ваш первый опыт работы со Svelte, и с этого момента вы продолжите свое путешествие.
Если вам нужна разработка Front-end / NodeJS / PHP, посетите https://www.donielsmith.com и ознакомьтесь с некоторыми из моих работ. Не стесняйтесь обращаться ко мне в Twitter @silentworks с вопросами.
Первоначально опубликовано на www.donielsmith.com 2 августа 2017 г.
