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.
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/"
kind="module"
container="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 (kind attribute set to module) with the container named simplehtml.
For Native Federation a similar syntax is used:
<pi-component
name="column"
source="https://feed.piral.cloud/api/v1/pilet/picard-demos/latest/nfsimplehtml/"
kind="native">
</pi-component>The major difference is that the kind is set to native for Native Federation.
Note: Here we don't need to know any container.
👉 For more information visit the documentation.
You can also reach us in the Piral community chat 💻.
Picard.js is released using the MIT license. For more information see the license file.