Skip to content

Latest commit

 

History

History
42 lines (27 loc) · 2.96 KB

microfrontend-types.md

File metadata and controls

42 lines (27 loc) · 2.96 KB
Raw

Micro-frontend types

ILC has different categories of micro-frontends. You are free to decide where and how you use each of them. The table below gives you basic recommendations:

Topic Applications Parcels Global libraries
SSR support :material-plus-box:{.color-green} :material-minus-box:{.color-red} :material-minus-box:{.color-red}
Routing :material-plus-box:{.color-green} (multiple routes) :material-minus-box:{.color-red} :material-minus-box:{.color-red}
API Declarative API Imperative API Exports a public interface
Renders UI :material-plus-box:{.color-green} :material-plus-box:{.color-green} :material-plus-minus-box: (may or may not render)
Lifecycles ILC-managed lifecycles Custom managed lifecycles External module: no direct single-spa lifecycles
When to use Core building block To embed part of one app into another Useful to share common logic, or create a service

!!! tip "" Each ILC micro-frontend is an in-browser JavaScript module.

Applications

Applications are registered in ILC Registry, and their lifecycle (when and where they should appear) is managed by ILC, based on the configuration of Routers and Templates.

Applications act as the main building blocks for the website and can be rendered at the server-side to enhance page loading time and SEO/SMO metrics.

Parcels in Applications

Applications can export Parcels to allow parts of their UI to be used in other apps.

Parcels

With Parcels, you can reuse parts of UI across applications when those applications are written in multiple frameworks. In other words, Parcels is an ILC-specific implementation of web components.

Use case example

Contacts modal

Let's say, you have an App1 that handles everything related to contacts (highly cohesive) but somewhere in App2 you need to create a contact. To to this, you can use several techniques:

  1. If both are written in the same framework, you can export/import components.
  2. Re-implement creation of a contact (loss of cohesion).
  3. Use Parcels.

Exporting a Parcel from App1 that wraps the createContact modal component gives you the ability to share components and behavior across disparate frameworks without losing application cohesion. App1 can export a modal as Parcel, and App2 can import the Parcel and use it.