Base concepts

This section aims to clarify some of the terms used throughout the App Shell documentation.

Micro-frontends

Client-side architectural pattern where independently deployed frontend functionality is put together to form an application. Check out micro-frontends.org for more information.

ES Modules

ES modules are the native module system for JavaScript, introduced in ECMAScript 2015 (ES6). They are natively supported by modern browsers, which makes them a future-proof choice.

Bundling is the process of combining all modules accessible from an entry point into a single ES module. This process improves performance, optimizes loading, and enhances code organization.

Shared dependencies

A few libraries are not bundled at runtime but dynamically loaded at runtime. It is used to improve performance by sharing libraries between Application Bundles (reducing bundle sizes and loading the shared library only once) and when sharing the same instance is desired or required (like react and react-dom, for avoiding invalid hook calls in Shared Modules).

That means that, despite the version of the library used by the Application Bundle, the version used at runtime will be the one provided by the App Shell. As such, discrepancies should be avoided, as problems might arise in production that are not detected during development.

These are the current shared dependencies and their versions:

Shared Modules

Shared Modules are ES modules exported by Application Bundles to be imported by other Application Bundles. They can be UI components or simply functionality exposed via an API.

They are declared in the vite.config.ts file, using the modules parameter:

HvAppShellVitePlugin({
  modules: [
    "src/pages/PlanetList",
    "src/pages/PlanetView",
    "src/pages/PlanetForm",
  ],
});

The App Shell itself is able to load the following types of Shared Modules:

• View: Module exporting a React Component intended to be rendered in a App Shell panel (usually the main panel, as a page). It’s configured in the App Shell configuration file in the mainPanel.views array. Detailed in the next section.
• Header Action: Module exporting a React Component that provides a button (or other small UI component) to be rendered in the right-hand side of the App Shell header. It’s configured in the App Shell configuration file in the header.actions array. Detailed in the Header Actions section.
• Provider: Module exporting a React Component that provides a React Context to be used by other Shared Modules. It’s configured in the App Shell configuration file in the providers array.
• Theme: Module that exports a UI Kit theme definition. They can be referenced in the App Shell configuration file in the theming section.

All the above Shared Modules types assume its subject is exported as the default export of the module.