去年的同一时间,我写了那篇《前端下半场:构建跨框架的 UI 库》推荐了 Stencil.js,当时是在项目的试验期。而 Stencil.js 已经在今年(2019 )的 6 月份,推出了 1.0 正式版,这意味着你已经可以开始采用这个~~框架~~(编译器)了——当然了,我不对我的这句话『负责』,你自己的锅自己背。
![61853b217f31dbda2057c8e776b27190.png](https://i-blog.csdnimg.cn/blog_migrate/aa8a0f54c04db9a09166bb78c626a679.jpeg)
故事是这么开始的。
上周我在为 @花仲马 ~~复制~~ (开发)一个内容主题生成器 (https://content.phodal.com)(受限于其中数据的版权问题,暂时不敢开源——我都是直接复制别的网站的),便开始在寻找一个能用得上的前端框架。毕竟:
- React 用腻了
- Angular 用腻了
- Vue 要出 3.0 了
- jQuery 可能会被笑话
- 原生 JavaScript 我不会了
所以,我开始绞尽脑汁找一个新的框架,直到我从 Web Components 框架里又找到了 Stencil.js。
过去,我曾经使用过 Ionic 开发了超过两位数的应用,除了 stars 数上千的 Growth,还有一个交易额 xxxxx 千亿的商业应用。所以,既然是 Ionic Framework 团队开发的框架,那我还是有点信心 ~~担心~~ 的。
为什么是 Stencil.js
![5b0b05fccb05987b9699bcad06c75d42.png](https://i-blog.csdnimg.cn/blog_migrate/2e01e5de4b046691444127b1fcd81d61.jpeg)
Ctrl + C/V 一下官方的介绍:Stencil 是一个生成 Web Component 的编译器(更具体地说,Custom Elements)。Stencil 将最流行框架的最佳概念,结合到一个简单的构建时工具中。
它提供了以下的特性。
- Virtual DOM
- Async rendering
- Reactive data-binding
- TypeScript
- JSX
为什么说它结合了最流行框架的最佳概念——它的代码看上去就像 Angular + React 的混合体:使用了 装饰器
来声明类型,还有类似于 Angular 风格的 Component 声明方式,以及还有 React 的 TSX,还有 Vue 融合了多个框架的思想和能力……。
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop() first: string;
private getText(): string {
return this.first;
}
render() {
return <div>Hello, World! I'm {this.getText()}</div>;
}
}
So,Stencil.js 便是面向未来的集大成者——你们都抄不过我的。
由于使用 Stencil 开发的组件只是 Web Components,所以这些组件可以运行在所有的主流框架(AVR)中,也可以独立地运行。这一特质使它可以成为新的前端容器框架——毕竟 Web Components 是一个新的前端容器。
![31a1249aa8ae8b330a88c63d2f200847.png](https://i-blog.csdnimg.cn/blog_migrate/6d429ba1cba07ef93c0d1fa6757652a2.jpeg)
用途一:开发前端应用
好吧,没啥说的,大家都懂。
不过呢,Stencil.js 用来开发前端应用的另外一个优势是,已经有一个成熟的组件库:Ionic 系列的组件库。而 Ionic 系列的组件,已经在大量的应用验证过了。
除此,还与有内建了 Service Workers 生成工具。
顺带夸奖一下 Ionic 团队,这一步步下的棋非常棒。先是开发了用于 Angular.js 和 Angular 的 Ionic,然后开发了 Ionic Native,并且让 Ionic 可以支持不同的框架,现在又有了 Stencil.js。
用途二:连接混合应用
尽管 Flutter、React Native 已经很流行了,但是对于没有 Native 能力的团队来说,混合应用仍然是一个非常友好的选择。
标题的说法可能不太准确,不过呢,Stencil.js 是 Ionic 框架背后的组件库的支撑框架,它变成了 Ionic 这个混合应用框架的核心之一。
用途三:连接其它前端框架
嗯,Web Components 的一大特质,就是让你编写的应用可以嵌入其它框架中。
用途四:构建跨框架的 UI 库 / 设计系统
由于 Stencil.js 是一个基于 Web Components 设计的框架,因此由它创建的组件库,可以轻松地在可以引入 Web Component 的浏览器和框架上运行。
Stencil.js 存在的另一大特质是 按需加载。基于 Stencil.js 构建的组件库,呈现的结构是:单一组件以单一 chunk/entry 的形式存在。
如下是在 Stencil.js 中引入 Ionic 组件库时,生成的组件与 *.entry.js
的绑定关系:
[[1, "ion-avatar"]]], [{
"ios": "p-lyuug53j",
"md": "p-hixhmhon"
}, [[1, "ion-badge", {"color": [1]}]]], [{
"ios": "p-q6fmpdfd",
"md": "p-daqtamux"
}, [[0, "ion-card-content"]]], [{
"ios": "p-xn1drh7m",
"md": "p-b9b9dqwt"
}
以这里的代码为例,如果我们用了 ion-avatar
,而且对应的系统是 iOS,那么就会加载 p-lyuug53j.entry.js
,如果对应系统是 Android(md,Material Design),那么就会加载 p-hixhmhon.entry.js
。
从这等意义上来说,Stencil.js 真的是一个工具链,哈哈。由于遗憾的是当前生成的组件目录结构比较乱——如果你有 100 个组件,那么至少会生成 100 个 entry.js 文件。不过,可能是我没有找到配置的地方。
用途五:微前端应用
结合按需加载 和跨框架的模式,使用 Stencil.js 开发的组件或者是功能模板,就可以解决部分微前端应用之间的依赖重复问题。也因此 Stencil.js 特别适合用于开发微前端框架模式中的微件化架构。
我知道你已经从我的新书《前端架构:从入门到微前端》中,获取到足够多的微前端相关知识了,这里就不详细展开了。
![5cc7849598956f0ddbfd4fd5964498a7.png](https://i-blog.csdnimg.cn/blog_migrate/038c5d3d08c5c5ea0024633f43518b19.jpeg)
结论:胶水框架
Web Components 大法虽好,但是你还是需要一个快速开发 Web Components 的框架/工具。