Обзор перспективного фреймворка

Примечание 1. Доступна французская версия этой статьи.

С момента выхода его версии 3 в апреле 2019 года о фреймворке Svelte все чаще говорят. Из-за своей легкости и несовпадения подхода с основными фреймворками, такими как React или Angular, восходящая звезда, разработанная Ричем Харрисом, обещает вам простоту и скорость для лучшего взаимодействия с пользователем и разработчиком. А вас соблазнит Svelte.js?

Примечание 2: эта статья посвящена нетехнической стороне Svelte.js. Чтобы узнать больше о технических моментах, вы можете обратиться к Svelte Crash Course или к моему Poc приложения Pomodoro (ссылки в конце статьи).

Немного истории для начала

Рич Харрис, ведущий разработчик New York Times, в своем стремлении к производительности и удобству для пользователей после твита Майка Тейлора, опубликованного в 2012 году, наконец, понял, что удаление JPEG для экономии времени загрузки не эквивалентно удалению тот же размер JavaScript.

Поэтому в 2016 году он начал небольшой эксперимент. Его идея: написать компилятор JavaScript, который бы производил качественный код, был бы как можно более легким и без абстракции DOM, для сверхбыстрой загрузки и очень высокой производительности. Все идет очень быстро. В середине ноября 2016 года он совершил свой первый коммит; четыре дня спустя доступна первая бета-версия, а через десять дней после нее, 26 ноября 2016 года, он опубликовал первую статью в блоге, подробно описывающую его концепцию: родился Svelte. Версия 1.0.0 появится через три дня после этого поста. Затем, во время большой очистки, в апреле 2018 года была выпущена версия 2.0.0, а год спустя, в апреле 2019 года, полная переработка позволила выпустить версию 3.0.0.

Именно с этой версией 3.0.0 Svelte.js начинает приобретать все большее значение, о нем говорят и постепенно инициируют фундаментальные изменения в мире JavaScript.

Но тогда это фреймворк или компилятор?

Хороший вопрос. На самом деле, это что-то среднее, по крайней мере, по сравнению с популярным в настоящее время определением технической основы.

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

Однако у Svelte есть собственный синтаксис, который, безусловно, вызвал некоторую иронию в Twitter с сатирической идеей SvelteScript, запущенной Эваном Ю, создателем Vue.js. Но этот код Svelte затем компилируется Svelte в ванильный JavaScript (что, следовательно, делает его компилятором). Словом, Svelte на границе.

Хорошо, но как Svelte может быть интересным?

Самым большим преимуществом Svelte является, как следует из названия, очень низкий вес приложения при компиляции, что обещает скорость загрузки, которую невозможно достичь с такими фреймворками, как Angular, Vue.js или React, которые дополнительно встраивают среду выполнения. к логическому коду приложения. Со Svelte у вас есть только код с нужным количеством Svelte, поэтому вы не перегружаете шкалу.

Однако Svelte также быстр во время выполнения. В самом деле, он компилирует ваш код, чтобы сделать что-то, вероятно, намного более оптимизированное, чем то, что вы бы сделали в одиночку на своей стороне (при этом ваши исходные файлы кода Svelte отлично читаются и обслуживаются) и особенно: у него нет виртуального DOM, и это один меньше слоя для запуска, чтобы отразить изменение на странице.

Затем, как я упоминал в предыдущем абзаце, Svelte предоставляет более читаемый и поддерживаемый компонентно-ориентированный код. Почему? Во-первых, потому что вы группируете все, что связано с компонентом, в одном файле: логику (JavaScript), структуру (HTML) и стиль (CSS) - все идет туда! А во-вторых, потому что философия Svelte побуждает писать код максимально кратким и легким для понимания.

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

Это все хорошо, но у вашего чудо-продукта есть недостатки, верно?

Да, в жизни нет ничего идеального. Прежде всего, большую озабоченность вызывает его несовместимость с TypeScript (мой любимый язык, если мне больно!). Тем не менее, сообщество так просит об этом, что Рич Харрис планировал интегрировать это в свои будущие разработки, и некоторые участники взяли на себя эту проблему и начали пытаться совместить их в экспериментальных проектах.

[Edit 08/07/2020: Svelte наконец-то официально совместим с TypeScript!]

Тогда мы должны признать, что сообщество Svelte менее важно, чем сообщество Angular, React или Vue.js. Это не кажется таким уж большим, но выходить из ловушки, находить уже созданные плагины или компоненты или иметь ресурсы для прогресса - это не очень приятно.

Наконец, синтаксис может сбивать с толку поклонников более классических фреймворков.

Чего нам ожидать от Svelte в будущем?

На мой взгляд, будущее Svelte - это, прежде всего, большая зрелость, большее сообщество и более доступные ресурсы.

Но конкретно, некоторые направления работы уже определены, а по некоторым даже начаты.

Во-первых, Рич Харрис начал интегрировать веб-доступность, чтобы не сильно повредить различным ограниченным возможностям при посещении приложения, созданного с помощью Svelte (которое, кстати, улучшает SEO). Но он также попросил помощи у сообщества для других крупных проектов: интернационализации (существуют некоторые общественные проекты); интерфейс командной строки или CLI на жаргоне, например Angular CLI или create-response-app; совместимость с RxJS; или, как было сказано ранее, интеграция TypeScript.

Наконец, несколько экзотических проектов выводят Svelte за рамки классического веб-приложения. Мы можем перечислить некоторые из них:

  • Svelte Native, попытка запустить приложения Svelte на смартфоне с использованием NativeScript для использования, близкого к Ionic или React Native.
  • Sapper, производный фреймворк с использованием Svelte с рендерингом на стороне сервера.
  • GL, эксперимент по использованию WebGL в Svelte

Идти дальше

Чтобы изучить тему более глубоко, вы можете использовать некоторые из этих интересных ссылок:

И некоторые франкоязычные ресурсы:

  • [FR] Конференция Алексиса Джакоми на DevFest Nantes 2019, более ориентированная на Data Viz: видео, слайды. Я очень рекомендую это.
  • [FR] Краткое вступление канала Dev Theory: video
  • [FR] Zenika RemoteClazz больше похож на мою точку зрения: видео. Я рекомендую.

Заключение

Таким образом, Svelte.js становится все более популярным, но еще молодым и не полностью зрелым фреймворком, который открыт для внесения вклада и предлагает легкость, простоту и производительность.

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

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

А вы соблазнитесь?