开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

简介

Saas（Software-as-a-Service）

软件及服务，供应商通过将应用软件部署到自己的服务器，客户根据自己的工作实际需求进行购买对应模块的服务。

这里重点是分块，那么如何进行分块？ 按照业务来分，让每块的业务完全解耦。

SAAS的由来

随着互联网的发展，在最开始的时候，软件开发主要是根据客户需求进行开发，更多的是toC的项目。当项目多到一定程度，量变引起质变时，Saas就出生了。在相同的业务中，我们发现很多软件产品研发具有很强的相似性。那么如何让企业降本增效呢？就是分析提取其中的相似，并给出一个可行的方案来避免二次开发，同时又要满足不同用户的不同业务以及不同需求。那么Saas就是解决方案。

SAAS是一套集成系统，对于某一个行业的通用性功能全面覆盖（尽可能多的覆盖）。

• 通用性：符合大多客户的业务需求。
• 集成：尽可能多的把不同的业务聚合在一起。

什么是微前端

微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。微前端不是单纯的前端框架或者工具，而是一套架构体系，这个概念最早在2016年底被提出

微前端的核心价值

• 技术栈无关： 主框架不限制接入应用的技术栈.

你可以使用任何的框架技术/甚至自己完成一个框架。来最为saas的主操作框架。

• 各模块完全解耦：每个功能点相互独立，通过主框架来链接，但主框架不承担模块内部的业务操作。

微前端解决的痛点

• 项目完全解耦：随着项目的逐步迭代项目会变为无比巨大，最大的痛点就是、项目维护、项目迭代。 当项目功能耦合性比较高的情况下，软件的开发、维护工作会非常难以进行。如果不考虑架构层面的问题，只实现功能。那么产品在后期功能迭代无法进行。
• 部署：对于不同的客户给予不同的需求，已小焱资管运维为例。用户需要使用到资产管理与售后维护模块，那么我们就直接对这两个项目进行打包部署。其他模块的功能以及代码不会包含在内。这样整体的打包后项目体积更小，同时项目不会有任何其他业务的代码。

如何实现

应为公司技术栈，比较依赖于Umi生态，因此使用Umi生态中qiankun插件来实现微前端架构。

版本：Umi3

核心原理

主应用 + 子应用。主应用通过配置路由来实现与子应用的访问。

可以点击这个链接详细查看一下。

gw.alipayobjects.com/mdn/rms_655…

我们来举一个例子。

启动三个服务。

• 主服务：8000端口
• 子服务（APP1）：8001端口 /app1
• 子服务（APP2）：8002端口· / app2

我们在主服务中通过配置路由来实现访问不同的服务。例如：

  {
    path: '/app1',
    microApp: 'app1',
  },
  {
    path: '/app2',
    microApp: 'app2',
  },

这样会玩在在访问/app1的时候，访问8001端口的内容。访问/app2的时候，访问8002端口的内容。

这样就实现的微前端的架构。

总结

本文主要是对概念进行一些补充，在后面我会介绍如何实现。