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

Автор оригинала: Cory House.

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

Так что теперь вам нужно запустить ваше приложение Todo в двух местах:

1. Сами по себе
2. Встроенный в приложение счета

Какой лучший способ справиться с этим? ?

Чтобы запустить приложение в нескольких местах, у вас есть три варианта:

1. Iframe – встроить приложение Todo в приложение счета через
2. Многоразовый компонент приложения – Поделитесь всей приложением Todo.
3. Многоразовый пользовательский интерфейс – Поделитесь только на разметку приложения Todo.

Вариант 2 и 3 обычно разделяются через NPM для приложений с клиентами.

В спешке, спешу? Вот резюме.

Давайте рассмотрим достоинства каждого подхода.

С IFRAME вы можете составить два приложения вместе, поместив приложение «Ребенок» в iFrame. Таким образом, в нашем примере приложение счета встроит приложение ToDo через iFrame. Легко. Но не так быстро …

Когда iframe хорошая подходит?

1. Несовместимые технологии – Если приложения вы составляете, используйте несовместимые технологии, это ваш единственный вариант. Например, если одно приложение встроено в RUBY, а другой в ASP.NET, iFrame позволяет двум приложениям отображать бок о бок, даже если они на самом деле несовместимы и размещаются отдельно.
2. Небольшие, статические размеры – Приложение, в котором вы обрамляете, имеет статический рост и ширину. Динамически изменение размера IFRAMES является выполнением, но добавляет сложность.
3. Общая история аутентификации – Приложение IFRAMED не должно требовать отдельную аутентификацию. Отдельная аутентификация может привести к неуклюжему взаимодействиям, поскольку приложение оформленного приложения может пригласить отдельные учетные данные или тайм-аут в другое время, чем приложение для хостинга.
4. Бежит так же везде – С помощью Iframe приложение оформленное в каждую точку будет работать в каждом месте, где он оформлен. Если вам нужно существенно другое поведение в разных контекстах, см. Другие подходы ниже.
5. Нет общих данных – С помощью Iframe составленные приложения следует избегать отображения тех же данных. Обрамление приложения может привести к дублированию, расточительными вызовами API и проблем с синхронизацией между приложением в рамке и его родителем. Изменения данных IFrame должны быть тщательно переданы родителям и вице-версии, или пользователь увидит данные вне синхронизации.
6. Мало взаимодействия между приложениями – Между приложением хостинга должно быть очень мало взаимодействий и приложением IFRAMED. Конечно, вы можете использовать window.postmessage Передать сообщения между iFrame и приложением хостинга, но этот подход должен использоваться экономно, поскольку он хрупкий.
7. Одна команда поддерживает как приложения – При IFRAMES та же самая команда должна идеально владеть и поддерживать как родительское приложение, так и приложение в рамке. Если нет, вы должны принять постоянные координационные отношения между командами, которые поддерживают заявки, чтобы обеспечить, они остаются совместимыми. Отдельные команды создают текущее нагрузку на риск и обслуживание для поддержания успешной и стабильной интеграции.
8. Нужно только сделать это один раз – Из-за пункта выше, вы должны только если приложение только один раз, чтобы избежать создания значительного обслуживания нагрузки. Чем больше раза приложение оформлено, тем больше места, которые вы рискуете взломать, когда вы вносите изменения.
9. Удобно с рисками развертывания – С Iframe вы должны принять риск того, что производство приложения в рамках приложения может повлиять на родительское приложение в любое время. Это еще одна причина, имеющая одну и ту же групповую поддержку как родительское, так и оформление приложения.

Менеджер по пакетам узла, NPM, стал деформированием Defacto, чтобы поделиться JavaScript. С помощью этого подхода вы создаете пакет NPM и поместите заполненное приложение внутри. И это не должно быть публично – вы можете создать частный пакет NPM на NPM.

Процесс создания библиотеки многоразового компонента находится за пределами объема этого поста. Я исследую, как построить собственную библиотеку компонентов по многоразованию в « Production Reoument React Components ».

Поскольку вы используете все приложение, он может включать в себя вызовы API, проблемы аутентификации и текущие проблемы, такие как Flux/Redux и т. Д. Это очень самоуверенный кусок кода.

Когда компонент повторно используемый приложение подходит к хорошей подгонке?

1. Совместимый Tech – Поскольку вы используете многоразовый компонент, родительское приложение должно быть совместимо. Например, если вы разделяете компонент React, родительское приложение также должно быть в идеале также писать в реагировании.
2. Динамический размер – Этот подход полезен, если ширина/высота вашего приложения динамичны, поэтому она хорошо не подходит в рамку статически размером.
3. Общая история аутентификации – Два приложения должны идеально использовать одинаковую аутентификацию. Отдельная аутентификация может привести к неуклюжему взаимодействиям, поскольку каждое приложение может пригласить отдельные учетные данные или тайм-аут в другое время.
4. Вы хотите приложение для того, чтобы запустить так же везде – Поскольку API, аутентификация и государственное управление встроены, приложение будет работать так же везде.
5. Нет общих данных – Два приложения в основном работают с отдельными данными. Отображение приложений рядом может привести к дублированию, расточительным вызовам API, так как каждое приложение делает запросы на те же данные. Это также может привести к внезапному синхронному вопросам между двумя приложениями. Изменения данных в одном должны быть тщательно переданы другим, или пользователь увидит данные вне синхронизации между двумя приложениями.
6. Мало взаимодействия между приложениями – Между двумя приложениями должно быть мало взаимодействий. Конечно, вы можете использовать window.postmessage Передать сообщения между ними, но этот подход следует использовать экономно, так как он хрупкий.
7. Одна команда поддерживает как приложения – С таким подходом в идеале принадлежит ту же команда и поддерживает оба приложения. Если нет, вы должны быть готовы принять постоянные координационные отношения между командами, которые поддерживают два приложения для обеспечения того, чтобы они оставались совместимыми. Отдельные команды создают текущее нагрузку на риск и обслуживание для поддержания успешной и стабильной интеграции.

Эта опция похожа на опцию № 2 выше, кроме вас Поделитесь только разметкой Отказ С таким подходом вы опускаете аутентификацию, API-вызовы и государственное управление так что Компонент в основном просто многоразовый HTML Отказ

Популярные примеры простых компонентов, как это, включают Материал-ui и React Bootstrap Отказ Конечно, многоразовый компонент приложения имеет больше движущихся частей, но он работает на той же идее.

Прежде чем мы обсудим достоинства этого подхода, позвольте мне решить общий вопрос: «Должны ли мои многоразовые компоненты встроить вызовы API и Auth?»

Мой взять? Избегайте встраивания API, аутентификационных и государственных проблем управления в многоразовых компонентах.

Вот почему:

1. Он ограничивает повторное использование, связывая переднюю часть к определенному API, Auth, State Management Story.
2. Часто отдельные разработчики/команды управляют пользовательским интерфейсом и API. Встраивание API вызовов в многоразовом компонентах пары UI команды UI и команда API вместе. Если одна сторона меняется, это влияет на другую, что создает постоянную координационную накладную и обслуживание нагрузки.

Но да, это означает, что каждый раз означает, что кто-то использует ваш многоразовый компонент, они должны проводить вызовы API и пропустить их на реквизитах.

Когда компонент многоразового использования подходит к хорошей посадке?

1. Совместимый Tech – Поскольку вы используете многоразовый компонент, родительское приложение должно быть совместимо. Например, если вы обмениваетесь компонентом React, родительское приложение также должно быть записано в реагировании.
2. Динамический размер – Этот подход полезен, если ширина/высота вашего приложения динамичны, поэтому она хорошо не подходит в рамку статически размером.
3. Различные истории аутентификации – Поскольку этот подход в основном просто многоразовая HTML, приложения, которые вы хотите составить, могут иметь разные истории аутенов, или история авторизы может отличаться в каждом месте, который используется компонент.
4. Разное поведение в каждом корпусе использования – С таким подходом вы можете повторно использовать интерфейс, но вызовите разные API в каждом случае. Каждая копия фронта может работать полностью по-разному. Вы можете установить разные реквизиты и ударить разные API в каждом случае, чтобы поведенское поведение по мере необходимости.
5. Общие данные – С таким подходом UI, который вы составляете, может использовать и отображать данные родительских приложений. Это одно, сплоченное приложение. Это позволяет избежать дублирующих вызовов API и вызовы вне синхронизации, сохраняет пропускную способность и улучшает производительность.
6. Многие перекрестные взаимодействия – Если существуют значительные взаимодействия и общие данные между приложениями, этот подход гарантирует, что два приложения чувствуют себя как один сплотный опыт … потому что Этот подход создает единое, сплоченное приложение Отказ
7. Признательность желательна – Вы хотите опубликовать существование богатого, многоразового интерфейса в качестве компонента. Вы можете разместить этот компонент в вашу многоразовую компонентную библиотеку и документируйте реквизиты, которые он принимает так, чтобы другие могли легко найти и повторно использовать его в разных контекстах.
8. Многократные случаи использования – Вы планируете развернуть этот передний конец во многих местах. Этот подход более гибкий, чем другие подходы, поскольку вы просто разделяете весьма настраиваемым интерфейсом.
9. Отдельные UI и API команды – Если у вас есть отдельная команда пользовательского интерфейса, связывая UI к API через другие подходы непривлекательны из-за вышеупомянутой координации накладных расходов. С помощью этого подхода вы контролируете, когда обновить пакет NPM. Вы можете развернуть новую версию многоразового интерфейса при желании, на основе A Per App.

Как обычно, контекст король. В большинстве случаев я рекомендую подход № 3, но каждый имеет допустимые случаи использования. Есть еще один способ справиться с этим? Пожалуйста, звоните через комментарии.

Дом Кори автор Несколько курсов по JavaScript, React, Clear Code, .NET и многое другое на PluralSight Отказ Он главный консультант по адресу Reactjsconsulting.com , архитектор программного обеспечения в Vinsolutions, Microsoft MVP и поезда разработчиков программного обеспечения на международном уровне по методике программного обеспечения, такими как интерфейс разработки и чистого кодирования. Твиты CORY о JavaScript и Front-End Development в Twitter, как @houseCor Отказ