DEV Community
·
我使用HTMX构建了TodoMVC应用，并乐于分享我的经历
💡
原文英文，约3000词，阅读约需11分钟。
📝
内容提要
本文分享了使用HTMX构建TodoMVC应用的经验，涵盖架构设计、技巧及优缺点。HTMX简化了Web开发，强调服务器渲染和AJAX。通过TodoMVC项目，作者深入探讨了HTMX的优势，最终实现了一个完整的TodoMVC应用。
🎯
关键要点
- 本文分享了使用HTMX构建TodoMVC应用的经验，涵盖架构设计、技巧及优缺点。
- HTMX简化了Web开发，强调服务器渲染和AJAX。
- TodoMVC项目是一个基准应用，旨在评估不同JavaScript框架的性能。
- HTMX是一个小型JS项目，旨在简化Web应用的构建，依赖于服务器渲染的标记和AJAX。
- 作者采用了'回归原点'的方法，探索如何改善开发体验。
- HTMX应用架构与传统的客户端重型JavaScript框架不同，主要工作在服务器端完成。
- 使用C4模型可视化服务器架构，包括路由、API、模板引擎和控制器。
- 技术栈包括NodeJS、Fastify、EJS和HTMX。
- 页面分为多个模板，每个模板负责不同的功能，如加载CSS、显示待办事项列表等。
- HTMX允许通过AJAX调用替换文档的某些部分，而无需刷新整个页面。
- 首次访问应用时，GET请求不会被提升，获取整个文档的标记。
- 过滤待办事项时，服务器只返回相关的待办事项部分的标记。
- 编辑单个待办事项时，使用PATCH请求更新并返回相应的标记。
- 添加新待办事项时，使用HTMX事件触发更新，而不是返回标记。
- 客户端逻辑中可以使用原生JS和HTMX语法，保持合理的范围。
- 请求整个待办事项标记的频率较高，可能需要优化。
- 离线时，应用无法正常渲染，需考虑缓存技术或服务工作者。
- 作者对HTMX的潜力和局限性进行了反思，认为其简化了Web应用的复杂性。
➡️
