Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

2 <h2>Почему Svelte?</h2>

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

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

5 <h2>Содержание</h2>

6 <ul><li><a>Знакомство</a></li>

7 <li><a>Настройка проекта</a></li>

8 <li><a>Использование Svelte</a></li>

9 <li><a>Расширение</a></li>

10 <li><a>Немного про PDF</a></li>

11 <li><a>Итог</a></li>

12 </ul><h2>Знакомство</h2>

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

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

15 <h2>Настройка проекта</h2>

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

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

18 <h2>Использование Svelte</h2>

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

20 <ul><li>Реактивность</li>

21 <li>Двустороннее связывание</li>

22 <li>Хранилища</li>

23 <li>Система компонентов</li>

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

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

26 <h2>Расширение</h2>

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

28 <h2>Немного про PDF</h2>

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

30 <h2>Итог</h2>

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

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