Размышления об архитектуре разделения интерфейса и сервера, вызванной React

У нашего приложения почти 1 миллион пользователей, более 3 тыс. запросов в секунду, более 500 миллионов данных в одной таблице и поток капитала на уровне триллионов, но оно также сталкивается со многими проблемами.

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

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

В предыдущем приложении серверной частью была Java, а внешней — браузер. Но теперь появился Node, он включен в большой фронтенд на замену оригинальной MVC части, чтобы бэкенд можно было отделить от чистой сервисной части, а фронтенд тоже мог сосредоточиться на чистом фронтенде. крайняя область.

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

В общем, интерфейс и сервер взаимодействуют сервисным образом, а данные передаются через Json. Передняя часть состоит из компонентов, а задняя — из модулей.

Перепробовав множество решений, мы выбрали React+Redux, потому что у нас есть определенный технический наработок в React, а также много успешных кейсов в Китае. Однако, поскольку Redux слишком гибок, после трех недель контакта мы решили отказаться и использовать AntD, платформу отображения на основе React с открытым исходным кодом Ant Financial, и платформу Dva, основанную на инкапсуляции Redux.

Когда придет запрос, интерфейс будет отображаться через Component или Route. В то же время он также получит событие щелчка пользователя.Каждое событие щелчка вызовет действие по диспуту, а затем будут сгенерированы два результата.

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

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

Логика в фоновом режиме относительно сложна, и мы приняли многоуровневую техническую архитектуру. Нижний уровень — это инфраструктура, которая поддерживает публичные облака, частные облака и, конечно же, локальные серверы. Затем уровень технологической платформы представляет собой общую архитектуру, включающую некоторые системные разрешения, рабочие процессы, среды разработки и тому подобное. На основе вышеизложенного является общий сервисный уровень, который включает в себя некоторые сервисы отчетов, сервисы печати, сервисы документов и т. д. Далее идет часть бизнес-модуля, включая управление учетными записями, управление задачами, центр самопомощи и т. д. Последний верхний уровень — это уровень службы интерфейса, основанный на веб-службе и службе Restful.

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

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

Первоначально мы решили это с помощью Jsonp, но проблема с Jsonp в том, что он может поддерживать только запросы на получение, а параметры будут выставлены. Из соображений безопасности мы выбрали текущий основной метод CORS, который обрабатывает междоменную обработку только на стороне сервера и не задействует клиентскую сторону.

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

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

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

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

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

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

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

На сегодня это все, всем спасибо!