您现在的位置是:首页 > 正文


2024-04-01 00:36:30阅读 2
重点(Top highlight)

The first time I heard the term micro frontend, my eyes rolled into the back of my head.


At the time, microservices had hit the mainstream. Everyone and their friends were migrating monoliths to microservices and the architectural pattern had become a key talking point for tech recruiters everywhere.

当时,微服务已成为主流。 每个人和他们的朋友都在将整体迁移到微服务,而架构模式已成为各地技术招聘人员的主要话题。

Want proof that we’re a cutting edge company? microservices.

是否想要证明我们是一家领先的公司? 微服务。

My coworkers were regularly breaking down into philosophical monologues about how life as we know it is really just a collection of microservices.


Image for post
My coworkers on microservices (source: author)

Thus, when I heard about micro frontends, my first thought was that this was probably some overzealous microservice fanatic trying to apply server-side architectural patterns to the frontend.


Fast forward to the present and the buzz is as loud as ever. Micro frontends are showing up on my news feed, in podcasts that I follow, and in architectural discussions at work.

前进到现在,嗡嗡声一如既往。 微型前端出现在我的新闻提要中,我关注的播客中以及工作中的体系结构讨论中。

Over time, I was able to get past my initial exasperation and gain some respect for micro frontends and how they might be a useful tool for scaling.


This post is meant to be a soft introduction. To kick things off, let’s take a glimpse of my life from a few years back.

这篇文章是一个软介绍。 首先,让我们来回顾一下几年前的生活。

我的网络应用故事 (My Web Application Story)

Once upon a time, I ventured into a rather large web application.


Believe it or not, the application wasn’t built with React. React existed but hadn’t become popular.

信不信由你,该应用程序不是使用React构建的。 React已经存在,但尚未流行。

The application was built with BackboneJS; a hit framework back in the day.

该应用程序是使用BackboneJS构建的; 时下流行的框架。

The entire application was contained within a single repository that consisted of hundreds of thousands of lines of code. It sported a production bundle size that reached well into the megabytes.

整个应用程序包含在一个包含数十万行代码的单一存储库中。 它的生产捆绑包大小达到了兆字节。

Development was painful for a few reasons:


  • Production builds and deployments took over twenty minutes.

  • Hot reloading was a pipe dream.

  • Site navigation could sometimes result in library and styling conflicts.

  • Multiple teams were jamming features into the same codebase.

  • Big-bang bi-weekly deployments required full-blown manual regression testing.


To be completely honest, these issues didn’t feel like a huge deal at the time. Monolithic frontends were par for the course. Being able to navigate clashing dependencies and tough code deployments was a hard-earned skill.

坦白地说,这些问题在当时并不是一件大事。 整体前端是该课程的标准配置。 能够导航冲突的依赖关系和艰难的代码部署是一项来之不易的技能。

Image for post
No problems at all (source: author)

However, the codebase had to evolve in order for us to scale. We began:

但是,为了使我们能够扩展,代码库必须不断发展。 我们开始了:

  • Code-splitting disparate views in our BackboneJS application using dynamic imports.

  • Isolating domain-specific logic into libraries with separate repositories.

  • Creating development teams responsible for working on separate feature sets.

  • Rewriting parts of the application with different technologies.

  • Deploying daily.


In hindsight, these changes were all steps along the path towards micro frontends.


为什么要使用微型前端? (Why Micro Frontends?)

Back with BackboneJS, we were trying to speed up build times, deploy to production faster, improve development velocity, write fewer bugs, and experiment with new technologies.


These goals are a subset of what a good micro frontend architecture aims to achieve.


At a high level, micro frontends come with a few core ideas.


解耦的代码库 (Decoupled Codebases)

Monolithic codebases out, micro codebases in.


Decoupled codebases…


  • Are easier to learn, change, and reason about.

  • Act as thick architectural boundaries.

  • Can be independently built and deployed.

  • Have a reduced code footprint.


Micro frontends should be sufficiently decoupled from each other.


自治队 (Autonomous Teams)

Decoupled codebases pave the way for decoupled teams that can enjoy increased ownership of their domains and delivery cycles.


The HR managers on your SAAS platform have different needs from the business analysts — it makes sense to have teams dedicated to different use-cases and for those teams to have control over how to provide value for their customers.


Micro frontend teams should have full ownership of their section of the product.


技术不可知 (Technology Agnostic)

Perhaps your team is full of VueJS experts. Maybe the dashboard needs to be updated in real-time. Some problems — technical or organizational — are better solved with certain technologies.

也许您的团队中充满了VueJS专家。 也许仪表板需要实时更新。 使用某些技术可以更好地解决某些技术或组织上的问题。

A monolithic frontend is often one-size-fits-all. In contrast, a micro frontend can be a targeted solution for a specific set of problems.

单片的前端通常是万能的。 相反,微型前端可以作为针对特定问题的有针对性的解决方案。

Micro frontends should be technology agnostic.


增量更新 (Incremental Updates)

Refactoring, rewriting, upgrading libraries, switching frameworks…these are all changes that can occupy a large chunk of your technology roadmap when applied to large applications.


With micro frontends, upgrading to a new version of moment.js shouldn’t require regression testing your entire website.


Micro frontends should only need micro-changes.


微型前端如何实现? (How Are Micro Frontends Implemented?)

Conceptually, a micro frontend architecture is just a bunch of smaller frontend applications snapped together.


As you can imagine, there are countless ways to achieve this. However, most implementations fall into one of three buckets.

您可以想象,有无数种方法可以实现这一目标。 但是,大多数实现都属于三个存储桶之一。

构建时组件组成 (Build-time component composition)

Composing components at build-time is pretty much just putting a different spin on traditional frontend dependency management.


Your project dependencies can be more than just libraries, frameworks, and utilities — they can be entire self-contained micro frontends.


Image for post
Build-time micro frontend composition (source: author)

Build-time composition can be implemented by specifying micro frontend components as npm dependencies in a package.json file…


// package.json
"name": "build-time-composition",
"version": "1.0.0",
"description": "micro frontends can be composed at build time",
"dependencies": {
"@component/detail-page": "^2.1.3",
"@component/search-page": "^1.0.0",
"@component/user-settings": "^4.2.1"
"repository": {
"type": "git"

…and writing a simple application shell for routing and component composition.


import DetailPage from "@component/detail-page";
import SearchPage from "@component/search-page";
import UserSettings from "@component/user-settings";const ApplicationShell = () => (
<Route path="/detail" component={DetailPage} />
<Route path="/search" component={SearchPage} />
<Route path="/settings" component={UserSettings} />

To see build-time composition in action, check out bit.dev.


运行时客户端组成 (Runtime client-side composition)

Runtime composition involves fetching resources from independently deployed URLs. This means that micro frontends and their versions don’t need to be explicitly hardcoded into project dependencies. Runtime composition makes it easier to isolate releases and deployments.

运行时合成涉及从独立部署的URL中获取资源。 这意味着微前端及其版本不需要显式地硬编码为项目依赖项。 运行时组合使隔离发布和部署变得更加容易。

Image for post
Runtime micro frontend composition (source: author)

Similar to build-time composition, runtime composition can be implemented using a client-side application shell.


import DetailPage from "./detail-page";
import SearchPage from "./search-page";
import UserSettings from "./user-settings";const ApplicationShell = () => (
<Route path="/detail" component={DetailPage} />
<Route path="/search" component={SearchPage} />
<Route path="/settings" component={UserSettings} />

However, the underlying component implementation is quite different.


class DetailPageContainer extends React.Component {
componentDidMount() {
const script = document.createElement("script");
script.src = "www.microfrontends.com/detail-page.js";
script.onload = () => window.renderDetailPage();
} render() {
return <main id="container" />;

DetailPageContainer uses a <script /> element to fetch a separately-hosted micro frontend and attaches it to the DOM by calling a global hook window.renderDetailPage.

DetailPageContainer使用<script />元素来获取单独托管的微前端,并通过调用全局钩子window.renderDetailPage将其附加到DOM。

// www.microfrontends.com/detail-page.js
import React from 'react';
import ReactDOM from 'react-dom';
import DetailPage from './DetailPage';window.renderDetailPage = () => {
<DetailPage />,

The micro frontend resource handles the logic for rendering the DetailPage component.


NOTE: To extend this example to multiple micro frontends you would need to consider browser history, container management, DOM cleanup, and resource management.


Check out single-spa if you’re interested in experimenting with runtime composition.


服务器端组成 (Server-side composition)

As you might guess, this approach involves composing micro frontends on the server-side.


Image for post
Server-side micro frontend composition (source: author)

Composing on the server presents a few advantages:


  • “Higher-order” views composed of multiple micro frontends can be readily cached.

    “高阶” 可以轻松地缓存由多个微前端组成的视图。

  • Smaller payloads and HTML pre-rendering can lead to better performance for mobile clients.


Implementations for server-side composition are basically variations on old-school server-side templating.


<title>Server Side HTML!</title>
<!-- insert composed HTML fragment and return to client -->

Fragment composition can be done at the markup layer with technologies such as server-side includes and edge-side includes. There are also custom composition frameworks such as Tailor and Podium.

可以使用服务器端包含边缘端包含等技术在标记层完成片段组合。 还有一些定制的构图框架,例如TailorPodium

结论 (Conclusion)

Monolithic frontends are not a myth; carving a large frontend application into micro frontends has the potential to significantly reduce technical friction in an organization — and it isn’t all that tough to do.

整体前端不是神话; 将大型前端应用程序划分为微型前端程序有可能显着减少组织中的技术摩擦-并非难事。

Do microservices belong on the client-side? Let me know your thoughts in the comment section below.

微服务是否属于客户端? 在下面的评论部分中让我知道您的想法。

Thanks for reading!


资源资源 (Resources)

For a more in-depth look at micro frontends and their tradeoffs, check out these incredible resources.


翻译自: https://medium.com/frontend-at-scale/an-introduction-to-micro-frontends-1a43edb4c38e


  • eclipse转idea找不到项目某些配置文件


    &lt;!--这个元素描述了项目相关的所有资源路径列表,例如和项目相关的属性文件,这些资源被包含在最终的打包文件里。--&gt;&lt;resources&gt;   &lt;resource&gt;      &lt;!--   描述存放资源的目录,该路径相对POM路径--&gt;      &lt;directory&gt;src&lt;/directory&gt;      &lt...

    2024-04-01 00:36:23
  • chatgpt赋能python:Python计算器代码实现——简单又实用

    def calculator(expression) : # 主体逻辑代码 return result其中,参数expression:\.\d+)?&#39;) # 匹配数字 operator = r...

    2024-04-01 00:36:17
  • android 移除子view,android-从父视图中移除视图与隐藏视图


    2024-04-01 00:36:08
  • MySQL数据库总结



    2024-04-01 00:35:44
  • linux关闭无响应文件夹,4种强制关闭Ubuntu中无响应应用程序的方法



    2024-04-01 00:35:36
  • 一文讲清Mybatis架构


    MyBatis功能架构设计 功能架构讲解: 我们把Mybatis的功能架构分为三层: API接口层:提供给外部使用的接口API,开发人员通过这些本地API来操纵数据库。接口层一接收到调用请求就会调用数...

    2024-04-01 00:35:28
  • 程序设计实习MOOC/第十五周编程作业/B:A Knight's Journey(TUD Programming Contest 2005, Darmstadt, Germany)

    程序设计实习MOOC/第十五周编程作业/B:A Knight's Journey(TUD Programming Contest 2005, Darmstadt, Germany)

    题目:B:A Knight's Journey总时间限制: 1000ms 内存限制: 65536kB描述BackgroundThe knight is getting bored of seeing the same black and white squares again and again and has decided to make a journeyaround the wo

    2024-04-01 00:35:02
  • java前端显示统计报表数据_强大的报表前端展现功能


    2024-04-01 00:34:54
  • reverse1



    2024-04-01 00:34:48
  • adb连接真实设备连接不上时或者连接时报adb server is out of date.killing的解决方法

    adb连接真实设备连接不上时或者连接时报adb server is out of date.killing的解决方法


    2024-04-01 00:34:23