Рассказываю о своих впечатлениях после использования 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 версия).
