Svelte – магически исчезающий UI фреймворк – Интервью с Ричем Харрисом

Если jQuery дал нам контроль над DOM, React сделал центром внимания компоненты, что же дальше? Svelte от Рича Харриса может быть ортветом на этот вопрос. Вы можете помнить его по таким инструментам как Bublé и Rollup. Читайте дальше и узнаете что такое Svelte.

Вы можете рассказать немного о себе?

Я интерактивный редактор theguardian.com, которая располагается в Нью-Йорке. Мое прошлое – это журналистика, и моя повседневная работа заключается в поиске новых способов использования веб технологий в журналистике. Ключевой частью этой работы является создание срудств, которые нам нужны для создания насыщенных и эффективных приложений в сжатые сроки.

Как вы можете описать Svelte для того, кто ни разу о нем не слышал?

На одном уровне, Svelte это UI фреймворк – если вы слышали о инструментах вроде React, Vue или Ractive, то он решаеть те же проблемы.Он позволяет построить приложение в декларативном стиле, который базируется на использовании компонентов, а не на создании еще одной обертки над классическим DOM.

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

Как Svelte работает?

Не так магический как это звучит. Вы пишете компонент в HTML файле, который опционально может включать в себя элементы <style>  и <script> для отделения CSS  от поведения. Синтаксис темплейта Svelte требует несколько минут для изучения.

Эти файлы компонента преобразуются в модули с помощью специального компилятора, который использует командную строку или один из build инструиментов. Эти модули содержат то, что вы можете называет «vanilla JS» - низкоуровневые операции над DOM, специфичные для вашего приложения – имеется ввиду здесь нету байндинга или изменения DOM или каких либо прочих трюков для отрисовки вашего UI.

HelloWorld.html

<h1>Hello {{name}}</h1>

app.js

import HelloWorld from './HelloWorld.html';

var app = new HelloWorld({

  target: document.querySelector('main'),

  data: {

    name: 'world'

  }

});

app.set({ name: 'SurviveJS' });

Как Svelte отличается от других решений?

Для конечного пользователя, самое больше отличие – это скорость. Svelte легче и быстрее чем альтернативные решения, потому что браузеру требуется делать намного меньше работы (скоро будут и бенчмарки). Наша реализация TodoMVC – 3.6kB в сжатом виде – это очеть немного.

Для разработчика, преимущества более субъективны. Svelte имеет очень простой API и он разработан что бы вести себя очень предсказуемо – например обновление DOM проходит синхронно вне зависимости от изменения данных. Есть также некоторые мозможности увеличивающие производительность, позаимствованные у Ractive, такие как стили ограниченные областью видимости и вычисляемые свойства.

Одной из прекрасных возможностей предоставляемых подходом Svelte – это то что его очень легко и адаптировать постепенно, без неоходиости глобальных этапов переделки существующего кода. Обычно если вы хотите перейти с одного фреймворка на другой – нужен какой то переходный пероид, в течение которого ваше приложение будет зависеть от двух ферймворков – это ужасно.

Вы принимали участие в разработке Svelte?

К сожалению, только частично. Сообщество JS стало гиперчувствительно за последние два-три месяца о стоимости поставки слишком большого количества – речь идет не только о времени загрузки, а также о времени parse/eval, которые на мобльных платформах имеют большое влияние для большого количества людей. Как создатель Ractive, я невольно вносил свой вклад в проблему, как и любой другой автор фреймворка.

Как только у меня появилась идея Svelte – «что если бы структура была бы всего навсего компилятором?» - я больше не мог спать, пока не написалпервое доказательство моей концепции. Я не думаю что когда-нибудь еще я был в таком восторге от моего проекта.

Что дальше?

По прежнему нужно сделать еще очень много работы – рендеринг на стороне сервера, прогрессивные улучшения, переходы, маршрутизация, а также вся документация и примеры для всей логики. Мы будем заняты в ближайшие несколько недель.

Я особенно заинтересован в изучении нескольких областей, которые открывает Svelte – статический анализ CSS в контексте разметки, к которой он присоединен, и компонент  редактирования WYSIWYG, который позволит создавать независимые виджеты и приложения. Я думаю что нас ждут большие возможности которые действительно станут практичными, когда у вас будет нулевой фреймворк и компоненты построенные на темплейтах.

Какое будущее вы видите для Svelte и для веб разработки вцелом? Вы видите какие то сформированные тренды?

Что делает Svelte – это пример компиляции «впереди-времени», или сокращенно ВВ (Это не единственный фреймворк ВВ – Angular 2 использует подобную технику, хотя насколько я знаю Svelte первым до этого додумался). Я видел большой интерес к ВВ и я думаю что здесь есть много нераскрытой территории, и не только в UI. Я рад видеть как это развивается.

Много людей спрашивает меня, можно ли использовать методы Svelte в JSX. К сожалению авторы других фреймворков пришли к тому же решению, к которому пришел и я – поскольку JSX это «просто JavaScript», и ни один компилятор не может иметь никаких гарантий относительно формы вашего приложения, то есть всегда должен быть некоторый процесс согласования во время выполнения. Поэтому я считаю, что мы вскоре увидим возрождение интереса к построению приложений без использования JSX.

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

Если вы пытаетесь изучить процесс веб разработки только читая веб блоги посвященные новым технологиям – вы погрязнете в информации. Вместо этого, найдите кого-нибудь кто продвинулся дальше вас и подружитесь с ним. Пишите плохой код – поломайте его каким нибудь способом – и попросите о помощи. В результате вы оба станете лучшими программистами.

У кого следующего нужно взять интервью?

Доминик Ганнавей – авто Инферно, который возможно является самым быстрым UI фреймворком в мире. По крайней мере пока Svelte не догонит его. 

Выводы

Спасибо за интервью Рич! Было интересно посмотреть, как изенение аксиом и идентификация реальных проблем может привести к новым решениям, которые изменяют способ мышления в веб разработке. Здесь всегда найдется место для инноваций.
Вы можете больше узнать о Svelte на персональном сайте. Также обратите внимание на REPL, который вы можете использовать для ознакомления с синтаксисом. Также поставьте звезду проекту – все любят звезды.
 

Источник: https://survivejs.com/blog/svelte-interview/