Git Product home page Git Product 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

Watchers

 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.