xFrame

xFrame is a client side only, high performance, simple and lightweight typescript-based micro front end framework. xFrame manages different front-end components, potentially coded with different frameworks, called panels

Intro

xFrame allows the execution of different typescript/javascript applications in isolated environments. xFrame uses iframes as containers when maximum isolation is needed. xFrame defines two types of panels: Host and Guest. A single application will typically contain a single host and many guests, where the host is trusted (has access to cookies, network APIs) and the guest is un-trusted.

The host and guest are communicating over messages using the postMessage Window API method. xFrame defines an Agent for every participating window and allows to create a mesh topology of agents. The communication between the agents follows the same principles of the OSI Model.

Usage example

Each panel in xFrame is identified by its URL, where CORS are assumed by default, xFrame is client side and does not define where the panels are hosted. The only requirement from panel is to include the xFrame script and call init():

Copy

Copied

<script src='https://console.dataloop.ai/dlAppLib.js'></script>

Host example:

Copy

Copied

<html>
<body>
<div>Host</div>
<div id='counter'></div>
<div>
    <button onclick='Count()'>Count</button>
</div>
<script src='https://console.dataloop.ai/dlAppLib.js'></script>
<script>
    dl.init()
    let frame = null
    let frameManager = new FrameManager()

    async function init() {
        frame = await frameManager.createFrameByUrl('./guest.html')
    }

    const Count = () => {
        frame.send('hello')
    }
    init()
</script>
</body>
</html>

Guest example:

Copy

Copied

<html>
<body>
<div>Guest</div>
<div id='counter'></div>
<script src='https://console.dataloop.ai/dlAppLib.js'></script>
<script>
    dl.init()
    let helloCounter = 0

    async function init() {
        await dl.init()
        await dl.on("ready", async () => {
            // xFrame is now available
        })
        dl.on("data", (msg) => {
            if (msg.data === 'hello') {
                helloCounter += 1
                document.getElementById("counter").innerText = helloCounter;
            }
        })
    }

    init()
</script>
</body>
</html>

The above example will render as follows:

Learn more:

API
Design