微前台与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.jscustomElements.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的外层封装支持。
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 微前台与web components
