Личный опыт: как я впервые попробовал Svelte

Рассказываю о своих впечатлениях после использования JS-фреймворка Svelte.

Почему Svelte?

Знакомство с JavaScript-фреймворком Svelte началось с просьбы автоматизировать создание однотипных договоров. Фреймворк дружелюбен к новичкам и отлично подходил под задачу. Мне достаточно было создать форму и подставить данные из нее в нужные части договора, а реактивность и двустороннее связывание, которые обеспечавает Svelte, сильно упростили бы мне жизнь.

Отмечу, что Svelte — первый JS-фреймворк, который я решил попробовать.

Знакомство

С чего начинается знакомство с любым фреймворком? Разумеется, с чтения документации. Поэтому первым делом я посетил сайт Svelte, где кроме документации есть учебник на русском языке.

Изучив все материалы, я приступил к своему проекту.

Настройка проекта

Первым делом я скачал официальный плагин для [WebStorm (https://plugins.jetbrains.com/plugin/12375-svelte), чтобы упростить работу с фреймворком в своей IDE. Затем настроил Webpack для работы со Svelte следующим образом:

//npm i -D svelte-loader
//Добавить в конфигурацию Webpack:
rules: [{
  test: /\.svelte$/,
  use: {
    loader: 'svelte-loader',
  },
},
//Другие правила
]

Использование Svelte

Основные компоненты фреймворка, которые пригодились в моем проекте:

• Реактивность
• Двустороннее связывание
• Хранилища
• Система компонентов

Для данных, которые нужно добавлять в договор, я создал записываемые хранилища и использовал автоподписку: она помогает заносить данные из полей ввода с помощью связывания. Так же реактивно проверял условия с помощью $: if.

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

Расширение

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

Немного про PDF

Для скачивания договоров я использовал js-html2pdf. Сложно назвать решение оптимальным: библиотека, на мой взгляд, не слишком удобна. В частности, в ней странно работает разрыв страниц, что доставило много неприятностей при работе.

Итог

Svelte — простой и удобный фрейморк. Думаю, после завершения обучения я сделаю на нём несколько проектов для резюме.

На этом у меня всё, итоговый результат (над которым ещё желательно поработать 😅) можете посмотреть здесь (Web версия).