От автора: каждый раз, когда на рынок выходит новый фреймворк (то есть JavaScript UI фреймворк), люди открыто задаются этим вопросом — «Зачем нам еще один фреймворк?». С определенной точки зрения это кажется логичным: экосистема JS уже переполнена фреймворками, и с увеличением их числа выбор становится все более трудным.
Но я склонен не соглашаться с таким мнением. Конечно, новый фреймворк означает еще один (казалось бы, ненужный) вариант выбора, и это стоит часов работы, которые можно было бы лучше использовать. Но, на самом деле, процесс принятия решений является частью всей нашей жизни, и выбор автора (или авторов) создать данный фреймворк, в первую очередь, принадлежит им и только им.
Помимо всего этого, каждый новый фреймворк имеет возможность, по крайней мере, небольшую, нарушить экосистему JS — довольно болезненный, но необходимый процесс для ее продвижения вперед. И даже если он не станет «следующим React», он наверняка послужит вдохновением для будущих разработчиков при создания еще более впечатляющих инструментов. Вот почему дела обстоят так. Неостановимый цикл — тот, который не может быть остановлен вопрос «Зачем нам нужен еще один фреймворк?»
Но вернемся к нашей теме, поскольку в этом посте я хочу немного рассказать о таком «настырном фреймворке», которым сейчас является Svelte. Если вы внимательно следите за миром веб-разработки, вы, возможно, знаете, что это относительно новый игрок на рынке фреймворков. С учетом сказанного, еще более удивительно, что его сравнивают с «отраслевыми стандартами», такими как React, Vue и Angular. Но почему это так, и есть ли какой-то рецепт для успешного фреймворка? Вот это мы сегодня и попытаемся выяснить!
Svelte
Давайте начнем с краткого обзора, что такое Svelte и почему он такой особенный. Я уже немного рассказал об этом в своем посте, посвященном прогнозам веб-разработки на 2020 год, но он заслуживает гораздо большего внимания.
В качестве забавного факта, о котором вы, возможно, уже знаете, svelte — это не случайное слово, а реальное прилагательное для описания элегантного человека! Я думаю, что это хорошо представляет природу Svelte как фреймворка, или, правильнее сказать, компилятора. Потому что Svelte отличает от всех других сред дополнительный этап компиляции, который обрабатывает приложение Svelte для получения более компактных и оптимизированных по производительности результатов.
Производительность
Но для того, чтобы дать вам что-то большее, чем просто голословные заявления, давайте рассмотрим работу Svelte немного подробнее.
Размер
Возможно, вы знаете, что эмпирическое правило — чем меньше кодовая база, тем она эффективнее и производительнее. Я думаю, что пара React и Preact является прекрасным примером этого. Preact (без уровня совместимости) имеет размер около 9,6 КБ, а React (с необходимым добавлением React DOM) — ошеломляющие 121 КБ! Имейте в виду, что указанные числа не учитывают сжатие Gzip, поскольку это не будет отражать фактический размер исполняемого кода. В случае Svelte гораздо сложнее определить реальный размер кодовой базы. Поскольку Svelte использует компиляцию, у него есть «несправедливое» преимущество по сравнению с более традиционными средами. Результирующий код по-прежнему использует функциональные возможности, предоставляемые самим Svelte, но компилятор может оптимизировать их использование. Например, он не должен включать механизм перехода, если вы его не используете.
Все это позволяет простому приложению Svelte иметь размер всего 2,95 КБ. Даже если учесть все функции, которые могут быть добавлены, такой маленький размер очень впечатляет! Кроме того, возможность выбирать нужные функции может считаться только преимуществом!
В любом случае, мы до сих пор не говорили об основном — о tree-shaking. Но я думаю, что все, кто имел с этим дело раньше, знают, насколько разными могут быть результаты. «Тree-shakability» кода варьируется, как и результат этого вида оптимизации. И даже если это оптимизирует размер пакета, ничто не мешает вам использовать его с Svelte и сэкономить еще больше ценных КБ! Я уже говорил вам, что Svelte прекрасно работает с Rollup (упаковщик с поддержкой tree-shaking)?
Бэнчмарк
Итак, у нас есть несколько действительно хороших показателей размера, но как они преобразуются в реальную производительность? Честно говоря, я не могу сказать. Большинство современных фреймворков настолько быстры, что, как правило, узкие места возникают не из-за них. Таким образом, мы можем использовать только искусственный бэнчмарк, чтобы хоть немного понять, что происходит. Я нашел хороший тест, который включает рендеринг большой таблицы (1.000 и 10.000 строк), и уже охватывает множество различных фреймворков. Если вам интересно, его исходный код доступен на GitHub.
Таким образом, в этом конкретном тесте, при рассмотрении только ключевых реализаций (тех, которые используют ключи при рендеринге данных массива), Svelte (v3.5.1) оценивается довольно высоко — выше, чем 3 самых популярных фреймворка. Но, что также очень важно, это тот факт, что некоторые фреймворки даже быстрее, чем Svelte, и не используют никаких методов компиляции. Одна вещь, которая привлекла мое внимание, — это библиотека hyperHTML — не только из-за моего предыдущего опыта работы с ней, но и потому, что она превосходит Svelte без использования предварительной обработки. Если вам интересна эта компактная библиотека и ее уникальное использование теговых литералов шаблонов, вам стоит познакомиться с ней!
Опять же, рендеринг большой таблицы не обязательно является лучшим способом определения производительности в реальном мире. Однако это дает нам представление о том, как разные инструменты сравниваются в более стандартизированном сценарии. Важно не принимать ложное понимание, что это «всегда лучше». Это может быть правдой во многих случаях, но определенно не всегда.
Магия предварительной обработки
Ну, и собственно о процессе компиляции. Я думаю, вы согласитесь со мной, что это уникальная особенность Svelte, которая отличает его от остальной части современных фреймворков. Конечно, возможно, некоторые другие фреймворки, которые использовались до того, применяли аналогичную технику, но они либо недостаточно освещались, либо сами фреймворки просто не получили достаточной популярности.
Мысль, которую я подчеркиваю, заключается в том, насколько важно обладать уникальной функцией в современных «войнах фреймворков». Я думаю, что ни один клон React, каким бы хорошим он ни был, никогда не превзойдет React с точки зрения популярности и использования. Быть уникальным очень важно в современном мире — мире, в котором многое уже сделано.
Но компиляция или предварительная обработка, как я люблю ее называть, не является чем-то новым. Однако способ, которым Svelte представил его более широкому сообществу веб-разработчиков, был действительно инновационным. В ближайшем будущем, когда эта концепция получит большую популярность (а она определенно получит), я мог бы представить Svelte (или какую-то другую, в настоящее время несуществующую среду) лидирующим как в аспекте технологии компиляции, так и в аспектах непревзойденной производительности и эффективности.
Маркетинг
Но кроме инноваций, есть еще одна вещь, которая важна для создания успешного фреймворка — та, которой большинству ее конечных пользователей, скорее всего, не очень понравится — маркетинг. Вы знаете фразу «если вы напишите это, они придут» (или что-то в этом роде). К сожалению, с нынешним размером экосистемы с открытым исходным кодом, она больше не работает.
Важные детали
Сейчас я не говорю о рекламе фреймворка или о том, чтобы рассматривать его как платный продукт — нет. В случае ПО с открытым исходным кодом это больше вопрос социальной активности, отличного логотипа, файла README, полной документации и тому подобного. Если вы просто разместите свою великолепную новую библиотеку публично на GitHub, не продвигая ее никак, держу пари, что мало кто даже заметит ее. Но если вы поделитесь своим новым творением и людям оно понравится, велика вероятность, что они будут делиться им все дальше и дальше. А потом такие люди, как я, напишут то, что вы читаете, и вы еще больше увлечетесь этой концепцией, вплоть до того момента, когда вы наконец-то решите ее использовать. 
Это всего лишь довольно простой механизм, но его действительно трудно правильно использовать в полной мере.
Но вернемся к Svelte. Если вы видели его до того, как он «набрал популярность», вы должны знать, что у него не всегда был такой же красивый логотип или целевая страница, как сейчас. Конечно, некоторые люди знают, что внешность — это не то, что на самом деле следует оценивать, но я думаю, что все согласятся с тем, насколько важны первые впечатления, верно? Кстати, если вам интересна визуальная идентичность Svelte, я рекомендую ознакомиться с этим диспутом, где рассматриваются некоторыми по-настоящему интересные концепции и процессы, стоящим за его нынешним видом.
Вирусные слова
Но кроме визуальных элементов, есть еще одна часть маркетинга ПО с открытым исходным кодом, которая еще менее нравится публике — так называемые вирусные слова. Вы наверняка видели их раньше — «реактивный», «прогрессивный», «сверкающий» или, в случае с Svelte — «кибернетически улучшенный» (ранее «магически исчезающий» или что-то в этом роде). Очевидно, что все эти и подобные слова должны что-то указывать, но их реальная цель — просто заинтересовать вас тем, что они могут предложить. Знаете, это действительно забавно — люди всегда жалуются на то, что им не нравятся все эти броские фразы, и, тем не менее, их внимание обычно не привлекают продукты, которые их не используют.
Еще более интересно то, что слоган Svelte «кибернетически улучшенный» служит еще одной цели — генерации ключевых слов. Оно превратилось в ключевое слово, которое теперь тесно связано с фреймворком — даже если изначально не предназначалось для этого. Просто вбейте в поиск «кибернетически улучшенный». Вы можете подумать, что получите каких-то киборгов, роботов и протезы, но вместо этого вы увидите первым результатом Svelte! Довольно забавно, но и очень хорошо для SEO!
Что для этого потребуется?
Итак, чтобы подвести итог всему тому, что мы обсудили, давайте ответим на наш изначальный вопрос — что нужно для создания успешного фреймворка?
Что ж, хорошая идея и немного энтузиазма — это неплохо для начала. Но позже, чтобы это сработало, у вас должна быть хорошая маркетинговая стратегия — логотип, целевая страница, охват в социальных сетях и, конечно, вирусная фраза. Если у вас есть все это, вы можете ожидать, что ваш проект будет быстро развиваться, особенно если вы добавите в него некоторые уникальные функции и инновационные решения.
Естественно, это легче сказать, чем сделать. Но, как оказалось, это возможно, и Svelte — свежий пример этого. С его уникальным использованием предварительной обработки, запоминающимся слоганом, красивым логотипом и визуальными элементами (после редизайна), документацией и растущим сообществом, кажется, Svelte ждет светлое будущее!
Ваши соображения?
Но что думаете по этому поводу вы? Считаете ли вы, что это полезно создавать «еще один фреймворк»? И если да, то как это сделать? Я хотел бы увидеть ваше мнение в разделе комментариев ниже. Кроме того, дайте мне знать, если вы хотите увидеть более практичный контент по Svelte!
Автор: Areknawo
Источник: https://areknawo.com
Редакция: Команда webformyself.