Blog

Blog

PHODAL

【前端必知】胶水(框架) Stencil.js

去年的同一时间,我写了那篇《前端下半场:构建跨框架的 UI 库》推荐了 Stencil.js,当时是在项目的试验期。而 Stencil.js 已经在今年(2019 )的 6 月份,推出了 1.0 正式版,这意味着你已经可以开始采用这个~~框架~~(编译器)了——当然了,我不对我的这句话『负责』,你自己的锅自己背。

故事是这么开始的。

上周我在为 @花仲马 ~~复制~~ (开发)一个内容主题生成器 ( https://content.phodal.com )(受限于其中数据的版权问题,暂时不敢开源——我都是直接复制别的网站的),便开始在寻找一个能用得上的前端框架。毕竟:

  • React 用腻了
  • Angular 用腻了
  • jQuery 可能会被笑话
  • 原生 JavaScript 我不会了

所以,我开始绞尽脑汁找一个新的框架,直到我从 Web Components 框架里又找到了 Stencil.js。

过去,我曾经使用过 Ionic 开发了超过两位数的应用,除了 stars 数上千的 Growth,还有一个交易额 xxxxx 千亿的商业应用。所以,既然是 Ionic Framework 团队开发的框架,那我还是有点信心 ~~担心~~ 的。

为什么是 Stencil.js

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 是一个新的前端容器。

用途一:开发前端应用

好吧,没啥说的,大家都懂。

不过呢,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 特别适合用于开发微前端框架模式中的微件化架构。

我知道你已经从我的新书中,获取到足够多的微前端相关知识了,这里就不详细展开了。

结论:胶水框架

Web Components 大法虽好,但是你还是需要一个快速开发 Web Components 的框架/工具。

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Engineer, Consultant, Writer, Designer

ThoughtWorks 技术专家

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 最新技术分享

标签