July 11, 2023

Introducing the FDC3 Web Portal

Introducing the FDC3 Web Portal

There is a lot of interest in bringing FDC3 to the browser and enabling application interoperability for web applications without install.  As a cloud service provider of FDC3,  Connectifi has supported FDC3 in web out of the box from day one.   As the FDC3 community contemplates web adoption, three main questions have emerged:

  1. Can FDC3 support micro front-ends so that all components can use the same APIs for interoperability, whether they are running in-page  or stand alone?
  2. Can a single FDC3 Agent / Provider be shared and multiplexed to multiple iFrames and/or components within a single web page?
  3. Can the connection to a specific FDC3 provider be abstracted, so that applications and/or components do not require any vendor specific code at develop time?

We’re happy to say that the answers to the above questions are ‘Yes’, ‘Yes’, and ‘Yes’ and that we’ve open sourced a project for the community that does all three whether you are using Connectifi as your FDC3 provider or anything else.

The FDC3 Provider Pattern

The pattern that the FDC3 Web Portal project uses is what we’re currently terming a FDC3 Provider pattern.   The idea is to enable separate components to use a single, standard library for FDC3 and defer the actual FDC3 implementation to somewhere further up the chain on a given web page. A nice benefit of this pattern is that it allows micro front-ends in a single page to interact with each other locally, as well as with external applications, through the same FDC3 interface.

Applications/components import  a standard FDC3 API via a single API call . The returned FDC3 interface uses postMessage to communicate with the WebAgent under the hood. It is the WebAgent which provides the FDC3 behavior local to the page and ultimately binds to the  FDC3 Provider implementation. The FDC3 provider can be a Connectifi Agent, a Desktop Container Agent, or any other kind of FDC3 agent.  The only requirement is that it must provide an implementation of the FDC3 API.

The FDC3 Web Portal code decouples the FDC3 API implementation from the FDC3 Provider implementation
In action, this allows for 'Local FDC3' within a single web page along with 'External FDC3' to anything else the provider supports.

Try it Out

The open source repository is available on Github

The NPM package is published here

You can also see a live demo in action here

And if you want to learn more about FDC3 and Connectifi in general, try our FDC3 Sandbox.  It is the fastest way to get started with FDC3. No installs needed and no assembly required!