Svelte js что это
Краткое введение в Svelte 3
Авторизуйтесь
Краткое введение в Svelte 3
IT Expert & Project Manager
Svelte — это не совсем фреймворк в том смысле, к которому мы привыкли, и, пожалуй, лучше рассматривать его как компилятор.
Когда вы создаете приложение Svelte 3, ваш код компилируется в чистый и оптимизированный JavaScript, без других зависимостей фреймворка, включенных в этот микс, что делает его очень крошечным. Таким образом, при разработке со всеми синтаксическими нюансами это выглядит как фреймворк, но затем фреймворк исчезает, когда компилируется код.
Инициализация проекта Svelte 3
И с помощью этой команды вы можете запустить сервер разработки:
А теперь вы можете зайти на http://localhost:5000, чтобы получить доступ к своему приложению.
Структура Svelte приложения
package.json
Точка входа JavaScript: main.js
Общая папка
Svelte файлы
Типичный файл Svelte будет выглядеть так:
Приятно думать, что вы можете использовать старый добрый JavaScript, CSS и HTML! Единственное отличие заключается в нескольких специфических для Svelte синтаксических вкраплениях в HTML и нескольких специальных правилах обработки некоторых JavaScript команд. О, и стили будут привязаны к компоненту, описанному в файле Svelte, так что нет необходимости использовать причудливые классы или беспокоиться о специфике за пределами компонента.
Создание компонента счетчика Counter
8 декабря в 18:00, Онлайн, Беcплатно
Вот наша отправная точка:
Фигурные скобки в вашей разметке предназначены для интерполяции значений. Подойдет любой допустимый однострочный JavaScript-код, но чаще всего его просто интерполировать значения из нашего JavaScript-кода.
Привязка к событиям
Давайте добавим несколько кнопок, чтобы мы могли увеличивать или уменьшать счетчик:
Условные выражения
Двустороннее связывание значений
Иногда вы хотите, чтобы значение связывалось в обоих направлениях, например, когда вход формы должен брать свое значение из переменной в вашем компоненте, но изменение его значения также должно изменить значение этой переменной. Это легко сделать с Svelte! Давайте вместо этого отобразим наш счет в форме ввода и позволим пользователю установить текущий счет вручную:
Двухстороннее связывание осуществляется с помощью синтаксиса bind:value=
Запуск приложения
Когда будете готовы собрать приложение, просто выполните команду build :
И теперь общая папка будет содержать минимизированную и оптимизированную версию вашего скомпилированного пакета, готовую к отправке в CDN.
Почему стоит использовать Svelte для своих веб-проектов
Если вы занимаетесь веб-разработкой, вы, вероятно, слышали о Svelte Js. Тем не менее, думаю, вам будет интересно, почему он набирает популярность и какими интересными преимуществами для веб-разработчиков обладает.
Мы сделаем краткий обзор данного фреймворка, его достоинств и недостатков, чтобы после прочтения вы смогли решить, подходит он вашему проекту или нет.
Фреймворк Svelte появился в 2018 году и это была сенсация. И новичкам, и опытным разработчикам понравилось использовать его для всевозможных проектов. В связи с этим, давайте потратим немного времени, чтобы прояснить, что же в Svelte делает его таким доступным.
Что такое Svelte и в чём его преимущества?
Некоторым разработчикам Svelte JS известен как самый популярный фронтенд-фреймворк из не вошедших в главную шестёрку State of JavaScript в 2018. О Svelte есть статья на Википедии, но появилась она всего полгода назад, поэтому информации там немного.
Svelte был задуман как фреймворк, но, по сути, это компонентный фреймворк, созданный для компиляции компонентов на этапе сборки. Благодаря такому подходу, можно загружать всего один bundle.js на страницу для рендера всего приложения.
Проще говоря, с помощью Svelte вы пишете компоненты, используя HTML, CSS и JavaScript. В процессе разработки фреймворк компилирует их в небольшие автономные JavaScript-модули. Таким образом гарантируется выполнение минимума работы со стороны браузера, что делает веб-приложение быстрее, а написание кода — проще.
Вот краткое описание Svelte от авторов:
Благодаря всему этому, Svelte Mobile является одним из лидеров в плане стартовой производительности («startup performance»). У других видов оптимизации таких возможностей нет. Svelte достигает столь выдающихся результатов за счёт использования доступного браузерного компилятора JavaScript, а не какого-либо стороннего. Таким образом мы получаем отличное решение для веб-разработки среди других популярных фреймворков и языков программирования.
Так Svelte достигает точной реактивности кода и увеличения производительности, что является отличной рекламой фреймворка и для разработчиков, и для владельцев бизнеса. Помимо этого, ещё одно преимущество Svelte для разработчиков — удобство для новичков и чёткая синтаксическая структура.
Обзор архитектуры Svelte
Svelte популярен благодаря своей быстроте по сравнению с любыми другими библиотеками. Это связано с избавлением от этапа загрузки фреймворка для построения виртуального DOM. Вместо того, чтобы использовать инструмент в процессе исполнения, код на Svelte компилируется в JS на этапе сборки. Это означает, что приложение не нуждается в зависимостях для запуска.
Как Svelte работает
Попробую объяснить принцип работы Svelte самыми простыми словами:
Svelte JS vs. React vs. Vue: сравнение
Многие инженеры сравнивают Svetle.Js с другими фреймворками. Наиболее известные альтернативы — React и Vue.
Самые популярные веб-фреймворки, такие как Angular, React и Vue.js основываются на принципе ожидания загрузки кода для сборки виртуального DOM. Только после этого они могут отрисовывать страницу, используя библиотеку.
Например, React, разработанный Facebook в 2011 году, сделал реактивное программирование достаточно популярным. Этот фреймворк впервые начал использовать виртуальный DOM. Он разделяет обработку событий, манипуляцию атрибутами и ручное обновление DOM, которое в противном случае потребовалось бы для создания приложения. Это и стало ключевым фактором, сделавшим React столь привлекательным.
Svelte, тем временем, является компилятором. Он компилирует ваши компоненты в JavaScript вместо того, чтобы полагаться на концепции, вроде Virtual DOM для обновления браузерного DOM. Благодаря Svelte typescript стало возможным выстроить приложение значительно эффективнее. Вы можете писать свои компоненты, используя CSS, HTML и JavaScript, а в процессе сборки Svelte компилирует их в отдельные модули JavaScript.
В результате, Svelte 3 строит DOM с меньшим весом. Например, реализация TodoMVC на Svelte в сжатом виде весит 3.6 КБ. Для сравнения — React плюс ReactDOM, даже без кода приложения, весит примерно 45 КБ в сжатом виде. Полностью загрузить TodoMVC на React занимает у браузера в 10 раз больше времени, чем на Svelte.
Правда, сложно непредвзято оценить производительность Svelte в сравнении с React, поскольку фреймворки очень разнятся по своей сути.
И всё же, если вы хотите узнать больше подробностей о практическом сравнении этих веб-фреймворков, полезно будет посмотреть данное видео.
По данным GitHub, Svelte Native значительно быстрее, чем Ember, Angular, React, Ractive, Preact, Mithril или Riot. Он даже способен конкурировать с Inferno, который, вероятно, является самым быстрым UI-фреймворком в мире на данный момент. В итоге это и является решающим преимуществом, ведь более высокая скорость приложения может продвинуть вас вперёд конкурентов.
Компоненты Svelte
Давайте копнём глубже в детали структуры Svelte. Любой компонент PWA [Progressive Web Application] на Svelte может содержать три раздела: скрипт, стиль и шаблон. Вот более подробное описание того, что имеется в виду:
Тег скрипта: опциональный блок JavaScript с объявлениями функций и переменных, используемых внутри компонента.
Тег стиля: еще один опциональный блок. Воспринимайте его как обычный тег стиля HTML, с одним критическим отличием. Правила, описанные внутри данного блока, относятся только к текущему компоненту. Применение стиля к элементу P не повлияет на все параграфы на странице. Это здорово, ведь пропадает нужда придумывать классы для разных элементов. То есть, вам попросту не удастся случайно переопределить другое стилевое правило.
Блок шаблона: это последний и единственный обязательный блок, обычно — тег H1. Это и представление и вид [view] вашего компонента. Он тесно связан с блоками скриптов и стилей, поскольку в них определяется его поведение и оформление.
Чтобы получить лучшее представление о создании всех этих компонентов, предлагаю ознакомится с кратким и понятным объяснением от A shot of code:
По этим причинам, мы можем рассматривать Svelte как библиотеку, пытающуюся привнести модульность во фронтенд. Поддерживается эта модульность за счет группировки различных компонентов. Однако, фреймворк также изолирует шаблон, логику и оформление. По умолчанию Svelte строит стили для каждого компонента отдельно. То есть вы избежите любых утечек стилей между компонентами, чего не гарантирует использование некоторых других фреймворков.
Вот так это выглядит на практике:
Что ещё нужно знать о Svelte.js
Поговорим об остальных важных в процессе разработки преимуществах Svelte по сравнению с другими фреймворками.
Beginner-Friendly
Ранее мы упоминали, что причина популярности Svelte отчасти состоит в простоте для новичков. При его использовании нет необходимости манипулировать DOM. Также не нужно постигать специфичные для фреймворка врапперы состояний. Доступ к переменным можно получить непосредственно из разметки, а это значительно упрощает процесс создания приложения. Работая со Svelte, программисты могут изучить основные принципы работы состояния компонентов, не запутываясь в деталях.
Svelte предоставляет свой синтаксис условных операторов и циклов для отображения элементов DOM. Принцип работы здесь похож на JSX. Однако, все эти вложенные скобки, в которых новички могут легко потеряться, не так уж и важны.
Есть одна странность Svelte, о которой стоит упомянуть: он передает свойства в компоненты. Этот фреймворк легко выучить и он полностью функционален, но, на вкус некоторых разработчиков, синтаксис слишком экзотичен.
Обратная совместимость
Ранее, если требовалось интегрировать, например, какой-нибудь виджет календаря или любой другой в ваше приложение, сделать это можно было только с помощью той же версии фреймворка, на котором построен виджет. То есть, если вы собираете приложение в Angular, а виджет построен в React, вам не удастся его интегрировать. Однако, если виджет или ваше приложение построено с использованием Svelte, это становится возможным.
Разделение кода
Допустим, вы используете React как основной фреймворк. Если вы изначально используете только один компонент React, а не много, то всё равно приходится загружать весь React. Со Svelte разделение кода намного эффективнее, поскольку фреймворк встроен в компонент и этот компонент весьма мал.
Поддержка Open-Source сообщества
Svelte — это ПО с открытым исходным кодом, разработанное энтузиастами. Таким образом, использование фреймворка Svelte не требует никаких затрат и позволяет внедрять многие функции бесплатно. Кроме того, у Svelte есть активное сообщество разработчиков на GitHub, к которому вы можете присоединиться, и где всегда можно попросить о помощи или внести свой вклад в эту технологию.
Достаточно ли Svelte стабилен и надежен
Это актуальный вопрос для фрейморка, который на рынке столь недавно. Все приведенные примеры относятся к синтаксису Svelte версии 3. На данный момент он всё ещё в бета-версии. По сравнению с такими гигантами индустрии, как ReactJS и VueJS, он развит не слишком сильно.
Каким бы интересным ни был SvelteJS, стоит подождать некоторое время, прежде чем преподавать мастер-классы по коду с его использованием. Это связано с тем, что бета-версия может в какой-то степени отличаться от итоговой. Тем не менее, Svelte предлагает лаконичную документацию к версии 3, которая может облегчить работу новичкам. Так что этот фреймворк, несомненно, можно рассматривать как часть вашего надежного стека технологий.
Svelte.js — следующий гигант?
Трудно ответить. Может ли Svelte превзойти Vue и React в качестве фронтенд фреймворка, который выдержит испытание временем?
Это не так легко предсказать. На данный момент он ещё не достиг уровня популярности некоторых своих собратьев. У него нет такой же поддержки со стороны крупной корпорации, как у React. Но опять же, Vue неплохо справился и без нее.
В прошлом году было проведено очередное исследование «State of JS». Оно проводится ежегодно для оценки предпочтений ведущих разработчиков. Svelte стал самым популярным, в сравнении с другими библиотеками, включёнными в опрос. Это может означать, что рано или поздно он будет рассматриваться как один из лучших JS-фреймворков.
Svelte vs. React — обычная тема для обсуждения среди программистов, но один из фреймворков не обязательно явно лучше другого. Svelte хорошо подходит для разработки веб-приложений или MVP, в то время как Angular хорошо подходит для PWA или корпоративных веб-приложений. Некоторые разработчики находят фреймворк, который им нравится, и придерживаются его, но даже если и так, пусть это не помешает вам попробовать Svelte. Вам могут понравиться описанные нами функции.
Давайте ещё раз коротко пройдёмся по ключевые особенностям Svelte:
Что такое Svelte и почему веб-разработчикам стоит обратить на него внимание
Рассказываю о малоизвестном, но перспективном и удобном фреймворке для JavaScript, о котором несправедливо забывают из-за популярности React и прочих аналогов.
Что такое Svelte?
Svelte (читается как «Звэлт», что в переводе означает «элегантный») – это фреймворк. Настройка над языком JavaScript, предлагающая радикально иной подход к созданию веб-интерфейсов. Svelte отличается от более традиционных решений в духе React и Vue как с точки зрения организации кода, так и с точки зрения преобразования этого кода в «готовый к употреблению продукт».
Svelte позволяет создавать более быстрые и менее ресурсоемкие приложения, при этом параллельно упрощая процесс разработки. Звучит слишком хорошо, но все действительно так и работает. Переход на Svelte действительно не несет за собой почти никаких недостатков.
Ключевые фишки Svelte
В Svelte много интересных решений, но я сосредоточусь на фундаментальных отличиях от конкурентов и особенностях синтаксиса, бросающихся в глаза тем, кто до этого не взаимодействовал с подобными технологиями вовсе.
Компонентный подход
Построение кода на базе объектов – главная составляющая ООП-парадигмы разработки. Такую же схему структуризации используют многие другие фреймворки, включая Vue и React, но Svelte эту идею возводит в абсолют. По умолчанию и без необходимости как-то модифицировать приложение Svelte провоцирует разработчика на написание кода, мелко дробленного на логические куски.
Приложение на базе Svelte состоит из объектов, каждый из которых содержит в себе три основных блока:
Svelte
Кибернетически улучшенные Web-приложения
Меньше кода
Создавайте компоненты без излишних конструкций на языках, которые вы уже знаете — HTML, CSS и JavaScript
Без виртуального DOM
Svelte компилирует ваш код в оптимальный ванильный JS — приложения запускаются быстро и остаются быстрыми
Честная реактивность
Больше никаких сложных библиотек управления состоянием — Svelte делает реактивным сам JavaScript
Svelte — это принципиально новый подход к созданию пользовательских интерфейсов. Когда традиционные фреймворки, такие как React и Vue, выполняют основную часть своей работы в браузере, Svelte переносит эту работу на этап компиляции, который происходит при сборке приложения.
Вместо использования таких тяжелых приёмов, как сравнение состояний виртуального DOM, Svelte пишет код, который точечно обновляет DOM при изменении состояния вашего приложения.
Компоненты Svelte построены поверх языка HTML с возможностью добавлять данные.
CSS изолируется внутри компонентов — больше никаких конфликтов стилей и борьбы спецификаций. Впрочем, вы можете использовать свою любимую библиотеку CSS-in-JS.
Запускайте эффективные точечные обновления, просто присваивая новые значения переменным. Компилятор сделает всю магию.
Создавайте красивые интерфейсы с помощью мощного движка переходов, встроенного прямо в фреймворк.
Кто использует Svelte?
Supporters
Svelte is free and open source software, made possible by the work of hundreds of volunteers and donors. Присоединяйся к нам or give!
Легенда о Фреймворке Всевластия
В последнее время набирает популярность тренд «исчезающих фреймворков», локомотивом которого, без сомнения, можно считать SvelteJS — buildtime-фреймворк и компилятор в ванильный javascript.
Несмотря на то, что концептуально Svelte весьма прост, а в использовании еще проще, многие разработчики задаются вопросом, в чем же killer-фича данного фреймворка, да и подхода в целом? Почему это не «yet another javascript framework»?
В этой статье я расскажу про одну из множества суперспособностей Svelte, которые могут всерьез облегчить вам жизнь.
Давайте разберемся, но сначала я расскажу вам одну легенду…
Легенда о Фреймворке Всевластия
Одни фреймворки были созданы ребятами из Google и Facebook, другие — крутыми чуваками, но все под под пристальным «вниманием» Рича Харриса.
Девять фреймворков были созданы для людей, семь, по всей видимости, для гномов. Ещё три фреймворка (react, vue, angular) были для эльфов.
После создания фреймворков и их имплементации в тысячи проектов, Рич Харрис самолично и тайно создал один фреймворк…
One framework to rule them all,
One framework to find them,
One framework to bring them all
And together bind them.
— The Lord of the Frameworks
Проблема
Уверен, многие из вас, кто всерьез и долго занимается фронтенд-разработкой, не раз сталкивались с проблемой выбора инструментов для вашего текущего и/или следующего проекта.
Многообразие всевозможных пакетов, утилит, китов, фреймворков, библиотек и других решений, зашкаливает как никогда ранее. А главное вся эта движуха продолжает ускоряться.
Все это, так или иначе, касается и выбора фреймворка. Наверное не ошибусь, если предположу, что лишь немногие современные команды и компании, начинают новые проекты без использования какого-либо js фреймворка. Конечно если речь идет о современных веб-приложениях, а не просто о веб-сайтах. И все бы ничего, если бы от этого не зависело так многое в вашем проекте.
Посудите сами, от выбранного вами фреймворка, во многом, зависит состав и характеристики команда, и уж точно сильно зависит весь процесс хантинга. Иногда от этого даже зависят бюджет и сроки. Короче бррр.
Но реальные проблемы начинаются, если где-нибудь в середине проекта, вы понимаете, что сделали не совсем верный выбор. Что-то не срослось и не закрутилось. Фреймворк потребовал немного больше времени на освоение, немного большей команды, оказался немного менее быстрым, немного не подошел вашим целям или стилю разработки и т.д. А самое главное теперь ваш проект на 100% завязан на этом фреймворке и вы не можете просто взять и переписать его на чем-то другом.
Еще более обидно, когда все же закончив проект успехом, вы понимаете, что в целом не очень то и довольны. И наверное, не хотели бы писать следующий проект на этом же фреймворке. А значит, все те «переиспользуемые» решения, к которым мы с вами стремимся, можно выкинуть в трубу.
Реально, черт с ним с бизнес-кодом, реализующим конкретную бизнес-задачу, работает и ладно. Но ведь вы написали такой классный «%вставить свое% с блекджеком и девушками с пониженной социальной ответственностью», и так хотели использовать его в следующем своем проекте, но эта зараза тесно завязана на текущем фреймворке от одного вида которого вас уже воротит.
Другая вариация этой же проблемы — представьте что вы крупная компания, по типу Яндекса. У вас хуилион проектов, даже таких о которых знают лишь некоторые сотрудники, и каждый проект уже испытал на себе все то, что я описал выше. Проблема в том, что все эти проекты сидят и ненавидят разные фреймворки, которые они выбрали изначально.
А тут еще ваше замечательное руководство, решило составить конкуренцию Google Material Design и отправить вас в крестовый поход на разношерстные интерфейсы ваших проектов дабы привести их к общему знаменателю. Ушлые дизайнеры уже рисуют новые кнопки и селекторы и строчат тысячи страниц гайдлайнов для нового единого UI-kit’а ваших компонентов. Ура товарищи!
Не жизнь, а сказка, правда? Осталось только придумать как бы так натянуть все эти новые компоненты на все те проекты, которые вы уже успели понаписать на всех возможных фреймворках. Если времени и денег реально много и есть эстетическое желание, а главное вера, в то что «все надо унифицировать», то можно посадить пару тройку десятков команд переписать все это снова, например на React. Это и правильно, потому что то унылое говно, на котором вы писали последние 2-3 года, уже морально устарело, а вот React будет вечен. Ну-ну)
Есть и другой путь. Можно написать чудесный новый UI-kit на одном фреймворке, создать как бы библиотеку переиспользуемых компонентов, а потом просто использовать этот UI-kit во всех своих проектах. Прикольно звучит? Конечно, но остается одна проблема — рантайм.
Если у вас проект написан на Angular (
500Kb), а UI-kit вы решили писать на React (
98Kb), то тащить в каждый проект на одном фреймворке, другой фреймворк, да еще с кучей зависимостей и сам UI-kit, прям скажем не выглядит оптимальным.
Решение
На помощью нам приходят те самые «исчезающие» фреймворки, без рантайма. Главное условие тут, чтобы они были максимально изолированные в плане своей экосистемы и имели механизмы внешней интеграции и соответствующие API.
Прекрасный пример такого фреймворка — SvelteJS, про который уже написано не мало статьей на Хабре.
Итак, представим ситуацию, что у нас есть приложение на React. Возможно он нам надоел, и мы хотим от него избавиться, но переписать все разом непозволительная роскошь. А может быть, некоторые части приложения требуют улучшения или рефакторинга. Ну или мы решили делать единую библиотеку компонентов, и поэтому теперь все компоненты будем писать на Svelte и использовать во всех проектах. Представили? Да конечно нет, ни у кого нет такой фантазии. Давайте лучше разберем на реальном примере.
Итак, задача внедрить в React приложение уже готовый Svelte-компонент, без изменения самого компонента и без накручивания дополнительного рантайма в приложение. Для примера, возьму компонент осуществляющий поиск по пользователям GitHub, который я писал для предыдущей статьи «Как сделать поиск пользователей по GitHub без React + RxJS 6 + Recompose».
Код этого компонента можно посмотреть в REPL, а код примера из данной статьи в репозиторий.
Create React App
Для начала создадим новый React проект, воспользовавшись де-факто стандартной тулзой — create-react-app:
Ок, если зайти на 3000-й порт, вроде бы работает.
Настраиваем Svelte
Если вы ничего не знаете о Svelte, то скажу так, в контексте задачи Svelte — это всего лишь еще один шаг вашего сборщика (webpack/rollup/gupl/grunt/etc), который позволит вам писать компоненты в формате SFC и компилировать их в vanilla javascript.
В сообществе Svelte больше предпочитают Rollup, что не мудрено, так как у них один автор — Рич Харрис. Однако, так как CRA использует webpack, то мы настроим Svelte через него. Для этого, сначала надо вынести конфиги webpack из react-scripts в проект, чтобы мы могли менять их. Делается это с помощью встроенной команды:
Насколько я знаю, это не кошерный подход, но для примера это наиболее удобный вариант.
Теперь, когда конфиги webpack в корне проекта, можно ставить Svelte:
Обратите внимание на флажок —save-dev, помните да, что рантайма-то нету.))))
Последний штрих, нужно подключить соответствующий лоадер в конфиги:
Вообще, в сообществе Svelte принято писать файлы компонентов с расширением .html, потому что компонент Svelte — это валидный HTML файл. Однако, чтобы избежать вероятных коллизий, в некоторых случаях, лучше использовать кастомный формат файла .svelte.
Так мы и сделали, теперь все файлы .svelte подключаемые в проект будут перехватываться этим лоадером и компилироваться Svelte.
Пишем компонент Svelte
Сперва лучше настроить редактор кода, например, чтобы он применял подсветку html-синтаксиса к файлам с соответствующим расширением. Примерно так это делается в VS Code:
В итоге должно получиться, что-то вроде этого:
Там же создаем файл index.js, в котором у нас будет располагаться код интеграции Svelte и React.
Интегрируем
Наверное, теперь вы хотите узнать в чем же магия? Магия в том, что всю магию мы уже с вами сделали. Магически, не правда ли?
Код интеграции может выглядеть например так:
Итого, мы просто обернули код нашего сложного Svelte компонента в очень простой компонент React, который просто создает новый экземпляр Svelte компонента, передавая при его создании элемент для монтирования и данные из пропсов. Кроме того, мы не забываем демонтировать Svelte компонент в хуке componentWillUnmount.
Единственное, что мы пока не сделали — не синхронизировали значения стейта компонентов. То есть, если вышестоящий компонент прокинул другие пропсы в компонент-обертку, то они должны примениться к Svelte компоненту. И наоборот, если данные были изменены внутри Svelte компонента, они должны быть прокинуты обратно.
Для этого, будем считать, что вышестоящий React компонент, будет передавать коллбек onChange, которую мы должны дергать, когда внутри происходят изменения, а изменения пропсов компонента-обертки будем ожидать в хуке componentWillReceiveProps. Давайте сделаем это:
Здесь мы использовали встроенное событие state, которое срабатывает каждый раз, когда стейт Svelte компонента меняется. В коллбек передается объект содержащий текущий стейт компонента (current), предыдущий стейт (previous) и список измененных свойcтв (changed). Соответственно, мы просто проверяем был ли изменен username и вызываем коллбек onChange, если это так.
В хуке componentWillReceiveProps мы устанавливаем новое значение username с помощью встроенного метода set().
Кроме встроенных, компоненты Svelte могут имплементировать кастомные события и методы. Именно эти приятные возможности позволяют описать интерфейс компонента и довольно удобно организовать коммуникацию с «внешним миром».
Используем
Теперь попробуем использовать наш виджет непосредственно в React приложении. Для этого отредактируем App.js файл, сгенерированный стартером:
Короче используем как обычный React компонент. И в результате получаем:
Уже не плохо, правда?) Обратите внимание, значение username, которое мы вводим в текстовое поле виджета сразу же пробрасывается наверх в React приложение.
Доработаем
Давайте теперь научим наш виджет искать и выводить не только карточку пользователя GitHub, но и карточку репозитория.
Во-первых, нужно создать новый компонент Repo.svelte, который как раз и будет отрисовывать карточку репозитория. Для простоты примера, я просто скопипастил шаблон и стили из User.svelte и адаптировал под данные репозитория. Однако, теоретически это отдельный компонент.
Далее, нужно научить управляющий компонент Widget.svelte переключать эти два вида карточек на лету. Кроме того, нужно научить его дергать разные запросы для пользователя и репозитория.
Мы будем использовать одно поле для ввода и определять тип данных по наличию «/» в значении. То есть, если нужно поискать пользователя, вводим его username, а если репозиторий, тогда вводим username пользователя, далее «/» и имя репозитория.
На первый взгляд выглядит довольно заморочено, но на Svelte решение займет буквально 5-6 строк кода. Для начала подключим новый компонент и метод API, который обернем в debounce:
Далее, создадим вычисляемое свойство, которое будет определять какой тип карточки мы должны показывать:
Теперь добавим переключалку запросов к API:
И напоследок, переключалка компонентов карточки в зависимости от типа:
Кроме того, чтобы динамически подменять компоненты, нам необходимо использовать специальный тэг Svelte, который отрисовывает тот компонент, значение которого передано в аттрибут this:
Работает. Обратили внимание? Мы уже пишем на Svelte внутри React приложения! )))
Теперь давайте, научим наш виджет скрывать поле для ввода и попробуем вводить username не внутри виджета, а внутри React приложения. Мало ли откуда наша бизнес-логика будет получать это значение.
Введем новое свойство search, значение по-умолчания которого будет false. В зависимости от этого свойства, будет отображаться или не отображаться поле для ввода. По-умолчанию, соответственно, поля не будет.
Теперь в App.js создадим поле для ввода на стороне React приложения и напишем соответствующую обработку события ввода:
А еще копипастим в папку с виджетом вот такой вот svg спиннер на Svelte:
И применим его в виджете, чтобы было совсем красиво:
По-моему, получилось очень даже не плохо:
Верхняя шапка с черным фоном и полем для ввода — это React приложение, белый блок снизу — Svelte виджет. Вот такие пироги. )))
Выводы
Svelte — отличный инструмент для разработки современных веб-приложений, основанных на компонентном подходе. Кроме того, на нем можно быстро и удобно писать переиспользуемые standalone UI компоненты и виджеты, которые могут быть использованы в любых веб-приложениях, даже совместно с другими фреймворками. Еще он прекрасно подходит для микрофронтендов.
Svelte прекрасно подойдет вам если:
UPDATE: спасибо justboris за правильный вопрос. Продолжая пример: