乐趣区

关于前端:HTML-Over-the-wire-的代表框架-hotwire-介绍

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 片段作为响应发送给客户端,并指定要执行的操作(如插入、更新或删除元素)。客户端会主动执行这些操作,实现实时交互。
退出移动版