HTML Over the wire 的代表框架 hotwire 介绍

发布时间 2023-06-26 23:14:03作者: JerryWang_汪子熙

HTML over-the-wire作为一种更直接的创建Web应用程序的方式而不需要使用太多JavaScript,已经逐渐流行起来。它通过“html over the wire”的思路,发送HTML而不是JSON来实现。

现在,一种名为Unpoly的“非侵入式JavaScript框架”出现,成为Basecamp的HTML over-the-wire框架Hotwire的竞争对手。Unpoly承诺为服务器呈现的HTML视图提供“快速和灵活的前端”。Unpoly的创建者Henning Koch在接受The New Stack的采访时,谈到了为什么像Unpoly这样的框架正在受到关注。

他说:“代码始终是一种负债,探索写更少代码的方法总是值得的。根据我们的经验,相比单页应用程序,Unpoly让我们能够用更少的代码构建应用程序,同时保留了前端的速度和灵活性。这对我们来说是一个更好的平衡点。”

Hotwire 是一种现代化的 Web 开发框架,它采用了一种名为 "HTML Over the Wire" 的方法来构建高效、实时交互的 Web 应用程序。Hotwire 框架由 Ruby on Rails 的创建者 David Heinemeier Hansson (DHH) 和 Basecamp 团队开发,旨在简化 Web 开发过程,减少对 JavaScript 的依赖,并提高 Web 应用程序的性能。

要了解 Hotwire,我们需要深入了解其核心组件和背后的设计理念。本文将详细介绍 Hotwire 框架的组成、如何使用、以及它是如何改变 Web 开发领域的。

什么是 "HTML Over the Wire"?

"HTML Over the Wire" 是一种 Web 开发方法,它强调直接将 HTML 片段作为响应发送给客户端,而不是依赖大量的 JavaScript 代码和 API 调用。这种方法的优势在于减少了前后端之间的复杂性,提高了 Web 应用程序的性能,同时又保持了实时交互的能力。

在 Hotwire 框架中,服务器负责生成 HTML 片段,并在需要时将其推送到客户端。这意味着客户端可以在不执行大量 JavaScript 代码的情况下实现实时交互。这种方法提高了 Web 应用程序的加载速度,降低了客户端的资源消耗,并简化了开发过程。

Hotwire 框架的核心组件

Hotwire 框架由以下三个核心组件组成:

1. Turbo

Turbo 是 Hotwire 框架的主要组件,负责提高 Web 应用程序的性能。Turbo 通过以下几个方面实现性能优化:

  • Turbo Drive:Turbo Drive 通过拦截页面中的链接点击和表单提交,使得页面的导航和更新变得更快。它只更新页面的主体内容(body),而保留 JavaScript 的运行环境。这种方法减少了页面刷新的次数,提高了加载速度。

  • Turbo Frames:Turbo Frames 允许您将页面划分为独立的、可异步加载和更新的区域。当某个区域需要更新时,服务器可以将更新后的 HTML 片段发送到客户端,而无需刷新整个页面。这种方法提高了页面的响应速度,同时减少了服务器的负载。

  • Turbo Streams:Turbo Streams 是一种实时更新 Web 应用程序的机制,它采用了 "HTML Over the Wire" 的方法。服务器可以将 HTML 片段作为响应发送给客户端,并指定要执行的操作(如插入、更新或删除元素)。客户端会自动执行这些操作,实现实时交互。