龙空技术网

Lindy 的 Web 开发方法:htmx 和 Go

启辰8 127

前言:

此刻你们对“jqueryswap”都比较关注,看官们都需要剖析一些“jqueryswap”的相关知识。那么小编同时在网络上网罗了一些有关“jqueryswap””的相关内容,希望你们能喜欢,兄弟们一起来学习一下吧!

在快节奏的 Web 开发世界中,在最新框架的热潮中,最好的解决方案往往在于简单。 在最近的一篇文章中,我们谈到了使用 Go 和 htmx 进行动态 Web 内容的本地化。 在这篇文章中,我们将进一步探讨 htmx 和 Go 的结合、最佳实践和可维护性。 采用“Lindy”方法进行 Web 开发。 林迪效应是一个概念,它断言一个不易腐烂的想法或技术的未来预期寿命与其当前的年龄成正比; 它越老,它存在的时间可能就越长。

回顾一下,htmx 是一个轻量级的 Javascript 库,它允许我们直接从 HTML 访问现代浏览器功能,从而消除了对繁重的客户端框架,尤其是客户端状态的需求。 IE。 编写 Javascript(htmx 库)以避免编写 Javascript(在您的网站上)。 htmx 的总体理念与 Go 对简单性的关注非常吻合。 尽管如此,这种组合似乎是“现代”网络开发所构成的一种逆向立场。

htmx 哲学

htmx 的核心在于对精益代码和敏捷开发的信念。 专注于创建无状态客户端:

HTML 在线:htmx 通过在线发送 HTML 来实现动态用户界面,简化服务器端开发和维护,并最大限度地减少客户端状态。 htmx 遵循 HATEOAS 约束,通过利用 HTML,使用超媒体作为应用程序状态的引擎。

渐进增强:使用 htmx,您可以从基本的 HTML 页面开始,然后根据需要对其进行增强。 这种方法提高了可访问性和可用性,这也意味着如果 Javascript 由于任何原因失败,您的网站仍然可以工作。

简单性:htmx 相信尽可能降低复杂性。 没有构建过程,没有依赖关系,没有特殊的服务器端技术,并且需要学习的 API 面积也很小。

互操作性:htmx 旨在与您现有的 HTML 和服务器端代码配合使用。 它不需要您学习新的模板语言或更改服务器端架构。

恢复简单性

htmx 和 Go 有着共同的理念,都倾向于极简主义和组合而不是继承。 该原则有利于通过组合简单对象而不是使用分层继承结构来创建复杂对象。 组合允许对象通过合并实现所需功能的其他对象来实现复杂的行为,从而形成更灵活和可维护的代码结构。 htmx 简化了服务器端渲染,通过 AJAX 增强了 HTML,而 Go 则因其编写后端服务的品质而受到赞赏。 它们共同为网站与后端服务的交互提供了全新的视角,统一了连贯开发体验的原则。

使用 html

最基本的是,htmx 允许您只需向 HTML 添加一些属性即可发出 AJAX 请求。 例如,如果您有一个按钮,并且希望在单击该按钮时发出 AJAX 请求,您可以这样做:

<button hx-post="/clicked" hx-target="#message">Click me</button><div id="message"></div>

当您单击按钮时,htmx 会向 /clicked URL 发送 POST 请求。 当服务器使用一些 HTML 进行响应时,该 HTML 会被放置到 #message div 中。 htmx 提供了许多其他属性和选项,用于发出 AJAX 请求、处理事件、处理响应等。 这些功能使您能够使用最少的 JavaScript 构建复杂的动态界面。 添加等待填充内容的空 <div> 元素感觉像 jQuery 风格,但让人回想起 jQuery 和 PHP 时代开发的敏捷性。 可以说是一种更清洁的方法。 对于事件类型,服务器发送的事件可以简单地实现如下:

<div hx-sse="connect:/user/updates swap:userUpdate">    Updates will appear here.</div>

使用 Go 模板,我们从后端数据注入变量:

<a href="/"   hx-trigger="click"   hx-indicator="#spinner"   hx-get="/data/{{$sport.Key}}"   hx-target="#data-table">Fetch</a>
htmx Go 模板最佳实践

我们发现了在 Web 应用程序中使用 htmx 时的一些最佳实践:

服务器端状态管理:除了身份验证等必要的cookie之外,所有状态都应该在服务器端进行管理。

HATEOAS with HTML:使用 HTML(而不是 JSON)实现超媒体作为应用程序状态引擎 (HATEOAS)。 在根页面加载时,呈现页面上可以动态的所有元素并为它们提供服务,而无需额外的请求。 这可以通过渲染到 Go 缓冲区中来实现,并在需要时将它们与 template.HTML 一起注入到根模板中。 适当利用缓存。 这符合完全服务器端渲染 (SSR) 登陆页面并增强 SEO。 用户体验非常好,因为所有元素都很活泼,而且似乎没有任何内容异步加载。 一个附带的好处是,即使禁用了 Javascript,第一页加载也始终有效,因为 html 完全从服务器呈现。 更改元素时,它们会从各自的端点动态加载。 例如。 登录和注销状态的区域。

动态元素的 ID 可寻址性:所有动态元素都应具有唯一的 ID。 这使得它们可寻址,允许从各个 Go 端点和 hx-target 进行寻址。

动态元素的单独模板和端点:每个动态元素应该有一个相应的 Go 模板和端点。 这导致了模块化且可维护的代码。

使用 go:embed 进行发布,从磁盘加载进行开发:利用 Go 的嵌入功能进行生产,同时允许在开发过程中进行磁盘加载。 这确保了高效的性能和热重载。

跳过开发中的 API 步骤:明智地选择 ORM,最好是代码生成。 开发过程中直接从数据库过渡到HTML,省略API层。 这是执行中的乘数。 对于我们在访问服务数据时自然需要的 API,我们使用 Go ent。

为动态端点实施服务器端事件 (SSE):利用 SSE 处理动态数据。 根据数据的不同,动态部分直接是 SSE 元素,并且应该在加载时订阅自身。 Go 处理程序将在第一次调用时推送初始状态。 或者,第一个调用照常从 GET 请求呈现,然后 GET 请求提供订阅自身的模板。

项目结构

有组织的项目结构不仅仅是美观或偏好的问题; 这是直接影响开发过程的一个基本方面。 结构良好的项目可以促进团队成员之间的协作,增强可维护性,并加快新开发人员的入职速度。 我们遵循一种简单、可能常见的方法,我们内部称之为“golean”。 使用 Go ent 生成模型、文档和 API,布局类似如下。 我们将在以后的文章中讨论这一点。

我们将 Go Web 服务器和其他服务分离到不同的存储库中,以充分利用 Go 的模块系统进行依赖管理和版本控制。 我们的存储库将遵循典型的结构:

.├── cmd│   └── web                     // The main application for this project│       ├── handlers.go│       ├── l10n│       │   └── translations.json│       ├── main.go             // The entry point for the server application│       ├── session.go│       ├── static              // Directory for static files│       │   └── favicon.svg│       └── templates           // Directory for HTML/X template files│           ├── base.html│           ├── head.html│           ├── partials│           │   └── welcome.html│           └── root.html├── docs│   └── openapi.json            // OpenAPI spec generated by entoas via Go ent├── internal                    // Internal packages used by the server application│   └── ...├── go.mod├── go.sum└── ... // Optionally Dockerfile, drone.yml, dotenv etc.

这种分离确保了应用程序的不同部分之间的清晰区分,遵循许多 Go 最佳实践。 cmd 目录用于应用程序,它们是程序的入口点。 内部目录用于在此存储库内的多个程序之间共享的包,但不打算在此存储库之外使用。 Web 目录包含由 Web 服务器提供的静态文件和模板。

与服务交互

我们的 Go Web 服务器就位后,该服务可能会或可能不会附带数据库。 如果存在,我们希望从其他服务访问它。 htmx 方法自然会跳过构建前端使用的 RESTful JSON API。 然而,我们确实利用 Go ent 并首先编写我们的 Go 模型,使用 entoas 和 ogent 生成一个完全连接的 CRUD API。 我们之前在 Go 中基于模型的生成微服务的文章中谈到了这种注释驱动的方法。

然后我们安装代理 API 并使用中间件保护它,例如 /api 路由前缀,我们可以与我们的服务数据库进行交互,而无需额外的工作。 这允许在可能使用或操作 Web 服务数据的前端和后端服务之间清楚地分离关注点。

结论——林迪效应的作用

林迪效应以纽约市的林迪餐厅命名,百老汇演出的未来受欢迎程度与其当前的演出长度直接相关,其应用范围远远超出了单纯的演出。 它成为技术领域的一个令人心酸的观察,强调了经过验证的方法的可靠性和持久性。

通过 htmx 和 Go 的结合,这一理念得以体现,回归到 Web 开发的本质基础。 通过强调服务器端状态管理、在线 HTML 以及让人想起 jQuery 和 PHP 等早期 Web 技术的简单性,htmx 和 Go 不仅拥抱 Lindy 效应中蕴藏的智慧,而且在经典原则和当代技术之间取得了平衡。 这种新旧结合、经过测试和创新的结合,为现代 Web 应用程序提供了强大的解决方案,并设定了一个立足于历史但面向未来发展的方向,引导开发人员走向既创新又植根于经过时间考验的实践的未来。

标签: #jqueryswap