【风雨欲来的Hybird】(2)Stencil——万物皆组件,与框架无关

Stencil——A Compiler for Web Components,可能有人听说过这个框架,但我想大部分人还没注意到它。

Stencil也不是一个新东西,出来快有10个月了,它中文意思是“模版”,是一个Web组件的编译器,它采用微小的虚拟DOM层、有效的单向数据绑定、异步渲染管道(类似于React Fiber)和开箱即用的延迟加载,并生成100%基于标准的Web组件。官方描述特征是:

. Virtual DOM
. Async rendering (inspired by React Fiber)
. Reactive data-binding
. TypeScript
. JSX

各种框架的碎片化已经创建了一个Web开发互操作性梦魇,为一个框架构建的组件不适用于另一个框架。 Stencil构建Web组件为这两个问题提供了解决方案,将更多工作推向浏览器以获得更好的性能,并针对所有框架可以使用的基于标准的组件模型。

听上去有点专业,那换成直白的说法就是:因为基于标准Web组件,它实现了框架无关。以它来生成的组件,你可以直接拿给Angular、Vue、React、JQuery或者干脆不用任何框架来开发使用。进一步说的话,以后不用专门针对某种前端框架封装组件,直接一套通用。

Stencil还在Web组件之上启用了许多关键功能,特别是无需运行无头浏览器、预渲染和把对象作为属性,就能实现服务器端呈现(SSR)。

更多细节自己上去【Stencil官网】了解一下吧.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

UWP 入门教程2——如何实现自适应用户界面

系列文章 UWP入门教程1——UWP的前世今生 如上文所说的,布局面板根据可用的屏幕空间,指定界面元素的大小和位置。例如StackPanel 会水平或垂直排列界...

23650
来自专栏谈补锅

cordova for ios: Unable to simultaneously satisfy constraints.

  使用cordova开发ios项目的时候,在上传图片碰到一个问题。使用html的<input type="file"/>标签来选择照片或者拍照片,引起了布局报...

15240
来自专栏大数据钻研

前端面试那些坑之HTML篇

HTML 1、Doctype作用?标准模式与兼容模式各有什么区别? (1)、<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<html> 标签之前...

41290
来自专栏码农笔录

vue2(webpack)调用amap高德地图及其UI组件

44210
来自专栏IMWeb前端团队

setTimeout的那些事

如果懂setTimeout,可以直接看第3节,前面两节也可以当段子看一下。 如果不是很懂setTimeout,看下1,2两节应该会有一些收获。 1 Java...

31200
来自专栏Android机动车

大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画

Airbnb出了移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/i...

41710
来自专栏小狼的世界

自定义地址栏与收藏夹中的图标

favicon 在英文中有几个别名,叫做 shortcut icon,website icon,tab icon,URL icon,bookmark icon,...

22950
来自专栏前端知识分享

第136天:Web前端面试题总结(理论)

  a. 请求数量:合并脚本和样式表,CSS Sprites,拆分初始化负载,划分主域

66640
来自专栏拂晓风起

createjs入门

21230
来自专栏世界第一语言是java

vue2(webpack)调用amap高德地图及其UI组件vue2(webpack)调用amap高德地图及其UI组件和标记物#

31730

扫码关注云+社区

领取腾讯云代金券