Class WorkbenchClient

SCION Workbench Client provides core API for a web app to interact with SCION Workbench and other microfrontends.

It is a pure TypeScript library based on the framework-agnostic @scion/microfrontend-platform library and can be used with any web stack.

You can use the Beans object to get references to services to interact with the SCION Workbench and the SCION Microfrontend Platform.

Core services include:

• WorkbenchRouter for navigating to a microfrontend in a workbench view.
• WorkbenchView for the microfrontend to interact with the view.
• WorkbenchPart for the microfrontend to interact with the part.
• WorkbenchDialogService for displaying a microfrontend in a dialog.
• WorkbenchDialog for the microfrontend to interact with the dialog.
• WorkbenchPopupService for displaying a microfrontend in a popup.
• WorkbenchPopup for the microfrontend to interact with the popup.
• WorkbenchMessageBoxService for displaying a message.
• WorkbenchMessageBox for the microfrontend to interact with the message box.
• WorkbenchNotificationService for displaying a notification.
• MessageClient for sending or receiving messages between micro applications.
• IntentClient for issuing or receiving intents between micro applications.
• ManifestService for reading and registering capabilities at runtime.
• SciRouterOutletElement for embedding microfrontends.
• OutletRouter for navigating to a site in a router outlet element.
• ContextService for looking up contextual data set on a router outlet.
• PreferredSizeService for a microfrontend to report its preferred size.
• FocusMonitor for observing if the microfrontend has received focus or contains embedded web content that has received focus.

For example, you can obtain the workbench router as follows:

const router = Beans.get(WorkbenchRouter)
Copy

Below is a summary of the core concepts of the SCION Microfrontend Platform.

Host Application and Micro Applications

The host application, sometimes also called the container application, provides the top-level integration container for microfrontends. Typically, it is the web app which the user loads into his browser and provides the main application shell, defining areas to embed microfrontends. The host application has SCION Workbench installed, registers micro apps and starts the SCION Microfrontend Platform in host mode.

A micro application deals with well-defined business functionality. It is a regular web application that provides one or more microfrontends. SCION Microfrontend Platform uses iframes to embed microfrontends; thus, any web page can be integrated as a microfrontend. A micro application can communicate with other micro applications safely using the platform's cross-origin messaging API. A micro application has to provide an application manifest which to register in the host application.

For more information, see the chapter Core Concepts of the SCION Microfrontend Platform Developer's Guide.

Embedding of Microfrontends

You can embed microfrontends using the <sci-router-outlet> web component. Web content displayed in the web component is controlled via the OutletRouter.

For more information, see the chapter Embedding Microfrontends of the SCION Microfrontend Platform Developer's Guide.

Cross-Application Communication

You can interact with other micro applications via messaging or through so-called intents. Intents are a mechanism known from Android development, enabling controlled collaboration across application boundaries.

For more information, see the chapters Cross-Application Communication and Intention API of the SCION Microfrontend Platform Developer's Guide.

Activation

You can provide an activator to connect to the platform when the user loads the host app into his browser, allowing to initialize and install message listeners for interacting with other micro applications. Starting an activator may take some time. In order not to miss any messages, you can instruct the platform host to wait until you signal readiness.

For more information, see the chapter Activator of the SCION Microfrontend Platform Developer's Guide.

See our Developer's Guide for the full documentation about the SCION Microfrontend Platform.