##  [React чекаут для N1Commerce](/blog/react-chekaut-dlya-n1commerce) 

Современный веб шагнул далеко вперед. Для решения актуальных бизнес задач классический подход к созданию сайтов подвергается значительной трансформации как в идеологическом, так и в техническом планах. Так, например, пересматривается роль браузера в веб-системе.

Современный браузер - это достаточно производительный инструмент, способный разгрузить сервер от необходимости обрабатывать лишние пользовательские взаимодействия, запросы, рендеринг страниц. Он способен обеспечивать работу полноценных клиентских веб-приложений, функционирующих аналогично десктопным, но не зависящих от операционной системы и не требующих установки.

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

Для внедрения современных подходов в нашу платформу для быстрого создания интернет-магазинов [N1Commerce](https://n1commerce.ru/ru) мы разработали систему, реализующую логин и корзину. Составными частями этой системы являются модульное Frontend-приложение и Middle веб-сервис.

##  

## **Frontend**

Frontend представляет собой современный ES6-проект на [React](https://reactjs.org/) аналогичный проекту одностраничного приложения. Используется сборка проекта на [Webpack](https://webpack.js.org/), компиляция ES6-кода через [Babel](https://babeljs.io/), линтинг кода через [Eslint](https://eslint.org/). Отличие состоит в том, что приложение разбивается на несколько бандлов, которые встраиваются в регионы классического веб-сайта.

![Экран приложения](/sites/default/files/inline-images/1.%20paukshte_screen.png)

![Схема бандлов](/sites/default/files/inline-images/2.%20Screen%20Shot%202018-05-16%20at%2018.33.25.png)

Так, кнопка добавления товара в корзину, кнопка логина, кнопка корзины, диалог логина, диалог корзины - все отдельные приложения, слабо связанные друг с другом. Взаимодействие между ними осуществляется через смену url, а также через общее хранилище состояния, для реализации которого использована популярная библиотека [Redux](https://redux.js.org/).

Слабая связь между бандлами позволяет гибко компоновать модули на странице, расставлять в UI, свободно заменять или удалять ненужные.

![Вариант компоновки бандлов](/sites/default/files/inline-images/3.%20Screen%20Shot%202018-05-16%20at%2018.43.31.png)

Для построения пользовательского интерфейса была выбрана библиотека [React](https://reactjs.org/), которая очень хорошо проявляет себя в качестве инструмента для создания UI, обладает обширной экосистемой, развитым международным комьюнити и базируется на ряде удачных технологических принципов, таких как компонентный подход, однонаправленный поток данных, расширяемость, отсутствие архитектурных ограничений и поощрение повторного использования кода.

Интерфейс каждого дочернего приложения конструируется с помощью набора общих и индивидуальных взаимозаменяемых компонентов. Односторонний поток данных от родительского компонента к дочерним позволяет управлять состояниями компонентов, реагировать на изменения данных, обновляя и перестраивая интерфейс.

Клиентское веб-приложение строится на взаимодействии с сервером через асинхронные запросы. Это позволяет избавиться от лишних перезагрузок страницы, повысить отзывчивость и ощущение быстроты работы сайта.

В нашей системе наряду с [RESTful веб-сервисом](https://www.drupal.org/docs/8/api/restful-web-services-api/restful-web-services-api-overview) используется [JSON API](https://www.drupal.org/project/jsonapi) для получения данных от Drupal-бэкенда. Запрос данных залогиненного юзера, добавление товара в корзину, удаление товара из корзины, логаут - эти операции клиент запрашивает непосредственно у бэкенда.

##  

## **Middle**

Однако не все запросы можно доверить клиенту делать напрямую. Часть запросов требует расширенных прав, например, проверка наличия в системе существующей учетной записи.

С целью защиты системы от раскрытия чувствительных данных была создана прослойка между фронтендом и бэкендом - мидл. Так как мидл является элементом серверной части, он имеет расширенный доступ к запросам и может выполнять защищенные операции по обращению клиента.

![Схема с middle](/sites/default/files/inline-images/4.%20Screen%20Shot%202018-05-16%20at%2019.29.57.png)

Мидл в нашей системе построен на платформе [NodeJS](https://nodejs.org/). Применение js в серверной разработке позволяет использовать часть общих библиотек на клиенте и на сервере. Кроме того, node-приложения хорошо поддаются горизонтальному масштабированию, поскольку способны исполнять несколько асинхронных запросов на одном потоке.

Другой причиной для введения мидла в систему является унификация api для логина. Мы воспользовались библиотекой [PassportJS](http://www.passportjs.org/) для реализации единого с точки зрения клиента api для входа через социальные сети и стандартный email + пароль.

Проблемой социальных логинов является разрозненность их api - каждый провайдер имеет свою собственную клиентскую библиотеку, которую необходимо загружать с сервера, встраивать на веб-страницу, писать специальные обработчики и поддерживать их в дальнейшем, а в случае ввода в систему мобильных приложений и вовсе потребуется встраивание отдельных библиотек для мобильных платформ. Это накладывает очевидные неудобства и заставляет разрастаться и без того обширный клиентский код.

Используя унифицированное api мы делаем процесс логина прозрачным для клиента, повышаем комфорт разработки и обеспечиваем более легкую расширяемость набора клиентских приложений.

##  

## **Proxy**

Поскольку логин в нашем приложении осуществляется не напрямую, а через мидл, требуется настройка proxy, который будет распределять клиентские запросы между мидлом и бэкендом на сервере. Это обусловлено политикой безопасности браузера, который в обычном режиме работы не допускает кросс-доменные запросы, а также необходимостью сохранения идентификаторов сессии в cookies с привязкой к домену.

![Схема с прокси](/sites/default/files/inline-images/5.%20Screen%20Shot%202018-05-16%20at%2019.31.19.png)

Использование прокси позволяет соблюсти ограничения браузера, при необходимости выполнять масштабирование сервера, балансировку нагрузки, менять внутренний адрес мидла или выносить его на внешний сервер. Все это дает возможность использовать систему в нагруженных сценариях работы.

Интеграция рассмотренной в статье системы в N1Commerce позволяет вывести нашу платформу на новый технологический уровень, формируя эффективное сочетание отлаженных бизнес процессов и современных тенденций в вебе.



[React](/blog/react)

[E-Commerce](/blog/e-commerce)

 

Ещё по теме

[Использование отчетов Ecommerce в Яндекс.Метрике ](/blog/ispolzovanie-otchetov-ecommerce-v-yandeksmetrike)

[Drupal + React](/blog/drupal-react)

[Использование React JS компонентов в Unity](/blog/ispolzovanie-react-js-komponentov-v-unity)

 

 

   

 [](https://drupal-coder.ru/rss.xml)