В этой статье мы сосредоточимся на рендеринге дочерних приложений FrintJS в определенных областях нашего пользовательского интерфейса (которые мы называем Регионы), используя React.js в качестве нашей библиотеки рендеринга.

Чтобы извлечь максимальную пользу из этой статьи, рекомендуется сначала прочитать эти две предыдущие статьи:

Что такое Регион?

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

  • Заголовок: может содержать логотип и навигационные ссылки.
  • Нижний колонтитул: дополнительная навигация и информация об авторских правах
  • Основная: область вашего основного контента.
  • Боковая панель: контекстная информация, основанная на содержании основной области.

Во FrintJS мы отправляем компонент <Region /> через пакет frint-react (а также frint-vue), что позволяет нам определять эти области в наших приложениях.

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

Как это работает?

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

import React from 'react';
import { Region } from 'frint-react';
export default function Root() {
  return (
    <div>
      <div className="main">
        ...
      </div>
      <div className="sidebar">
        <Region name="sidebar" />
      </div>
    </div>
  );
}

Все, что мы сделали, это просто определили регион в нашем компоненте и дали ему уникальное имя «sidebar». Пока это просто заполнитель, и он ничего не будет отображать в пользовательском интерфейсе, пока не будет доступно какое-либо дочернее приложение для этого конкретного региона.

Зарегистрируйте дочернее приложение:

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

import RootApp from './root-app';
import ChildApp from './child-app';
window.app = new RootApp();
window.app.registerApp(ChildApp, {
  regions: ['sidebar'],
});

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

Теперь всякий раз, когда <Region name="sidebar" /> рендерится в любом месте, он автоматически берет на себя ответственность за рендеринг ChildApp.

Несколько дочерних приложений в одном регионе:

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

window.app.registerApp(ChildApp1, {
  regions: ['sidebar'],
  weight: 5,
});
window.app.registerApp(ChildApp2, {
  regions: ['sidebar'].
  weight: 10,
});

Передача данных через регионы:

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

Данные могут быть переданы в качестве реквизита следующим образом:

import React from 'react';
import { Region } from 'frint-react';
function MyComponent() {
  const data = {}; // anything
  return (
    <div>
      <Region name="sidebar" data={data} />
    </div>
  );
}

Эти данные через реквизиты (которые также могут меняться со временем) позже могут быть доступны через дочерние приложения с использованием поставщиков.

Подробнее об этом можно прочитать в документации здесь.

Разделение кода

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

Техника:

Это метод, который мы использовали в Travix, чтобы помочь нам разделить наше большое монолитное приложение на несколько пакетов.

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

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

Обязанности со стороны сервера:

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

Ответ сервера выглядит примерно так:

<!-- common libraries, like React and FrintJS -->
<script src="./vendors.js"></script>
<!-- our Root App in FrintJS -->
<script src="./root.js"></script>
<!-- dynamically generated list of Child Apps -->
<script src="./child-1.js"></script>
<script src="./child-2.js"></script>
<script src="./child-3.js"></script>

Пример

Эта тема о разделении кода может потребовать отдельного поста в блоге, но сейчас вы можете взглянуть на этот пример в нашем репозитории для реального варианта использования: https://github.com/frintjs/frint/tree/master. /примеры/несколько приложений

Ищите нас в Твиттере, если у вас есть вопросы!