首页 > 其他分享 >HTML Over the wire 的代表框架 hotwire 介绍

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

时间:2023-06-26 23:26:48浏览次数:36  
标签:Web wire 框架 Turbo Over 应用程序 HTML 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 片段作为响应发送给客户端,并指定要执行的操作(如插入、更新或删除元素)。客户端会自动执行这些操作,实现实时交互。

标签:Web,wire,框架,Turbo,Over,应用程序,HTML,Hotwire
From: https://www.cnblogs.com/sap-jerry/p/17507410.html

相关文章

  • 什么是 HTTP Over the wire
    我们可以通过在服务器上生成HTML,并将其(在一些帮助下)直接传递到浏览器,来编写快速、现代、响应式的Web应用程序。这种思路不需要将JSON作为中间格式。不需要客户端MVC框架。不需要复杂的捆绑和转译流程。但是我们需要换一种思考方式。因为过去十年左右的Web开发主流故事一直是Java......
  • JS HTML经典框架
    switch.html<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv=&qu......
  • HTML 图片不存在则显示一个默认图片
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-......
  • PHP htmlspecialchars() 函数
    htmlspecialchars()函数把预定义的字符转换为HTML实体。<?php$str="Thisissome<b>bold</b>text.";echohtmlspecialchars($str);?> htmlspecialchars()函数把预定义的字符转换为HTML实体。预定义的字符是:&(和号)成为&"(双引号)成为"'(单引号)成为'......
  • 记录--巧用 overflow-scroll 实现丝滑轮播图
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言:近期我在项目中就接到了一个完成轮播图组件的需求。最开始我也像大家一样,直接选择使用了知名的开源项目"Swiper",但是后来发现它在移动端项目中某些测试环境下会白屏一段时间。无论如何调试都不能修复这个问......
  • 基于Java+selenium+Chrome,实现截取html页面内容并保存为图片
    1、需求实现Java程序发送邮件,并将输入的多个页面转为pdf类型附件一同发送出去。而页面如何转为pdf呢?其中的一个方案就是先将html页面转为图片,再将图片合并为pdf。此文记录的是html=>png过程。2、开发主要依赖<!--html2image--><dependency><groupId>org.seleniumhq.se......
  • html去除页面的滑动条
    https://blog.csdn.net/WzhCsdnd/article/details/1294658271、在<body>里直接加入,可隐藏滚动条;例如:<bodyscroll="no">,隐藏滚动条;<bodyscroll="auto">宽度或高度大于页面的宽或高时,不显示滚动条,反之,则显示;<bodystyle="overflow-x:hidden">可隐藏水平滚动条;&l......
  • HTML5 WebUploader 分块上传
    ​ 设计由来在实际的项目开发中常遇到超大附件上传的情况,有时候客户会上传GB大小的文件,如果按照普通的MultipartFile方式来接收上传的文件,那么无疑会把服务器给干崩溃,更别说并发操作了。于是笔者决定要写一个超大附件上传的方法,于是有此。功能实现图​编辑  功能介......
  • Login.cshtml
    @{ViewData["Title"]="Login";Layout="~/Views/Shared/_Layout_default.cshtml";}@sectionCss{<style>body{/*加载背景图*/background-image:url(../../icon/aa.png);......
  • IPList.cshtml
    @{ViewData["Title"]="IPList";Layout="~/Views/Shared/_Layout_layui.cshtml";}@sectionCss{}<divclass="demoTablelayui-form"style="padding:10px;background-color:#D4E7F0;">......