Привет мир! 👋
Пару недель назад я начал изучать новичка в блоке фронтенд-разработки под названием Svelte. Что ж, это не так уж ново, поскольку репозиторий был создан около 3 лет назад, но теперь у нас есть совершенно новая версия 3, полностью переработанная, чтобы предоставить потрясающий опыт разработчика.
С другой стороны, последними крупными изменениями React стал отличный новый способ работы с состоянием, жизненными циклами компонентов и так называемый хуки. Он отвечает за множество улучшений в том, как мы работаем с React, добавляя возможность повторного использования, улучшая минимизацию и создавая новую экосистему пакетов, используйте что-нибудь!
Оба они меняют правила игры в их экосистеме, меняя наше представление о том, как мы думаем о реактивности. Сегодня здесь мы сравним их обоих, не то чтобы в списке «хорошо-плохо-уродливо», а по честному взгляду разработчика React, начиная с версии 0.12.
Св... Свел... Свелте?
Трудно сказать, что такое Svelte. Слово означает привлекательно тонкий, изящный и стильный. В пт-бр, буквально есбельто!
В эпоху, когда почти все фреймворки, основанные на компонентах, имеют одинаковую структуру или, по крайней мере, один и тот же способ кодирования, Svelte предлагает совершенно другой подход, предоставляя вашим компонентам умную предварительную компиляцию.
По сути, Svelte — это своего рода Babel JS со степенью магистра в области реактивности!
Теперь мы можем сказать, что Svelte — это фреймворк и компилятор для написания реактивных компонентов декларативным способом. Вам это знакомо? Может быть, без части компилятора, верно? Да, да, я знаю! Почти все современные фреймворки используют одну и ту же пропаганду, но у Svelte есть туз в рукаве! ♣️
экспортировать letgetStarted=true;
Самый простой способ начать изучение Svelte API — это пройти отличный туториал: https://svelte.dev/tutorial/basics.
Вы пошагово проверите и попробуете почти все текущие API, написав и запустив потрясающий встроенный REPL. Чтобы просто использовать REPL, не следуя инструкциям, вы можете нажать здесь: https://svelte.dev/repl
Кратко представим, что структура компонента представляет собой файл HTML с некоторыми тегами, кодом JS и стилями CSS с расширением .svelte.
Для тех, кто знаком с Vue.JS: https://vuejs.org/v2/guide/single-file-components.html
Файл *.svelte может иметь:
- Один тег ‹script›;
- Один тег ‹script context="module"›;
- Один тег ‹style›;
- один или несколько тегов HTML;
Ни один из этих тегов не требуется, и вы можете выбрать желаемый порядок, после чего вы можете создать любой компонент с гибкостью и отличной читабельностью.
Разбираем Svelte по частям! 🐸
‹скрипт›
Здесь внутри тега script вы пишете логику вашего компонента, состояние, функции и почти все, что вам нужно, чтобы заставить его работать.
Реквизит:
Чтобы определить реквизиты, я имею в виду внешние входные данные для тех, кто будет потреблять ваш компонент, вы можете просто использовать оператор экспорта:
export let value = "default value";
Теперь любой может передать значение как атрибут prop/html:
<MyComponent value="new value">
Штат:
В противном случае, если вход только внутренний, вы можете просто объявить его:
let value = "internal value";
Реактивность:
Теперь, самое приятное, чтобы вызвать обновление в HTML, вам просто нужно присвоить новое значение вашему состоянию. Именно так, без специального API, без функций, без прокси, ничего.
setTimeout(() => value = "my new internal value", 1000);
Да, через одну секунду (просто чтобы добавить немного интриги 👻) ваш компонент будет обновлен с новым значением, изменив все html-теги, которые зависят от него, дочерние компоненты, которые его получают, все!
У Svelte есть несколько более специфических API, но пока я оставлю это в качестве вводного поста!
‹/скрипт›
‹script context='module'›
Вы можете иметь некоторые переменные, функции или что угодно внутри этого тега. Код здесь запустится только один раз, когда компонент был оценен.
Это представляет отличный инструмент для создателей пакетов, позволяющий обмениваться внутренними помощниками и данными без ущерба для жизненного цикла компонентов.
‹/скрипт›
‹стиль›
Это потрясающее место с полной областью действия для размещения стилей компонентов и обеспечения безопасности. Все стили, которые вы здесь запишете, будут ограничены областью действия с использованием особого подхода.
div { color: blue; }
Компилятор хеширует все ваши классы, создавая имя класса, соответствующее стилям этого компонента. Затем во время выполнения он применит эти классы к связанным элементам.
Вам просто нужно позаботиться о специфичности, потому что Svelte суммирует специфичность CSS 0.1.0 для ваших классов при добавлении хешированного имени класса:
div.svelte-1ghvvfz{color:blue}
У нас также есть несколько небольших API для стилей, если вы хотите, чтобы я написал об этом больше, оставьте комментарий ниже! 💬
‹/стиль›
‹раздел›
В следующем пространстве вы можете создавать HTML-теги, добавляя свои реквизиты/состояния, чтобы ваши компоненты обновлялись правильной информацией.
This is my value: {value}
‹/дел›
‹h1 class='{value === 'red' ? 'красный цвет' : ''}'›
Вы даже можете использовать столько тегов, сколько хотите, и использовать переменные, которые вы объявили в корневой области вашего тега скрипта, в любом месте внутри HTML.
Svelte представляет некоторые API, такие как условные операторы и циклы для написания ваших HTML-тегов, мы можем поговорить об этом в следующем посте!
</h1>
Продолжение следует!
Вторая часть находится в разработке, так что я могу дать вам некоторое представление о React и Svelte. Это будет не прямое сравнение, а прозрачный обзор каждого подхода от ума, связанного с React. хаха :)
Пусть растет!
Это все на данный момент люди! Спасибо за чтение, и я очень надеюсь, что вы попробуете Svelte, убедитесь в его преимуществах и поможете расширить сообщество с помощью отличного контента, пакетов и знаний.
Ибо Господь дает мудрость; из уст его исходит знание и разумение. Притчи 2:6
