《从零构建前后分离 web 项目》：开篇 - 纵观 WEB 历史演变

开篇 ： 纵观 WEB 历史演变

在校学习和几年工作工作中不知不觉经历了一半的 WEB 历史演变、对近几年的发展比较了解，结合经验聊聊 WEB 发展历史。

演变不易，但也是必然，因为为人始终要进步。

WEB 的发展史

一、开山鼻祖 - 石器时代

静态网站

这是 1997 年 Apple 官网，那时的网站不如叫网页，像一张浮夸的彩色报纸，那时是纯粹的 HTML 时代，不管你是不是访问这个网页，每个页面都是在服务器上存在的。

CGI 技术

随后技术性强一点的网站可能会通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互。比如：

这是 1998 年的 Google ，为了达到搜索条件，不可能用大量的人力去堆砌静态页面,所以使用这种方式“曲线救国”，但是 CGI 伸缩性不是太好：每个请求分配一个新的进程，不太安全(直接使用文件系统或者环境变量)，同时也没提供一种结构化的方式去构造动态应用程序。

静态网站是最受搜索引擎欢迎的网站，因为它相对固定，所以网站 SEO 非常好做，我猜测这也是为什么现在的文档网站大部分都是静态网页的原因之一吧。

很可惜我没能亲眼看一看这样的时代

二、前人种树 - 文明时代

asp 和 jsp

2005 年左右，先后出现了 微软的 ASP 和 Java Server Pages [JSP] 等技术,取代了 CGI ，增强了 WEB 与服务端的交互的安全性、用起来也更加简单，但随着各个公司 WEB 业务的复杂性，缺点也逐渐暴露出来：

1、技术单一，难以维护

JSP 页面由 HTML 代码和嵌入其中的 Java 代码所组成,用一个比较常见的 JSP 代码段举例：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
    <%@ page import="com.zifangsky.OnlineFriend.model.article.ShowByPage"%>
<jsp:useBean id="showAllTitle" type="com.zifangsky.OnlineFriend.model.article.ShowByPage" scope="session"/>

JSP = HTML+Java

上面的代码 HTML 中大量耦合了 JAVA 代码，通过 JSP 编译之后可以在客户端充当部分服务端的角色，这让我们难以搞清服务端的角色，以及增加调试的复杂度。业务稍微复杂一点，试想一下：HTML 中掺杂了太多 java 代码，不论是开发还是维护都是一件痛苦的事情。

2、不不够灵活
JSP 与 Java Servlet 一样，是在服务器端执行的，通常返回该客户端的就是一个 HTML 文本。我们每次的请求：获取的数据、内容的加载，都是服务器为我们返回染完成之后的 DOM，这也就使得我们开发网站的灵活度大打折扣，在这种情况下，同年：Ajax 火了。

AJAX 的出现

为什么说 2005 年 Ajax 火了？因为 Ajax 技术并不是 2005 年出现的，他的雏形是 1999 年。

1999 年，微软公司发布 IE5，第一次引入新功能：允许 javascript 脚本向服务器发起 HTTP 请求[这也就是今天万恶的 ActiveX 原型]。这个功能当时并没有引起注意，直到 2004 年 Gmail 发布和 2005 年 Google Map 发布，才引起广泛重视

Google 做了什么事儿？
在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来，他大概是这样的事情：

现在看来很常见的技术手段，当时迅速燃爆了技术圈，以此来实现：异步交互
这样既能增加用户的体验，又能替代掉页面部分的服务端代码，从此， AJAX 成为脚本发起 HTTP 通信的代名词，次年 W3C 也在 2006 年发布了 AJAX 的国际标准

总结：

随后各种 JSP ASP 的改良模板引擎、全新的交互方式也如雨后春笋一般涌现。并且以 JAVA 作为服务端也出现了如 Struts 、 Spring、Hibernate 的老一代框架、采用后端 MVC 的方式让构建 WEB 应用再一次更加健全, WEB 服务正在逐渐由石器时代走向文明时代。

三、化繁为简 - 工业革命时代

时光啊不断地飞逝，前端后端也出现了几个潮流。

前端发展

移动端

手机已经发展出了一些苗头，网页也区分了 web 和移动应用两种模式，但移动端限制于当时手机行业的技术，发展较慢。

Jquery 的出现

出现了非常流行的 JavaScript 库：jquery，能够快速构建动态、美妙的 web 应用，完美的封装了 Ajax，让开发者开发网页变得优雅。

SPA 的雏形

随着文明时代 Ajax 正式提出，加上 CDN 开始大量用于静态资源存储，于是出现了 SPA （Single Page Application 单页面应用），Backbone EmberJS AngularJS 这样一批前端框架随之出现，但以当时的配套技术来说，SPA 道路并不好走：例如 SEO 问题、SPA 过多的页面、复杂场景下 VIEW 的绑定等，都没有很好的处理。

后端发展

Struts 、 Spring、Hibernate 经过几年的发展、SSM 这个今天被我们说烂了的词、当时几乎成了当时 JAVA 服务端的 首要选型，我想这也是为什么很多公司、或外包公司依然维护这样一套架构的主要原因。

总结
这几年的飞速发展，为我们节约了大量的经历、降低了开发者和开发过程的门槛，极大提升了开发效率和迭代速度，我称之为工业时代

经历

说出来你可能不信：大三快结束时实习求得的第一份工作，一个人断断续续开发 7、8 个月，就是钻研这些自技术栈，独立开发出一款 web 应用 微宝创业,惭愧的说：

项目架构从文明时代 -> 走到最后的工业时代！不断的重构，不断的上线 ，拼命的学习，我很感谢当时老板对我的信任和同事对我的帮助。

四、百家争鸣 - 技术大爆炸时代

时光啊他一刻不停，直到今天 -- 技术只能用爆炸来形容。

前端爆炸

工业时代提出的 SPA 模型随着 NODE 的兴起、服务端、各种工具、容器的飞速发展、前端 MVC MVVM 模式逐渐清晰、前端涌现了相当一批优秀的开源项目：
包管理： npm yarn
打包：grunt gulp
模块加载：RequireJS SeaJs
框架：VUE Angular React
hybrid ：ionic weex react-native electron
预处理器：less sass
数据可视化：echarts hcharts
以及提升用户体验的动画，让我们更有“面子”

甚至前端也可以使用 Node 来构建自己简单的服务端、正在逐渐摆脱“客户端开发者”的角色

后端爆炸

go

更适合面向服务器编程，以前你如果使用 C 或者 C++ 做的那些事情，用 Go 来做很合适，例如、虚拟机处理、文件系统等，强如 docker Kubernetes（k8s）都是 GO 写的

python

像一门生物语言，目前看来更容易处理算法、人工智能、网络爬虫、运维方向

java

一款 20 多年的语言，不断的变强。涌现了很多高质量的库，几个有代表性的：

netty rebbitmq：轻松实现消息队列
elasticSearch： 轻松实现搜索引擎
spring-boot： 面向配置，更加轻松的构建 web 服务端
spring-cloud、dubbo： 轻松构建微服务

以及即将迎来的 强悍的 JAVA11

还有 持续集成 云服务 devops 等运维相关

总结

go 和 python 的出现让我们服务端开发者能做更多的事情，比如自动化运维、写中间件。逐渐偏向全栈方向发展。而 JAVA 20 多年来的生态圈子发展，能帮助我们写出更健壮的服务。以及狠狠向我们砸来的：人工智能、devops、云服务等技术，令我们眼花缭乱，开源成为了一种潮流，技术分享成了每个人都想做的事情，我称之为：技术爆炸的时代

经历

我近两年很烦恼：如何才能让前后端更加优雅的通信？

曾经使用多种后端模板引擎直到完全摒弃，后到 node 做代理、渲染 + grunt 进行数处理，之后逐渐使用

vue + webpack ------> Rest API

这样如果不得不用 NODE 也只会成为 Rest 中的一员而不用经过 NODE 做繁琐的通信了。这种前后分离的方式达到了满意的效果，前端不必再管后端的事情，后端？写好自己的服务就好了。

这章只是简单回顾一下发展史，更详细的内容下一章 《开篇：深入聊聊前后分离架构》 讲述

关于我

• 目前在写《从零构建前后分离项目》系列，校对或更新以此地址为准

• 不断更新的 项目实践地址

• 彩蛋：提前预览下一章传送门 :nerd: