Giter VIP home page Giter VIP logo

ecommerce-demo's Introduction

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.

'архитектура приложения'

Установка зависимостей в модули

'установка зависимостей в модули'

Обработка запроса

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

MVC при асинхронных запросах

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

'MVC при асинхронных запросах'

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

'отображение статичной страницы'

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

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

Скриншоты приложения

Открыть список

Поддержка старых устройств и скорость работы

'скриншот'

ecommerce-demo's People

Contributors

artnv avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.