前端框架太卷，HTMX和HVML接连踢馆HTML?其实有区别!
ccwgpt 2024-09-13 16:15 32 浏览 0 评论
前阵子给大家说了一篇关于前端架构的文章，《前端框架太多太复杂，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 主要用于构建复杂的用户界面，强调层次化和可视化设计，适合需要高互动性和视觉层次的应用。
相关推荐
- 丨公司丨公司大架构整理汇总
-
注：本文转自团队成员原创作品，特此鸣谢（公号：法海图鉴）今日话题公司大架构整理背景介绍经过前几期话题对各种企业类型的介绍，想必大家已经有了初步认识。之后我将带着大家开启对公司的深入了解。本期...
- 图解物理--八年级物理下册最全知识框架导图
-
第七章力1力2弹力3重力第八章运动和力1牛顿第一定律2二力平衡3摩擦力第九章压强1压强2液体压强3大气压强4流体压强与流速的关系第十章浮力1浮力2阿基米德原理3物体的浮沉条件及应用第十一章功...
- 八年级上册生物，思维导图，期末高分必备资料，家长收藏
-
这是八年级上册生物的思维导图，孩子在背诵知识点的时候，可以看一下知识点在导图中的位置，形成对知识点整体的把握，有助于学生拿高分，特别是图片中带红色星星的部分，更是要注意背诵，是重点内容。家长可以把图片...
- 2019政府工作报告精华，这张思维导图里全都有
-
每经记者：李可愚每经编辑：陈星每日经济新闻
- 图解薪酬体系结构设计
-
...
- 司考复习独家总结!一张图总结行政法知识结构体系
-
作为三大实体法之一，行政法的分值在60分左右，行政法在司法考试中一直比较平稳常规，没有偏题怪题，还是比较容易得分的。小编要提醒大家，在3月之前要把三大实体法学习一遍。下图是厚大在线360导学师小周总结...
- 实用干货!高中物理框架图，让零碎知识“串联”起来
-
高中物理学习一定要抓好逻辑结构大框架！了解整个知识框架体系后，更易抓住骨干知识，干掉重难知识点~今天给大家分享高中物理的框架图同学们赶紧收藏起来吧！力学知识结构图光学知识结构图热学、原子物理知识结构图...
- 254m超高层办公楼型钢砼框架-核心筒结构图
-
高度类别：超高层建筑钢筋混凝土结构：框架,框架核心筒钢结构：钢框架建筑功能：办公包含：办公楼57层（-3层）254.150m钻孔灌注桩桩+筏板型钢混凝土框架-钢筋混凝土核心筒西裙房2层（-...
- 砖混结构与框架结构，究竟有何区别?千万别被坑!
-
现在买房装修的人最怕啥？不是价格高，而是房子不安全！两种主流建筑结构，砖混靠墙，框架靠柱子，选错了隔墙都可能要命。简单说，砖混便宜但别碰高层，框架贵点但能保命。砖混那些承重墙根本不能拆，想砸墙改个开放...
- 大师一百——高中化学必考:《元素周期律》考点框架图
-
今天大师给大家带来的是高中化学的《元素周期律》考点框架图，高中的同学必须牢记于心，这种重要的考点，考试是一定会考的！化学大师...
- 需求分析框架图
-
需求分析框架图
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- mfc框架 (52)
- abb框架断路器 (48)
- beego框架 (52)
- java框架spring (58)
- grpc框架 (65)
- tornado框架 (48)
- 前端框架bootstrap (54)
- orm框架有哪些 (51)
- ppt框架 (48)
- 内联框架 (52)
- cad怎么画框架 (58)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)