Задание 1. Вёрстка шаблонов Stories

Это решение тестового задания 1 в Школу разработки интерфейсов, Яндекс, 2021.

В данном репозитории находится SSR-приложение на Svelte для отображения данных в качестве Stories.

Запуск

Для запуска может использоваться любой пакетный менеджер, но в репозитории присутствует лок-файл для pnpm.

Сначала установите зависимости:

pnpm install

Запустите сервер (последняя версия приложения заранее собрана и добавлена в репозиторий*):

pnpm start

* Этим фактом гордиться не приходится, но так нужно для автотестов.

Сложности во время разработки

Как оказалось, Figma просто ужасно конвертирует свои стили в CSS. Очень трудно было подобрать правильные тени и градиенты, и у меня это так и не получилось сделать в идеале. Особенно в случае с круговой диаграммой, где пришлось экспериментальным путем понять, как генерируются фильтры теней в зависимости от параметров в Figma.

Выбор инструментов

• Svelte – полнофункциональный фреймворк для создания интерфейсов, не требующий подключения во время рантайма. Лично я люблю его за приятный, логичный синтаксис (в отличие от Vue) и быстроту. В данном проекте возможность разбить интерфейс на компоненты была бесценной.

• TypeScript – делает редактор кода намного умнее, помогает отлавливать большое количество ошибок на этапе написания кода, позволяет использовать самый новый синтаксис JS и не волноваться о настройке Babel. Также хорошо интегрируется со Svelte.

• SCSS – отличный инструмент автоматизации CSS, позволяющий минимизировать копи-пастинг кода и структурировать стили естественно.

• pnpm – намного более быстрая и удобная альтернатива npm. В отличие от yarn, не позволяет папке node_modules/ раздуваться. Думаю, не стоит объяснять, почему это хорошо :)

• Rollup – проверенный и функциональный сборщик с первоклассным плагином для Svelte. Из приемуществ: более адекватно выглядит файл конфигурации, а также вывод в консоль спокойнее, без шума, как у Webpack.