Verfügbarmachen und Einbetten mit dem Micro Frontend SDK

Der erste Schritt in diesem Prozess besteht darin, eine neue Jutro-App zu erstellen und diese dann als Micro Frontend anzupassen. Dann verwenden Sie dieses neue Micro Frontend in einer anderen Jutro-App. In unserem Beispiel erstellen wir mit Jutro CLI eine zweite Jutro-App, die dann das neu erstellte Micro Frontend nutzt.

micro-frontends-Paket installieren

Entweder instanziieren Sie eine neue Jutro-App oder Sie ändern eine bestehende Jutro-basierte Anwendung so, dass sie das Micro Frontend ist, das Sie einbetten möchten.

Installieren Sie das @jutro/micro-frontends-Paket in Ihrer Jutro-basierten Anwendung, damit Sie Zugriff auf die Micro Frontend-Funktionen haben:

npm i --save @jutro/micro-frontends@<your-jutro-version>

Vergessen Sie nicht: Die Version des Pakets muss mit Ihren anderen Jutro Design System-Paketen übereinstimmen, wie z. B. @jutro/components.

Note:

Die @jutro/auth Abhängigkeit ist nun optional für @jutro/router und @jutro/components Pakete. Allerdings erfordert @jutro/micro-frontends package jetzt, dass @jutro/auth zu Ihren App-Abhängigkeiten hinzugefügt werden, um verwendet werden zu können.

Schritt 1: Eine Jutro-App als Micro Frontend verfügbar machen

Nachdem Sie das Paket installiert haben, führen Sie die micro-frontend folgenden Schritte aus, um die eigenständige App in ein Micro Frontend zu konvertieren, das Sie in eine Shell-App einbetten können. Trotz der Umstellung auf ein Micro Frontend funktioniert die App weiterhin im Standalone-Modus.

Stellen Sie im Micro Frontend-Repository sicher, dass src/indexAsync.js- und src/startApp.js-Dateien vorhanden und frei von Git-Konflikten sind. Wenn die Dateien nicht vorhanden sind, erstellen Sie sie manuell. Fügen Sie in der Datei src/indexAsync.js Folgendes hinzu:
src/indexAsync.js
```
import('./startApp').then(({ startApp }) => startApp());
```

Ändern Sie in src/startApp.js die import der Funktion start in @jutro/micro-frontends.

src/startApp.js
// Replace the start function from @jutro/app
import { start } from '@jutro/micro-frontends';
import messages from './app/App.messages';
/* ... */

Sie müssen die Micro Frontend start-Funktion innerhalb der startApp-Funktion aufrufen:

export const startApp = (mfeData) => {
  start(Jutro, {
    appName: messages.appName,
    appDescription: messages.appDescription,
    mfeData,
  });
};

Starten Sie Ihre App:

npm i
PORT=3001 npm run start

Schritt 2: Ein Micro Frontend in eine Shell-App einbetten

Mit dem Micro Frontend SDK können Sie Ihr Micro Frontend in jede Webanwendung einbetten. Die Shell-App muss keine Jutro-App sein. Sie muss nicht einmal eine React-Anwendung sein. Als einzige Bedingung muss die Anwendung als Micro Frontend verfügbar gemacht sein. Die iframe-Apps respektieren die Eigenschaften, die von ihren Shell-Apps übergeben werden, wenn es um das Verhalten von Jutro geht.

Dann können Sie es entsprechend dem folgenden Beispiel einbetten:

<script src="http://your-app.com/sub-path/jutro-micro-frontends.js"></script>
<script>
  const selector = document.getElementById('micro-app-container');
  const renderer = JutroMicroFrontends.createRoot(
    selector,
    'claimMicroFrontend@http://your-app.com'
  );
  renderer.render(appSettings);
  // appSettings: see example below for details
</script>

Note: Für das Skript src ist https://your-app.com/sub-path die URL, unter der Ihr Micro Frontend bereitgestellt wird. Sie sollten in der Lage sein, es unter der von Ihnen angegebenen URL anzuzeigen, es würde jedoch im eigenständigen Modus gerendert werden, ohne dass eine Shell-App darum herum vorhanden ist.

Sie geben das Micro Frontend an, das Sie einbetten möchten, wie in der ersten Zeile des Beispiels gezeigt. Anschließend erstellt <script /> eine Fensterobjekteigenschaft window.JutroMicroFrontends. Derzeit ist dies die einzige Möglichkeit, das Micro Frontend SDK zu verwenden. Das SDK hat auch eine Beschränkung, dass jeweils nur ein Micro Frontend eingebettet ist.

integrateJutro ermöglicht die Aktivierung und Deaktivierung verschiedener Integrationen. Diese Eigenschaft ist, wie der Rest der Integrationsoptionen, auf false gesetzt. Weitere Informationen zu allen verfügbaren Eigenschaften finden Sie im Abschnitt Micro Frontend API-Referenz.

Beachten Sie, dass die Authentifizierung bei Verwendung des Micro Frontend SDK nicht automatisch erfolgt. Weitere Informationen finden Sie im Abschnitt Authentifizierung.

Übergeben von Eigenschaften

Wenn Sie bei Verwendung des Micro Frontend SDK benutzerdefinierte Eigenschaften übergeben möchten, übergeben Sie sie als Schlüssel-Wert-Paare in die Funktion render().

renderer.render({
  sampleProp: 'sample prop text',
  anotherCustomProp: true,
  jutro: {
    // ...Jutro settings
  },
  // ...more app settings
});

Die benutzerdefinierten Eigenschaften werden an die Komponente <AppRoot> in Ihrem Micro Frontend übergeben.

App.js
export const AppRoot = ({ sampleProp, anotherCustomProp, ...otherProps }) => {
  // your implementation
};

export const Jutro = (props) => (
  <SettingsProvider>
    <AppRoot {...props} />
  </SettingsProvider>
);

Authentifizierung

Sie können die Authentifizierungsintegration aktivieren, indem Sie die Eigenschaft integrateAuth auf true. Standardmäßig ist diese Integration aktiviert.

Damit Ihre Apps Authentifizierungsinformationen kommunizieren, müssen Sie Authentifizierungstoken mithilfe der Eigenschaft auth übergeben. Folgende Argumente werden unterstützt:

accessToken: jutro.auth.accessToken - Zeichenfolge
idToken: auth?.idToken - Zeichenfolge
userInfo: auth.userInfo - OidcUserInfo | null. Wenn Sie die Authentifizierungsintegration aktivieren, ist dieser Parameter erforderlich.

{
  jutro: {
    integrateAuth: true;
    auth: {
      accessToken: 'access-token',
      idToken: 'id-token',
      userInfo: {
          ...
          name: 'name',
          email: 'mymail@mail.com'
          ...
      }
    }
  }
}

Die Shell-App ist für die Aktualisierung der Token verantwortlich. Die Token müssen vor ihrem Ablauf aktualisiert werden, um eine Unterbrechung der Arbeit des Benutzers zu vermeiden. Der Jutro-Authentifizierungsclient erledigt dies automatisch.

Anforderungen

Um sicherzustellen, dass beim Einbetten eines Micro Frontends mit aktivierter Authentifizierungsintegration ordnungsgemäß funktioniert, gibt es bestimmte Anforderungen an die sichere Kommunikation und Servicemitarbeiter. Ein Service Worker ist ein Hintergrundskript, das im Browser ausgeführt wird und Aufgaben wie die Verarbeitung von Authentifizierungsabläufen verwaltet.

Für die Entwicklung können Sie localhost mit HTTP verwenden, für die Produktion müssen Sie Bereitstellungen mit HTTPS verwenden. Diese Konfigurationen stellen sicher, dass Service Worker bei der Verarbeitung von Authentifizierungsabläufen ordnungsgemäß arbeiten. Wenn das Micro Frontend den Service Worker verwendet, müssen die Shell und das Micro Frontend am selben Standort bereitgestellt werden.

Die folgenden Konfigurationen gelten als sicher und ermöglichen es dem Service Worker, ordnungsgemäß zu funktionieren:

http://localhost – localhost wird bei HTTP als sicher behandelt, eine Ausnahme von typischen Sicherheitsrichtlinien.
https://example.com/app – Eine vollständig gültige HTTPS-URL.
https://localhost – Funktioniert mit einem vertrauenswürdigen, selbst signierten Zertifikat.
https://127.0.0.1 – Außerdem ist ein vertrauenswürdiges, selbst signiertes Zertifikat erforderlich.

In Fällen, in denen Sie eine localhost Shell verwenden, stellen Sie sicher, dass das bereitgestellte Micro Frontend die entsprechende frame-ancestors-Direktive in seinem Content-Security-Policy (CSP)-Header enthält, um die Einbettung zu ermöglichen.

Bei HTTPS-Setups localhost ohne gültiges Zertifikat funktionieren Service Worker nicht, sodass Jutro stattdessen den Sitzungsspeicher für die Authentifizierung verwendet. Standardmäßig deaktiviert Jutro den Service Worker und verwendet Sitzungsspeicher für localhost mit HTTPS-Apps. In diesem Szenario wird die folgende Warnung angezeigt: @jutro/auth Service Worker können nur für sichere Ursprünge registriert werden. Sie führen einen lokalen HTTPS-Server aus, daher wird der Sitzungsspeicher als Fallback verwendet. Wenn Sie Service Worker im lokalen HTTPS-Setup testen möchten, müssen Sie ihn explizit aktivieren, indem Sie die Variable REACT_APP_JUTRO_AUTH_HTTPS_LOCALHOST_SERVICE_WORKER=true .env hinzufügen oder zu reinem HTTP wechseln.

Bestimmte Konfigurationen verhindern, dass Service Worker registriert werden, was zu einer Unterbrechung der Authentifizierungsabläufe führen kann. Die Auswirkungen hängen davon ab, wie das Micro Frontend mit der Shell-App interagiert. Wenn das Micro Frontend seine Token aus der Shell bezieht und in der Shell die Authentifizierung aktiviert ist, z. B. wenn ein Service Worker verwendet wird, muss nur die Shell die Service Worker-Anforderungen erfüllen. Das Micro Frontend verwendet keinen Service Worker und muss diese Anforderungen nicht erfüllen. Wenn das Micro Frontend seine Token nicht von der Shell bezieht, unabhängig davon, ob in der Shell die Authentifizierung aktiviert ist oder nicht, muss das Micro Frontend einen Service Worker verwenden. In diesem Fall müssen sowohl das Micro Frontend als auch die Shell die Service Worker-Anforderungen erfüllen, um das ordnungsgemäße Funktionieren der Authentifizierungsabläufe zu gewährleisten.

Service Worker können nicht registriert werden, wenn entweder die Shell oder das Micro Frontend unter einer der folgenden Bedingungen ausgeführt wird, was zu einer Unterbrechung der Authentifizierungsabläufe führt:

http://127.0.0.1 – Nicht als sicherer Kontext betrachtet.
http://example.com/app – Eine ungesicherte HTTP-Verbindung.
https://localhost – Ohne vertrauenswürdiges Zertifikat.
https://example.com/app – Wenn das Zertifikat ungültig ist.

Versionskompatibilität

In älteren Shell-Anwendungen, in denen Jutro verwendet wird, die aber älter als Jutro Version 8 sind, bei der die MicroFrontend-Komponente (MicroApp in älteren Jutro-Versionen) zur Unterstützung des isolierten Modus inkrementiert wurde, kann die Hilfsbibliothek weiterhin zum Importieren moderner iframe-Anwendungen mit jeder Version verwendet werden. Beachten Sie, dass weitere Schritte erforderlich sind, um Jutro-Funktionen zu integrieren und den Zustand zu teilen.

Anwendungsfälle

Globalisierung

Mit der Eigenschaft g11n können Globalisierungsänderungen in der iframe-Anwendung überwacht werden. Durch Synchronisierung der Shell-App kann darauf reagiert werden. Die Globalisierungsintegration erfordert die Implementierung auf der Shell-Seite. Das folgende Beispiel zeigt die Struktur der Lokalisierungskonfiguration:

{
  availableLanguages?: Array<string>;
  availableLocales?: Array<string>;
  defaultCountryCode?: string;
  defaultCurrency?: string;
  defaultTimeZone?: string;
  preferredLanguage?: string;
  preferredLocale?: string;
    onGlobalizationChange(changeObject)
};

Der onGlobalizationChange-Rückruf wird ausgeführt, wenn ein Micro Frontend sein Gebietsschema oder seine Sprache ändert. changeObject akzeptiert die folgenden Werte:

language?: string
languageChanged?: boolean
locale: string
localeChanged: boolean

Das folgende Beispiel zeigt, wie Globalisierungseinstellungen eingerichtet und Gebietsschema- und Sprachänderungen in einem Micro Frontend verarbeitet werden:

const { language, languageOnChangeCallback } = useLanguage();
const { locale, localeOnChangeCallback } = useContext(LocaleContext);

const renderMfe = (route, otherProps) => {
  root?.render({
    ...otherProps,
    jutro: {
      g11n: {
        preferredLocale: 'en-EN',
        preferredLanguage: 'en-EN',
        defaultCountryCode: 'US',
        defaultCurrency: 'USD',
        defaultTimezone: 'GMT',
        onGlobalizationChange(change) {
          if (change.languageChanged && change.language) {
            languageOnChangeCallback?.(change.language);
          }

          if (change.localeChanged && change.locale) {
            localeOnChangeCallback?.(change.locale);
          }
        },
      },
    },
  });
};

configOverrides.localeSettings überschreibt die in der Eigenschaft g11n angegebenen Werte. Es wird nicht empfohlen, es zu verwenden, wenn Ihre App mit SDK eine benutzerdefinierte Integration mit g11n bereitstellt.

Jutro-Überschreibungen

Jutro configOverrides wird weiterhin unterstützt und kann normal übergeben werden:

jutro: {
    configOverrides: {
        // Jutro config overrides, if any
    },
}

Modal-Integration

Modale können auch integriert werden, um den Bildschirm außerhalb der iframe-Box abzudecken. Übergeben Sie dazu die unterstützten modalen Funktionen aus der Shell-App:

jutro: {
  modal: {
    showAlert: ({
        status,
        icon,
        title,
        message,
        confirmButtonText,
    }) => {
        console.log({
            status,
            icon,
            title,
            message,
            confirmButtonText,
        });
    },
    showConfirm: ({
        status,
        icon,
        title,
        message,
        confirmButtonText,
        cancelButtonText,
    }) => {
        const testResult =
            document.getElementById('callbackResult');
        testResult.innerText = message;
    },
  },
  ...
}

Micro Frontend SDK ist nicht in der Lage, die Benutzeroberfläche im Shell-App-Kontext anzuzeigen. Um ein modales Element in der Shell-App anzuzeigen, integrieren Sie das modale Popover direkt in den Rest der Shell-App. Das Micro Frontend SDK kann keine Features der Shell-App steuern, z. B. die Formatierung, die Barrierefreiheitsstruktur oder Ereignislistener.

Im Gegensatz zur Micro Frontend-Komponente, die sich nahtlos in React-basierte Jutro-Apps integrieren lässt, um modale Vorgänge zu verarbeiten, operiert Jutro Micro Frontend SDK iframe unabhängig von diesen Integrationen. Das Senden von benutzerdefinierten React-Elementen ist nicht möglich, daher ist die modale Integration auf die modalen Funktionen beschränkt, die serialisierbare Parameter verwenden.

Wenn modale Muster auf Zeichenfolgenübersetzungen basieren, die nur in der iframe-App verfügbar sind, muss die Übersetzung erfolgen, bevor die modalen Funktionen aufgerufen werden. Micro Frontend SDK enthält keine Funktionen für die Nachrichtenübersetzung. Beim Übergeben eines Nachrichtenobjekts wie showAlert({ id: "my-message", defaultMessage: "Some text" }) empfängt die Shell-App ein nicht übersetztes Nachrichtenobjekt:

render({ jutro: {
    modal: {
        showAlert: (message) => // receives untranslated message object
    }
}});

Um den korrekten Text im modalen Popover anzuzeigen, führen Sie die Übersetzung auf der Shell-Seite mit den verfügbaren Übersetzungstools durch oder schließen Sie die Übersetzung im Micro Frontend ab, bevor Sie das modale Popover aufrufen.

Wenn Sie einen iframe in eine Seite einbetten, wird beim Aktualisieren der Seite die iframe-Anwendung im Allgemeinen neu geladen. Infolgedessen verliert die iframe-App ihren Zustand. Jutro Micro Frontend SDK löste dieses Problem, indem es der Shell-App und nur der Shell-App erlaubte, die einzige Quelle der Wahrheit für das Routing zu sein. Auf diese Weise können Sie Routen und den Verlauf verwalten und gleichzeitig den Status für jeden Ort in der App beibehalten, einschließlich der von der iframe-App gerenderten Standorte.

Da es sich bei Ihrer Shell-App um jede Art von Web-App und nicht unbedingt um eine Jutro-App handeln muss, können Sie jede beliebige Routingbibliothek verwenden. Die iframe-App kann dann Navigationsänderungen in der Shell-App abhören und ihren Standort und Verlauf dank der Eigenschaft router aktualisieren.

Die router-Eigenschaft wird wie folgt definiert:

export type RouterIntegrationProps = {
  location?: string;
  onLocationChange?: (
    pathname: string,
    action: 'PUSH' | 'REPLACE' | 'GO'
  state?: unknown,
  ) => void;
  state?: unknown;
};

location: Der gewünschte Ort, relativ zur Shell-App
onLocationChange: Ein optionaler Rückruf, der durch das eingebettete Micro Frontend ausgelöst wird, wenn der Benutzer navigiert oder weitergeleitet wird. Es ist nur erforderlich, wenn die Shell Routenänderungen verarbeiten muss. Der onLocationChange-Rückruf erhält die folgenden Argumente:
- pathname: Der neue Ort, an dem sich das Micro Frontend befinden soll. Er ist relativ zu dem Ort, an dem das Micro Frontend in der Shell-App eingebettet ist.
- action: Die Aktion, die die Navigationsänderung ausgelöst hat.
- state: Das Zustandsobjekt, das mit dem neuen Ort verknüpft ist. Weitere Informationen finden Sie in der MDN-Dokumentation zu pushState().
onBlockChange: Es ermöglicht die Verwendung der history.block-API, die verhindern kann, dass Benutzer von der aktuellen Seite weg navigieren, z. B. wenn sie ungespeicherte Daten haben. Der onBlockChange-Rückruf wird mit isBlocked=true und einem optionalen Eingabeaufforderungsrückruf aufgerufen, wenn das Micro Frontend die Navigation blockieren möchte. Er kann mit isBlocked=false aufgerufen werden, wenn die Blockierung nach dem Aufruf unblock des Micro Frontends aufgehoben wird. Er akzeptiert die folgenden Argumente:
- isBlocked: Boolean
- prompt: Optionale Eingabeaufforderung

Das Argument action kann Folgendes sein:

PUSH: Der Benutzer navigiert zu einem neuen Ort.
REPLACE: Der Benutzer navigiert zu einem neuen Ort, der den aktuellen Ort im Verlauf ersetzt.
GO: Der Benutzer navigiert zurück oder vorwärts. Der Ort ist eine Zahl, die angibt, wie viele Schritte zurück oder vorwärts zu navigieren sind. -3 bedeutet beispielsweise, dass 3 Schritte im Verlauf zurück zu navigieren sind.

Das Argument state ist nur sinnvoll, wenn PUSH oder REPLACE als action angegeben ist.

Hier ein Beispiel, bei dem eine Shell-App mit einer /claims-Route erstellt wird und die Micro Frontend-Anwendung in diese Route eingebettet werden soll. Innerhalb dieses hypothetischen Micro Frontends gibt es die folgenden Routen:

/: die Liste aller Schadenfälle
/new: das Formular zum Erstellen eines neuen Schadenfalls
/:claimId/edit: das Formular zum Bearbeiten eines vorhandenen Schadenfalls

Der onLocationChange-Rückruf kann verwendet werden, um den Ort und den Verlauf der Shell-App zu aktualisieren, wenn das Micro Frontend durch sie navigiert.

Wenn der Benutzer beispielsweise in der Shell-App zu /claims/new navigiert, kann die iframe-Anwendung den Ort auf /new aktualisieren und in den Verlauf des Micro Frontend übertragen. Das Micro Frontend kann dann anhand des zugehörigen Verlaufs zurück und vorwärts navigieren.

Der folgende Codeausschnitt zeigt, wie das Micro Frontend Navigationsänderungen in der Shell-App überwachen und den Ort und Verlauf entsprechend aktualisieren kann. Der Einfachheit halber wird die Browser-API ohne Bibliotheken verwendet. Sie können jedoch jede beliebige Bibliothek zum Verwalten des Verlaufs des Micro Frontend verwenden.

// The routes in question are:
// /claims/
// /claims/new
// /claims/:claimId/edit
//        ^ base location for the iframe app
const microFrontendPathname = '/claims';
const relativeLocation = document.location.href
  .replace(window.location.origin, '')
  .replace(microFrontendPathname, '');
// after we remove the origin and the base location, we get the relative location
// relativeLocation equals '/', or '/new', or '/:claimId/edit'

const jutro = {
  router: {
    location: '/mfe/location',
    // you can use location to pass queryParams:
    // location: '/route?paramA=value1&paramB=value2',
    onLocationChange: (location, action, state) => {
      // location equals '/'
      // location equals '/new'
      // location equals '/:claimId/edit'

      if (action === 'GO') {
        // The user navigated back or forward
        // location is the number of steps to go back or forward
        // for example, -3 means we are going back 3 steps in the history
        history.go(location);
        return;
      }

      if (action === 'PUSH') {
        // The user navigated to a new location, pushing a new entry in the browser history
        history.pushState(state, '', `${microFrontendPathname}${location}`);
        return;
      }

      if (action === 'REPLACE') {
        // The user was redirected, replacing the entry in browser history,
        // so pressing the back button will not go back to the previous location
        history.replaceState(state, '', `${microFrontendPathname}${location}`);
        return;
      }
    },
  },
};

Wenn Sie die Router-Integration mit der Eigenschaft integrateRouter: falsedeaktivieren, ändert sich die Adressleiste des Browsers nicht, und die Shell-Historie wird nicht aktualisiert, da sie nicht auf Aktualisierungen vom Micro Frontend wartet.

Theming

Das Jutro-Design kann von der Shell-App durch Übergeben der themeConfig-Eigenschaften bestimmt werden, und die Shell-App kann auch auf interne Designänderungen hören.

jutro: {
    theme: {
        themeConfig: {
            // All the theme configs accepted by Jutro, determines the theme used by the
            // iframe app on startup. Check the Jutro theming props for more details.
            // For example, if you want to use a Jutro provided theme, you can base your
            // config on it and pass 'themeConfig' as follows:
            // name: 'Customer',
            // baseTheme: 'Customer'
        },
        switchTheme: newThemeConfig => {
            // A callback that will be triggered when the iframe app switches its theme.
            // Use it to change the shell app state accordingly, if desired
        },
    },
}

Popups

Popups können auch integriert werden, um außerhalb des iframe-Feldes angezeigt zu werden. Übergeben Sie dazu den toast Trigger-Rückruf aus der Shell-App:

jutro: {
    toast: {
        toast: ({ message, type, autoClose, autoFocus, linkProps }) => {
            // Use the callback to render a toast in the shell app leveraging all the
            // Jutro props for toasts
        },
    },
}

Eine Einschränkung besteht dabei darin, dass für den Fall, dass die Popups auf Übersetzungen von Zeichenfolgen beruhen, die nur in der iframe-Anwendung verfügbar sind, die Übersetzung der Zeichenfolgen vor dem Aufruf von ToastProvider erfolgen muss. Der endgültige Wert muss an das Popup übergeben werden, da der Anbieter der Shell-App andernfalls nicht über die erforderlichen Übersetzungen verfügt.

Anzeigen einer Kopf- oder Fußzeile innerhalb des Micro Frontends

jutro: {
  modal: {
    showAlert: ({
        status,
        icon,
        title,
        message,
        confirmButtonText,
    }) => {
        console.log({
            status,
            icon,
            title,
            message,
            confirmButtonText,
        });
    },
    showConfirm: ({
        status,
        icon,
        title,
        message,
        confirmButtonText,
        cancelButtonText,
    }) => {
        const testResult =
            document.getElementById('callbackResult');
        testResult.innerText = message;
    },
  },
  ...
}

render({ jutro: {
    modal: {
        showAlert: (message) => // receives untranslated message object
    }
}});

Globalisierung

{
 availableLanguages?: Array<string>;
 availableLocales?: Array<string>;
 defaultCountryCode?: string;
 defaultCurrency?: string;
 defaultTimeZone?: string;
 preferredLanguage?: string;
 preferredLocale?: string;
 onGlobalizationChange(changeObject)
};

Der onGlobalizationChange-Rückruf wird ausgeführt, wenn ein Micro Frontend sein Gebietsschema oder seine Sprache ändert. changeObject akzeptiert die folgenden Werte:

language?: string
languageChanged?: boolean
locale: string
localeChanged: boolean

Das folgende Beispiel zeigt, wie Globalisierungseinstellungen eingerichtet und Gebietsschema- und Sprachänderungen in einem Micro Frontend verarbeitet werden:

const { language, languageOnChangeCallback } = useLanguage();
const { locale, localeOnChangeCallback } = useContext(LocaleContext);

const renderMfe = (route, otherProps) => {
  root?.render({
    ...otherProps,
    jutro: {
      g11n: {
        preferredLocale: 'en-EN',
        preferredLanguage: 'en-EN',
        defaultCountryCode: 'US',
        defaultCurrency: 'USD',
        defaultTimezone: 'GMT',
        onGlobalizationChange(change) {
          if (change.languageChanged && change.language) {
            languageOnChangeCallback?.(change.language);
          }

          if (change.localeChanged && change.locale) {
            localeOnChangeCallback?.(change.locale);
          }
        },
      },
    },
  });
};

Jutro-Überschreibungen

Jutro configOverrides wird weiterhin unterstützt und kann normal übergeben werden:

jutro: {
    configOverrides: {
        // Jutro config overrides, if any
    },
}

iframe-Attribute

Es ist möglich, zusätzliche Attribute für Micro Frontends zu übergeben, die im isolierten Modus oder im SDK eingebettet sind. Dadurch ist es möglich, verschiedene Browserfunktionen zu aktivieren. Einträge aus der Eigenschaft iframeAttributes werden dem iframe-HTML-Element hinzugefügt. Nur Eigenschaften allow, referrerpolicy und sandbox sind zulässig. Weitere Informationen zu diesen Eigenschaften finden Sie in der Micro Frontend API-Referenz.

renderer.render({
  sampleProp: 'sample prop text',
  anotherCustomProp: true,
  jutro: {
    iframeAttributes: {
      allow: 'geolocation; camera "none"',
      referrerpolicy: 'noreferrer',
      sandbox: 'allow-scripts',
    },
  },
});

Größenänderung

In Jutro iframe-Anwendungen wird die iframe-resizer-Bibliothek verwendet, um die automatische Größenänderung des iframe basierend auf den Inhalten der iframe-Anwendung durchzuführen.

Damit die automatische Größenänderung funktioniert, sollte der iframe in einem Container mit einer relativen Dimension platziert werden, z. B. Prozentsatz oder VW. Jutro-Apps sind so konzipiert, dass sie mit mobilem Styling umgehen können, in der Regel ohne Mindestbreiten. Daher ist die Verwendung einer relativen Breite hier in der Regel die richtige Wahl.

// using the iframe app helper library
<div
  style={{ width: '100%' }}
  id="myDiv"
/>

Wenn die Breite des Containers durch das Design der Shell-Appsseite nicht begrenzt ist, können Sie auf die Festlegung der Breite verzichten. Der Container und der zugehörige iframe werden dann auf die gesamte verfügbare Breite erweitert.

Note: Wenn Ihr Micro Frontend die Größe innerhalb der Shell-App nicht korrekt anpasst, müssen Sie den folgenden Import in den Code Ihrer App einfügen: import iframe-resizer/js/iframeResizer.contentWindow.

Erneutes Laden eines Micro Frontends

Sie können ein Micro Frontend () => window.location.reload() neu laden, indem Sie den benutzerdefinierten Rückruf aus der Shell-App übergeben. Das folgende Beispiel zeigt, wie sie in einer Schaltfläche implementiert wird:

const reloadMFE = () => {
  window.location.reload();
};

return (
  <div>
    <button onClick={reloadMFE}>Reload Page</button>
  </div>
);

Grundriss-Routing und Micro Frontends

Wenn Sie ein Micro Frontend in einen Grundriss in einer Jutro-Shell-App mit aktivierter Routing-Integration einbetten, achten Sie darauf, dass Sie exact nicht auf true setzen. Andernfalls gilt: Sobald das Micro Frontend zu /my-mfe/some-microfront-subpage navigiert, stimmt es nicht mehr genau mit /my-mfe überein, und die Bereitstellung Ihres Micro Frontends wird aufgehoben.

{
  /* ... omitted ... */
  "floorplan.default": {
    "routes": [
      {
        "title": {
          "id": "id",
          "defaultMessage": "My MicroFrontend"
        },
        "path": "/my-mfe",
        "exact": false, // <-- Set this to false
        "component": "MyMicroFrontend"
      }
    ]
  }
}

Aufheben der Bereitstellung eines Micro Frontends

Um die Bereitstellung eines Micro Frontends aufzuheben, verwenden Sie die Methode unmount(), um es aus dem DOM zu entfernen und Ressourcen freizugeben. Das folgende Beispiel zeigt, wie die unmount()-Methode verwendet wird:

const mfeRoot = JutroMicroFrontends.createRoot(
  selector,
  'claimMicroFrontend@http://localhost:3000'
);

renderer.render({
  {...}
});

renderer.unmount();

Details zur jutro.OnError-Eigenschaft

Die onError-Eigenschaft des Micro Frontend SDK ist eine optionale Eigenschaft und wurde in Jutro 10.10 hinzugefügt, um einen Rückruf hinzuzufügen, der aufgerufen wird, wenn ein Fehler auftritt. Dieser Rückruf muss dem folgenden Typ entsprechen:

({ error: Error, errorInfo?:ErrorInfo }) => void

Note: Dies steht in keinem Zusammenhang mit der Eigenschaft onError des HTML-Elements <iframe>.

Wenn ein Rückruf an die Eigenschaft OnError übergeben wird, wird er in zwei Szenarios aufgerufen:

Wenn das Micro Frontend nicht geladen wird und das Timeout in Sekunden abgelaufen ist. In diesem Fall hat das Argument errorInfo den Wert undefined.

Note: Wenn kein Rückruf an onError übergeben wird, wird stattdessen ein Fehler in der Funktion setTimeout() ausgelöst. Dadurch wird ein Protokoll in der DevTools-Konsole hinzugefügt, das jedoch nicht mit try/catch abgefangen werden kann.

Wenn ein Rückruf an onError übergeben wird, wird nur der Rückruf aufgerufen. Es werden keine zusätzlichen Protokollmeldungen oder Fehler in setTimeout() ausgelöst.

Wenn die Fehlergrenze-Komponente der obersten Ebene des Micro Frontends einen Fehler abfängt. In diesem Fall stammt das Argument errorInfo aus React und ist hier unter dem Aufzählungszeichen info unter componentDidCatch(error, info) dokumentiert.

Note: Die Fehlergrenze der obersten Ebene ist die Komponente, die als Eigenschaft errorBoundary an die start-Funktion ApplicationRoot übergeben wird. Weitere Informationen finden Sie in der Dokumentation zur globalen Konfiguration.

Wenn die Eigenschaft onError definiert ist, wird sie als Wert für die Eigenschaft onError an die Fehlergrenze der obersten Ebene übergeben. Wenn onError der Fehlergrenze der obersten Ebene aufgerufen wird, wird auch onError der Shell aufgerufen.

Wenn die Standardfehlergrenze verwendet wird, werden auch vorhandene Verhalten beibehalten, z. B. das Protokollieren des Fehlers in der Konsole und das Senden von Analyseereignissen, wenn dies entsprechend konfiguriert ist.

Wenn eine benutzerdefinierte Fehlergrenze verwendet und onError nicht aufgerufen wird, wenn ein Fehler abgefangen wird, wird auch onError der Shell nicht aufgerufen. In diesem Fall wird onError der Shell nur aufgerufen, wenn das Micro Frontend eine Zeitüberschreitung aufweist.

Vollständiges Beispiel

Shell-App

In diesem Beispiel verfügen wir über eine Shell-App, die Design, Navigation, Popup und modales Popover ermöglicht:

<html>
  <head>
    <title>Non Jutro Shell</title>
  </head>
  <body>
    <h1>SAMPLE PAGE TITLE</h1>
    <div id="callbackResult"></div>
    <div
      id="micro-app-container"
      style="width: 100vw"></div>
    <script src="http://localhost:3001/jutro-micro-frontends.js"></script>
    <script>
      const selector = document.getElementById('micro-app-container');
      const renderer = JutroMicroFrontends.createRoot(
        selector,
        'claimMicroFrontend@http://localhost:3001'
      );
      renderer.render(
        {
          sampleProp: 'sample prop text',
          anotherCustomProp: true,
          jutro: {
            integrateJutro: true,
            // theming
            theme: {
              themeConfig: {
                name: 'Customer',
                baseTheme: 'Customer',
              },
            },
            // navigation
            navigation: {
              location: '/claims',
              onLocationChange: (location, action, state) => {
                const testResult = document.getElementById('callbackResult');
                testResult.innerText = `Location: ${location}, Action: ${action}, State: ${state}`;
              },
            },
            // toast
            toast: {
              toast: ({ message, type, autoClose, autoFocus, linkProps }) => {
                const testResult = document.getElementById('callbackResult');
                testResult.innerText = message;
              },
            },
            // modal
            modal: {
              showAlert: ({
                status,
                icon,
                title,
                message,
                confirmButtonText,
              }) => {
                alert(
                  JSON.stringify(
                    {
                      status,
                      icon,
                      title,
                      message,
                      confirmButtonText,
                    },
                    null,
                    2
                  )
                );
              },
              showConfirm: ({
                status,
                icon,
                title,
                message,
                confirmButtonText,
                cancelButtonText,
              }) => {
                alert(`Message confirmed; STATUS: ${status}; "${message}"`);
              },
            },
            onRender: () => {
              console.log('onRender');
            },
            onLoadingFinished: () => {
              console.log('onLoadingFinished');
            },
            configOverrides: {
              customConfig: 'Micro-app overridden configuration',
              localeSettings: {
                availableLocales: ['en-US', 'es-ES'],
                preferredLanguage: 'ES',
                defaultCurrency: 'EUR',
              },
            },
            appName: 'Micro-app overridden title',
          },
        },
        {
          // onLoaded is triggered when the browser calls the `load` event on the iframe that contains the micro frontend
          onLoaded: () => {},
        }
      );
    </script>
  </body>
</html>

micro-frontends-Paket installieren​

Schritt 1: Eine Jutro-App als Micro Frontend verfügbar machen​

Schritt 2: Ein Micro Frontend in eine Shell-App einbetten​

Übergeben von Eigenschaften​

Authentifizierung​

Anforderungen​

Versionskompatibilität​

Anwendungsfälle​

Globalisierung​

Jutro-Überschreibungen​

Modal-Integration​

Navigation​

Theming​

Popups​

Anzeigen einer Kopf- oder Fußzeile innerhalb des Micro Frontends​

Globalisierung​

Jutro-Überschreibungen​

iframe-Attribute​

Größenänderung​

Erneutes Laden eines Micro Frontends​

Grundriss-Routing und Micro Frontends​

Aufheben der Bereitstellung eines Micro Frontends​

Details zur jutro.OnError-Eigenschaft​

Vollständiges Beispiel​

Shell-App​

micro-frontends-Paket installieren

Schritt 1: Eine Jutro-App als Micro Frontend verfügbar machen

Schritt 2: Ein Micro Frontend in eine Shell-App einbetten

Übergeben von Eigenschaften

Authentifizierung

Anforderungen

Versionskompatibilität

Anwendungsfälle

Globalisierung

Jutro-Überschreibungen

Modal-Integration

Navigation

Theming

Popups

Anzeigen einer Kopf- oder Fußzeile innerhalb des Micro Frontends

Globalisierung

Jutro-Überschreibungen

iframe-Attribute

Größenänderung

Erneutes Laden eines Micro Frontends

Grundriss-Routing und Micro Frontends

Aufheben der Bereitstellung eines Micro Frontends

Details zur jutro.OnError-Eigenschaft

Vollständiges Beispiel

Shell-App