02

Vue: SPA

Веб-приложение на Vue.js

Работая над этим заданием вы, создадите SPA веб-приложение на Vue 3 с Composition API и TypeScript, изучив дополнительно маршрутизацию и слоты. Начнете понимать различия между действиями, вычислениями и данными. Попробуете концепции функционального программирования: отображение (map), фильтрация (filter), сокращение (reduce) и неизменяемость.

Перед началом работы прочтите задание целиком.

Веб-приложение предназначено для управления цветовыми палитрами. Пользователи смогут создавать цветовые палитры, управлять ими и анализировать их.

Действия, вычисления и данные

Данные - это информация, которая не меняется и не зависит от того, когда и сколько раз вы к ней обращаетесь.

Вычисления - это функции, которые всегда возвращают один и тот же результат для одних и тех же входных данных и не имеют побочных эффектов. Они не зависят от того, когда и сколько раз они вызывались.

В вычислениях например:

  • Нет чтения из внешнего состояния или записи во внешнее состояние
  • Нет манипуляций с DOM
  • Нет вызовов API или доступа к localStorage

Они детерминированы. Один и тот же ввод -> один и тот же вывод.

Действия - это функции, которые зависят от того, когда и сколько раз они вызывались. У них есть побочные эффекты и они зависят от времени или внешнего состояния, могут иметь побочные эффекты (работу с DOM, с сетью, Storage, console.log).

Подготовка

  1. Вернуться на ветку main, создать ветку SPA и переключиться в нее и ее же надо будет отправлять в репозиторий.
  2. Создайте новый проект Vue + TypeScript + Router. Инструкция в документации фреймворка.
  3. Установите в проект json-server.
  4. Создайте db.json в корне проекта.
  5. Запустите json-server для имитации REST API на локальном порту.

Функциональные требования

Создание цветовых палитр и управление ими (просмотр, создание, редактирование и удаление).

Преобразование координат цветов между форматами RGB, HSL и HEX.

Создание дополнительных, аналогичных и триадных цветовых палитр по выбранному цвету.

Расчет коэффициента контрастности между цветами.

Сохранение и загрузка палитр с помощью json-server.

Необходимые страницы:

  • Главная страница/Панель управления: Обзор сохраненных палитр.
  • Редактор палитр: Создание и редактирование палитр c использованием разных форматов.
  • Цветовые гармонии: Создание и изучение цветовых схем.
  • Средство проверки доступности: Проверка коэффициентов контрастности. Пример типа ниже.
type ContrastResult = {
    ratio: number;
    wcagAA: boolean; // passes WCAG AA standard (4.5:1)
    wcagAAA: boolean; // passes WCAG AAA standard (7:1)
};

Требования

  • Язык интерфейса русский.
  • Валидируются поля форм (чтобы значения координат находились в пределах допуска).
  • Правильно определенные типы в TypeScript.
  • Четкие названия функций.
  • Небольшие, сфокусированные функции.
  • Есть обработка загрузки, ошибок и пустых состояний.
  • Никаких изменений в расчетах (копирование при записи для всех операций с данными). Пример ниже.
function updateColorInPalette(
    palette: ColorPalette,
    colorId: string,
    newColor: Color
): ColorPalette {
    return {
        ...palette,
        colors: palette.colors.map((c) => (c.id === colorId ? newColor : c)),
    };
}

Результат выполнения

Исходный код работающего одностраничного приложения в репозитории на Classroom.

Советы

Сделайте папки: types/ - для хранения типов и интерфейсов, utils/ - для вычислений.

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

Не смешивайте в функциях вычисления и действия (побочные эффекты).

Старайтесь заменить циклы for на map/filter/reduce.

Если кажется просто

Напишите код, где функции можно разложить на отдельные уровни, от самого низкого (наиболее пригодного для повторного использования) до самого высокого (наиболее специфичного):

Уровень 4: Компоненты пользовательского интерфейса и действия (Vue components, манипулирование DOM, взаимодействие по сети, маршрутизация).

Уровень 3: Расчеты для конкретной предметной области (операции с палитрой, цветовые гармонии)

Уровень 2: Чисто вычислительные утилиты (работа с примитивами, объектами, массивами)

Уровень 1: Языковые утилиты (встроенные модули JavaScript/TypeScript) - уже создан разработчиками браузеров.

Ключевой принцип: каждый слой может вызывать функции только из нижележащих слоев, но никогда из вышележащих. Нижние слои более универсальны для повторного использования.

Источники для занятия

Предыдущая Следующая