Разработка SPA messenger

Часть Четвертая. Версия 0.9.4

• Изменения: 2 часть, 3 часть, 4 часть

---

прототипы размещены в папке ./ui/

тестовое приложение запущено:

• Netlify.app
• Render.com

---

npm команды

• npm run start — сервер Express на 3000 порту
• npm run dev — dev сборка и dev-сервер Webpack на 3333 порту,
• npm run build — prod сборка Webpack, собирает в ./dist/

• npm run lint — проверка с фиксом ошибок линтером eslint
• npm run stylelint — проверка ошибок scss линтером stylelint
• npm run test — запуск unit-тестов jest (BLock, HTTPTransport, Router)

---

Часть 2. Описание изменений

Проект полностью переведен на компонентную архитектуру.

Созданы три группы компонентов:

• компоненты-тэги — Alink, Button, Input, Textarea
• компоненты-комбайны — Form, NavList, SectionWith, Error
• компоненты-страницы — Main, Auth, Reg, Chats, Profile, ChangeProfile, ChangePass

Создание компонентов:

• компонент-тэг — инстанс принимает основные пропсы, требуемые для создания соответствующего тэга
• компонент-комбайн — инстансы принимают пропсы - строки и объекты для конструирования, генерации и сборки блока из простых компонент
• компонент-страница — инстансы создаются роутером по соответствущему руту

Также добавлено:

• Typescript
• Валидация на основе регулярных выражений
• Сбор данных из форм - на данном этапе значения и валидация всех input'ов, textarea выводятся в console
• Следование принципам MVC
• Стремление к декомпозиции проекта (но файл .scss пока сохранен общим для всего проекта)
• Добавлен class XMLHttpRequest для будущей работы с API сервера
• Добавлен Eslint и Stylelint

Часть 3. Описание изменений

Добавлены компоненты:

• ModalAvatar, ModalChats — модальные окна

Обновлен Роутер

• Роутер полностью переписан с помощью Классов JS под ООП методологию на замену функциональной. Бесшовное переключение рутов без обновления страницы.
• Поддерживается полноценная работа с history API - переход по страницам, движение вперед-назад как через интерфейс браузера, так и через роутер.
• При переходе на другую страницу, DOM меняется на нее, очищая предыдущую.

• / - страница входа (авторизации)
• /sign-up - страница регистрации
• /settings - страница изменения профиля
• /messenger - страница чатов, навигации по ним и real-time общения

Подключен HTTP API.

• Созданы все необходимые методы для взаимодействия с API:
• класс AuthAPI - Авторизация, Регистрация, Выход из системы..
• класс UsersAPI - Изменение данных профиля пользователя, пароля, аватара
• класс ChatsAPI - Работа с чатами, создание/удаление чатов, добавление/удаление пользователей из них

Подключен WebSocket для работы с real-time сообщениями

Работает небольшой блок Store - кеширование чатов, хранение данных пользователя и др.

Создан и функционирует контроллер:

• управление API <-> Store
• управление Websocket <-> Store
• управление Компоненты, Страницы -> API, WebSocket

Также:

• Следование принципам MVC
• Cледование по пути безопасности от пользовательского ввода (против XSS)

Часть 4. Описание изменений

• Проект переведен на сборщик Webpack. Настроен.
• Настроена Docker-сборка статического приложения.
• Проект с Docker-сборкой размещен на Render.com
• Добавлен пакет Jest и написаны базовые тесты для модуля отправки запросов (HTTPTransport), Роутера и Основного компонента (Block)
• Подключен husky для проверки перед коммитами

Вот и подошел к финалу 1 модуль!