Боль и слёзы в Svelte 3

Вместо предисловия


Статья будет полезна тем, кто так-же как и Мы решил попробовать Svelte в живом проекте. В нашу небольшую компанию пришёл заказ на разработку веб-админки для сервиса с бекэндом на Mongodb Stitch. В последние пару лет frontend Мы пишем на React или Vue (в зависимости от размера проекта и нужен ли ReactNative), но наслышав о красотах Svelte мы решили попробовать его, чтобы понять для себя так ли он хорош. И может нам тоже стоит дальше использовать его вместо Vue или React?…

Кто такой Svelte?

image

Если в двух словах — это новый js фреймворк (но он таким себя не считает), который убийца React и Vue, и бла, бла, бла… В своей статье я хочу рассмотреть Svelte не какой он классный «под капотом», а с точки зрения удобства его использования в реальном проекте.
Мы не делаем машины, мы на них ездим и у нас есть злые заказчики с еще не менее злыми сроками.

Tutorial


Первое с чего Вы начинаете знакомство с новым языком или фреймворков — это туториал на сайте. У Svelte это Svelte.dev/Tutorial.
К сожаление часть туториалов просто не работает на сайте в превью, при этом не совсем понятно работает ли оно в реальности или нет. Приходится тратить время и проверять самому вручную, так как не понятно устарел ли туториал или что-то пошло не так на сайте Svelte. И на это реально тратится очень много времени.

UI Kit и Стили


image

Поиски UI Kit для Svelte были отдельной болью для всех нас. Хотелось воскликнуть: «Хоть Material, Bootstrap… хоть что нибудь…».
Были найдены только sveltematerialui.com и svelteui.js.org, которые в данный момент выглядели очень сыро.
При простом импорте