微前端的诞生

 

微前端 概念的出现，是在我了解到后端 server less 相关概念时候出现的，其实大致的思路是差不多的，每一个功能（服务）独立部署、独立运行，每一个模块都拆分成更小，更易于管理的 微应用

web 时代的发展

在 web 1.0 时代，内容基本上是 静态、单向阅读为主，代表网站比如新浪、搜狐等内容性网站，网站是信息提供者，过程是个单向的过程，从网络到用户，当时网络上所有的内容，都是单一性的，就是网站说这个是什么意思，就是什么意思，这时候的网站是没有什么用户体验之说的，知只是单纯的可以展示内容，保证整体展示是工整的即可；

在 web 2.0 时代，内容是人与人之间的沟通，网站负责提供平台，大家各自发表自己对于信息的了解和去了解别人提供的信息，这个适合对于用户体验的提升，原因是在于用户对于内容上的体验，用户在访问不同的网站获取到不同的内容，去满足自己在网络上所要得到的所有知识；

在 web 3.0 时代，就是人与网络与人之间的通信关系，网络成为了用户的需求理解者和信息提供者，由于提供信息的平台越来越多，内容的种类越来越多，用户对于平台的要求也会越来越高

这个时候，用户体验对于我们开发来说，就越发的重要，比如每一个页面的展示、每一个按钮的点击，都可能是影响到用户是否在当前网站留存

好的用户体验，不只是访问速度，还要考虑用户如何提供一个完善的功能链来满足用户的功能所需，基于市场的需求，网站的功能越来越多，我们要做的事情也就越来越多，如果把所有的功能都放在了一起，网站的可维护性就会变的特别差，存在的风险也会越来越多，这个时候，微前端出现了。

是什么条件下诞生了微前端

我们的开发模式在不同的 web 时代的实现方式也是在逐渐变化的：

• web1.0：那时候信息比较简单，就是单纯嵌套网页（css + html + js（jquery）+ cms后台），数据简单，展示简单

• web2.0：这时候出现了前后端分离（css + html + js + ajax），前后端做出分离以后，前端对于开发模式上面，就做出了很多的研究和琢磨，这期间最火的，就是MVC（Module View Controller）

• web3.0：由于在这个阶段，我们要处理的就不只是上面那些需求了，要考虑用户体验（渲染和响应速度）、开发速度等，技术根据需求而生，这时候，react、vue、angular等框架就应用而生了

技术是一个逐渐调优的过程，在这些框架为我们做了很多事以后，有些事情也是需要我们自己考虑的，项目那么大，我们应该如何维护？

开发每个人之间的水平都是层次不齐的，项目搭建、开发规范、代码提交合并、项目部署等，在项目越来越大的过程当中，每一个环境出现问题，都会影响到一整个项目的运行和用户的使用，在保证前面每一个时代要解决的问题的前提下，我们要想着如何规避现在已存在的这些问题

微前端方案一（iframe）

在最早我们用来实现 微前端 的方式，是通过iframe来做的，页面里面嵌套一个iframe，通过设置url 来做微应用的划分，这样可以保证了每一个微应用 都是独立部署，独立运行的，哪一个就算出现了问题，也不会影响到其它的应用，可以保证在一定范围内用户正常使用

iframe 对于一些简单的静态、纯展示类的页面是很好的方案，但是如果有需要做交互、信息共享、数据更新等行为的时候，iframe 就不能完全满足我们的需求了，iframe不能满足的需求有以下几点：

• 在iframe内的页面做切换的时候，浏览器回退的时候，就会出现页面跳转错误
• 由于它的特性可以完美的隔离上下文之间的所有资源，但是隔离的同时在对于一些需要做共享资源，iframe 的特性就没有办法突破了
• 当每一次 iframe 的启动，都是需要重新做资源的加载
• 如果在嵌套iframe的页面是有那种类似二次确认的弹窗，由于是覆盖整个页面的，iframe页面可以 resize ，但是 resize 也会影响到嵌套页面的展示效果，毕竟从局部变成了整个页面了嘛
• 对于 iframe 的状态捕捉，假设iframe 子应用加载、预渲染、渲染后、卸载、卸载后、加载报错的情况；整个生命周期处理上面都需要做很多的处理，麻烦而复杂，对iframe生命周期的方案做的不好的话，意外的情况就会影响到用户的使用，就得不偿失了

微前端方案二（single-spa）

一个在国外流行很久的方案single-spa完美的处理了所有上述iframe所存在的问题，接下来我们所有的案例也是基于single-spa 去做的效果展示，下面是single-spa官方对于single-spa 诞生所做的阐述：

single-spa 的诞生，是通过从现在的一些框架：react、angular、vue的生命周期中获得了灵感，将生命周期
运用于整个应用，避免应用程序被束缚。

现在 single-spa 几乎支持任何框架。 由于 JavaScript 因其许多框架的寿命短而臭名昭著，我们决定让它在
任何您想要的框架都易于使用。

single-spa 很完美的解决了目前市场对微前端的需求吗？

不是的。

没有任何一个框架可以完美的解决市场的需求，任何方案都是解决目前存在的问题，未来是未知的

结尾

大概有关微前端的简介，就先介绍到这里，接下来针对微前端框架single-spa 来做学习微前端概念前的知识储备