微前端与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很简单，是<template/>，它的content可以被随时提出。HTML已经被渐渐放弃。
Custom Elements即是自定义标签，customElements.define可以用来注册这个自定义组件。第一个参数是它的名字，第二个参数是个HTMLElement的类对象，组件内部的功能可以其中实现。具体看下面这个栗子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple template</title>
<script src="main.js" defer></script>
</head>
<body>
<h1>Simple template</h1>
<template id="my-paragraph">
<style>
p {
color: white;
background-color: #666;
padding: 5px;
}
</style>
<p><slot name="my-text">My default text</slot></p>
</template>
<my-paragraph>
<span slot="my-text">Let's have some different text!</span>
</my-paragraph>
<my-paragraph>
<ul slot="my-text">
<li>Let's have some different text!</li>
<li>In a list!</li>
</ul>
</my-paragraph>
</body>
</html>
// main.js
customElements.define('my-paragraph',
class extends HTMLElement {
constructor() {
super();
const template = document.getElementById('my-paragraph');
const templateContent = template.content;
this.attachShadow({mode: 'open'}).appendChild(
templateContent.cloneNode(true)
);
}
}
);
const slottedSpan = document.querySelector('my-paragraph span');
Shadow DOM 是非常重要的概念，主要是实现变量的隔离，组件要做到独立不干扰。
Shadow DOM和 Virtual DOM是不一样的两个概念。Virtual DOM是基于Javascript实现的dom操作的中间层。所有的数据绑定事件会在中间层做diff再实施到DOM上。而
如今的前端框架中，Polymer和stencil都是web Components的编译器，实现数据驱动等友好开发体验。当然现在React和Vue也出现了web Components的外层封装支持。
