Это первая из серии статей, в которых рассказывается, что делает Svelte (по-настоящему) каркасом, меняющим правила игры для вашего текущего проекта. [Обновление: Svelte 3 был выпущен недавно, поэтому эта статья была обновлена, чтобы отразить последние изменения. Кроме того, если вы хотите быстро разобраться в том, что делает Svelte лучшим фреймворком, ознакомьтесь с умопомрачительными словами Рича Харриса YGLF« Переосмысление реактивности и сопутствующим сообщением в блоге ].
tl;dr
Svelte, вундеркиндский JavaScript-фреймворк, похожий на React и Vue, вводит во вселенную JavaScript действительно революционные функции. Из уважения к конечному разработчику Svelte более строго придерживается собственных HTML API (читайте: без JSX). Однако, поскольку Svelte является компилятором, он может быть намного мощнее своих предшественников, более производительным, гибким, лучше упакованным и (почти парадоксально) предлагать гораздо больше сразу из коробки как с точки зрения функций, так и с точки зрения опыта разработчика.
Но сначала давайте поговорим об онтологии ...
Где сегодня JavaScript?
Недавно Майкл Джексон из React lore заявил, что React должен быть встроен в этот долбаный браузер, положив начало цепочке буквальных за и против ответов на подобные вещи. Он пояснил: [давайте]« создадим эквивалентные нативные API . Теоретически (не обязательно условно) полностью согласен.
Но здесь возникает более серьезный вопрос. Разве эти API еще не существуют?
В каком-то смысле да, а в другом - нет. Сила современных фреймворков - это волшебный клей, скрепляющий эти API, современный jQuery для API, если хотите. Отсутствие соуса, которое делает Интернет более мощным и упрощающим работу разработчикам. По общему мнению, современные фреймворки, такие как React, - это tour de force. Они напрямую решают «проблему», так сказать, с помощью соглашений браузера. В этом отношении Джексон полностью придерживается точки зрения. То есть HTML действительно не хватает универсальной основы.
В какой-то момент, например, с jQuery, мы захотим начать удаление этих фреймворков из тегов <script/>
и начать использовать собственные API, потому что в браузерах что-то встроено. По сути, большая часть этой «усталости от YavaScript» уйдет в прошлое. И, возможно, это уже происходит -
- в некотором смысле прекращение оттока JS началось, а люди даже не заметили этого. Разработчики сплотились вокруг нескольких установленных фреймворков, устремились в Твиттер, проповедовали (иногда до ошибки) и так далее. И дьявол любых новых соглашений фреймворка HTML API кроется в деталях. Вот проблема, по которой разные сообщества, вероятно, будут сильно расходиться во мнениях, потому что детали реализации, скажем, между фреймворками Angular, Vue и React действительно сильно различаются.
Решение, основанное на действующих стандартах: Svelte
Итак, оставим монолог в сторону, зачем останавливаться и болтать о YetAnotherLibrary ™? Потому что, несмотря на все достижения, Svelte представляет несколько действительно потрясающих революционных функций, одновременно с продвижением текущих API.
Позвольте мне остановиться и повторить это еще раз, потому что это чертовски важно и действительно делает Svelte лидером среди всех фреймворков. Svelte действительно меняет правила игры, потому что он тратит очень много энергии, не пытаясь изобрести колесо, а, скорее, работает с потоком существующих API. Сила этой условности невозможно переоценить, и, пока вы не попробуете работать с чем-то, что кажется таким естественным (одно из последствий движения по течению), вы не знаете, чего вам не хватает.
Другими словами, в Svelte есть еще что-то (определенно) волшебное. Но вместо того, чтобы полностью изобретать колесо, что является частью его raison d'etre, Svelte явно предлагает вам работать с обычным ванильным JavaScript, CSS и HTML с небольшим HTML-совместимым синтаксисом. ».
В этом заключается великая и блестящая миссия Svelte. Работайте с зерном того, что существует, и это продвинет всех нас намного дальше. С практической точки зрения это в конечном итоге означает разработку меньшего количества API-интерфейсов и переход к грандиозному видению будущего в виде фреймворка в браузере.
Работа с зерном
Есть еще одна причина, по которой вы можете и должны начать использовать Svelte прямо сейчас: в любом проекте. Svelte связывает автономные компоненты, не включая скрипт фреймворка в качестве зависимости. Это может быть трудно понять, пока вы не поймете, что Svelte - компилятор; это только каркас в процессе сборки. Svelte компилирует код, а это означает, что конечным результатом будут крошечные и производительные компоненты, крошечные процессы, предназначенные для выполнения именно того, для чего вы их создали; Не больше, не меньше.
Так что это значит? Поскольку конечный результат такой легкий и производительный, вы можете легко объединить его с другими проектами.
У вас есть огромное приложение с большим количеством устаревшего кода, который нужно заменить? Svelte идеально подходит для этого. Вы можете поменять местами на ходу и не беспокоиться о том, чтобы объединить большую библиотеку 100k +, чтобы получить все необходимые функции. Вы можете поменять отдельные компоненты почти бесплатно (или, с точки зрения наследия, с меньшими затратами), чем это потребовалось бы, чтобы перестроить что-то с нуля в другой структуре с немного большей жесткостью в том, как это позволяет вам собирать вещи вместе. .
Уже используете React или Vue? Без проблем. Svelte отлично подходит. Просто используйте Svelte, как обычно. Со временем вы можете обнаружить, что захотите полностью заменить другой фреймворк, но вы не обязаны сразу же делать это, потому что Svelte просто делает то, что вы хотите, на уровне компонентов.
По сути, поскольку Svelte пытался обойти существующую экосистему, удивительно, он очень хорошо вписывается в существующую экосистему. С одной стороны, программирование в Svelte кажется легким. Чувствуешь себя сильным. Это похоже на игру с полным набором лучших конструкторов Lego в мире. И это почти как те legos, уже существующие, потому что, ну, эти стандарты в основном уже существуют.
Основополагающая правда
Изначально я планировал написать серию статей с изложением дополнительных основных причин использования Svelte. Это настолько хорошо продуманная библиотека и экосистема, что есть о чем поговорить. Но с тех пор, как я впервые написал эту статью, сообщество написало официальное руководство, в котором рассказывается обо всем, что вам нужно. Вы заметите, что в этом руководстве вы можете писать код в реальном времени, благодаря одному из наиболее охраняемых секретов Интернета, Svelte REPL.
А пока, на случай, если я не дойду до других постов, вот пять простых примеров, из которых можно извлечь:
- Как указано выше, Svelte - это фреймворк, который лучше всего соответствует API Интернета. Он старается придерживаться стандарта и на самом деле опирается только на то, что существует, не изобретает ничего нового, как JSX.
- Наряду с пунктом 1, поскольку Svelte следует за Интернетом, изучать Svelte до смешного легко. На то, чтобы разобраться, требуется не более 5 минут, и не более часа или около того, чтобы полностью начать работу.
- Производительность на высоте - Svelte часто опережает другие фреймворки по скорости пользовательского интерфейса и JS. И он все чаще используется в производстве на различных популярных и тяговых сайтах.
- Это «исчезающая рамка». Эта функция, вероятно, является величайшим нововведением Svelte, и каждый фреймворк должен (и многие пытаются) принять ее. Нет клиентских зависимостей. Пшик. Никто. Просто конец JS самого компонента.
- Что означает: добавление компонентов - да, это действительно может быть использовано в любом проекте! Сейчас!
… Я сказал 5 основных причин? Вот еще несколько, чтобы подогреть аппетит… - Как и в других известных фреймворках, Svelte использует однофайловые компоненты для упорядочивания вещей.
- Нестандартные стили с ограниченными возможностями. Больше не нужно беспокоиться о хаотических каскадных стилях. Все привязано непосредственно к компоненту.
- Svelte отказывается от устаревших браузеров, но также имеет простой подход к работе с устаревшими браузерами, если это необходимо.
- Миссия Svelte - поставить конечного пользователя выше разработчика. Это означает, что, как упоминалось выше, все написано на собственном HTML, CSS и JavaScript. Никаких странных гибридных приложений. С этической точки зрения, средний HTML-гражданин (люди, не являющиеся инженерами, но все же нуждающиеся в написании кода) может понять Svelte. Это также означает, что размеры загружаемых файлов значительно уменьшаются как в малых, так и в крупных проектах, но, что не менее важно:
- Благодаря соблюдению существующих стандартов опыт разработчиков действительно замечательный. Лего идеально подходят.
- Svelte может быть единственным фреймворком JavaScript, который предупредит вас, если вы пропустили какой-то стандарт доступности. Как? Потому что это компилятор, и он может делать множество вещей, которых не могут сделать некомпиляторные фреймворки.
- Это просто шутка: Svelte может полностью изменить ландшафт WebGL в будущем. Хотите узнать больше? Заходите на канал Discord и спрашивайте, участвуйте, вносите свой вклад и т. Д. И т. Д.