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

[pkwenda]

开篇 ： 纵观 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 做繁琐的通信了。这种前后分离的方式达到了满意的效果，前端不必再管后端的事情，后端？写好自己的服务就好了。

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

关于我

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

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

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

[laogui]

2005 年左右，先后出现了 微软的 ASP 和 Java Server Pages [JSP] 等技术

看到这个我笑了，我 2001 年就开始用 asp 的程序建网站了，JSP 也很早。

[lhx2008]

要说发展史的话，后端异步开发已经崭露头角了

[likai]

05 年左右，如果没记错的话，php 都已经到 php5,
当时还买了一本书 php&mysql web 开发入门

[songpengf117]

1996 年，ASP 1.0 （ Active Server Pages ）版本出现了，它引起了 Web 开发的新革命，降低了动态网页开发的难度。以前开发动态网页需要编写大量繁杂的 C 代码，编程效率非常低下，而且需要 Web 网页开发者掌握非常高的编程技巧。而 ASP 使用简单的脚本语言，能够将代码直接嵌入 HTML，使设计 Web 页面变得更简单。虽然 ASP 非常简单，但却能够实现非常强大的功能，这一切得益于其组件。特别是 ADO 组件，使得在网页中访问数据库易如反掌。这一切推动了动态网页的快速发展与建设，同时使 ASP 得到迅速流行。

1998 年，微软公司发布了 ASP 2.0，它是作为 Windows NT 4 Option Pack 的一部分提供的。ASP 2.0 与 ASP 1.0 的主要区别是外部的组件可以初始化，使所有的组件都有了独立的内存空间，并且可以进行事务处理。内置的 Microsoft Transaction Server （ MTS ）使制作组件变得更容易。
2000 年 6 月，微软公司宣布了自己的.NET 框架。.NET 框架的基本思想是：把原有的重点从连接到互联网的单一网站或设备转移到计算机、设备和服务群组上，而将互联网本身作为新一代操作系统的基础。这样，用户将能够控制信息的传送方式、时间和内容，从而得到更多的服务。
2001 年，ASP.NET 浮出水面。它最初的名字为 ASP+，后来改为 ASP.NET 。ASP.NET 是微软公司开发的一种建立在.NET 之上的 Web 运行环境，它不是 ASP 的简单升级，而是新一代的 Active Server Pages。ASP.NET 是微软公司新体系结构 Microsoft.NET 的一部分，其中全新的技术架构使编程变得更加简单。借助于 ASP.NET ，可以创造出内容丰富的、动态的、个性化的 Web 站点。ASP.NET 简单易学、功能强大、应用灵活、扩展性好，可以使用任何.NET 兼容语言。[4][5]
2002 年微软发布.NET 正式版本.NET Framework 1.0，其中的 ASP 版本就是 ASP.NET 1.0，在此以前发布了两个.NET 测试版本 Betal 和 Beta2。
2003 年微软发布了.NET Frameworrk 1.1 正式版，其中 ASP 版本就是 ASP.NET 1.1。
2005 年微软发布.NET Framework 2.0 正式版本，也就是 ASP.NET 2.0。[6]

[jiafaner]

前端就是一个大坑啊

根本没有什么成熟方案

感觉就像一群小孩，虽然都很聪明，但都不怎么合作

于是做了一大堆新奇的东西

能用的却很少啊

[deity2245]

想问一下楼主，文中前端爆炸和后端爆炸的两张图具体是出处是哪儿呢？对这两张图非常有兴趣~谢谢

[wafm]

正在学习 Flask 打算做一个 VUE+FLASK RESTUL API 的前后端分离项目

[pkwenda]

@deity2245 对不起回复晚了，地址是： http://webfullstack.me/ 可以在文章下的 GIthub 快速的找到我

[pkwenda]

对不起，我开始只想想写 JSP，开始我写的时间点都是准确的，后来加了 php 和 asp 由于对这两个技术不是很了解，所以做了删改，没仔细校对，感谢您的指正，以后会注意文章严谨性。

[pkwenda]

@songpengf117 对不起，我开始只想想写 JSP，开始我写的时间点都是准确的，后来加了 php 和 asp 由于对这两个技术不是很了解，所以做了删改，没仔细校对，感谢您的指正，以后会注意文章严谨性。

[pkwenda]

建议大家 https://github.com/pkwenda/blog/issues/10 查看最新校对的，见笑了

[pkwenda]

@wafm 如果想快速做项目，不如使用 全站框架 jhipster https://github.com/jhipster/generator-jhipster 我其实不推荐 python 做 web 架构 嘿嘿

[wafm]

@pkwenda 我还是希望从学习的角度去做 单纯使用框架就是去意义了

[pkwenda]

@wafm 一个系列没法涵盖实战 + 学习，只能捎带，侧重点只有一个