Эта история началась, когда я столкнулся с проблемой создания веб-приложения, которое могло бы обрабатывать большие объемы динамических данных и представлять их во множестве визуализаций данных, которые должны были реагировать на изменения в фильтрах. Конечно, глагол «реагировать» заставил меня сразу же поверить в то, что React JS был решением этой проблемы, и в основном так оно и было. React обрабатывал реактивность (или то, что я считал реактивностью в то время), а Redux занимался хранением и обработкой данных. Все было отлично, кроме одного. Производительность манипулирования этими большими наборами данных на стороне клиента была невысокой.

В кроличью нору

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

Входит Svelte.

Я случайно заглянул в Твиттер, как обычно, ежедневно, и увидел твит об этом новом фреймворке под названием Svelte. Сначала я подумал: Не другой фреймворк…, но при ближайшем рассмотрении я вообще не поверил, что это фреймворк. Svelte - это, по сути, компилятор для Интернета. Он предлагает многие из тех же функций, которые вы найдете в популярных фреймворках, таких как React / Angular / Vue / Elm, но вместо того, чтобы отправлять большую виртуальную реализацию DOM клиенту, он создает самодостаточные компоненты на этапе компиляции / сборки, которые обладают реактивностью. встроены в них. Для меня это гениально и имеет смысл.

К чему приводит этот этап компиляции? Как насчет гораздо меньших пакетов, отправляемых в браузер, гораздо более быстрого интерактивного взаимодействия (TTI) и опыта разработки, который приводит к меньшему количеству строк кода, написанных для достижения тех же результатов. Что тут не нравится?

Еще одно поразительное различие между Svelte и всеми другими крупными игроками заключается в том, насколько легко вырасти, если вы уже знаете немного HTML, CSS и даже минимальный JavaScript. Сам по себе Svelte выглядит как супернабор HTML, и если вы работали с React / Angular / Vue, то время нарастания еще меньше!

Но не забирайте Svelte ...

Svelte сам по себе великолепен, но я также умоляю вас проверить их клон Next.js под названием Sapper. По сути, это Next.js + Gatsby в одном. Из этого вы можете получить PWA, статически сгенерированный сайт или сайт с рендерингом на стороне сервера - осмелюсь сказать, фреймворк. На мой взгляд, если вы собираетесь развиваться в Svelte, то обязательно делайте это и в Sapper. Слишком много плюсов, чтобы не использовать Sapper. Вы получаете разделение кода, сервис-воркеров, маршрутизацию и многое другое практически бесплатно.

Заключение

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

Нет лучшего способа поддержать @sveltejs, чем создавать на его основе что-нибудь, а потом чертовски твитнуть. Давайте построим это сообщество!

Https://twitter.com/raymondsiu/status/1167247496869027840?s=20