前端框架太卷，HTMX和HVML接连踢馆HTML?其实有区别!
ccwgpt 2024-09-13 16:15 26 浏览 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 主要用于构建复杂的用户界面，强调层次化和可视化设计，适合需要高互动性和视觉层次的应用。
相关推荐
- Spring WebFlux vs. Spring MVC（springboot是什么）
-
背景随着异步I/O和Netty等框架的流行，响应式编程逐渐走入大众的视野。但是，响应式编程本身并不是太新的概念，这个术语最早出现在1985年DavidHarel和AmirPnue...
- 深度解析微服务高并发:适配SpringMVC框架适配模块及实现原理
-
适配主流框架如果不借助Sentinel提供的适配主流框架的模块，则在使用Sentinel时需要借助try-catchfinally将要保护的资源（方法或代码块）包起来，在目标方法或代码块执行之前，调...
- Spring MVC 底层原理深度解析:从请求到响应的全链路拆解
-
一、Servlet容器与DispatcherServlet的启动博弈1.Tomcat初始化阶段java//Tomcat初始化流程StandardContext#startInterna...
- 改造总结之传统SpringMVC架构转换为SpringBoot再到集群
-
改造出发点，是基于现在服务都在向上云的目标前进，传统SpringMVC难以满足项目持续构建、服务节点任意扩展的需求，所以开始了历史项目的改造。项目改造考虑的主要是兼容以前的业务代码，以及session...
- SpringBoot3 整合 Spring MVC 全解析:开启高效 Web 开发之旅
-
在当今的JavaWeb开发领域，Spring框架家族无疑占据着重要的地位。其中，SpringBoot3和SpringMVC更是开发者们构建强大、高效Web应用的得力工具。今天，...
- 一文读懂SpringMVC（一文读懂!残疾人低保边缘家庭能领的超实用福利政策）
-
1.SpringMVC定义1.1.MVC定义Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据View（视图）：是应用程序中处理数据显示的部分。通常...
- 69 个Spring mvc 全部注解:真实业务使用案例说明(必须收藏)
-
SpringMVC框架的注解为Web开发提供了一种简洁而强大的声明式方法。从控制器的定义、请求映射、参数绑定到异常处理和响应构建，这些注解涵盖了Web应用程序开发的各个方面。它们不仅简化了编码工作，...
- Spring MVC工作原理:像拼积木一样构建Web应用
-
SpringMVC工作原理：像拼积木一样构建Web应用在Java的Web开发领域，SpringMVC无疑是一个让人又爱又恨的存在。它像一位神通广大的积木搭建大师，将一个个分散的功能模块巧妙地拼接在...
- 5千字的SpringMVC总结，我觉得你会需要
-
思维导图文章已收录到我的Github精选，欢迎Star：https://github.com/yehongzhi/learningSummary概述SpringMVC再熟悉不过的框架了，因为现在最火的...
- SpringMVC工作原理与优化指南（springmvc工作原理和工作流程）
-
SpringMVC工作原理与优化指南在现代Java开发中，SpringMVC无疑是构建Web应用程序的首选框架之一。它以其优雅的设计和强大的功能吸引了无数开发者。那么，SpringMVC究竟是如何工作...
- Spring MVC框架源码深度剖析:从入门到精通
-
SpringMVC框架源码深度剖析：从入门到精通SpringMVC框架简介SpringMVC作为Spring框架的一部分，为构建Web应用程序提供了强大且灵活的支持。它遵循MVC（Model-V...
- 3000字搞明白SpringMVC工作流程、DispatcherServlet类、拦截器!
-
SpringMVC基础虽然SpringBoot近几年发展迅猛，但是SpringMVC在Web开发领域仍然占有重要的地位。本章主要讲解SpringMVC的核心：DispatcherServlet类...
- 多年经验大佬用2000字透彻解析SpringMVC的常用注解及相关示例
-
SpringMVC注解SpringMVC框架提供了大量的注解，如请求注解、参数注解、响应注解及跨域注解等。这些注解提供了解决HTTP请求的方案。本节主要讲解SpringMVC的常用注解及相关示例...
- 知乎热议:如何成为前端架构师，赚百万年薪?
-
作者|慕课网精英讲师双越最近有一条知乎热议：从一个前端工程师，如何根据目标，制定计划，才能快速进阶成为前端架构师？不久之前我参与了一次直播，讲到了自己对于Web前端架构师的理解。架构师这个角色...
- 学习笔记-前端开发架构设计（前端架构设计方案）
-
前端开发的技术选项主要包含以下几点，下面对一些名词概念的解释做了笔记：1、分层架构：把功能相似，抽象级别相近的实现进行分层隔离优势：松散耦合（易维护，易复用，易扩展）常见分层方式：MVC，MVVM2、...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- Spring WebFlux vs. Spring MVC（springboot是什么）
- 深度解析微服务高并发:适配SpringMVC框架适配模块及实现原理
- Spring MVC 底层原理深度解析:从请求到响应的全链路拆解
- 改造总结之传统SpringMVC架构转换为SpringBoot再到集群
- SpringBoot3 整合 Spring MVC 全解析:开启高效 Web 开发之旅
- 一文读懂SpringMVC（一文读懂!残疾人低保边缘家庭能领的超实用福利政策）
- 69 个Spring mvc 全部注解:真实业务使用案例说明(必须收藏)
- Spring MVC工作原理:像拼积木一样构建Web应用
- 5千字的SpringMVC总结，我觉得你会需要
- SpringMVC工作原理与优化指南（springmvc工作原理和工作流程）
- 标签列表
-
- MVC框架 (46)
- spring框架 (46)
- 框架图 (58)
- bootstrap框架 (43)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- laravel框架 (46)
- express框架 (43)
- springmvc框架 (49)
- scrapy框架 (52)
- beego框架 (42)
- java框架spring (43)
- grpc框架 (55)
- orm框架有哪些 (43)
- ppt框架 (48)
- 内联框架 (52)
- winform框架 (46)
- gui框架 (44)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)