Огромное спасибо команде веб-инженеров Chợ Tốt и особенно Huy Nguyen и Toan Vu за помощь!

Обзор

В 2016 году Chợ Tốt перестроил интерфейсное веб-приложение с использованием React & Redux для расширения бизнеса. Точно так же мы также решили поэтапно перенести текущие сервисы на архитектуру микросервисов для масштабирования. Чтобы повысить скорость работы нашего веб-приложения, мы разбили наш бизнес на небольшие части, каждая из которых представляет собой приложение. Хотя это снижает сложность бизнеса, мы столкнулись с некоторыми проблемами:

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

Одна особенность нашего веб-сайта, которая сталкивается со всеми этими проблемами, - это «Верхний и нижний колонтитулы». Как правило, «верхний и нижний колонтитулы» используются во всех продуктах Ch Tốt и содержат ссылки на важные страницы, которые потенциальные пользователи часто посещают, прежде чем совершить покупку или сделать запрос.

В этой теме рассказывается о трех основных моментах создания «верхнего и нижнего колонтитула»:

  • Архитектура
  • CSS
  • Процесс сборки

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

Принципы

Юзабилити

Мы помним о «простоте и эффективности» интерфейса компонентов. Они также помогают разработчикам легко интегрироваться.

«Простое может быть сложнее, чем сложное: нужно много работать, чтобы ваше мышление было чистым, чтобы сделать его простым», - Стив Джобс.

Давайте посмотрим на пример кода из двух компонентов, как показано:

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

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

Библиотека похожа на продукт разработчиков. Если у него хороший UX (насколько легко им пользоваться), другие разработчики будут счастливы его использовать.

Расширяемость и тестируемость

С расширением бизнеса в «оболочку приложения» интегрировано множество функций. Мы следуем «принципу единой ответственности» при разработке базы кода, чтобы упростить ее расширение и тестирование.

Меньше в зависимости от библиотек.

Нет необходимости использовать множество библиотек для разработки. Чем больше библиотек мы используем, тем больше размер JS-файла. Это непреднамеренно замедляет загрузку веб-страницы. Поскольку продукты Chợ Tốt отвечают на React и Redux, мы решили оставить только эти библиотеки для разработки «оболочки-приложения».

I. Архитектура

Приложение-обертка делится на 2 зоны

  • Составная часть
  • Расширение

1.1. Что такое Компонентная зона?

Зона компонентов содержит веб-компоненты, необходимые для отображения верхнего и нижнего колонтитула, например:

1.1a. Проблема

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

Кроме того, у нас есть много веб-приложений, и мы должны убедиться, что все они имеют последнюю версию app-wrapper. Что будет, если мы пропустим один? Это может повлиять на взаимодействие с пользователем.

1.1b. Решение

По этим причинам мы решили разработать API для управления точками входа, «оболочка приложения» делает запрос на выборку списка пунктов меню с сервера и рендеринг.

Таким образом, когда у нас есть новая точка входа, мы обновляем только точку входа в конечной точке API и делаем это один раз.

1.2. Что такое зона расширения?

«Обертка приложения» имеет некоторые социальные функции, такие как «Получение уведомлений чата», «Отображение объявлений». Эти функции требуют большого количества логики и больших библиотек, таких как Socket I / O. Если мы поместим весь код в «оболочку приложения», то вот с чем мы будем иметь дело:

  • База кода будет огромной.
  • Больно «Принцип единой ответственности». Поскольку «оболочка приложения» заботится об отображении верхнего и нижнего колонтитула. Не нужно заботиться о других делах.
  • Это без надобности усложняется.

1.2a. Решение

Мы разрабатываем зону под названием «Extension», которая позволяет асинхронно загружать сторонние сервисы.

Например:

Мы получили ссылки CDN на сервисы «Получение уведомлений в чате» и «Получение объявлений» (каждая услуга представляет собой конкретный проект, а выходом является ссылка на CDN). Затем нам нужно только зарегистрировать ссылку на зону «Extension» и позволить Extension сделать все остальное.

Поступая таким образом, мы получаем некоторые преимущества:

  • Делегирование всей логики сторонних сервисов ссылкам CDN помогает разделить логику.
  • Уменьшение размера основного файла JS.
  • Упрощение кодовой базы, которая помогает другим инженерам легко улучшаться.

II. CSS

«Обертка приложения» содержит сами стили. Выбор способа управления CSS - одна из самых сложных проблем. Есть 2 подхода:

CSS-в-JS

JS экспортирует CSS в модуль JS. Это означает, что мы можем импортировать CSS напрямую в JS-код.

файл CSS

Это оригинальный метод. Весь CSS связан с файлом CSS (style.css).

2.1. Подход

Поскольку все продукты в Chợ Tốt используют JS для разработки, а «оболочка приложений» - это библиотека, которая должна предоставлять разработчикам меньше настроек для интеграции с основными приложениями. По этой причине мы решили выбрать подход «CSS-in-JS» для управления стилями «app-wrapper».

Есть несколько библиотек, которые помогают применить подход CSS-in-JS, например, styled-components, JSS,… Однако у нас есть разные команды, и каждая команда имеет свой собственный стиль. Некоторые используют CSS-in-JS, некоторые используют CSS-файл для разработки веб-приложений. Итак, вопрос: Есть ли какой-нибудь метод, который подошел бы всем?. И мы пришли с одним решением, в котором вместо использования фреймворков CSS-in-JS мы выбрали функцию Шаблонные строки ES6 для разработки CSS.

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

2.2. Проблема

  • CSS не минимизирован.
  • CSS не содержит префиксов для старых браузеров.

2.3. Решение

После выполнения команды сборки для компиляции ES6 в ES5 мы запускаем еще один сценарий, чтобы добавить префиксы и минимизировать CSS.

Мы выбрали Gulp, чтобы настроить процесс сборки, добавив этап пост-сборки с двумя задачами:

  • Уменьшение
  • Автопрефикс

Например:

Это означает, что после того, как мы успешно выполнили команду сборки

npm запустить сборку

Команда после сборки выполняется автоматически. Ниже приведен результат применения этого метода.

III. Процесс сборки

Процесс сборки - это способ преобразования JS-кода из ES6 в ES5 с помощью Babel CLI.

Процесс сборки состоит из 2 этапов.

  • Этап 1 (сборка): он использует интерфейс командной строки babel для компиляции кода ES6 в код ES5.
  • Этап 2 (пост-сборка): запускает задачи gulp для минимизации и добавления префиксов в строку CSS из каталога сборки на этапе 1.

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

использование

Мы только что подробно описали «Как мы построили верхний и нижний колонтитулы». Теперь давайте кратко рассмотрим использование компонента app-wrapper.

с next.js

Мобильная демонстрация

Демонстрация рабочего стола

Заключение

В настоящее время компонент оболочки приложения используется всеми продуктами Chợ Tốt.

и более…

Мы решили 2 проблемы, упомянутые в начале сообщения: «Согласованность и возможность повторного использования».

Кроме того, мы могли бы вывести «оболочку приложения» на новый уровень, чтобы она стала общей библиотекой.

  • Примените Context API, который позволяет легко изменять такие темы, как цвет, значок, логотип,… в зависимости от бизнеса.
  • Интегрируйте CI / CD для тестирования, развертывания и т. Д.
  • Рассмотрите возможность интеграции сильных систем типов, таких как Flow Type, TypeScript.