Что такое маленькое, а что побеждает гигантов?

Правильно, это Svelte! Позиционирует себя как Давид против Голиафов React, Vue.js и Angular.

Кстати: во время этого процесса я создал пакет npm под названием svelte-tour для обработки тура при первой загрузке. Он лицензирован MIT и сейчас доступен на npm.

На сайте Svelte у него есть такое навязчивое описание:

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

Я сразу хочу сказать, что у меня проблемы с этим списком. Я перейду к производительности немного позже, и небольшие пакеты действительно кажутся правдой, хотя я не уверен, применимо ли это к приложениям больших размеров. Однако доступность - большая претензия. Фреймворк не может этого гарантировать. Похоже, что это соответствует нынешней тенденции отмечать «доступность» на чем-либо в данный момент, чтобы это звучало безупречно. Мне еще предстоит определить какой-либо аспект Svelte, делающий его особенно доступным. А простота использования - это очень популярное мнение. Правда это или нет, но сообщество JS, похоже, еще не осознало этого. И тот факт, что это компилятор, не имеет значения сам по себе.

Во всяком случае, это небольшое замечание по поводу проекта.

Проэкт

Удивительно, как быстро мы можем создавать прототипы пользовательского интерфейса в наши дни. Я хотел создать крошечное приложение, чтобы объединить имена людей вместе, чтобы помочь моей команде познакомить мою команду с парным программированием, и я также хотел попробовать Svelte, так как его имя часто всплывало в течение последнего года или около того. Из этого вышла Пара-программист. Вы можете просмотреть исходный код здесь.

Парный программист представляет собой вечернюю работу, и я никогда раньше не использовал Svelte / Sapper или библиотеку Svelte Material UI.

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

Sapper - это фреймворк для Svelte. Подумайте Next.js для React или Nuxt.js для Vue.js. Он предоставляет SSR и другие функциональные возможности, ориентированные на приложения, из коробки.

Svelte

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

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

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

Я также ушел с ощущением, что окружающая экосистема еще не так развита, как для React. Мне было трудно найти ответы на некоторые из моих вопросов в гугле, и хотя есть библиотеки для таких вещей, как JSS, они не так хорошо документированы, как для других фреймворков. Это настоящий убийца; документация - это часто разница между фреймворком, который тонет, и фреймворком, который плывет. Этот аспект необходимо улучшить, если Svelte собирается бросить вызов «большой тройке».

Представление

Он оправдывает свое обещание с точки зрения производительности.

Оценка Google Lighthouse за производительность просто фантастическая. В таком крошечном и простом приложении, как это, я вижу надежный аргумент в пользу использования Svelte, в отличие от фреймворков «большой тройки», которые всегда имеют больший размер пакетов.

Государственное управление

Я придерживаюсь мнения, что управление государством - это скорее неизбежное зло, чем желаемое. По своей сути это глобальная переменная. Без него наш код становится связанным и многословным. Встроенный магазин Svelte мне кажется нормальным. Это довольно простая модель pub / sub. Изначально это могло бы вызвать проблемы для большого приложения, потому что им так легко манипулировать, но ничто не может помешать вам создать вокруг него рамку в стиле редукции, чтобы ограничить взаимодействие. Как и многое в программировании, это компромисс. Чем проще его использовать, тем легче злоупотреблять. Если вы возьмете леса вокруг него, как redux, он станет громоздким, но с тем преимуществом, что он станет более надежным и предсказуемым.

Тестирование

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

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

В настоящее время в тестировании пользовательского интерфейса доминируют две парадигмы. Одна из них - это пирамида тестов, которая гласит, что более детальные тесты (например, unit) запускаются быстрее, поэтому их должно быть больше. Другой - тестовый трофей, который утверждает, что пирамида тестов не учитывает дополнительную уверенность, которую дают вам более дорогие тесты (например, e2e). Я не буду здесь обсуждать это, но упомянул об этом, потому что не уверен, что идея Sapper заключается в том, чтобы охватить все испытания с E2E? Было бы мечтой сделать это таким образом для большинства сайтов (это, конечно, не годится для независимых многократно используемых фрагментов кода), но это кажется нереалистичным для реального приложения.

Как и в случае с парой других вещей, я обнаружил, что модульное тестирование немного сложно настроить из-за отсутствия документации и недостаточного количества обсуждений StackOverflow, к которым можно было бы вернуться. Хотя инструменты есть. Он может подключаться к Jest, а @ testing-library / svelte уже запущен.

Пакеты и упаковка

Как и ожидалось, для Svelte доступно меньше пакетов. Я обнаружил, что все ключевые базы охвачены. Команда предоставила фантастический шаблон компонента Svelte на GitHub. Я использовал это при создании svelte-tour, и с ним было просто и удобно работать.

Заключение

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

Попробуйте. Найдите небольшой - или побочный - проект, где вы сможете его использовать. Вы можете, как и я, найти это довольно милым. Но пока не привязывайте к нему свои важные производственные приложения (если только они не должны быть крошечными).

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

С точки зрения инвестиций в бизнес мне непонятно, кто поддерживает Svelte. Как и другие фреймворки, у него открытый исходный код, но там, где у React есть Facebook, а у Angular есть Google, а Vue.js - не «принадлежащий» компании - имеет интерес со стороны Microsoft, а Alibaba - Svelte. Если завтра появится новый JS-фреймворк - и давайте посмотрим правде в глаза, это не беспрецедентно - Svelte может уйти на второй план, не причинив слишком большого потрясения крупным компаниям.

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

Также я должен сказать, что ушел с довольно нежным чувством к нему. В этом есть что-то привлекательно сжатое и полезное.

Возможно, вывод здесь в том, что даже если он не станет мейнстримом, это нормально.

Он берет проблему и аккуратно ее решает. Не у всех есть эта проблема, но для тех, кто есть, Svelte - мощное оружие в арсенале.

Svelte Material UI

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

Всего наилучшего,

Ник