Учебный проект по созданию клиентского приложения с использованием Svelte.
Идея: сделать одну форму для заполнения данных, разбитую на несколько экранов. На каждом экране выполняется клиентская валидация ввода.
Бесконечные создаваемые по долгу службы лендинги регистрации и подписки на ивенты и визиты, с ФИО, мейлом, датой рождения и обязательным согласием на хранение и разбазаривание ПД всем и каждому передачу ПД третьим сторонам, уже надоели, поэтому сделал "конструктор персонажа в РПГ".
В комьюнити Svelte я не нашёл реально готовых к эксплуатации плагинов для валидации ввода, поэтому решил заодно поисследовать какие решения для валидации ввода на JS существуют помимо старичка jquery.validate.js (на vue использовал VeeValidate и vuelidate) и убогенького Validation API в HTML5. Вариантов, довольно много, но реально мне понравились только два:
Оба пробую использовать на трёх экранах ввода:
-
views/View1.svelte — используется @yaireo/validator "как есть", с минимальными настройками
-
views/View2.svelte — используется validate.js "по-простому", т.е. просто создаю валидатор, правила валидации, вывод ошибок сделан без особых заморочек
-
views/View3.svelte — так же используется validate.js, но помимо собственно полей ввода проверяются дополнительные нюансы:
- количество выбранных навыков
- количество распределённых очков скилов
Так же сообщения об ошибках преобразованы в компонент components/ValidationError.svelte
@yaireo/validator очень простенький и неплохо интегрируется со Svelte. Но плане кастомизации слабоват (а в энтерпрайзе всегда что-нибудь приходится делать для внезапной хотелки клиента).
validate.js не имеет встроенного механизма рендеринга ошибок, что для решений типа Vue, React, Svelte (и т.д.) с моей точки зрения скорее плюс — не нужно сражаться с библиотекой, интегрируя её в экосистему любомого фреймворка. Зато в плане механизма валидации модели данных имеем много плюшек.
Технически, все три экрана формы это самостоятельные <form>, на которых вводятся отдельные параметры одной общей модели данных — абстрактного персонажа. Все введённые данные выводятся на экране views/Summary.svelte.
Модель персонажа хранится в Svelte storage. Работать со storage очень просто и приятно! На vuex мне бы это делать не понравилось (может быть, я просто не умею его готовить).
Для плавных и "красивых" переходов используется компонент components/Wrapper.svelte. Компонент в свою очередь использует Svelte transitions. Использование этого Svelte решения также отличается лёгкостью и прозрачностью.
Не уверен, что стал бы использовать Svelte в крупном SPA, но в небольших "интерактивных" лендингах он хорошо заменит и jquery и knockout.
Приложение создано на основе типового шаблона, поэтому команды те же:
- npm install — восстанавливаем зависимости
- npm run dev — запускаем dev-сервер с hot reload
- npm run build — собираем для прода