e-basket

Basket for E-shop

Команды, используемые в работе:

• npm run prod – сборка приложения, готового к выкатке (правда без минификации стилей и html).
• npm run dev – сборка приложения в режиме разработки. Webpack вотчит изменения в JS.
• npm run test – прогон unit-тестов.
• npm run lint – прогон app через eslint.

Необходимо установить Node.js версии >= 4.x.x

Чтобы просто собрать проект, необходимо поставить npm-зависимости:

npm install --production

Если требуется запуск тестов и линтинг, то необходимо выполнить просто npm install.

Используемые технологии

• Redux – для управления данными в приложении.
• Handlebars – для рендеринга шаблонов.
• jQuery — для манипулирования DOM.
• Bluebird — для работы с Промисами. Нативные промисы работают медленно на данный момент и не поддерживаются в IE. Bluebird решает две проблемы сразу.
• mocha и chai – для unit-тестирования.

Было бы не плохо заменить Handlebars и Jquery на React (или ему подобную библиотеку), чтобы не тянуть две эти большие библиотеки. Плюс мы бы получили возможность ререндерить только изменившиеся части приложения. Сейчас же компоненты ререндерятся полностью, если есть изменения в сторе. Сейчас это работает быстро, но я бы перешла на React в последствии. В данном тестовом задании было больше желание попробовать Redux без React, изучить его более глубоко. Для ререндеринга пробовала работать с пакетом morphdom, но как-то не получилось. Данный пакет предоставляет возможность применять только diff между текущим DOM и, например, с его новой версией, которая предается в morphdom строкой. Но, как я уже писала ранее, с ним не удалось разобраться. При использовании React можно было бы лучше разбить приложение на отдельные компоненты. В следующей версии корзины именно это и сделаю)

Текущее приложение можно интегрировать в любой сайт — он никак не помешает остальным скриптам на сайте.

Как работает приложение

Рассмотрим как работает приложение на примере увеличения количества товара. При нажатии на кнопку увеличения товаров происходит обработка события клик. В ней вызывается action для этого случая. В action передаем id товара. По этому id в редьюсере находим товар в начальном state и возвращаем новый state с измененным товаром. При изменении store вызовется функция, которая отрендерит заново всю таблицу. Затем вызовется action, который пересчитает цену. Затем вызовется action, который отправит данные о товаре на бэкэнд и вернет общую цену со скидкой или без.

Файловая структура исходных файлов проекта

• actionCreator – папка для хранения описания actions для различных компонентов
• api – это Promise-обертка для отправки данных на бэкэнд через Ajax
• components - папка со списком компонентов
• data – начальные данные для приложения
• libs – это вспомогательные методы для всего приложения
• reducers - папка со списков редьюсеров
• index.js – точка входа

Примечания

• Во время выполнения работы были изменены некоторые конфиги для eslint, а какие-то правила отключались в коде точечно. Например, no-param-reassign. С включенным правилом no-param-reassign нет возможности использовать функцию reduce у массивов. Подключила парсинг ES6 кода.
• Как уже писала выше, стоит попробовать использовать React или другую подобную библиотеку для работы с View-слоем.
• Стоит прикрутить минификацию css и html.
• Стоит использовать PostCSS или любой препроцессор.