【前端必知】胶水(框架) Stencil.js
去年的同一时间,我写了那篇《》推荐了 Stencil.js,当时是在项目的试验期。而 Stencil.js 已经在今年(2019 )的 6 月份,推出了 1.0 正式版,这意味着你已经可以开始采用这个~~框架~~(编译器)了——当然了,我不对我的这句话『负责』,你自己的锅自己背。
故事是这么开始的。
上周我在为 @花仲马 ~~复制~~ (开发)一个内容主题生成器 ( https://content.phodal.com )(受限于其中数据的版权问题,暂时不敢开源——我都是直接复制别的网站的),便开始在寻找一个能用得上的前端框架。毕竟:
React 用腻了
Angular 用腻了
Vue 要出 3.0 了
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 的框架/工具。
【前端必知】胶水(框架) Stencil.js相关推荐
- 前端必知必会HTTP请求系列(二)简单一点的HTTP协议
http协议用户客户端和服务器之间的通信 http协议和TCP/IP协议族内的其他众多协议相同,用于客户端和服务器之间的通信. 那么问题来个如果两台服务器之间一台服务器向另一台服务器进行接口请求那谁是 ...
- 从单层感知器到深度学习以及深度学习必知的框架
从单层感知器到深度学习以及深度学习必知的框架 一 单层神经网络(感知器) 1.结构 下面来说明感知器模型. 在原来MP模型的"输入"位置添加神经元节点,标志其为"输入单元 ...
- [转](1条消息) 前端必知:针对高分辨率屏幕的样式优化(转载请删除括号里的内容)
苹果定义高分屏(retina)已经好久了,只是最近才有越来越多的网站开始重视高分屏下的表现,QQ空间也早支持高分屏了,CSS Gaga也加入了对@2x图片的支持.嗯,迟到的文章,和大家简单的分享下. ...
- CDN,前端必知必会
CDN全称Content Delivery Network(内容分发网络),是构建于现有互联网基础上的通过中心节点对****边缘节点(包括负载均衡设备.高速缓存服务器)进行负载均衡.内容分发以及调度的 ...
- 富文本数据只展示文字,前端必知
先看原始效果,我这里是用了v-html展示内容,如果是v-text则会直接显示源码(请看下面的代码). 但是这样就会出现一个问题,内容样式很突兀(主要为字体).因此我就想要,富文本数据源码格式只展示文 ...
- 前端必知必会--JSON.stringify()犀利的第三个参数
作者: 小华坚决上王者 建议阅读时间: 2 min 博客原文 JSON.stringify()是个经常使用的前端方法,这个函数可以传入三个参数,这里我安利下第三个参数,专门用来美化输出,先看下语法: ...
- 关于网络协议(前端必知)
网络 网络是信息传输,接收,共享的虚拟平台 通过它把各个点,面,体的信息联系到一起,从而实现这些资源的共享 网络传输数据有一定的规则,这些规则我们称为协议 HTTP协议就是其中的一种,而且使用最为频繁 ...
- 【阿里云大学课程】前端必知——HTML5新特性完整视频教程(音频、视频、画布、web存储、动画……)...
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定,其设计目的是为了在移动设备上支持多媒体. 本课程中,你将学习到下列这些HTML5新特性(点击下列课时立即学习): ...
- 合辑 | 必知的200+基础技术词汇,你知道多少?
简介: 覆盖Java.Python.前端.数据库.linux.k8s.云原生.微服务八大技术领域的开发者词条,帮你搞懂专业名词! 第一节:Java篇(46个) 1.Java Java是一种广泛使用的计 ...
最新文章
- 技术12期:如何设计rowkey使hbase更快更好用【大数据-全解析】
- python定义一个变量_Python新手上车3:Python第一个程序和变量
- JS双向数据绑定的原理介绍
- [Reomting Debug] 巧用VS 的remote debug 功能远程调试程序 经验分享.
- SAP Spartacus初始化时和user token相关的APP INITIALIZER
- WebM VP8 SDK Usage/关于WebM VP8 SDK的用法
- Python 内置模块之 时间模块 datetime
- c语言编写网页图形界面代码,「分享」C语言如何编写图形界面
- :empty css 可以用在哪些标签,CSS3 :empty 选择器
- python后台架构Django教程——manage.py命令
- python爬虫结构化_python爬虫获取小区经纬度以及结构化地址
- css position relative absolute fixed
- Linux就这个范儿 第16章 谁都可以从头再来--从头开始编译一套Linux系统 nsswitch.conf配置文件...
- 分享33个超棒的海洋地貌风光图片
- Android跑指定包Monkey脚本
- 了解衡量网络性能的四大指标:带宽、时延、抖动、丢包
- 访问Daytime服务的客户端(TCP)
- “铁老大”价格坚冰松动 成都火车票打折三成
- 找不到可插入的ISAM
- 【UE4 C++】如何关联GitHub 下载UE4引擎源代码
热门文章
- starUML for MAC 破解方法
- 聊一聊不同技术栈中hashmap扩容机制
- SQLZOOL练习题答案和解析 第1关 SELECT name
- 《Delphi传奇》网络游戏组件安装步骤:Delphi 10.3安装DelphiX
- 请问如何使IE支持有swing的aaplet?
- QXRService:高通SnapdragonXR OpenXR SDK v1.x 概略
- “原时法师”的开发流程记录和总结
- js正则表达式验证大全及常用字符的说明
- 用 Python 轻松将懂车帝视频转换为文本
- css图片横向压缩,【css样式生成 图片合并压缩工具】Sprite,你值得拥有