现代网络发展和改进的观点
#html #网络开发人员 #休息 #webassembly

关键要点

  • www建立在休息原则的顶部。
  • 现代网络开发违反了休息原则。
  • 纯HTML不适合现代网络开发。
  • 可以通过声明性提取请求，dom块替换和按需加载代码来改进HTML。

网站开发在万维网（www）存在的23年中看到了多种方法。在本文中，我回顾了www，当前状态和现代网络开发问题的原则。最终，我将提出多个建议，以大大改善Web开发。

资源表示

标准化万维网

在1988年，世界上发生了一个了不起的事件。工程师通过互联网协议（IP）将欧洲网络与北美大陆联系起来。互联网立即在独立的互连网络中获得了增长，主要是在科学机构之间。

CERN的英国科学家Tim Berners-Lee对通信标准化的需求很高，并于1989年发明了万维网（www）。这项工作包括HTML作为标记语言的标准，以提供信息，发送和接收数据的HTTP协议以及与服务器通信并处理标记语言的Web客户端。

罗伊·托马斯·菲尔丁（Roy Thomas Fielding）正在研究HTTP协议的改进，并在2000年在他著名的论文Architectural Styles and the Design of Network-based Software Architectures中收集了www和http的想法。第5章包含“代表性转移名称”下的基本原理，或简称为休息，其中包括以下几点：

  • 是客户端服务器架构 Web客户端（浏览器，机器人）与服务器通信。
  • 沟通必须是无国籍的本质上。客户的每个请求都应包含所有必需的信息来处理请求。此约束允许构建可靠和可扩展的系统。
  • 为提高网络效率，任何请求均可缓存。
  • 组件应具有均匀界面。例如，即使在某些情况下为特定表示方案使用其他转移协议可能更快地工作。
  • 该系统应与分层体系结构一起使用。一层可以是代理。
  • 按需代码。 REST允许通过以Applet或脚本的形式下载和执行代码来扩展客户端功能。但是，它也降低了可见性，因此仅是REST内的可选约束。
  • a 资源位于URI中，通过标准媒体类型表示 。 Web客户端只知道如何处理媒体类型。例如，要使浏览器显示PNG媒体类型，则无需使用JavaScript代码。要显示PDF文件，浏览器不需要运行一些特殊的JavaScript代码。处理和显示HTML媒体类型也是如此。

用JavaScript，Java applet，Flash ActionScript或Wasm的指示器可选。这是Web客户端的关键事实。

机器人应该可以理解资源的最终表示形式。 AI代理应该能够找到信息并在没有人类互动的情况下编辑资源和prior knowledge except how to process standard media types。

。

现代休息违规

违反可选的按需原则

今天，在大多数情况下，在网站中可选的代码执行的想法是违反的。
W3C引入了Web Components以扩展HTML标签，但使其完全可以对JavaScript。使用JavaScript构建的所有现代客户端库，例如React.js，Angular，Vue.js。 Sun Microsystems基于JVM引入了Java小程序。 Adobe用浏览器扩展提供了Macromedia闪光灯。 Microsft使使用Silverlight扩展程序在浏览器中运行减少的.NET应用程序成为可能，并最近引入了Blazor，该应用程序将C＃代码编译到WebAssembly并在客户端执行。

提到的框架不允许在没有浏览器中执行代码的情况下进行页面交互。例外是Svelter.Kit，它试图使网页交互式even with disabled JavaScript11。

违反资源表示原则

现代网站追求移动应用程序开发风格。 Web客户端将页面作为移动屏幕下载，然后向服务器进行远程过程调用（RCP），通常以JSON API端点提供。该应用程序知道如何通过调用特定方法来修改资源以及应发送和返回的JSON结构。这意味着屏幕与后端的艰难耦合。

相比之下，通过其余方法，浏览器显示了资源的新表示，包括动态检索编辑的动作。例如，HTML版本<form action="/post-api"><input name="lastname"><button type="submit">Submit<button><form>是一个页面表示，其本身包含操作所需的结构。 Web客户端也不知道响应是什么以及以哪种格式。服务器将决定后续表示形式，可能将Web客户端重定向到新页面。

违反原因

开发人员脱离了具有简单要求的可选代码按需原理 - 用户希望看到丰富的接口。纯HTML不允许构建应用程序，例如Google Mail，Google表或Google文档，更不用说3D Web应用程序的代码必要性了。即使将某些HTML扩展名添加到HTML v.6中，开发人员也需要将自定义客户端验证行为添加到每个国家/地区的电话输入格式（Mask）：

custom dropdown

开发人员违反了资源表示原则，因为在远程过程中更容易思考调用范式。另外，将网页耦合到JSON API在实践中听起来不那么糟糕。现代浏览器经常用不活动的标签刷新页面。
确切地说，JavaScript或Ecmascrpit的问题是它的速度。这是一个文本代码，应由浏览器解析和解释。在下一节中，我将展示如何为用户和开发人员完成Web开发。

万维网的美好未来

高级HTML请求的最佳性能

Web客户端可以实现的最佳速度是传输小数据而不是完全按需执行代码。

可以在未来的HTML版本中实施Hypermedia Systems和HTMX的下一个建议：

  • 除了当前的GET和POST方法外，还要在HTML操作中声明PUT，PATCH，DELETE。示例：

    <form action="/contacts/1" method="DELETE">Delete</form>

  • 除了<a>和<form>标签外，还允许任何交互元素触发操作。示例：

    <div action="/contacts" type="GET" trigger="mouseenter">
  Get The Contacts
</div>

  • 允许用声明请求的结果替换部分屏幕或单个元素。这将允许创建具有HTML响应的真实REST API，如REST API中所述所描述的，必须是超文本驱动的。示例：

    <button hx-get="/contacts" action-target="#main">Get The Contacts</button>
<div id="main">
  <p>This content will be replaced with the requested HTML result<p>
<div>

  • 允许声明的轮询和Web插座通信。示例：

    <div action="/messages" type="GET" trigger="every 3s"></div>

  • 通过遵循行为原理的局部性，允许将代码封装到相关组件附近。示例：

     <button>
    <script type="text/javascript">
      <!-- This code is relative only to the nearest button tag -->
    <script>
    <script type="wasm">
    <!-- Similar with binary WASM -->
    <script>
<button>

可选的HTML请求更好的性能

Astro项目使仅当组件在屏幕上可见或滚动时只有在组件上下载JavaScript代码。此功能可以包含在未来版本的HTML中。示例：

<input id="my_input" type="text" placeholder="Name">
  <script type="text/javascript" 
  href="/input-behavior.js" 
  download="when-visible" 
  target="#my_input"></script>
<input>

声明性HTML元素状态

在DIV，SPAN和按钮元素中宣布与输入类似的div，跨度和按钮元素将有所帮助。状态管理通常用于阻止可见性。示例：

//HTML
<div id="popup" value="visible"></div>
<button 
  target="#popup" 
  actionType="valueChange" 
  actionValue="hidden">
  Toggle popup
</button>

//CSS
div[value="hidden"] {
  display: none;
}

尽管现代浏览器即使没有Popopover和Dialog的JavaScript即使现代浏览器也将很快支持声明性的弹出式和对话，但简单的声明状态管理将允许提供更多的自定义行为。

可扩展的天然控制

现代网站使用自定义的UI元素用于复选框，无线电按钮，输入元素，警报和下拉列表。几乎所有这些都是由一些CS和JavaScript技巧制成的，例如，在Bootstrap，Chakra UI，Material UI，Ant Design中。在没有特殊还原自定义的情况下为此类组件加载CSS和JavaScript通常需要数百个KB的大小，再加上解析和执行JavaScript代码的时间。

custom select list

更好的方法是允许自定义本机浏览器组件。 Open UI引入了SelectList，该SelectList已包含在Chrome中。无JavaScript的选择定制代码看起来像：

<selectlist>
  <button id=custombutton type=selectlist>
    <selectedvalue></selectedvalue>
  </button>
  <option>one</option>
  <option>two</option>
</selectlist>
<style>
selectlist:open #custombutton {
  background-color: green;
}
selectlist:closed #custombutton {
  background-color: red;
}
</style>

webassebmly与富裕的运行时

WWW历史记录表明，公司不能就网络的一种专有语言达成共识。 Sun Microsystems发出了lawsuit against Microsoft in 1997，抱怨JVM在Internet Explorer中未正确实施。 Adobe通过ActionScript追求Flash Project，直到Apple在2008年，由于纯粹的性能，not to include Flash in the iPhone Safari browser决定了not to include Flash in the iPhone Safari browser。 Microsoft在浏览器中使用了其Activex扩展程序，这些浏览器将组件对象模型（COM）与C ++和Visual Basic编程一起使用。 Microsft Silverlight浏览器扩展程序允许使用降低的.NET运行时运行代码。 Google尝试到rescue browsers from JavaScript with Dart language。

浏览器供应商达成了成功的协议，为万维网联盟（W3C）做出了贡献。

最近的贡献是WebAssembly（WASM），二进制堆栈机supported in modern browsers。它本地的速度比JavaScript代码少。当前的WASM州有一些缺点。

首先是大小。编写服务器端和客户端程序的是possible with Rust，由此产生的WASM软件包将足够小。同时，Microsoft Blazor将C＃代码转换为WASM，但客户交付必须包括减少的.NET运行时，将several megabytes用于脚本。 Golang也是如此，即使试图减少TinyGo WASM的运行时交付。开发人员希望使用他们喜欢的语言，无论是Java，Kotlin，Dart，C＃，F＃，Swift，Ruby，Python，C，C，C ++，Golang还是Rust。这些语言会产生一组运行时。例如，JVM和.NET有许多共同的部分，Ruby和Python在运行时进行了动态解释，所有提到的都取决于自动垃圾收集。对于较小的WASM软件包，浏览器供应商可以包括扩展的运行时实现，例如，通过作为WASM的一部分提供一般垃圾收集器。 WASM的垃圾收集支持目前正在进行中：WASM GC，.NET WASM Notes。

第二，WASM仍然通过JavaScript Interop在浏览器中操纵DOM。无JavaScript代理本身更新DOM树将更快，并且需要更少的CPU资源。

结论

Web开发除了其余原则之外，还为丰富的UI接口提供了交互性。带有声明性风格的新的HTML版本可用于提取请求。新的WebAssebly Runtimes可以允许开发人员使用喜欢的语言对客户端和后端侧面代码进行编程。