stencil 简介

stencil 简介

    • stencil 出现的动机
    • 为何要学习 stencil 呢?

stencil 是一个生成 Web Component编译器,但是其具有自己的特殊语法,使用 stencil 生成的组件可跨框架在 html 中使用

其号称结合了最流行框架(angular、react、vue)中的最好的理念,具备这些特点:

  • TypeScript (依赖注入、装饰器等 angular 的一些语法)
  • Virtual DOM (React)
  • JSX (React)
  • Reactive data-binding (React)
  • Async rendering (React)
  • Static Site generation (SSG)
  • Live reload 热刷新,开发时很有用
  • 自动优化构建产物
  • API 很小

stencil 的构建产物已经做了懒加载按需加载,所以具有较高的性能

stencil 除了创建 Web Component,还能构建 WPA 的站点。

一个简单的 stencil 组件:

import { Component, Prop, h } from '@stencil/core'@Component({tag: 'my-name',styleUrl: 'my-name.scss',
})
export class MyName {@Prop() first: string@Prop() last: stringrender() {return (<p>Hello, my name is {this.first} {this.last}</p>)}
}

使用:

<my-name first="Stencil" last="JS"></my-name>

stencil 出现的动机

ionic 团队为了实现更好的创建 component,且 component 能跨框架和无框架使用,开发了 stencil,2017 年 8 月发布第一个版本。

Stencil’s primary goal is to remove the need for components to be written using a specific framework’s API.

Stencil’s integration with different frameworks is currently a work in progress. As Stencil matures, the goal is to make it easy to write standard web components which will compile to various output targets.

实际使用时,发现三大流行框架(react、vue angular)对 stencil 生成的 web component 的支持并没有和其宣传的那么好,坑比较多,集成方案很少。

本人测试 react17、vue2、vue3 之后,发现 vue2 对 stencil 的支持最好,配置最简单。

实际上,网站关于 stencil 的资料非常少,stackoverflow 上 stencil 相关的问题才 4588 条,vue 相关的 11 万加,react 和 angular 更多了。

另外,stencil 相关文档和周边库、组件等也很少,想采用它来编写跨裤架的 web component,还是不推荐。

那在纯 html 中使用 stencil 构建的 web component 呢?

不推荐。比如支持传递 object 和 array 等复杂数据到 web component 内部,还需要配合 jquery 等 DOM 操作库,让前端开发回到 jquery 时代。

单独使用 stencil 创建单页应用可以吗?

可行,不推荐。

周边库支持不好,文档糟糕,社区不活跃,遇到问题,难以找到解决方案。

什么时候需要使用 stencil?

使用 ionic 技术开发 ios、android 应用,可以学习它。

为何要学习 stencil 呢?

入职的新公司采用 stencil 开发,需要适应新技术,老项目还有其他问题,我们也计划采用新的技术重构这个维护了 4 年多的系统,所以有必要了解 stencil。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/35539.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

出版发行企业从传统分销到网格化营销的变革之路(AMT企源)

引言&#xff1a; 本文为该系列文章的第一篇&#xff0c;旨在介绍当前出版发行行业&#xff0c;尤其是各省级新华书店集团围绕“综合教育服务”和“大文化消费服务”两个领域的业务布局下&#xff0c;如何实现营销模式创新、营销组织创新&#xff0c;以推动新华书店集团从传统…

浮动IP绑定主机步骤

文章目录 1&#xff0c;查看本机的原有IP2&#xff0c;绑定浮动IP3&#xff0c;验证绑定情况4&#xff0c;解绑浮动IP 1&#xff0c;查看本机的原有IP ifconfig得到本机的ip是192.168.10.128 2&#xff0c;绑定浮动IP ifconfig ens33:1 192.168.10.10 netmask 255.255.255.0…

墨迹天气与AI数据湖的集成案例(集易连平台)

客户介绍 客户方为国内某皮具生产企业&#xff0c;年设计版型数千款&#xff0c;全国销售门店数一千多家&#xff0c;年销售额达20亿。该AI项目目的是将订单数据、用户行为分析、天气数据、门店位置、客流量等等一系列数据作为AI大模型的输入&#xff0c;经过大模型的训练和…

LeetCode刷题之HOT100之打家劫舍

2024/6/26 大家早上好呀&#xff01;今天不热诶&#xff0c;昨天跟镔哥跑了五公里&#xff0c;配速515简直不要太爽啊&#xff0c;跑完后在操场走一圈&#xff0c;正好发小发了群视频过来&#xff0c;聊了半小时。发小一考研二战失利&#xff0c;去干测试&#xff0c;天天累得不…

ROS话题通信机制实操Python

ROS话题通信机制实操Python 创建ROS工程发布方(二狗子)订阅方(翠花)编辑配置文件编译并执行计算图查看Python话题机制节点 ROS话题通信的理论查阅ROS话题通信流程理论 在ROS话题通信机制实现中&#xff0c;ROS master 不需要实现&#xff0c;且连接的建立也已经被封装了&#…

每日一练 - RSTP与STP收敛速度对比

01 真题题目 RSTP 收敛速度比 STP 要快,以下说法正确的是&#xff1f; A. 在 RSTP 中检测拓扑是发生变化只有一个标准.一个非边缘端口迁移到 Forwarding 状态 B. 在 STP 中,为了避免临时环路,至少要等待一个 Forwarding Delay 待全网端口确定,所有端口才能进行转发 C. P/A …

RedHat9 | RAID配置与管理

一、实验环境 1、RAID简介 RAID&#xff08;Redundant Array of Independent Disks&#xff09;&#xff0c;即独立磁盘冗余阵列&#xff0c;是一种数据存储技术。它通过将多个独立的磁盘驱动器组合起来&#xff0c;形成一个逻辑上的整体&#xff0c;从而提高数据存储的性能、…

【Redis】数据持久化

https://www.bilibili.com/video/BV1cr4y1671t?p96 https://blog.csdn.net/weixin_54232666/article/details/128821360 单点redis问题&#xff1a; 数据丢失问题&#xff1a;实现Redis数据持久化并发能力问题&#xff1a;搭建主从集群&#xff0c;实现读写分离故障恢复问题&…

数据分析必备:一步步教你如何用matplotlib做数据可视化(13)

1、Matplotlib 文本 Matplotlib具有广泛的文本支持&#xff0c;包括对数学表达式的支持&#xff0c;对光栅和矢量输出的TrueType支持&#xff0c;具有任意旋转的换行符分隔文本以及unicode支持。Matplotlib包含自己的matplotlib.font_manager&#xff0c;它实现了一个跨平台&a…

和GPT-4这些大模型玩狼人杀,人类因太蠢被票死,真·反向图灵测试

「你看&#xff0c;人类一败涂地了」 这是一次「反向图灵测试」&#xff0c;几个全球最先进的大模型坐在一起&#xff0c;坐着火车唱着歌&#xff0c;但其中混进了人类&#xff1a; 而 AI 的任务&#xff0c;是把这个人类揪出来。 最近&#xff0c;一位昵称「Tore Knabe」的网…

[leetcode]number-of-longest-increasing-subsequence

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int findNumberOfLIS(vector<int> &nums) {int n nums.size(), maxLen 0, ans 0;vector<int> dp(n), cnt(n);for (int i 0; i < n; i) {dp[i] 1;cnt[i] 1;for (int j 0; j < i…

转行大模型开发:知识、能力及学习路线详解

引言 随着人工智能和大模型&#xff08;如GPT-4、BERT等&#xff09;技术的快速发展&#xff0c;越来越多的专业人士希望转行进入这一领域。大模型开发涉及复杂的技术体系和多样的应用场景&#xff0c;对从业者的知识和能力提出了较高要求。本文将详细解析转行大模型开发所需的…

详解Alibaba Cloud Linux 3.2104 LTS 64位镜像操作系统

Alibaba Cloud Linux 3.2104是阿里云推出的云原生Linux发行版Alibaba Cloud Linux 3版本&#xff0c;64位操作系统&#xff0c;由阿里云提供免费长期维护更新和漏洞修复&#xff0c;镜像Alibaba Cloud Linux 3.2104 LTS 64位操作系统性能很不错&#xff0c;针对ECS云服务器进行…

LangChain结合LLM做私有化文档搜索

我们知道LLM&#xff08;大语言模型&#xff09;的底模是基于已经过期的公开数据训练出来的&#xff0c;对于新的知识或者私有化的数据LLM一般无法作答&#xff0c;此时LLM会出现“幻觉”。针对“幻觉”问题&#xff0c;一般的解决方案是采用RAG做检索增强。 但是我们不可能把…

深入解读一下`android.os.CountDownTimer`

简介 在 Android 开发中&#xff0c;CountDownTimer 是一个非常有用的类&#xff0c;它可以用于倒计时任务&#xff0c;比如倒计时器、限时活动等。CountDownTimer 提供了一个简单的方式来实现定时操作&#xff0c;无需我们手动管理线程和计时器。 本文将深入解析 CountDownT…

Linux核心基础详解(第13天)

系列文章目录 一、Linux基础详解&#xff0c; 二、网编三要素和SSH原理 三、shell编程&#xff08;补充&#xff09; 文章目录 系列文章目录前言一、linux简介二、虚拟机简介1、设置VMware网卡1.1 修改VMware中网络1.2 修改本地net8网卡ip 2、安装命令版裸机3、安装centos操作…

CVPR 2024圆满落幕:海报创意不断,学者穿cos服装讨论学术问题?这届CVPR真是太有趣了

CVPR 2024圆满落幕&#xff1a;海报创意不断&#xff0c;学者穿cos服装讨论学术问题&#xff1f;&#xff01;这届CVPR真是太有趣了 会议之眼 快讯 2024 年 CVPR &#xff08;Computer Vision and Pattern Recogntion Conference) 即国际计算机视觉与模式识别会议&#xff0c…

【python】python入门day1

python入门 Python解析器Python注释Python中的变量&#xff08;重点&#xff09;练习&#xff1a;1、用python的print函数描述一段对话2、与计算机模拟一段对话&#xff0c;并且最终计算机需要将输入的内容全部输出3、模拟两个对话场景(根据提示输入内容&#xff0c;并且在后续…

OpenCV中掩膜(mask)图像的创建和使用

操作系统&#xff1a;ubuntu22.04OpenCV版本&#xff1a;OpenCV4.9IDE:Visual Studio Code编程语言&#xff1a;C11 功能描述 掩模图像&#xff08;Mask Image&#xff09;是一种特殊类型的形象数据&#xff0c;在图像处理和计算机视觉中扮演着重要角色。它通常是一个二维数组…

java:aocache:基于aspectJ实现的方法缓存工具

背景 最近一直在做一些服务端的设计&#xff0c;经常遇到常量计算的问题&#xff0c;比如获取查找一个类的所有方法&#xff0c;获取有指定注解(Annnotation)的方法并查找注解的上特定的元注解是否有特定的值 。。。。总之逻辑很复杂&#xff0c;而且会频繁调用。 比如在服务端…