Пакет уведомлений на Svelte и сравнение с разработкой на React

Я увидел Svelte во время презентации третьей версии. Многие блоги написали тогда об этом и после волны хайпа я посмотрел выступления Рича Харриса и его мотивы и доводы в пользу разработки нового фреймворка показались мне убедительными. Я решил что буду изучать Svelte и попробую его в деле.

Не буду пересказывать информацию которую вы сможете найти в документации или из презентаций. Расскажу о своём опыте и впечатлениях о разработке проекта с одинаковой функциональностью на React и Svelte. Про этот проект я писал в предыдущей заметке, и если вы её пропустили, советую остановиться сейчас и прочитать для понимания контекста.

Идея проекта не претерпела изменений. Я по-прежнему хотел сделать инструмент который бы выступал в роли удобного транспорта для информации про уведомления и имел минимально необходимый набор возможностей для быстрого использования в проекте.

Я решил что не буду собирать проект с нуля и воспользуюсь репозиторием для разработки пакетов. Он не сильно упрощает старт, но когда вы начинаете изучать что-либо новое, любое готовое решение добавляет уверенности. В качестве сборщика используется Rollup и если вы настраивали Webpack на своих проектах, много нового вы не увидите.

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

В Svelte не будет столько свободы с runtime как в React. Везде, где код будет касаться динамических изменений, везде нужно будет использовать специальные конструкции которые будут указывать компилятору на это.

<script>
  let count = 0;
  $: doubled = count * 2; // выполняется в момент изменения значений внутри
</script>

// динамический компонент
<svelte:component this={selectedСomponent}/>

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

// React
const Context = React.createContext([{}, () => {}]);
<Context.Provider value={{}} />

const [context, setContext] = useContext(Context);

// Svelte
setContext(key, { context: () => map });

const { context } = getContext(contextKey);

В React я использовал методы компонента хранящиеся в контексте для того, чтобы управлять состоянием этого компонента, потому что не хотелось иметь дополнительную зависимость какого-либо store manager. В Svelte есть встроенный store который очень прост в использовании и добавляет достаточно мало кода в сборку.

const {
  subscribe,
  set,
  update,
} = writable([]);

const store = {
  subscribe,
  addNotification: notification => addNotification(notification, update),
  removeNotification: notificationId => removeNotification(notificationId, update),
  clearNotifications: () => clearNotifications(set),
};

В Svelte ты пишешь лаконичный код. Это связано по большей части с реактивностью, вернее с тем, как она обрабатывается компилятором.

<script>
  let phrase = 'Sample phrase';
</script>

<input bind:value={phrase} /> // автоматическая привязка значения

Сейчас идет работа над интеграцией фреймворка с TypeScript, но пока она не закончена, все преимущества типизации придётся реализовывать самому. У React есть PropTypes и Flow и хоть это и не покрывает все 100% кейсов, но даёт уверенность хотя бы во входящих данных.

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

svelte-notifications
Simple and flexible notifications system
Демо на Netlify
Сайт с примером работы системы уведомлений