前端框架太卷，HTMX和HVML接连踢馆HTML?其实有区别!
myzbx 2024-12-15 15:35 14 浏览
前阵子给大家说了一篇关于前端架构的文章，《前端框架太多太复杂，HTMX助你回归简单编程》。有几百位同学收藏了，还蛮开心的。前端相对于后端、大数据等而言，确实太卷了，各种新框架几年一更新。github上前端新内容也很多，像HTMX就是一个不错的例子。
HTMX（Hypertext Markup eXchange）之所以受到大家的喜欢，是因为它回归到HTML本源，通过扩展HTML语法，允许开发者直接在HTML元素上使用特定属性（如hx-get, hx-post, hx-trigger等）来定义元素的行为，如数据获取、提交表单、触发事件等，大大减少了对单独JavaScript脚本的依赖，使得前端逻辑更加直观和易于维护。
此外，HTMX不强制要求特定的后端技术栈，它可以与任何能够返回HTML或JSON响应的后端服务无缝集成，无论是传统的Web框架还是现代的API服务，所以才会变得非常火。
HVML
不过，我们今天要给大家重点介绍的并不是HTMX，而是上次在评论区有一位同学提到的HVML！啥？又一个？其实当我花几天功夫完整学习了一下后，发现其实它并没有那么简单。
HVML是Hybrid Virtual Markup Language的缩写。它是由国内首个开源项目 MiniGUI 的作者魏永明提出并设计的一种通用且易学的编程语言。从定义就能看出来，HVML是编程语言，和C、JAVA，Python是一类的。但是，它的写法非常类似于HTML，也天然地能产生HTML，它是动态的可编程的HTML，产生的HTML可供浏览器（前端）显示。再不明白的话，直接看代码吧：
是不是基本一样。HVML通过PurC解释器解析执行，PurC从根元素（即 hvml 元素）开始，以深度优先的顺序执行 DOM 树。在执行 hvml 元素时，由于 target 属性的值为 html，解释器将生成一个 HTML 文档。
既然HVML能动态产生HTML，事情就不会只是这么简单，代码一运行产生固定HTML，那不就只是模板生成器了。HVML是数据驱动编程，通过基于数据的迭代、插入、更新、清除等操作，开发者不需要编写程序，或者只要少量编写程序即可动态生成最终的HTML 文档。
<!-- 获取所在地方，并截取前两位得到en或zh。-->
<hvml target="html" lang="$STR.substr($SYS.locale, 0, 2)">
<!-- 终端打印-->
$STREAM.stdout.writelines('Start of `Hello, world!`')
<body>
<h1>我的第一个 HVML 程序</h1>
<!-- 初始化一个变量helloInVarLangs，它的值从后面的url获取。-->
<init as "helloInVarLangs" from "file://{$SYS.cwd}/hello-world.json" />
<iterate on $helloInVarLangs >
<p>$?</p>
</iterate>
</body>
<!-- 终端打印-->
$STREAM.stdout.writelines('End of `Hello, world!`')
</hvml>再比如时尚点的智能手环前端例子，能够显示当前时间、佩戴者的心跳信息等信息，手环联网后与和云端服务器交换信息。传统方式我们需要开发一个在智能手环上运行的 GUI 系统，然后和云端通讯获得数据，界面的修改完全由设备端代码负责。如果要改变界面的样式，还有升级固件。使用 HVML，则可以通过云端来控制设备的界面显示，本地端只需要渲染显示即可。
<!DOCTYPE hvml>
<hvml target="html" script="python">
<head>
<listen on="mqtt://foo.bar/bracelet" as="braceletInfo">
<init as="_TIMERS" uniquely on="id">
[
{ "id" : "clock", "interval" : 1000, "active" : "yes" },
]
</init>
</head>
<body>
<div class="clock" id="clock">
<observe on="$_TIMERS" for="clock">
<update on="#clock" textContent="$_SYSTEM.time('%H:%m')" />
</observe>
</div>
<div class="heartbeat" id="heartbeat">
<observe on="$braceletInfo" for="heartbeat">
<update on="#heartbeat" textContent="$?.value BPM" />
</observe>
</div>
<observe on="$braceletInfo">
<choose on="$?" to="noop" by="CLASS: CDumpEvent" />
</observe>
</body>
</hvml>代码设定了一个定时器，每隔1秒运行一次，更新时钟、心跳等标签内容，CDumpEvent 将所有来自MQTT的事件转储到了云端数据库中。
<init as 'pyCode'>
'''
def find_next_prime(start):
if start < 2:
start = 2
while True:
start += 1
for j in range(2, start + 1):
if start % j == 0:
break
if j == start:
return start
'''
</init>我们可以非常方便地在 HVML 程序中调用 Python 模块，利用 Python 生态中的丰富软件包或模块开发自己的 HVML 应用，比如方面的例子，我们可以HVML中直接写python代码，还可以通过STEAM和pipe调用外部python脚本。
HTMX VS HVML
总的来说：HTMX 更专注于简化 Web 应用程序的交互，通过增强现有的 HTML 页面来提升用户体验，特别适合需要动态更新部分内容的场景。HVML 主要用于构建复杂的用户界面，强调层次化和可视化设计，适合需要高互动性和视觉层次的应用。
相关推荐
- HTML5学习笔记-绘制变形图形之组合效果
-
绘制组合效果的图形将一个图形绘制在另一个图形之上，图形效果会受制于图形的绘制顺序，可利用globalCompositeOperation属性组合图形，前面绘制贝塞尔曲线时，我就已经用过这个属性了，绘制...
- 安卓自定义 View 进阶:贝塞尔曲线(上)
-
在上一篇文章Path之基本图形中我们了解了Path的基本使用方法，本次了解Path中非常非常非常重要的内容-贝塞尔曲线。一.Path常用方法表为了兼容性(偷懒)本表格中去除了在API21(即安卓...
- 使用Python绘制迷人的二维心形曲线和三维马鞍面
-
Python是一个功能强大的编程语言，不仅可以处理数据分析和机器学习任务，还能够创建美观的图形和图像。在这篇博客中，我们将学习如何使用Python的matplotlib库和PyQt5框架来绘制二维心形...
- 年度最爱的朋友圈封面，太好玩了吧
-
哈喽~大家早上好呀！不知道大家有没有这种想法：我可以不发朋友圈，但我会换上自己喜欢又好看的朋友圈封面、头像或者签名。而最近我就发现了一个超火的涂鸦玩法，简直实现了朋友圈创作自由~再也不用去网上找这些有...
- 两英寸中的沿途风景（两英寸有多高?）
-
画家DinaBrodsky将这个项目命名为“小人国自行车旅行指南”，她把自己长达10年的骑行所见记忆，几乎全部浓缩在仅有两英寸直径的圆形画布上。这些作品中的景致都是真实存在的，而且完全是一个骑行者眼...
- 小白也能学会的Q萌插画头像教程，再也不怕撞头像了
-
你有没有这样的烦恼呢？想学插画，买了iPad，安装了Procreate，结果找不到教程，不会画，连最简单的头像也画不出来，这可咋办？别慌！今天同年美术就来教大家用Procreate画超简单的Q萌头像。...
- 篮球元素创意logo设计（篮球元素创意logo设计理念）
-
在三维空间与二维平面交汇处，篮球标志设计演绎着独特的视觉辩证法。这项运动特有的力学轨迹、集体意志与文化基因，在圆形画布上构建出超越图形本身的能量场域。当设计师的思维触角穿透表象的运动符号，触及篮球运动...
- 高颜来袭!假如井盖会说话，假如墙壁有生命
-
一群人在地上、墙上涂涂画画，竟然是在上课？没错！一直以来，东北林业大学的手绘创作与文化课以其独特趣味性和实践性深受大家喜爱，可谓一课难求。在这门课上，同学们化身“神笔马良”，用画笔勾勒世界，将粉墨挥洒...
- 画布上的玉色缪斯:詹姆斯·桑特笔尖的永恒柔光
-
詹姆斯·桑特（JamesSant），一位在英国维多利亚时代享有盛誉的肖像画家，他的艺术生涯跨越了19世纪的大部分时间，从1820年出生至1916年离世，见证了英国艺术史的辉煌篇章。桑特不仅以其精湛的...
- 可变数据打印软件如何制作圆形标签序列号
-
今天给小伙伴们分享一下在可变数据打印软件中是如何制作圆形标签序列号的具体制作步骤的哦。在可变数据打印软件中制作标签的大致步骤是先设置标签纸张大小，在绘制标签内容，标签制作完成，点击软件打印预览，预览没...
- 伞上绘梦:小艺术家们的创意绽放——阜阳阜南三小手绘伞主题活动
-
运营总监：鲍安常LJ0072025年4月7日整理操场上，彩笔沙沙学生们围坐，笑语喧哗透明雨伞静静躺下等一场春天的魔法画笔不停，梦想在挥洒伞面成了春天的家待雨落下，撑起它让春天，在伞中开遍天涯在阜南三小...
- 《photoshop教程》ps设计圆形色彩相位图效果图
-
本文教大家用PS画色轮图，色轮图就是色彩相位图，它完整表现了色相环360度的全部颜色，PS的色相/饱和度命令依据色轮图而设计，不过在色相/饱和度命令中，你看到的不是色轮，而是色轮的另一种形式--色条，...
- 揭秘!餐盘上那个小圆坑，99%的人用错了?
-
餐盘中的小圆形区域，常让人在用餐时产生好奇——这个既不像分隔格又不像装饰的凹陷，究竟有何用途？通过梳理设计历史、功能演变与大众解读，我们可以发现，这一设计不仅是实用主义的产物，更承载了饮食文化与生活智...
- 图片四个角怎么能做成圆弧角?这几种制作方法操作起来很简单!
-
图片四个角怎么能做成圆弧角？在当今这个视觉内容爆炸的时代，图像不仅仅是信息的载体，更是情感交流的桥梁，深刻地渗透进我们的日常生活，然而，一个微妙却常被边缘化的观察是，传统图片那尖锐的直角边缘，在不经意...
- 标签制作软件如何快速制作圆形合格证标签
-
今天给小伙伴们分享一下标签制作软件中如何快速制作圆形合格证标签的具体操作步骤。这个合格证标签是一个小小的圆形，标签是带颜色的，这种标签在进行制作的时候应该怎么制作呢？接下来就一起来看下吧。我们可以看到...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)