微前端与Web Components

微前端是thoughtworks在2016年提出的 Micro Frontends extending the microservice idea to frontend development一文阐述了整个思想，该文也被翻译成为中文版本。可以说，我看到文章当时，angular、react、vue三个框架同时使用确实吸引了我一下，但是我相信不会有团队这么折磨自己。微前端的这种“元框架（meta framework）”技术栈不是仅仅满足于多个现代前端框架的切换，而是满足新老框架的更替和迭代。我举个非常简单的栗子。如果前端框架出现“断崖式的升级”，像angular1和angular2。我们需要在保证前端项目生产可行的情况下，怎么做到迭代升级，微前端是其中一种方案，而微前端有非常多种实现方式，web components又是其中一种实现方案。

微服务

在认真了解微前端之前，首先要了解的是微服务。

微服务的概念是由现为ThoughtWorks公司的首席科学家Martin Fowler提出的，目的就是后端服务的独立部署，独立开发，它的主要特点是组件化、松耦合、自治、去中心化。微前端则是在2016年thoughtworks技术雷达中提出，把后端概念延伸到前端，也是类似的目标。

• 技术无关
• 隔离团队代码
• 建立各团队的前缀
• 本地浏览器特性优先于自定义 API
• 构建自适应网站

微前端实现方案

它的实现方案有很多种。这里引用Phodal的微前端的那些事儿中的一张图说明实现方式的选型情况。

实现方案

由于在实战项目当中，我们都是有交付压力的而且用户体验一定是我们想要的。所以最终的选择方案只剩下两种----webComponent和iFrame。其他几种方案大家可以在Phodal的博客中了解，这里不再赘述。

Web Components

在前端组件化横行的今天，组件化确实极大的提升了开发效率，代码复用量，系统稳定性。浏览器未来的发展方向会是除了H5标签外，还有自定义标签，和现在的Vue、React一样。但是自定义标签的编译不再依赖Vue或者React的运行时和编译时，浏览器原生支持自定义组件的注册。

它包含了4个概念，未来的组件化标准 —— 浅尝Web Components中有介绍。

• Shadow DOM
• Custom Elements
• HTML Templates
• HTML Imports

HTML Templates很简单，是