Reliably Access Micro Frontend

Preface

Background

  • Most of the pages are configured and generated by JSON with consumption components.
  • Some pages are configured and generated by another team’s JSON with consumption components, which is completely different from the JSON above.
  • Other pages are loaded through the JS Bundle provided by a page publishing platform.

Solution and Flowchart

  • Layout Loader: Load navigations for different workstations
  • DADA Loader: Load pages configured by JSON
  • Source Code Loader: Load JS Bundle
  • Micro Loader: Process micro frontend loading
  • Log Report: Track logs
  • Time Zone: Switch time zones
  • i18n: Switch languages
  • Guider: Unified control of user guides
  • Security Monitoring
  • Traffic Control
  • Pop-Up Window Control
  • Questionnaires
  • QA Robot

Implementation Details

1. Plug-In Mechanism

<div id="root"></ div>
<script src="https://cdn.address/schema-resolver/index.js"></ script>
<script src="https://cdn.address/schema-resolver/plugin/layout.js"></ script>
<script src="https://cdn.address/schema-resolver/plugin/source-code.js"></ script>
<script src="https://cdn.address/schema-resolver/plugin/micro-loader.js"></ script>
<script src="https://cdn.address/schema-resolver/plugin/i18n.js"></ script>
<script>
SchemaResolver.render(
{
micro: true,
host: "dev.address",
hfType: "layout1",
externals: ["//{HOST}/theme1/index.css"],
// host is cdn prefix, the resource maybe in different env & country
resource: {
js: "/index.js",
css: "/index.css",
},
},
{ container: document.querySelector("#root") }
);
</script>

2. Secure Migration

3. Micro Frontend Form

  • Each page that enables the micro frontend can be a primary application.
  • The micro frontend is an optional plug-in. Any business exceptions that occur due to the micro frontend can be closed at any time.
  • Switching between the micro frontend page routers can achieve partial refresh, while non-micro-frontend registries pages are redirected directly. As the coverage of the micro frontend pages increases, partial refresh also rises gradually.
  • Use different extension plug-ins to load the stock pages of different technology stack types and convert them into corresponding sub-applications.

Summary

  • For platform administrators, it provides the plug-in capability to enable global scalability.
  • For page developers, it provides standard access solution paths, multiple technology stack access, and other capabilities, including the micro frontend, multi-language, tracking, menus, and theme loading. It also decouples the common capabilities of different systems, which allows quick migration of specific business logic to other platforms.
  • For third-party users, it provides unified access criteria through the isolation technology stacks of the micro frontend and isolated sub-application styles, without learning about system menus or access methods of themes. It migrates to corresponding platforms to see the page conditions of the site globally through unified page system control.

Original Source:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alibaba Cloud

Alibaba Cloud

Follow me to keep abreast with the latest technology news, industry insights, and developer trends. Alibaba Cloud website:https://www.alibabacloud.com