Весенние скидки до 30 000 ₽
На все профессии до 31 марта
Главная | Все статьи | Дневник студента

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

Время чтения статьи ~2 минуты
Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Личный опыт: как я впервые попробовал 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 версия).

Аватар пользователя Шахзод Давлатов
Шахзод Давлатов 16 февраля 2022
3
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Django
10 месяцев
с нуля
Старт 28 марта
профессия
от 6 183 ₽ в месяц
Ручное тестирование веб-приложений
4 месяца
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка приложений на языке Java
10 месяцев
с нуля
Старт 28 марта
профессия
от 5 025 ₽ в месяц
новый
Сбор, анализ и интерпретация данных
9 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 28 марта
профессия
от 5 840 ₽ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 28 марта
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 28 марта
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
Старт 28 марта
профессия
Верстка с использованием последних стандартов CSS
5 месяцев
с нуля
Старт в любое время