web应用101

前言

• 最近阅读了一篇关于web应用的文章。让我关注到一些之前忽略的点，解开了一些疑惑的问题。感觉对web应用有了全新的认识，帮助我构建web应用的基础框架。以下内容是翻译+自己的一些理解。原文链接（英文）：www.robinwieruch.de/web-applica…
• "101”常常用来指代某个领域的“入门级别”。这个用法来自于美国大学中对课程编号的命名方式，其中以“101”结尾的编号通常代表该课程为某个领域的入门课程。

web服务器与应用服务器的区别

• Web服务器（Web Server）提供可以通过HTTP传输的格式资源(如HTML、CSS和JavaScript)。当客户端向web服务器请求资源时，web服务器通过将资源发送回客户端来完成请求。通常，这些资源只是服务器上的文件。如果HTML被发送到客户机，那么客户机(在本例中是浏览器)将解释HTML以呈现它。

• 应用服务器（Application Server）提供HTML、CSS和JavaScript之外的资源。例如，如果客户端以数据友好格式请求数据，则可以发送JSON。此外，应用服务器没有绑定到协议。虽然web服务器主要使用HTTP协议，但应用服务器可以使用其他协议(例如用于实时通信的WebSockets)。最重要的事实是，应用服务器可以在其服务器端使用特定编程语言实现细节(例如JavaScript与Node.js、PHP、Java、Ruby、c#、Go、Rust和Python)。

• Web 服务器： 处理 HTTP 请求和发送静态文件。

• 应用服务器： 处理动态请求，执行代码，生成动态内容。

• 例子：

  • Web服务器：Apache、Nginx。
  • 应用服务器：Tomcat、Node.js、uWSGI、Gunicorn。

• web服务器和应用服务器都可以被归类为服务器。因此，您经常会听到人们谈论服务器时，他们指的是这两者之一。然而，人们经常说服务器是指物理计算机，它运行在远程某个地方，web服务器或应用程序服务器正在运行运行在这个物理计算机上。

• 部署和托管

  • 部署描述了在服务器上运行网站的行为
  • 托管描述了从该服务器为网站提供持续服务的行为

从网站到WEB应用

• 静态内容变成动态内容，从只能读内容到可以创建、编辑、删除内容。
• 新增服务端路由，如创建博客后，重定向到另一个页面
• 服务端新增数据库用于存储动态的数据
• 服务端需要渲染包含动态数据的HTML返回给客户端，而这个工作由模版引擎完成，不同的语言由不同的模版引擎（(e.g. Pug for JavaScript on Node.js, Twig for PHP, JSP for Java, Jinja2 for Python) ）。

从多页面应用到单页面应用

• 单页面应用：single-page application (SPA)
• 网站构成的变化：早期的网站都是由HTML加CSS和少量的JavaScript构成，JavaScript只用于实现动画和DOM操作（如移动、新增、删除HTML元素），JQuery是最受欢迎的库用于处理这类任务；对于单页面应用，是由小的HTML文件加CSS和大量的JavaScript构成，整个应用都是由JavaScript生成的，主流的单页面框架/库有Angular.js; React.js and Vue.js
• 对于多页面应用，每次当用户从一个页面转移到另一个页面（如从页面/home到页面/about) ，客户端都会向服务端请求相关的HTML、CSS、JS等文件。对于单页面应用，则用JS封装了整个应用，只需在进入网站时请求一次HTML、CSS、JS文件，后面页面的跳转都无需再请求HTML等文件。
• 动态HTML的渲染方式发生改变，由后端模版引擎变成前端模版引擎完成：多页面应用是由服务端从数据库中获取动态数据并完成HTML渲染然后返回给客户端；单页面应用是由客户端通过api接口向服务端获取动态数据，然后在客户端完成HTML渲染。
• 页面路由方式发生变化：多页面应用是由服务端定义页面路由；对于单页面应用，页面的跳转不会请求HTML，所以变成由客户端定义路由。

用户体验的优化

• 单页面的实现机制提高了页面切换的加载速度的同时，但也导致首次进入某网站的加载时间变长，导致用户体验较差。为了解决这个问题，前端引入新技术：code splitting（代码分隔）也称为lazy loading（懒加载），基本思路是按需加载JS，即在用户进入A页面时只加载A页面的JS文件，切换到B页面后再加载B页面的JS文件，从而减少首次加载时间。
• 优化按需加载：对于多次进入一个页面会导致多次请求该页面的JS文件，这部分是多余的网络请求。可以使用缓存技术将这个过程省略掉。使用缓存后又产生一个新问题：何时更新，怎么判断过期的缓存数据。

前端与后端

• 源于Client--Server架构，产生前端和后端的关系

• 为啥需要后端，把所有逻辑都放到前端不行吗？回答这个问题需要理解CS的架构是用来解决什么问题，产生背景是啥。

  • 一些业务逻辑不适合放在前端（浏览器可以读取前端代码），存在泄露的风险。如：鉴权逻辑
  • 前端不适合与第三方数据源建立敏感链接。如：数据库链接

全栈应用

• 起源：由SPA应用兴起而产生的

• 解决动态内容渲染需要两次请求：

  • 获取JS
  • 获取动态的数据

• 难题：客户端的状态管理

• 全栈应用客户端与服务端使用API交流

  • 常用的规范&风格：

    • REST
    • GraphQL

• 随着web的发展，一些事情变得更复杂

  • 服务端路由--》客户端路由

    • 通过懒加载的方式来解决大文件内容带来的问题

  • 服务端渲染 --》客户端渲染

    • 额外的数据请求连接

      • 数据获取和状态管理问题
      • 页面加载长问题

• 新的主题

  • Server-Side Rendering 2.0 (SSR)
  • Static Site Generation (SSG)