/website-builder-vuejs

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

Primary LanguageVue

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

MIT Licence Build Status Maintainability DeepScan grade

🇷🇺 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. ⚠️

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

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

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

    git clone https://github.com/mikhail-shpakov/website-builder-vuejs.git
    
  2. Установка зависимостей

    npm ci
    

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

  3. Запуск сервера для разработки

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

    Для его запуска выполните из корневой директории проекта:

    npm run serve
    

    После этого приложение будет доступно по адресу localhost:8080.

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

    Также доступны следующие команды:

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

Деплой на Github Pages

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

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

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