Code Monkey home page Code Monkey logo

picard's Introduction

Picard.js Logo

Picard.js · GitHub License

Build Status npm GitHub tag GitHub issues Community Chat

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.

picard's People

Contributors

florianrappl avatar jodydonetti avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

kazlaw

picard's Issues

Feature Request: Function for loading MF via Code

We've already discussed this. This is just to have an official record here: It would be great if we could load an MF via a function, e.g. as Angular's router uses Lambda-Expressions for lazy loading (e.g. loadComponent: () => loadMF(...))

Lightweight Resumation Variant

New Feature Proposal

For more information, see the CONTRIBUTING guide.

Description

Right now we have variants for many things such as Node.js or the browser. What we miss is the hybrid (or "lightweight") variant that can take over from a SSR process.

Background

The lightweight variant is essentially the browser variant minus

  • MF loading (always done by the server)
  • feed loading (always done by the server)
  • slot indexing (always done by the server)
  • rendering is either done via a hydration (after being rendered on the server) or fully (if skipped on the server)
  • rendering may be skipped in case of certain flags (only rendered on server)

The hydration / rendering is done conditionally - based on a user-set condition (islands model).

Discussion

What else should this be capable (or not capable) of?

Slot Ordering Attributes

New Feature Proposal

For more information, see the CONTRIBUTING guide.

Description

The pi-slot component should have ordering attributes.

Background

Right now we show the elements in a non-ordered mode, i.e., as we found them. This should be unified to guarantee an order.

For this two attributes should exist:

  • order-by (determines the behavior)
  • reverse-order (takes whatever was ordered beforehand and reverses it)

Discussion

What behavior should we consider? Right now we have:

  • cid (ID of the component)
  • origin (name of the origin micro frontend)
  • time (when the component was found / registered)
  • none (just default)

Mock Native Federation Package

New Feature Proposal

For more information, see the CONTRIBUTING guide.

Description

Existing micro frontends using Native Federation might implicitly use the (otherwise globally provided / shared) @softarc/native-federation package. This package is no longer needed.

Background

MF using the package might need it to access the loadRemoteModule function. We can provide this function and implicitly use the loadComponent function from Picard's scope.

Discussion

Any other function that we should provide here?

Loading MF Remote as ESM

It seems like MF is currently always loaded as a script file. Is there a way to load it as an ESM to prevent this issue:

image

Angular is just using ESM, meanwhile.

Loading Spinner for Components

New Feature Proposal

For more information, see the CONTRIBUTING guide.

Description

Components load fully asynchronous, which may be problematic as the loading process could exceed the 100ms threshold. Potentially someone wants to show a replacement (not the fallback).

Background

Piral has a generic loading component to solve this. But here, we need to be more general and therefore the proposal is to add a loading-template-id to pi-component and pi-slot components. If the attribute is set the template will be shown if the inner lifecycle is not started at the next frame.

The loading-template-id would work similarly to the fallback-template-id - it's the ID of a template element containing the HTML to show as the spinner.

Discussion

Should we wait longer before we show the loading spinner? Or should we always render that (and potentially throw it away immediately)?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.