Первоначально опубликовано на странице https://canopytax.github.io/post/testing-in-production/
Как разработчики, мы обычно запускаем локальную версию нашего приложения с поддельными данными, чтобы предварительно просмотреть изменения, которые мы вносим в процессе разработки, перед их развертыванием в производственной среде. Но что, если бы вы могли запускать свое приложение в производственной среде с частями, загружаемыми с вашего локального компьютера? Тогда вы сможете развиваться на основе реальных данных и производства. Кроме того, вам не нужно будет запускать весь внутренний стек, внося только изменения во внешнем интерфейсе. Это можно сделать, создав ваше приложение таким образом, чтобы функциональность была разрешена и загружена динамически во время выполнения. Это позволяет вам тестировать и разрабатывать в производственной среде, перехватывая разрешение во время выполнения.
Разрешение во время выполнения
При создании одностраничного приложения обычно код JavaScript статически встраивается в один или несколько пакетов. Эти пакеты добавляются на страницу с помощью традиционных тегов скрипта:
Разрешение кода во время выполнения представляет собой дополнительный динамический и императивный шаг. Это можно сделать с помощью таких библиотек, как RequireJS и SystemJS, или, если ваш браузер поддерживает это, встроенных модулей ECMAScript:
Поскольку приложение загружается динамически, вы можете перехватить механизм загрузки и изменить расположение вашего пакета. Это позволяет вам установить флаг localStorage и загрузить приложение в производство, динамически изменяя пакет для загрузки с вашего локального компьютера:
Микросервисы
Хотя вы можете использовать приведенные выше примеры и определить свое приложение с помощью одного большого пакета, возможно, стоит подумать о том, чтобы разбить ваше приложение на микросервисы или пакеты, специфичные для домена. Это позволяет вам определять естественные точки разделения в вашем приложении. Вместо того, чтобы загружать весь код заранее, пакеты загружаются по запросу, когда пользователь перемещается по приложению. Это также позволяет вам переопределять меньшие части кода, сохраняя при этом большую часть кода, основанного на производстве.
А как насчет производительности?
Динамическая загрузка модулей определенно влияет на производительность приложения. Вместо того, чтобы сразу загружать статический тег скрипта, браузер сначала должен проанализировать и выполнить дополнительный уровень кода JavaScript перед загрузкой вашего приложения. Этого можно избежать, если сервер отобразит ваши теги сценария и использует cookie для определения местоположения переопределения вместо localStorage.
Выучить больше
- Sofe - в CanopyTax мы создали надстройку поверх SystemJS, которая упрощает динамическую загрузку и переопределение пакетов.
- У нас более десятка интерфейсных сервисов, некоторые из которых используют Angular.js, а другие - React. Мы загружаем и запускаем Angular и React в одном одностраничном приложении через метафреймворк JavaScript, называемый single-spa.
- Микро-интерфейсы - микросервисный подход к интерфейсной веб-разработке
- Почему императивный импорт медленнее декларативного
