@myop/sdk

Myop SDKs

Enhance Your UI Management with Real-Time Flexibility

Next-Level UI/UX Management with Myop SDKs

Myop offers an open-source set of SDKs designed to connect your application logic with dynamically chosen user interfaces. It simplifies experimenting with UI/UX changes without deployments or direct involvement from your host application. It allows developers to refactor the look and feel of any component without disrupting its core functionalities like data fetching, state or event handling while maintaining typed communication between components and the host application, just like any local component you have today.

Table of Contents

• Root SDK
• Host SDK
• Iframe SDK
• WebComponent SDK
• Framework Integrations
  • React
  • Angular
  • Vue.js
• Key Features of Myop SDKs
• Why Choose Myop SDKs?
• Get Started with Myop SDKs Today!
• Related Resources

Root SDK - The Core of Your Application Integration

The Root SDK is the starting point for using Myop’s powerful UI components. It enables you to dynamically load, control, and interact with Myop components inside your web application, offering full control over UI modifications with minimal setup.

Installation - How to Integrate the Root SDK

You can load the Root SDK into your application in one of two ways:

• Via CDN (Script Tag):

<script src="https://statics.myop.dev/sdk/next/myop_sdk.js"></script>
<script>
    // Initialize the SDK
    const { hostSDK } = await window.myop.rootSDK.getHostModule();
    const { MyopMessages } = await window.myop.rootSDK.getMyopMessages();
</script>

2 Via NPM (Import into TypeScript/JavaScript Application):

import { getHostModule } from '@myop/sdk';

const { hostSDK } = await getHostModule();

Initialization and Component Loading Once the SDK is loaded, you can initialize the hostSDK and start interacting with components.

// Initialize hostSDK instance
hostSDK.init();

// Load Myop components into your app dynamically
let myopComponent1 = await hostSDK.loadComponent(config.components['myExternalComponent1'], appDiv);
await myopComponent1.initiated();

// Send messages or modify UI components
const appTitleSelector = new MyopMessages.MyopElementSelector('myAppTitle');
myopComponent1.send(new MyopMessages.ChangeTextMessage(appTitleSelector, `Myop - WebComponents`));

Host SDK - Integrate Myop Components into Your App The Host SDK is designed for applications that act as containers for Myop components. It provides core functionalities for embedding and managing Myop components within your web app, enabling smooth communication and integration.

With the Host SDK, you can:

Dynamically register, load, and control Myop components. Ensure seamless integration and maintain consistent UX across multiple components. Communicate with the embedded Myop components using event-driven APIs.

📕 Host SDK Documentation

Explore the full documentation for the Host SDK to unlock the full potential of Myop's component-based UI management.

Iframe SDK - Isolation with Seamless Communication The Iframe SDK is perfect for integrating Myop components into isolated environments such as iframes. It provides tools and utilities for secure communication between the host app and the Myop components running inside iframes.

Using the Iframe SDK, developers can:

Achieve secure isolation for Myop components while retaining communication with the host application. Benefit from the overall structure and management capabilities of the host app, without sacrificing security or performance. Easily load and manage iframe-based components within your web app. How to Load the Iframe SDK You can load the Iframe SDK after loading the Root SDK in two simple steps:

Via Script Tag:

const { IframeSDK } = await window.myop.rootSDK.getIframeModule();

Via NPM (Import into TypeScript/JavaScript Application):

import { getIframeModule } from '@myop/sdk';
const { IframeSDK } = await getIframeModule();

📕 Iframe SDK Documentation

For a deep dive into the Iframe SDK’s capabilities and usage, refer to the detailed documentation.

WebComponent SDK - Embedding Reusable Web Components The WebComponent SDK is built to support the use of Myop components packaged as self-contained web components. It simplifies lifecycle management, event handling, and communication, ensuring smooth integration with the host application.

With this SDK, developers can:

Create modular, reusable web components that can be used across various applications. Benefit from lifecycle management tools to handle component states, initialization, and teardown. Enable communication between the host application and the web components for dynamic, real-time changes. How to Load the WebComponent SDK Once the Root SDK is loaded, you can seamlessly load the WebComponent SDK:

Via Script Tag:

const { WebComponentSDK } = await window.myop.rootSDK.getWebcomponentModule();

Via NPM (Import into TypeScript/JavaScript Application):

import { getWebcomponentModule } from '@myop/sdk';
const { WebComponentSDK } = await getWebcomponentModule();

📕 WebComponent SDK Documentation

Learn more about the WebComponent SDK and how it can enhance your application development in the full documentation.

Framework Integrations Myop SDKs can be seamlessly integrated with popular frontend frameworks like React, Angular, and Vue.js. This section provides detailed instructions for integrating Myop SDKs with these frameworks to help you get started faster.

React Integration To use Myop with React, follow these steps:

Install the Myop SDK via npm:

npm install @myop/sdk

Create a React Component that Loads Myop Components:

import React, { useEffect, useRef } from 'react';
import { getHostModule } from '@myop/sdk';

const MyopComponent = () => {
    const containerRef = useRef(null);

    useEffect(() => {
        const loadMyopComponent = async () => {
            const { hostSDK } = await getHostModule();
            const myopComponent = await hostSDK.loadComponent(config.components['myExternalComponent1'], containerRef.current);
            await myopComponent.initiated();
        };

        loadMyopComponent();
    }, []);

    return <div ref={containerRef}></div>;
};

export default MyopComponent;

Use the React Component:

import React from 'react';
import MyopComponent from './MyopComponent';

const App = () => {
    return (
        <div>
            <h1>Myop + React</h1>
            <MyopComponent />
        </div>
    );
};

export default App;

Angular Integration For Angular applications, you can integrate Myop SDKs by following these steps:

Install Myop SDK via npm:

npm install @myop/sdk

Import and Use Myop SDK in Angular Component:

import { Component, OnInit, ElementRef } from '@angular/core';
import { getHostModule } from '@myop/sdk';

@Component({
    selector: 'app-myop',
    template: `<div #container></div>`,
})
export class MyopComponent implements OnInit {
    constructor(private el: ElementRef) {}

    async ngOnInit() {
        const { hostSDK } = await getHostModule();
        const myopComponent = await hostSDK.loadComponent(config.components['myExternalComponent1'], this.el.nativeElement);
        await myopComponent.initiated();
    }
}

Add the Component in the Template:

<app-myop></app-myop>

Vue.js Integration Vue.js developers can integrate Myop SDKs with ease by following these steps: Install the Myop SDK:

npm install @myop/sdk

Create a Vue Component that Loads Myop Components:

<template>
    <div ref="container"></div>
</template>

<script>
import { getHostModule } from '@myop/sdk';

export default {
    name: 'MyopComponent',
    mounted() {
        const loadMyopComponent = async () => {
            const { hostSDK } = await getHostModule();
            const myopComponent = await hostSDK.loadComponent(config.components['myExternalComponent1'], this.$refs.container);
            await myopComponent.initiated();
        };

        loadMyopComponent();
    },
};
</script>

Use the Vue Component:

<template>
    <MyopComponent />
</template>

Key Features of Myop SDKs

• Real-time UI Modifications
  • Modify your application's UI dynamically without requiring redeployment or backend changes.
• Seamless Integration
  • Easily integrate Myop components into any web application, whether in an iframe or as standalone web components.
• Component Flexibility
  • Load and use Myop components based on your app’s requirements and communication needs.
• Independent Lifecycle Management
  • Manage the lifecycle of each component independently, ensuring optimal performance and reusability.

Why Choose Myop SDKs?

Myop offers a powerful, flexible approach to managing your web application’s UI/UX, making it easier to:

• Scale your application with minimal friction.
• Empower front-end developers to manage UI changes independently.
• Build modular and reusable components that can be dynamically loaded based on real-time conditions.
• With comprehensive documentation and support for various use cases, Myop SDKs provide a future-proof solution for modern web development.

Get Started with Myop SDKs Today!

Take your web app to the next level with Myop SDKs. Whether you’re looking to integrate dynamic UI components, manage separate iframe-based applications, or work with modular web components, Myop has you covered.

For more information, examples, and detailed documentation, check out the links to each SDK section above.

Related Resources:

• Read more about Myop
• Myop Documentation
• Join Myop on GitHub
• Discord Community & Support Forum