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

微型前端简介

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.

从前,我冒险进入一个相当大的Web应用程序。

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.

    热装是一个梦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.

    使用动态导入在我们的BackboneJS应用程序中进行代码拆分的不同视图。
  • 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.

回到BackboneJS,我们试图加快构建时间,更快地部署到生产环境,提高开发速度,减少错误,并尝试新技术。

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.

您的SAAS平台上的人力资源经理与业务分析师有不同的需求-拥有专门致力于不同用例的团队并使这些团队能够控制如何为客户提供价值是有意义的。

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.

借助微型前端,升级到moone.js的新版本不需要对整个网站进行回归测试。

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文件中将微前端组件指定为npm依赖项来实现构建时合成。

// 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 = () => (
<Switch>
<Route path="/detail" component={DetailPage} />
<Route path="/search" component={SearchPage} />
<Route path="/settings" component={UserSettings} />
</Switch>
);

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

要查看实际的构建时合成,请查看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 = () => (
<Switch>
<Route path="/detail" component={DetailPage} />
<Route path="/search" component={SearchPage} />
<Route path="/settings" component={UserSettings} />
</Switch>
);

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();
document.head.appendChild(script);
} 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 = () => {
ReactDOM.render(
<DetailPage />,
document.getElementById("container"),
);
};

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

微型前端资源处理呈现DetailPage组件的逻辑。

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

注意:要将本示例扩展到多个微前端,您需要考虑浏览器历史记录,容器管理,DOM清理和资源管理。

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

如果您有兴趣尝试运行时合成,请查看single-spa

服务器端组成 (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.

    较小的有效负载和HTML预呈现可以为移动客户端带来更好的性能。

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

服务器端组成的实现基本上是老式服务器端模板的变体。

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

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找不到项目某些配置文件

    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-从父视图中移除视图与隐藏视图

    在android中,如果我从其父视图中移除视图,而在父视图中隐藏子视图(GONE不可见).我知道隐藏的视图仍将保留在内存中,但说到父视图的物理外观会有所不同吗?如果答案没有不同,那是否意味着当我隐藏子...

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

    MySQL数据库总结

    文章目录DDL操作数据库、表操作数据库查看数据库查询创建数据库mysql的字符集创建数据库修改数据库删除数据库使用数据库操作表查询表(use、show)数据类型创建表(create)复制表(like)...

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

    linux关闭无响应文件夹,4种强制关闭Ubuntu中无响应应用程序的方法

    4种强制关闭Ubuntu中无响应应用程序的方法在使用Ubuntu时,我们的一个或多个进程和应用程序可能会经常挂起。重新启动我们的系统并不总是最佳解决方案,我们发现自己在寻找能够快速、轻松和安全地摆脱无...

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

    一文讲清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

    reverse1

    reverse1思路,ida一些方便的用法

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

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

    1.当adb连接真实设备,连接不上时,可能是手机通过usb线连接电脑时没有自动安装驱动,所以手机没有弹出usb调试允许与否的弹窗,这时可以在手机或者电脑端下载个“360手机助手”,手机连接上电脑时,即...

    2024-04-01 00:34:23