Open Platform — Micro-Frontend Solution for Subsystem Integration

Duration	Mar 2021 ~ May 2021
Company	OC
Role	Project Lead / Architect / Product Manager

📋 Project Overview

Background

(Click to expand)

In order to solve the following problems:

• Various infrastructure systems (“subsystems”) are scattered across the company / difficult to find and use / inconsistent user experience;
• Repetitive work / inconsistent development standards / high cost when developing basic functions for subsystems;
• Developers’ workflows around the application dimension are not yet fully integrated, etc.

We decided to:

• Build an “Open Platform” based on the “R&D Platform” v2, and connect subsystems to the platform in a standardized way.
• Open up the basic data and capabilities of the “R&D Platform” through OpenAPI to enhance the functionality and experience of each subsystem.
• Integrate the functions of each subsystem around the application dimension into the platform, and connect the workflow of the application dimension.

Responsibilities

• Proposed to the CTO to initiate this project, taking full ownership as project lead.
• As the architect, designed the platform’s core mechanisms, workflows, UI, back-end OpenAPI specs, and front-end SDK; guided the DevOps team and the front-end team to deliver the solution.

Achievements

• This project explored a solution of infrastructure system integration that fits the company’s current situation. After going live, it has connected to more than 20 internal management systems and “R&D Platform”.
• This solution has won unanimous praise from developers and users of each system for its low access cost and good user experience. The CTO commented: “It can meet the infrastructure needs of the company for the next 5 years.”
• This project successfully applied for a software copyright in China.

✨ Highlights

Technical Highlights

• A Micro-Frontend solution based on iframes, which solves some of the problems traditionally associated with iframes:
  • Inconvenient communication between frameworks
  • Sub-applications requiring repeated logins
  • Losing sub-application routing state when the host application refreshes
  • Data transmission when jumping between sub-applications
  • The host application passing URL parameters to the sub-application
  • The host application not being able to perceive the running status of the sub-application
• Offloading the migration work to the SDK as much as possible to reduce the migration cost for subsystems.

Product Highlights

• Not only a Micro-Frontend solution, but also an “App Market” for subsystems.
• Subsystems can expose functions to application dimension in the form of “Widgets”, connecting the workflow of the application dimension.

🎬 Related Videos

• https://www.bilibili.com/video/BV1ex4y1m74J/ (zh-CN)

📎 Related Materials (Excerpts)

Design Documents

• The evolution of the development for infrastructure projects:

  

• The operating principle of an “Open App”:

  

• The operating principle of a “Widget”:

  

• Registration mechanism:

  

• OpenAPI Specs:

  

UI Prototypes

• App Market > Open App detail page:

  

• App Market > Widget detail page:

  

• Binging widgets to an application on “R&D Platform”:

  

UI Screenshots

• The “Open Platform” menu in the “R&D Platform” (initial status):

  

• The App Market of the “Open Platform”:

  

• Registering an “Open App”:

  

• The “Open Platform” menu in the “R&D Platform” (status after successful registration):

  

• “Open App” detail page:

  

Presentations (Cover Only)

• Reporting the design proposal to the CTO:

  

• Reporting the design proposal to the CTO (continued):

  

• Presenting to the technical team leads in the “Tech Center Weekly Meeting”:

  

• Reporting the development plan to the CTO:

  

• Presenting to the front-end team in the “FE Workshop”:

  

Others

• Progress of subsystem integration:

  

---

🔗 Related Links

• Company Projects:
  • R&D Platform (Continuous Delivery Platform) v2

---

© 经验分享 · 日拱一卒   |   Star = 收藏   |   Watch = 订阅

The issue contains a project overview, OpenAPI references, UI materials, and related links, but names no repository files or tests. Start by reviewing the issue body and its linked materials; a specific documentation target and acceptance criteria are needed before completion can be defined.