mehrabix / picard

Expanding the Frontier of Micro Frontends. 🖖 👩🏽‍🚀

Picard.js ·

The next generation of micro frontend orchestrators.

A micro frontend orchestrator is a library that helps you loading, mounting, and unmounting micro frontends incl. their exposed functionality such as components.

What Picard.js allows you to do is to include micro frontends in any web application that you create - from server-side pages rendered with PHP to progressive web applications using Next.js.

Getting Started

Include a script in your website:

<script src="https://unpkg.com/picard-js"></script>

Alternatively, if you don't like unpkg you can also use jsdelivr:

<script src="https://cdn.jsdelivr.net/npm/picard-js"></script>

Now start creating regions for the components of the micro frontends you'd like to display:

<pi-component
  name="column"
  source="https://feed.piral.cloud/api/v1/pilet/picard-demos/latest/mf-simple-html/"
  format="module"
  remote-name="simplehtml">
</pi-component>

The name denotes the name of the exposed component, while the source is used to tell Picard where the micro frontend resides. In the previous example we tell Picard that we want to use a micro frontend using Module Federation (format attribute set to module) with the remote named simplehtml.

In case your Module Federation-built micro frontend is actually using a library.type being set to module, you'd also need to specify remote-type:

<pi-component
  name="column"
  source="https://feed.piral.cloud/api/v1/pilet/picard-demos/latest/mf-simple-html/"
  format="module"
  remote-name="simplehtml"
  remote-type="esm">
</pi-component>

The two remote types are var (refers to a normal script) and esm (refers to a script with type set to module).

For Native Federation a similar syntax is used:

<pi-component
  name="column"
  source="https://feed.piral.cloud/api/v1/pilet/picard-demos/latest/nfsimplehtml/"
  format="native">
</pi-component>

The major difference is that the format is set to native for Native Federation.

Note: Here we don't need to know any remote-name as this is fully defined by the referenced JSON file.

Further Information

👉 For more information visit the documentation.

You can also reach us in the Piral community chat 💻.

License

Picard.js is released using the MIT license. For more information see the license file.