Конструктор сайтов на Vue.js

🇷🇺 by Mikhail Shpakov

Тестовое задание для компании Timeweb.
Приложение реализовано с помощью Vue.js и представляет собой простейший конструктор сайтов, демонстрируя также концепции SPA и PWA приложения.

🎉 Демо

📐 Общие принципы работы приложения

🔨 Список использованных технологий и инструментов

🔧 Локальный запуск проекта

🚀 Деплой на Github Pages

Общие принципы работы приложения

В приложении используется Vuex в качестве централизованного хранилища данных для всех компонентов. Для обеспечения персистентности данных в рамках одного браузера используется localStorage. Данные, находящиеся во Vuex, автоматически сохраняются в localStorage с помощью плагина vuex-persistedstate.

В приложение доступно как создание новых сайтов, так и их сохранение в историю с возможностью просмотра и редактирования ранее созданных сайтов. Максимально возможное количество сохранённых сайтов ограниченно только размером localStorage.

Архитектурно каждый прототип создаваемого сайта представляет собой объект, содержащий набор полей с мета информацией (id, название сайта, время создания и т.д.), объект с текущими настройками конструктора и массив со списком использованных блоков. Использование массива для хранения информации о блоках, позволяет гарантировать при сохранении порядок их следования (order).

Каждый блок в свою очередь, также представляет собой объект с мета информацией и вложенным массивом со списком атрибутов (список будет отличаться для различных блоков), который необходим для рендеринга компонента. Использование списка атрибутов позволяет унифицировать создание блоков, вынося всю уникальную логику в отдельные компоненты-блоки.

Подобная иерархическая структура позволяет гибко масштабировать приложение, легко добавлять новые сущности (например, пользователь, домен и т.д.) и хорошо подходит для использования в средних и больших командах, так как позволяет разделить зоны ответственности разных разработчиков.

Инлайн редактирование текста в блоках выполнено без использования библиотек на нативном Vue. Для отображения на странице и возможности персистентного хранения все изображения кодируются в Base64.

Для реализации Drag-and-drop используется библиотека Vue.Draggable, которая позволяет гибко управлять поведением блоков на странице, в том числе предоставляю возможность создавать сложные вложенные структуры (в этом приложение вложенные структуры не реализованы).

Для возможности изменения положения блока с управляющими элементами на странице конструктора использована библиотека VueDraggableResizable 2. Данную библиотеку потенциально возможно использовать совместно с Vue.Draggable для реализации сложных сценариев управления пользовательскими блоками.

Для ускорения процесса разработки использован HTML-шаблонизатор Pug, CSS препроцессор Sass и набор компонентов UI Buefy.

Работа приложения протестирована в браузерах Google Chrome (Blink), Mozilla Firefox (Gecko), Microsoft Edge (EdgeHTML) и Apple Safari (WebKit).

⚠️ Приложение не поддерживает работу в Internet Explorer. ⚠️

Список использованных технологий и инструментов

Vue
Vue Router
Vuex + vuex-map-fields + vuex-persistedstate + secure-ls
Pug
Sass
Buefy
Vue.Draggable
VueDraggableResizable 2
vue-moment
Vue-cli (Webpack, Babel, Postcss)
Jest + vue-test-utils
Eslint (standard style)
Иконки mdi
Графика Undraw
Github Pages
Travis CI

Локальный запуск проекта

Загрузка проекта на локальную машину

git clone https://github.com/mikhail-shpakov/website-builder-vuejs.git

Установка зависимостей
```
npm ci
```
Использование npm ci вместо npm i позволит гарантировать корректные версии устанавливаемых npm пакетов, так как они будут взяты из package-lock.json.
Запуск сервера для разработки

В качестве сервера для разработки используется Webpack Dev Server.

Для его запуска выполните из корневой директории проекта:
```
npm run serve
```
После этого приложение будет доступно по адресу localhost:8080.

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

Также доступны следующие команды:
```
npm run build // сборка приложения Vue для развёртывания на production
npm run lint // ручной запуск линтера
```

Деплой на Github Pages

Для публикации приложения на Github Pages с помощью Travis CI, требуется:

Зарегистрировать аккаунт на Travis CI и добавить в него проект Github.
Получить персональный токен доступ на Github (инструкция) и добавить в Travis переменную окружения $GITHUB_TOKEN.
Создать в корне проекта файл с описанием опций публикации с названием .travis.yml. Описание опций можно найти здесь.
Для корректного роутинга SPA на Github Pages требуется выполнить инструкции из репозитория.

После этого, при каждом коммите в отслеживаемую ветку (указывается в .travis.yml) при условии успешного прохождения CI (эта стадия может отсутствовать, как, например, в этом проекте) проект будет автоматически опубликован на Github Pages и по умолчанию будет доступен по адресу http(s)://<user>.github.io/<repository>.