前端框架太卷，HTMX和HVML接连踢馆HTML?其实有区别!

myzbx 2024-12-15 15:35 42 浏览

前阵子给大家说了一篇关于前端架构的文章，《前端框架太多太复杂，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 主要用于构建复杂的用户界面，强调层次化和可视化设计，适合需要高互动性和视觉层次的应用。

HTML 框架

上一篇：哇~ css用这个框架写，也太香了吧~赶紧收藏
下一篇：年度最爱的8个CSS框架 css结构框架图

前端框架太卷，HTMX和HVML接连踢馆HTML?其实有区别!

HVML

HTMX VS HVML

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿