微前端是thoughtworks在2016年提出的 Micro?Frontends extending the microservice idea to frontend development一文闡述了整個(gè)思想溪食，該文也被翻譯成為中文版本妖异≈背罚可以說论泛，我看到文章當(dāng)時(shí)，angular、react、vue三個(gè)框架同時(shí)使用確實(shí)吸引了我一下烂翰，但是我相信不會有團(tuán)隊(duì)這么折磨自己。微前端的這種“元框架（meta framework）”技術(shù)棧不是僅僅滿足于多個(gè)現(xiàn)代前端框架的切換蚤氏，而是滿足新老框架的更替和迭代甘耿。我舉個(gè)非常簡單的栗子。如果前端框架出現(xiàn)“斷崖式的升級”竿滨，像angular1和angular2佳恬。我們需要在保證前端項(xiàng)目生產(chǎn)可行的情況下捏境，怎么做到迭代升級，微前端是其中一種方案殿怜，而微前端有非常多種實(shí)現(xiàn)方式典蝌，web components又是其中一種實(shí)現(xiàn)方案曙砂。
微服務(wù)
在認(rèn)真了解微前端之前头谜，首先要了解的是微服務(wù)。
微服務(wù)的概念是由現(xiàn)為ThoughtWorks公司的首席科學(xué)家Martin Fowler提出的鸠澈，目的就是后端服務(wù)的獨(dú)立部署柱告，獨(dú)立開發(fā)，它的主要特點(diǎn)是組件化笑陈、松耦合际度、自治、去中心化涵妥。微前端則是在2016年thoughtworks技術(shù)雷達(dá)中提出乖菱，把后端概念延伸到前端，也是類似的目標(biāo)蓬网。
- 技術(shù)無關(guān)
- 隔離團(tuán)隊(duì)代碼
- 建立各團(tuán)隊(duì)的前綴
- 本地瀏覽器特性優(yōu)先于自定義 API
- 構(gòu)建自適應(yīng)網(wǎng)站
微前端實(shí)現(xiàn)方案
它的實(shí)現(xiàn)方案有很多種窒所。這里引用Phodal的微前端的那些事兒中的一張圖說明實(shí)現(xiàn)方式的選型情況。
由于在實(shí)戰(zhàn)項(xiàng)目當(dāng)中帆锋，我們都是有交付壓力的而且用戶體驗(yàn)一定是我們想要的吵取。所以最終的選擇方案只剩下兩種----webComponent和iFrame。其他幾種方案大家可以在Phodal的博客中了解锯厢，這里不再贅述皮官。
Web Components
在前端組件化橫行的今天，組件化確實(shí)極大的提升了開發(fā)效率实辑，代碼復(fù)用量捺氢，系統(tǒng)穩(wěn)定性。瀏覽器未來的發(fā)展方向會是除了H5標(biāo)簽外剪撬，還有自定義標(biāo)簽摄乒，和現(xiàn)在的Vue、React一樣婿奔。但是自定義標(biāo)簽的編譯不再依賴Vue或者React的運(yùn)行時(shí)和編譯時(shí)缺狠，瀏覽器原生支持自定義組件的注冊。
它包含了4個(gè)概念萍摊，未來的組件化標(biāo)準(zhǔn) —— 淺嘗Web Components中有介紹挤茄。
- Shadow DOM
- Custom Elements
- HTML Templates
- HTML Imports
HTML Templates很簡單，是<template/>冰木，它的content可以被隨時(shí)提出穷劈。HTML已經(jīng)被漸漸放棄笼恰。
Custom Elements即是自定義標(biāo)簽，customElements.define可以用來注冊這個(gè)自定義組件歇终。第一個(gè)參數(shù)是它的名字社证，第二個(gè)參數(shù)是個(gè)HTMLElement的類對象，組件內(nèi)部的功能可以其中實(shí)現(xiàn)评凝。具體看下面這個(gè)栗子追葡。
<!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 是非常重要的概念，主要是實(shí)現(xiàn)變量的隔離奕短，組件要做到獨(dú)立不干擾宜肉。
Shadow DOM和 Virtual DOM是不一樣的兩個(gè)概念。Virtual DOM是基于Javascript實(shí)現(xiàn)的dom操作的中間層翎碑。所有的數(shù)據(jù)綁定事件會在中間層做diff再實(shí)施到DOM上谬返。而
如今的前端框架中，Polymer和stencil都是web Components的編譯器日杈，實(shí)現(xiàn)數(shù)據(jù)驅(qū)動等友好開發(fā)體驗(yàn)遣铝。當(dāng)然現(xiàn)在React和Vue也出現(xiàn)了web Components的外層封裝支持。
