让我们一起看看如何通过不同的世代方法构建Web应用程序。在谈论Qwik之前,有一个历史记录,我们可以将其划分为几代人,每个一代都有一个改变一切的概念。
在这里开始之前是我们关于Qwik的first article。
第一代网络应用程序
正如Hevery(Angular和Qwik的创建者)所说的那样,第一代渲染是通过PHP等技术在服务器上完成的。服务器渲染是通过JavaScript(jQuery)在客户端上进行交互式的。这里的服务器的作用是每次调用模板。
服务器渲染一种包含HTML和JavaScript的文档。我们使用jQuery作为在模板中添加交互性的工具。
那么,这种方法有什么问题?
问题是我们必须处理两种语言,一种在服务器上(例如PHP),另一种在客户端,这无疑是JavaScript,这可能会在PHP中写入的元素及其行为之间引起混淆在JavaScript中,这导致多次编写功能。
这就是为什么这种方法难以扩展的原因。
第二代网络应用程序
这是第二代,著名的水疗中心(单页应用程序),如Angularjs,Angular,React或Vuejs之类的现代框架。
第一代具有MPA(多页应用程序)方法。现在,让我们回到水疗中心。
该概念永远不会重新加载页面,而仅拨打服务器以更新客户端的状态,但是在第一次启动时,我们将所有应用程序作为JavaScript代码加载。
这是Web开发历史上的革命性方法,但是该想法的历史始于Ajax,这使我们有可能在不重新加载页面的情况下更新数据。
之后,JQuery开始发挥作用,该方法引入了一种优化的方法来制作动态页面或为我们的页面赋予生命,以及其他框架(例如QuinteTJS和Backbonejs)也试图解决多个问题。
仍然,如果我们想谈论第一个水疗框架,那么到目前为止,它是最完整的,因为它包含依赖项注入,双向数据结合和模板。
所有这些都基于MVC(模型视图控制器)体系结构。惊喜是什么?
创建Qwik的Misko Hevery与创建了第一个Spa框架的Angularjs一样。
那么,水疗中心的问题是什么?这是第一个负载,它将从空白页开始花费很长时间才能加载,如果我们想从事大型应用程序,则不可扩展。
在第二代和第三代网络应用程序之间
在第三代之前,我们应该谈论第二代和半代及其SSR(服务器端渲染),该框架具有NextJS或Sveltekit之类的框架。
这些引入了一种不同但不是革命性的方法。在SSR中,我们仍然构建水疗应用程序,但具有不同的概念。
我们预渲染HTML,然后我们将其与JavaScript进行水合,因此,这里的结果只是减少查看空白页的时间。因此,直到我们将其与元素所需的JavaScript进行水合之前,这不是交互式。
例如,在加载JS的过程中,如果加载了按钮所需的JS,我们可以与它进行交互,但是表单所需的JS尚未加载,则表单仍然没有交互。
这是另一个试图减少此过程中消耗的时间的框架,它是Astro框架。
Astro具有一个称为部分水合的概念,因此它不会用JS进行水分,直到可见为止。
例如,如果我们在页面底部有联系表格,并且在其中,则无见触点表格,这样我们就不需要加载JavaScript表格需要。
仅当我们向下滚动到具有接触表格的部分时,这是水合以与所需的JavaScript进行水合的水合的时候。
第三代Web应用程序作为新时代
革命已经在Misko Hevery创造的第一次革命之后开始。这是他创建的第二个,QWIK Framework引入了简历。
现在,我们对水合和部分水合有着深入的了解,但是可重复性的方法是停止/简历,恢复了服务器以代替重播所有工作的服务器的应用程序。
如果您的底部有联系表格,我们也不会致电他的JavaScript,即使您向下滚动,我们只有在单击“发送”按钮时才称呼它。为了进一步了解这一点,让我们深入研究一些技术方面。
这里的秘密是关于入口点。与其他框架不同,Qwik使我们能够停止并恢复到处的应用程序,并且因为它不限于像现代框架这样的一个入口点。
入口点为我们提供了下载我们要执行的给定交互所需的代码,而在第二代中,我们可以单击一个按钮,直到加载所有应用程序,这就是s与可重复性提供的相反。
我们仅在单击按钮时加载交互所需的JavaScript。这里的挑战是我们如何做。
问题很快回答:听众!
Qwik有一个全局侦听器,可确保每次发生事件时,都会搜索所需的特定侦听器并将其附加到DOM上以调用所需的入口点。
例如,它使用附加到点击事件的序列化信息来做到这一点。
结论
在本文中,我们介绍了渲染的演变以及它如何影响Web应用程序的性能与当今的影响。
现在,新一代就在这里,而Qwik是以最好的方式代表它的人之一。其他现代框架没有相同的方法,因为差异是基本的。这就是拥有(n)入口点,以便我们可以提供重新性和懒惰加载。