前端下半场：构建跨框架的 UI 库

如果用一个 UI 库不能解决问题，那就用两个 UI 库；如果用一个 UI 框架不能解决问题，那就用两个框架。

跨框架的 UI 库，即前端 UI 库可以不经任何修改，直接能运行在 React、Angular、Vue 等框架上。

在开源电子书《微前端的那些事儿》 中，我们讨论到了 Web Components 技术，一种新的 Web 前端容器化技术。在电子书里，我们主要介绍的是：如何使用 Web Components 来构建微服务。而在这篇文章里，我们讨论的是 Web 组件的下半场：跨框架的 UI 库。

背景

最近的一段时间里，我花费大量地时间在练习微前端技术。在我的新 Markdown 编辑器Phodit中，我有意无意地去拆分出一个个的小组件，每个小的组件使用不同的技术构建，React、Angular、Stencil.js、原生 JavaScript 等等。如：

编辑器仍然在开发中，这并不是最后的所有技术。引入这么多框架的 “hello, world”，然后构建一个个简单的组件，大概、可能、也许是为了炫技练习。虽是这么说，事实是 SimpleMDE 已经封装了 CodeMirror 的一系列 API，为了能快速用上自己的编辑器，我决定地接基于SimpleMDE 来修改。而 SimpleMDE 并不能直接用在 Angular 等前端框架上，这也意味着，因为这个 Editor 的存在，我不得不将页面撕裂成几部分：左侧菜单、Terminal 窗口栏、辅助栏、状态栏等等的几部分。

换句话来说，就是这是一个组件化架构最好的应用场景。

过去我们谈论前端的组件化架构时，通常指的是框架限制的组件化架构。而当我们拥有基础的 UI 组件库时，我们的架构则是基于 UI 组件库的组件化架构，两者间的不同在于共性的第一次提取。而当我们在业务组件的基础上，进行对一些通用业务组件的封装时，我们的架构则基于基于 UI 组件库和业务组件的组件化架构。

组件金字塔

可不论是哪种方式，最后我们都限定于框架限制——我们将系统绑定在框架上。而对于团队的技术决策者来说，绑定上框架的实现是一种冒险的作法。未来，这些都是风险，那么有没有可能将底层的 UI 组件库、 复合组件和业务组件库通用呢？

铺垫：React 中引入 Angular 组件

为了在我的编辑器中使用 Angular，我用 Angular 编写了一个重命名功能。而为了使用它，我得再次使用一次customEvent，而在这个微前端架构的系统中，其事件通讯机制已经相当的复杂。在这部分的代码进一步恶化之前，我得尝试有没有别的方式。于是，我想到了之前在其它组件中使用的 Web Components 技术，而 Angular 6 正好可以支持。

HTML 中引入 Web Components

我所需要做的事情也相当的简单，只需要将我的组件注册为一个 customElements，稍微改一下app.module.ts文件。在这种情况之下，我们就可以构建出独立于框架的组件。

如下是原始的 module 文件：

@NgModule({
 declarations: [AppComponent],
 imports: [BrowserModule],
 bootstrap: [AppComponent]
})
export class AppModule { }

如下则是新的 module 文件：

@NgModule({
 declarations: [InteractBar],
 imports: [BrowserModule],
 entryComponents: [InteractBar]
})
export class AppModule {
 constructor(private injector: Injector) {
 const interactBar = createCustomElement(InteractBar, {injector});
 customElements.define('interact-bar', interactBar);
 }
}

然后，只需要就可以在 HTML 中传递参数：，或者监听对应的@Output事件：

const bar = document.querySelector('interact-bar');
bar.addEventListener('action', (event: any) => {
 ...
})

事实证明，使用 Angular 构建的 Web Components 组件是可以用的。于是，我便想，不如在 React 中引入 Angular 组件吧。

React 中引入 Angular 组件

于是，便使用create-react-app创建了一个 DEMO，然后引入组件：

<div className="App">
 <header className="App-header">
  src={logo} className="App-logo" alt="logo" />
 <h1 className="App-title">Welcome to React
 
 <p className="App-intro">
 To get started, edit src/App.js and save to reload.
 <interact-bar filename="phodal.com" onAction={this.action}>