ecommerce-demo

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

(★ 14)

Single Page Application

ecommerce-demo 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Upd 2018. Фреймворк на основе данной архитектуры https://github.com/artnv/hybrid

# E-commerce Demo
Пример одностраничного, расширяемого веб-приложения интернет магазина, со слабосвязанной архитектурой.

Из сторонних компонентов это Роутер и Диспетчер событий от Backbone. Для визуального оформления используется Bootstrap. Немного jQuery в представлениях и Pace.js в качестве автоматического индикатора загрузки.
А серверная часть состоит из PHP и MySQL. Обмен данными по Ajax формата JSON.

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

## Краткое описание возможностей приложения
- Модульная, расширяемая MVC-архитектура построенная на объектах, с пространством имён, DI-контейнерами и системой Событий. Сама архитектура написана на чистом JavaScript (ES5)
- В приложении так же есть виджеты, компоненты, менеджеры модулей, система переключения шаблонов и многое другое
- Независимые друг от друга запросы (Не ждут результат ответа, на основе которого строят следующий запрос)
- Не жадная загрузка контента. Всё что видим на экране то и загружаем
- Кеширование всего что ранее было загружено. Страницы, товар и прочий статический и динамический контент
- Автообновление контента и настроек приложения. Если администратор добавил или удалил товар, то данные у пользователя автоматически обновляются, без перезагрузки страницы
- Следование принципу единственной ответственности, в модулях
- Так же используются паттерны проектирования
- Вес приложения (без картинок) с библиотеками, стилями, шрифтами ~100кб после gzip-сжатия на сервере Nginx
- Работает без лагов, на компе 2001 года с характеристиками: Windows Xp, Opera 9, Celeron 848Mhz, 128Mb Ram

## Архитектура приложения
Все модули реализованы через замыкание, имеют публичные и приватные свойства. Модули могут подключаться друг к другу, так как после загрузки они возвращают публичный объект. Эта особенность объектов используется в качестве пространства имен, которая позволяет не засорять глобальное пространство и при этом возникает возможность произвольно хранить файлы, в любых директориях и с разной вложенности, в рамках проекта.
Модуль всегда подключиться туда, куда нужно, а инструмент Gulp, автоматически найдет все файлы, потом минифицирует и объединит их в один bundle.

!['архитектура приложения'](https://raw.githubusercontent.com/artnv/ecommerce-demo/master/screenshots/app_architecture.png)

### Установка зависимостей в модули
!['установка зависимостей в модули'](https://raw.githubusercontent.com/artnv/ecommerce-demo/master/screenshots/app_add_dependencies.png)

### Обработка запроса
В приложении используется система Событий для общения между модулями, которая позволяет удобно реагировать на асинхронные ajax-запросы и вдобавок жестко не привязывать модули друг к другу.

#### MVC при асинхронных запросах
При переходе на url запрашивается контент, а потом отображается на странице

!['MVC при асинхронных запросах'](https://raw.githubusercontent.com/artnv/ecommerce-demo/master/screenshots/app_events_mvc.png)

#### Если нужно отобразить статичную страницу

!['отображение статичной страницы'](https://raw.githubusercontent.com/artnv/ecommerce-demo/master/screenshots/app_static_page.png)

#### Дополнение страницы динамическим контентом

!['дополнение страницы динамическим контентом'](https://raw.githubusercontent.com/artnv/ecommerce-demo/master/screenshots/app_view_get_data.png)

### Скриншоты приложения
<details><summary>Открыть список</summary>
<p>
  
![](https://raw.githubusercontent.com/artnv/ecommerce-demo/master/screenshots/5.jpg)

![](https://raw.githubusercontent.com/artnv/ecommerce-demo/master/screenshots/4.jpg)

![](https://raw.githubusercontent.com/artnv/ecommerce-demo/master/screenshots/3.jpg)

![](https://raw.githubusercontent.com/artnv/ecommerce-demo/master/screenshots/2.jpg)

![](https://raw.githubusercontent.com/artnv/ecommerce-demo/master/screenshots/1.jpg)

![](https://raw.githubusercontent.com/artnv/ecommerce-demo/master/screenshots/xp1.JPG)

![](https://raw.githubusercontent.com/artnv/ecommerce-demo/master/screenshots/xp2.JPG)

![](https://raw.githubusercontent.com/artnv/ecommerce-demo/master/screenshots/xp3.JPG)

![](https://raw.githubusercontent.com/artnv/ecommerce-demo/master/screenshots/xp4.JPG)

</p>
</details>

# Поддержка старых устройств и скорость работы
!['скриншот'](https://raw.githubusercontent.com/artnv/ecommerce-demo/master/screenshots/xp2.JPG)

ecommerce-demo

ecommerce-demo 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

ecommerce-demo

ecommerce-demo 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README