当今软件开发中最具活力的领域之一是前端架构。一些创新者正在推动最先进的技术来设计更强大的方法来构建动态用户界面。大部分工作正在以极快的速度和公开进行。得益于许多开源JavaScript项目，例如SvelteKit、Solid、React、Qwik和Astro，企业处于网络未来的最前沿。以下是了解该操作的指南。什么是补水？许多改进现代前端架构的活动都集中在水合作用上。为了理解水合是什么，以及为什么它是现代前端架构的核心，需要了解一些概念。为了实现反应性的奇迹，每个框架都必须处理下图所示的三个方面。图中的基本信息是框架负责构建视图、维护状态和管理它们之间的交互（如果您熟悉MVC模式，您会得到回应）。一旦这三个部分就位，就该开始了。用户可以查看页面并与之交互。默认方法是简单地获取客户端需要的所有内容——框架、响应代码和状态——并将其发送过来。客户端（浏览器）然后执行显示框架（即绘制UI）、解释JavaScript和绑定状态的工作。这种方法的好处是简单，无论是对于工作代码还是对于试图理解它的人来说都是如此。它也有一个很大的缺点：初始页面渲染必须等待一切，用户必须忍受所有的网络和浏览器波动。这里要小心，否则页面会重新排列到最终的布局中，页面会不好看。这促使开发人员尝试先在服务器上渲染初始页面（服务器端渲染，SSR）并发送过来。然后用户可以查看适当的页面，同时发送和导航其余代码和状态。这是一个很好的简化，但这是基本思想。获得基本布局所需的时间称为首次内容绘制(FCP)。页面需要达到的下一个里程碑是通过交互时间(TTI)来衡量的，这意味着用户能够实际使用该页面的时间量。获取初始页面并使其具有交互性的过程-这就是水合作用。服务器端渲染的局限性归根结底，服务器端渲染(SSR)往往会改善首次内容绘制(FCP)，但会缩短交互时间(TTI)。因此，我们的目标是在两者之间取得平衡，将两者最大化，同时希望保持愉快的开发人员体验(DX)。在这项工作中，已经提出、采用、放弃、修改和组合了多种方法来改善水合作用。一旦您了解了实施细节，您就会惊讶于它会变得多么复杂。FirstContentPaint(FCP)和TimeToTearInteraction(TTI)之间的平衡是什么？这听起来很容易，但事实并非如此。这种复杂性的一个原因是正在对所有权衡进行排序。这是一个展开的场景。然而，一旦前进的方向明确，出现的客户端架构应该会产生两个结果：首先，它应该创建感觉“下一代”的Web应用程序，就像今天构建良好的应用程序提供更多好的一样经验也是如此。其次，也许更重要的是，改进的客户端架构应该具有深远的影响，而不仅仅是更好的性能。通过深入挖掘和解决复杂性，前端工程师将找到更好的系统和思维模型。更好的架构实际上代表了更强大的启发式方法。这具有通常无法预测的后续好处。人们可以通过反应性本身看到这一点。反应性的出现是因为它提供了一种将状态绑定从开发人员的大脑转移到框架的方法。但好处不止于此。模式不仅更简单，而且更一致。这导致性能和功能的整体提升。因为现代JavaScript框架同时包含服务器和客户端，所以这些开发的结果可能对通用应用程序架构产生广泛的影响。改善水合作用的方法改善水合作用的基本技巧是仔细观察事物。通过将视图、交互性和状态分解成更小的部分，它们可以逐步加载和激活，并针对FCP和TTI进行优化。以下是一些方法的介绍。完全避免JavaScript的最佳实践中采用的一种方法是分析站点中根本不需要JavaScript的页面。这与多页应用程序(MPA)的新概念有关。它是单页应用程序(SPA)和逐页导航（默认Web行为）之间的中间地带。这里的想法是找到可以立即发布为HTML和资产的应用程序部分，从而获得最佳的搜索引擎优化(SEO)和加载时间。比如no-JS的方法可以在SvelteKit中看到。当然，这对需要反应式交互的页面没有任何作用。框架仍然必须考虑充当单页应用程序(SPA)的页面上的水合作用。IslandArchitectureAstro提倡岛屿建筑的概念。它的目的是确定页面的哪些部分是静态的，哪些部分需要是反应性的。有了这些知识，就可以通过忽略永不更改的框架内容来微调页面的加载，然后仅根据需要加载其他模式。理解这个想法很有用，但重要的是要注意它的目标是改进单页应用程序(SPA)。也就是说，所有识别出的静态内容都可以放在那里并在不影响性能的情况下完成工作。将维护所有客户端状态和导航。从好的方面来说，这种方法允许延迟加载每个岛，直到发生需要它的事情（例如，单击鼠标以滚动到视图中）。不利的一面是，在实践中，它通常会导致负载发生在特别不合时宜的时刻（比如用户正在做某事）。延迟加载边界JavaScript库React的Suspense组件等功能提供了一种方法来保持基本的混合模型，但沿边界分解它然后延迟加载它。这样做的好处是保留了很多熟悉的过程，但缺点是需要开发人员进行大量思考和调整才能获得良好的结果。此外，延迟加载的作用有限，因为大多数框架仍然需要提前交付。RecoverabilityRecoverability是Qwik框架引入的一个概念。Qwik深入挖掘应用程序的元素并在它们之间创建延迟边界（在某种程度上，这可以被认为是延迟加载边界的一种非常复杂的形式）。可恢复性意味着客户端可以从服务器停止的地方继续，并以细粒度的方式保持同步。服务器组件React正在引入服务器组件的概念和相关的性能改进，称为流。以下是服务器组件如何工作的描述。从本质上讲，服务器组件允许用户识别应用程序的哪些部分可以完全在服务器上运行，从而避免任何客户端渲染惩罚。StreamingStreaming是与Suspense相关的另一项不断发展的React技术。这里的想法是允许在服务器上准备好所有必需的数据之前将框架内容（如HTML）发送到客户端。当发生组件交互时，可以应用此方法。术语部分水化或渐进水化使事情有点混乱。Astro将其岛屿结构描述为部分水合作用。简而言之，一次只有页面的某些元素被水合。这有时也称为渐进式水合作用。这两个术语有时也适用于其他技术。在这里，有三个相互作用的术语：孤岛、部分、增量。不管怎样，主要思想是一样的：应用程序的结构需要分解成更小的块，以使其加载更智能。分区水合的作用假设岛式建筑是指静态框架内的Astro式独立交互块。可以说，打破用户界面(UI)的整个想法是部分水化，Astro岛就是一个例子。但是要冒险，因为AstroIsland已经在那里了。此外，部分水合似乎表示不完全水合状态，这是一种误导。ProgressiveHydration可能会与ProgressiveWebApps(PWA)混淆。也许区域水合作用是表达这一总体思想的一个很好的术语。前端架构的演变围绕JavaScript前端架构的活动创造了一些最有趣的编码工作。这是一个充满激情的空间，他们在这里探索新的概念领域并进行开创性的编程。他们以开放和协作的方式互动和分享他们的想法。其中包括RyanCarniato(Solid)和MiskoHevery(Qwik)。两者都在使用最先进的技术随时向世界其他地区发布代码和信息。原标题：ReactiveJavaScript：前端架构的演进，作者：MatthewTyson
