Web如何演变：单页应用程序的兴起

# Web 开发

当我们谈论网络时，我们经常听到诸如客户端、服务器、HTML、请求、响应、数据（信息）等术语。

在我们开始旅程之前，让我们先在网络环境中了解一下这些术语的含义：

  • 数据：信息。
  • 请求：询问一些信息或数据。
  • 回应：提供所请求的信息或数据。
  • 客户端：浏览器是客户端。它请求数据，接收数据，并将内容显示给我们。
  • 服务器：在机器上运行的程序，用于监听请求、处理请求并提供响应（信息或数据）。
  • 互联网：一个由互相连接的机器组成的网络，其中许多机器运行服务器或数据库等。
  • HTML：一种浏览器可以理解的语言，允许浏览器以视觉上吸引人的方式显示信息。
  • 路由：方向提供程序；它会检查请求的路径。如果该路径存在，它会将您发送到该路径；否则，它会返回错误。
    • 让我们开始吧...

    对事物运作方式的过于简单的看法：

    当我们尝试在浏览器中打开一个网站（URL）时，浏览器会向服务器发送请求，服务器会返回响应。

    然后，浏览器处理该响应并向我们呈现一个视觉上吸引人的网页，让我们阅读我们正在寻找的信息。

    Image of how client HTML is received by client and how it is displayed to us.

    互联网的早期

    当网站开始出现时，服务器常常返回用 HTML 包装的全部数据。

    客户端（浏览器）接收该数据并显示它。

    为了更好地理解，我们将在本文中使用电子商务网站（例如 amazon.com）的示例。

    A diagrammatic depiction of how client server worked in early internet days
  • 客户端请求 amazon.com。我们先假设请求到达了正确的服务器，无需深究技术细节。
  • 然后，服务器将 amazon.com 的整个主页/登录页面连同数据（存储在服务器上）一起发回。
  • 当我们导航到产品部分时，客户端会发送另一个针对产品页面资源的请求。
  • 服务器再次发送包裹在 HTML 中的整个数据。
  • 对于其他后续请求，此过程将重复。

    • 我们可以开始看到问题：大量的重复，违反了 DRY 原则（不要重复自己）。

    此外，每个数据请求都会产生一个新的 HTML 页面，从而导致速度变慢、整页重新加载，并增加路由复杂性。

    模板来了🚕

    为了克服效率低下的问题，引入了模板库。

  • 它们允许开发人员通过构建可重复使用的页面框架（称为模板）来创建动态页面。
  • 开发人员不再维护整个硬编码的 HTML 页面，而是开始尽可能创建可重复使用的模板。
  • 根据请求，数据将被插入到模板中，并且生成的 HTML 页面将被发送到客户端。

    • 这种方法大大减少了代码重复。

    例如——EJS（嵌入式 Javascript）、Mustache 等

    
    
    Product List
    
    
      
      <% products.forEach(function(product) { %>
        
    • 
          
      <%= product.name %>
      
          
      <%= product.price %>
      
        
      • 
      <% }); %>

    互联网与数据库相遇🫱🏻‍🫲🏽

    与此同时，数据存储方面也取得了进步，并引入了数据库。

    现在，服务器不再需要维护数据，并且可以动态地获取数据。

    A diagrammatic depiction of how client server worked post introduction of database.

    从数据库获取数据：

    // Set up EJS as the template engine
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  const db = new sqlite3.Database('./products.db');

  db.all('SELECT * FROM products', (err, rows) => {
    if (err) {
      console.error(err);
      res.status(500).send('Error fetching products');
      return;
    }

    // Render the EJS template with the fetched products
    res.render('index', { products: rows });
  });

  db.close();
});

    然后服务器获取数据并将其插入模板并发送给客户端。

    在示例中，我们从数据库中获取产品，循环遍历它们，并动态生成 HTML，而不是硬编码产品详细信息。

    当 AJAX 被引入时，下一个重大进步出现了。

    AJAX，帮我拿杯子🍸

    想象一下在电子商务网站上购物，每次您单击“添加到购物车”时，整个页面都会重新加载，重置您的滚动位置并打断您的体验。

    很令人沮丧，对吧？

    进入 AJAX—更流畅、更快速的网络体验的超级英雄！

    什么是 AJAX？🤔

    AJAX 代表**异步 JavaScript 和 XML**。

    它本身并不是一项技术，而是巧妙地利用现有的网络技术共同实现革命性的事情：**异步通信**。

    异步什么？简单来说，AJAX 允许网页无需刷新页面即可从服务器发送或接收数据。

    这为现代交互式网络应用程序铺平了道路。

    AJAX 如何工作？🛠️

  • 与页面交互：假设我们点击“加载更多”按钮来查看其他产品。
  • AJAX 向服务器发送请求：在后台，JavaScript 发送请求（无需重新加载页面）以获取更多数据。
  • 服务器处理请求：它从数据库收集所需的数据并以轻量级格式（例如 JSON 或 XML）将其发送回来。
  • AJAX 更新页面：JavaScript 处理数据并动态更新网页，无缝添加新产品。

    • AJAX 的超能力

    部分页面更新

    现在我们可以动态更新页面的特定部分，而不必重新加载整个页面。

    速度与效率

    由于只发送和接收所需的数据（而不是完整的 HTML 页面），因此响应更快，用户体验更好。

    减少服务器负载

    通过处理较小、特定的请求，AJAX 减轻了服务器的负担。服务器不再重复提供整个页面，而是只提供必要的数据。

    这导致了现代 Web 应用程序商店（即 SPA（单页应用程序））的创立

    单页应用程序

    性能下降、重复工作和增加带宽使用量，为了解决这些问题，SPA 采取了不同的方法。

    SPA 加载单个 HTML 页面并使用 JavaScript 动态更新内容。

    这意味着只从服务器获取必要的数据，并且页面不需要重新加载。

    SPA 如何发挥作用？

  • 初始加载：浏览器加载单个 HTML 文件、CSS 和 JavaScript 包。这就像为应用程序奠定基础。
  • 用户交互：当我们点击链接或按钮时，应用程序不会重新加载页面。相反，JavaScript 会拦截该操作，通过 AJAX 从服务器获取所需数据，并动态更新 DOM。
  • 动态更新：仅更新页面的相关部分，节省时间和资源。
  • 路由（客户端）：SPA 使用客户端路由来模拟导航。应用无需重新加载页面即可更改 URL 和内容，给人一种浏览多个页面的感觉。

    • 让我们通过一个示例来了解客户端路由：

    想象一下你有一个相框，里面有照片

    现在，每次您想要一张新照片时，您不必去市场买一个新相框并将照片放在里面。

    您只需在同一帧中交换照片即可。

    这节省了时间和资源，而且速度更快。

    在 React 中，我们的整个页面在 ` ` 标签定义为根。 我们使用 JSX 创建组件，让它们随时可用，并在需要时添加数据。然后，这些组件将与页面上的现有内容进行交换。听起来很熟悉？是的，这就是模板 — 只不过是在客户端而不是服务器端。 因此，从技术上讲，我们始终使用相同的“框架”，而内容则不断变化。 好吧，朋友们，我希望这能让你们了解这一切是如何演变的。