知难而进：什么是Web开发——关于软件开发你需要知道些什么

一、前言

        一般来说，你在做桌面开发或者移动开发的时候，你对运行环境长什么样子了如指掌（即：如果你正在构建一个Windows应用，你可以使用.NET；如果你正在为macOS构建一个应用，你可以使用Swift。但无论哪种情况，你都知道你的应用需要支持何种操作系统的哪一个版本，你也明确知晓可以使用哪种语言的哪些特性）。

        但是，当你进入Web开发领域的时候，情况就发生变化了。你对运行时环境没法有太多的控制，因为在Web浏览器的世界里至少有5个主要的成员（如：Microsoft Internet Explorer、Microsoft Edge、Google Chrome、Apple Safari和Firefox，还有其他许多“小众”浏览器，如Opera，以及移动设备浏览器、“网络”电视、视频游戏控制台等）。

        Web开发中有很多种情况都要考虑到，有很多种风险因素都会导致错误；且Web开发非常棘手的很大一部分原因是每一种不同的浏览器都有不同的版本，每个浏览器的每个版本都可以支持不同的特性和行为。虽然还存在些问题，但是并不妨碍，今天，大多数软件开发者都是Web开发者；且Web开发已经全面占领了软件开发世界，它是开发平台中的龙头老大。

        因此，无论你喜欢还是憎恨，身为一个软件开发者，你必须要对Web开发有所了解，至少是在基础知识的层面上【这意味着，不管你是否打算成为一名Web开发者，你都需要熟悉Web开发、Web的工作机理以及Web开发涉及的主要技术】。

        本文接下来会介绍一些Web应用的非常基础常识内容，如果你决心成为一名Web开发者，这些是你需要知道的所有知识，希望本章能够给你提供一个“万丈高楼平地起”的起点。

二、Web开发的概述

        多年来，Web开发本身及其实现方式都发生了天翻地覆的变化，但是有一件事至今仍然没有改变【Web开发就是要创建可以在Web浏览器中运行的应用程序】。

Web应用程序总结起来就是两个模式：

1、服务器端渲染模式：即一些应用程序的逻辑会驻留在Web服务器上，然后通过渲染HTML、CSS和JavaScript等方式来创建应用程序。

2、客户端渲染模式：即一些应用程序只使用服务器来创建它们的初始状态，应用程序在运行的时候会下载逻辑，然后使用服务器来检索和存储数据。

        但是不管Web开发是通过上述哪种方式完成的，基本的技术套路都是相同的【HTML、JavaScript和CSS】以及需要重点强调的就是需要强大的耐心！你需要测试所有的Web浏览器，而所有这些浏览器都是你必须支持的。

        如今的Web开发者可以使用各种编程语言来创建Web应用程序（这是因为，Web应用程序的用户界面实际上只是HTML和CSS形式的纯文本，可以由任何能够生成文本和响应HTTP请求的编程语言生成）。

三、Web的工作原理

        Web应用程序的运行平台是Web浏览器；其中Web浏览器是基石，包含如下特点：

1、Web浏览器能够解析HTML和CSS代码，并将其渲染为可见的格式，我们称之为Web页面（网页）；

2、Web浏览器还能够执行JavaScript脚本，完成各种各样的功能，包括修改网页的底层结构；

3、Web浏览器必须向Web服务器发送请求才能获得要渲染的网页（如我们熟知的通过著名的超文本传输协议【HTTP】）;

        要注意的是：在开发Web应用程序的时候，你必须要考虑到，底层HTTP其实是无状态的。因此，Web应用程序必须对应用程序中发生的每一步操作不断地向服务器发出请求（这也就意味着，你必须以某种方法来管理处在请求之间的应用程序的状态，并且需要跟踪同时使用Web应用程序的各个用户）。

四、Web简史

        早期的Web开发者要花大量时间创建静态HTML页面，甚至所有的导航都是依靠超链接来完成的（即：早期的Web开发者并没有创建真正的“应用程序”，他们创建的都是一组静态网页，其中包含一些信息和图片，所有这些都是用超链接相互连接在一起；这看起来并不酷，而且有些无聊）。

        最早用来创建Web应用程序的是一种称为通用网关接口（Common Gateway Interface，CGI）的技术。这些应用程序可以使用浏览器发送到服务器的数据（如查询字符串）有条件地生成HTML（这就要求：Web开发者必须自己解析从浏览器获得的所有请求，并生成独立的响应，从而确保正确实现HTTP，进而生成有效的HTML）；当Web开发框架开始出现之后，这一切就变得轻松了，它们使动态生成CGI和HTML变得更容易。

         当下，Web开发者可以使用特殊的标签、标记以及逻辑生成符合条件的HTML，这样Web开发的事情变得容易了，这种技术就像一种模板语言，第一次允许大量开发者创建出真正的Web应用程序；

        而随着浏览器技术的发展和计算机的运算速度的加快，以及对更复杂的应用程序的需求的不断增长，Web开发者开始使用JavaScript来扩展许多Web应用程序的功能；

        在同一时间，Web开发者开始使用CSS（Cascading Style Sheets，级联样式表）来简化Web应用程序样式的创建和修改。HTML负责定义内容，CSS负责内容的布局和样式。

        要想渲染服务器上的所有内容，速度肯定很慢，并且响应性也不强，因此Ajax（异步JavaScript和XML，即Asynchronous JavaScript and XML）等技术应运而生，这些技术允许网页动态更新而无须刷新页面。

        最终，整个Web应用程序都成为动态构建的，根本不需要任何页面刷新动作。这种类型的Web应用程序被称为单页应用程序（Single Page Applications，SPA）。

        看起来Web应用将会义无反顾地演变得越来越像过去的桌面应用程序，而Web浏览器则会演变成越来越像一个实际的操作系统【目前，这已经成为现实，谷歌已经创建了一个基于Web的被称为Chrome OS的操作系统，这个操作系统基本上就是Web浏览器Chrome升级而成】。

五、主流的Web开发技术

5.1、HTML

        HTML（Hypertext Markup Language，超文本标记语言）是Web的基本组成部分，所有的Web开发归根结底都是基于它的；是Web开发的关键基石。

        HTML由一系列标签组成，这些标签定义了网页的部件和组件。例如，你可以使用<img>标签在页面上嵌入图像，可以使用<h1>标签来创建标题，还可以定义一个<article>标签来告诉浏览器页面的主要内容位于哪里。常用的标签有几十个，不常用的标记还有更多，都被用于组织内容和构造文档。

        总结起来就是只使用HTML你就能构建整个Web应用程序，尽管它能完成的工作并不多（只能将其称为网页）HTML用于创建网页的内容和结构。

5.2、CSS

        在CSS（Cascading Style Sheets，级联样式表）诞生之前，HTML既用于指定网页的内容和结构，也用于规定应该如何显示和样式化，这样就会导致如果要修改一个内容就需要到多个地方修改，十分繁琐。

        CSS就是为了解决这个问题而发明的，它将网页的内容与样式清晰地分离开来（尽管这两者有时是会重叠的）。CSS可以链接到网页中，用以定义网页的样式（如：想改变按钮的颜色，你只需修改一个CSS文件，整个Web应用程序的按钮都会随之改变）。

        但是CSS并不是没有局限性和问题的。写出易于维护、组织良好的CSS是一项极富挑战性的工作（与编程语言不同，CSS并不支持变量、函数或其他形式的封装。这就意味着你需要在任何必要的地方重复你的颜色规范，而不是使用变量来定义）。

        CSS预处理器是什么？它有点儿像CSS的魔法棒，因为它会让你更易于以更加轻松的方式编写CSS，而不是重复设置（即：CSS预处理器允许你以更接近编写常规代码的方式来编写CSS，执行各种整洁的操作，如赋值变量、执行循环，甚至复用你已经定义的大部分CSS）。

5.3、JavaScript

        JavaScript是一种功能齐全的动态语言，它可以直接在Web浏览器中执行，具有如下特性：

1、使网页更具交互性，允许对网页及其内容进行编程操作；

2、可以直接与网页的DOM交互，以便添加、删除和更改内容；

3、可以添加、删除和更改CSS，以更改页面上内容的显示格式；

4、还可以直接在浏览器内运行一个完整的应用程序的逻辑和处理过程，以创建业务应用程序、游戏、视觉效果、动画等；

        通过使用JavaScript来操纵DOM和CSS，可以通过编程方式更改整个网页的结构和样式。所有这些都发生在浏览器中（除非你使用的是Node.js这样的技术），它在服务器上运行JavaScript来实际解析请求并发回响应。

        但是，在浏览器中运行一个完整的应用程序也有一些局限性，其中最大的局限性莫过于你必须要得到浏览器的支持。如果浏览器不支持JavaScript工作所需的特性，则可能需要将创建和操纵HTML的程序驻留在Web服务器上

5.4、服务器端渲染

        服务器端渲染意味着页面完全由服务器上的逻辑负责构建（所有Web页面都在服务器上完成渲染，然后与该页面相关的所有HTML、CSS和JavaScript被一股脑儿地发送到Web浏览器，在浏览器中完成解析并显示给用户）。因此，通过服务器端渲染，应用程序的逻辑几乎完全驻留在服务器上【这是早期大多数网络应用程序的工作方式】。

5.5、客户端渲染

        客户端渲染意味着网页的内容是通过JavaScript在浏览器中构造的，而不是在服务器上；客户端渲染的流程大致如下：

1、Web服务器将应用程序交付给浏览器，浏览器在内部执行该应用程序以渲染页面、创建导航，并从服务器请求任何附加数据。

2、在幕后，JavaScript被用来创建和操纵DOM元素，甚至生成Web页面（在这种情况下它们被称为Web应用程序）中的HTML或CSS；

3、对最终用户来说，使用客户端渲染实现的页面看起来更加行云流水，因为客户端无须向服务器发送请求来渲染新页面。客户端向服务器发出的唯一请求的是附加数据，然后动态地“插入”网页中（这就是某些客户端渲染的应用程序称为SPA（Single Page Application）的原因。通常客户端只有一个页面，而该页面的内容被动态更新）。

4、当你在浏览器中创建内容时，仍然需要在服务器上以HTTP API的形式驻留部分逻辑和进程；

5.6、API

        通过客户端渲染，应用程序在浏览器内执行，因此需要一种与服务器进行通信的显式方式。这就是API出现的原因。

        通常，SPA都使用API来回发送数据。API的这项特性在客户端渲染的应用程序中尤其有用，因为它们需要以某种方式来发送和接收数据，与应用程序的“大脑”保持通信，而后者通常运行在服务器上。

        今天Web开发中的很大一部分工作内容都涉及与API的交互和针对API编程，这就是众所周知的Web API。