Skip to main content

Understanding the System Architecture

Introduction​

Myop is a powerful meta-framework that implements a micro frontend solution designed to help developers manage and load UI components efficiently. It consists of multiple core components that work together to provide a seamless integration experience while optimizing performance. This tutorial explains the architecture of the Myop system, its different parts, and how they interact with each other.

Myop System Components​

The Myop system consists of the following key components:

1. Myop Dashboard​

The Myop Dashboard is a SaaS platform where users can:

  • Define and manage UI components.
  • Organize components into User Flows.
  • Publish changes to ensure the latest version is available.
  • Control how components interact with applications.

The dashboard acts as an orchestrator, providing developers with a UI-driven way to manage and configure their components. One of the key advantages of using Myop is how ridiculously easy it makes implementing A/B testing, segmentation, gradual rollouts, and UI/UX changes without requiring a full application rebuild or deployment. Instead of modifying and deploying an entire frontend, developers can leverage Myop's orchestration capabilities to dynamically control which components appear for different users in real time.

Read more about the Myop Dashboard

2. Myop Cloud​

Myop Cloud is a cloud-based infrastructure that stores and serves UI components at runtime. It ensures that:

  • Applications always retrieve the latest published configurations.
  • Developers can load components dynamically without bundling them into the main application.
  • Performance is optimized by minimizing application bundle sizes and supporting micro frontend strategies.

Read more about the Myop Cloud

3. Myop SDK for Host Applications​

The Myop SDK for host applications is responsible for:

  • Fetching component configurations from Myop Cloud.
  • Rendering components dynamically at runtime.
  • Handling lifecycle events and communication between components and the host application.

This SDK is consumed during the build process but interacts with Myop Cloud at runtime to ensure that applications always use the latest configurations.

With the Myop SDK, A/B testing, segmentation, and gradual rollouts become effortless. Since components are dynamically controlled by Myop Cloud, developers can introduce UI changes to different user groups instantly, without having to redeploy or modify the application itself. Compared to implementing such features manually, Myop provides an incredibly simple and scalable way to manage UI experiments and feature rollouts.

4. Myop SDKs for Component Technologies​

To provide a smooth loading and rendering experience, Myop offers dedicated SDKs for various component technologies, including:

  • React
  • Vue
  • Angular
  • Web Components
  • iFrame-based components

These SDKs handle:

  • Efficient loading and rendering of components.
  • Communication between components and the host application.
  • Ensuring compatibility across different frontend frameworks.

Myop also offers the powerful feature of transforming the HTML you write in the dashboard into fully functional web components at runtime. This allows for a seamless and dynamic development experience, where the HTML code you create can instantly be converted into reusable, encapsulated components that can be deployed across different environments. By leveraging runtime conversion, Myop enables developers to quickly prototype, test, and deploy their components without the need for complex build processes, making it easier to iterate on designs and functionality in real time.

Read more about HTML Skins

Seamless Component Delivery with Myop​

One of the major benefits of Myop is its ability to deliver new UI components directly from the Myop Dashboard to production applications, all while keeping the core logic untouched. This means that frontend teams can introduce UI updates and modifications without the risk of breaking existing functionality.

  • The contract for interacting and communicating with components remains intact.
  • MyOp validates both component compatibility and contract compliance through the dashboard and cloud before publishing.
  • Developers can deploy new UI elements without requiring a full application build or deployment.

This approach ensures that UI updates, experiments, and iterations can be rolled out rapidly while maintaining stability in production environments.

How Myop Works Together​

The Myop system works in the following way:

  1. Developers define and manage components in the Myop Dashboard.
  2. When ready, they publish the configurations to Myop Cloud.
  3. The host application, using the Myop SDK, fetches the latest component configurations at runtime.
  4. The dedicated SDK for the chosen technology ensures smooth loading, rendering, and communication between the host app and components.

Performance Benefits​

Using Myop correctly can improve application performance by:

  • Reducing bundle size: Components are loaded dynamically instead of being bundled with the main application.
  • Optimizing rendering: Myop ensures efficient component loading, minimizing unnecessary re-renders.
  • Enabling micro frontend architecture: Applications can be modular, making it easier to scale and maintain them.

Conclusion​

Myop provides a flexible and scalable way to manage UI components in modern applications. By leveraging the dashboard for orchestration, cloud for real-time updates, and SDKs for seamless integration, Myop enables developers to build high-performance applications with a micro frontend approach.