摘要：更詳細(xì)的內(nèi)容下一章開(kāi)篇深入聊聊前后分離講述關(guān)于我目前在寫(xiě)從零構(gòu)建前后分離項(xiàng)目系列，修正和補(bǔ)充以此為準(zhǔn)不斷更新的項(xiàng)目實(shí)踐地址彩蛋提前預(yù)覽下一章傳送門(mén)

在校學(xué)習(xí)和幾年工作工作中不知不覺(jué)經(jīng)歷了一半的 WEB 歷史演變、對(duì)近幾年的發(fā)展比較了解，結(jié)合經(jīng)驗(yàn)聊聊 WEB 發(fā)展歷史。

演變不易，但也是必然，因?yàn)闉槿耸冀K要進(jìn)步。

這是 1997 年 Apple 官網(wǎng)，那時(shí)的網(wǎng)站不如叫網(wǎng)頁(yè)，像一張浮夸的彩色報(bào)紙，那時(shí)是純粹的 HTML 時(shí)代，不管你是不是訪問(wèn)這個(gè)網(wǎng)頁(yè)，每個(gè)頁(yè)面都是在服務(wù)器上存在的。

隨后技術(shù)性強(qiáng)一點(diǎn)的網(wǎng)站可能會(huì)通過(guò) CGI Perl 運(yùn)行一小段代碼與數(shù)據(jù)庫(kù)或文件系統(tǒng)進(jìn)行交互。比如：

這是1998 年的 Google ，為了達(dá)到搜索條件，不可能用大量的人力去堆砌靜態(tài)頁(yè)面,所以使用這種方式“曲線救國(guó)”，但是 CGI 伸縮性不是太好：每個(gè)請(qǐng)求分配一個(gè)新的進(jìn)程，不太安全(直接使用文件系統(tǒng)或者環(huán)境變量)，同時(shí)也沒(méi)提供一種結(jié)構(gòu)化的方式去構(gòu)造動(dòng)態(tài)應(yīng)用程序。

靜態(tài)網(wǎng)站是最受搜索引擎歡迎的網(wǎng)站，因?yàn)樗鄬?duì)固定，所以網(wǎng)站 SEO 非常好做，我猜測(cè)這也是為什么現(xiàn)在的文檔網(wǎng)站大部分都是靜態(tài)網(wǎng)頁(yè)的原因之一吧。

很可惜我沒(méi)能親眼看一看這樣的時(shí)代

2005 年左右，先后出現(xiàn)了 微軟的 ASP 和 Java Server Pages [JSP] 等技術(shù),取代了 CGI ，增強(qiáng)了 WEB 與服務(wù)端的交互的安全性、用起來(lái)也更加簡(jiǎn)單，但隨著各個(gè)公司W(wǎng)EB業(yè)務(wù)的復(fù)雜性，缺點(diǎn)也逐漸暴露出來(lái)：

1、技術(shù)單一，難以維護(hù)

JSP頁(yè)面由HTML代碼和嵌入其中的Java代碼所組成,用一個(gè)比較常見(jiàn)的 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 = HTML+Java

上面的代碼 HTML 中大量耦合了JAVA代碼，通過(guò)JSP編譯之后可以在客戶端充當(dāng)部分服務(wù)端的角色，這讓我們難以搞清服務(wù)端的角色，以及增加調(diào)試的復(fù)雜度。業(yè)務(wù)稍微復(fù)雜一點(diǎn)，試想一下：HTML中摻雜了太多java代碼，不論是開(kāi)發(fā)還是維護(hù)都是一件痛苦的事情。

2、不不夠靈活
JSP與Java Servlet一樣，是在服務(wù)器端執(zhí)行的，通常返回該客戶端的就是一個(gè)HTML文本。我們每次的請(qǐng)求：獲取的數(shù)據(jù)、內(nèi)容的加載，都是服務(wù)器為我們返回染完成之后的 DOM，這也就使得我們開(kāi)發(fā)網(wǎng)站的靈活度大打折扣，在這種情況下，同年：Ajax火了。

為什么說(shuō) 2005 年 Ajax 火了？因?yàn)?Ajax 技術(shù)并不是 2005 年出現(xiàn)的，他的雛形是 1999 年。

1999年，微軟公司發(fā)布IE5，第一次引入新功能：允許javascript腳本向服務(wù)器發(fā)起HTTP請(qǐng)求[這也就是今天萬(wàn)惡的 ActiveX 原型]。這個(gè)功能當(dāng)時(shí)并沒(méi)有引起注意，直到2004年Gmail發(fā)布和2005年Google Map發(fā)布，才引起廣泛重視

Google做了什么事兒？
在 2005 年，Google 通過(guò)其 Google Suggest 使 AJAX 變得流行起來(lái)，他大概是這樣的事情：

現(xiàn)在看來(lái)很常見(jiàn)的技術(shù)手段，當(dāng)時(shí)迅速燃爆了技術(shù)圈，以此來(lái)實(shí)現(xiàn)：異步交互
這樣既能增加用戶的體驗(yàn)，又能替代掉頁(yè)面部分的服務(wù)端代碼，從此， AJAX 成為腳本發(fā)起 HTTP 通信的代名詞，次年 W3C 也在 2006 年發(fā)布了 AJAX 的國(guó)際標(biāo)準(zhǔn)

總結(jié)：

隨后各種 JSP ASP 的改良模板引擎、全新的交互方式也如雨后春筍一般涌現(xiàn)。并且以 JAVA 作為服務(wù)端也出現(xiàn)了如 Struts 、 Spring、Hibernate 的老一代框架、采用后端 MVC 的方式讓構(gòu)建 WEB 應(yīng)用再一次更加健全, WEB 服務(wù)正在逐漸由石器時(shí)代走向文明時(shí)代。

時(shí)光啊不斷地飛逝，前端后端也出現(xiàn)了幾個(gè)潮流。

移動(dòng)端

手機(jī)已經(jīng)發(fā)展出了一些苗頭，網(wǎng)頁(yè)也區(qū)分了web和移動(dòng)應(yīng)用兩種模式，但移動(dòng)端限制于當(dāng)時(shí)手機(jī)行業(yè)的技術(shù)，發(fā)展較慢。

Jquery的出現(xiàn)

出現(xiàn)了非常流行的JavaScript庫(kù)：jquery，能夠快速構(gòu)建動(dòng)態(tài)、美妙的web應(yīng)用，完美的封裝了Ajax，讓開(kāi)發(fā)者開(kāi)發(fā)網(wǎng)頁(yè)變得優(yōu)雅。

SPA的雛形

隨著文明時(shí)代 Ajax 正式提出，加上 CDN 開(kāi)始大量用于靜態(tài)資源存儲(chǔ)，于是出現(xiàn)了 SPA （Single Page Application 單頁(yè)面應(yīng)用），Backbone EmberJS AngularJS 這樣一批前端框架隨之出現(xiàn)，但以當(dāng)時(shí)的配套技術(shù)來(lái)說(shuō)，SPA 道路并不好走：例如 SEO 問(wèn)題、SPA 過(guò)多的頁(yè)面、復(fù)雜場(chǎng)景下 VIEW 的綁定等，都沒(méi)有很好的處理。

Struts 、 Spring、Hibernate 經(jīng)過(guò)幾年的發(fā)展、SSM這個(gè)今天被我們說(shuō)爛了的詞、當(dāng)時(shí)幾乎成了當(dāng)時(shí) JAVA 服務(wù)端的 首要選型，我想這也是為什么很多公司、或外包公司依然維護(hù)這樣一套架構(gòu)的主要原因。

總結(jié)
這幾年的飛速發(fā)展，為我們節(jié)約了大量的經(jīng)歷、降低了開(kāi)發(fā)者和開(kāi)發(fā)過(guò)程的門(mén)檻，極大提升了開(kāi)發(fā)效率和迭代速度，我稱(chēng)之為工業(yè)時(shí)代

經(jīng)歷

說(shuō)出來(lái)你可能不信：大三快結(jié)束時(shí)實(shí)習(xí)求得的第一份工作，一個(gè)人斷斷續(xù)續(xù)開(kāi)發(fā)7、8個(gè)月，就是鉆研這些自技術(shù)棧，獨(dú)立開(kāi)發(fā)出一款web應(yīng)用 微寶創(chuàng)業(yè),慚愧的說(shuō)：

項(xiàng)目架構(gòu)從文明時(shí)代 -> 走到最后的工業(yè)時(shí)代！不斷的重構(gòu)，不斷的上線 ，拼命的學(xué)習(xí)，我很感謝當(dāng)時(shí)老板對(duì)我的信任和同事對(duì)我的幫助。

時(shí)光啊他一刻不停，直到今天 -- 技術(shù)只能用爆炸來(lái)形容。

工業(yè)時(shí)代提出的 SPA 模型隨著 NODE 的興起、服務(wù)端、各種工具、容器的飛速發(fā)展、前端 MVC MVVM 模式逐漸清晰、前端涌現(xiàn)了相當(dāng)一批優(yōu)秀的開(kāi)源項(xiàng)目：
包管理： npm yarn
打包：grunt gulp
模塊加載：RequireJS SeaJs
框架：VUE Angular React
hybrid ：ionic weex react-native electron
預(yù)處理器：less sass
數(shù)據(jù)可視化：echarts hcharts
以及提升用戶體驗(yàn)的動(dòng)畫(huà)，讓我們更有“面子”

甚至前端也可以使用 Node 來(lái)構(gòu)建自己簡(jiǎn)單的服務(wù)端、正在逐漸擺脫“客戶端開(kāi)發(fā)者”的角色

go

更適合面向服務(wù)器編程，以前你如果使用C或者C++做的那些事情，用Go來(lái)做很合適，例如、虛擬機(jī)處理、文件系統(tǒng)等，強(qiáng)如 docker Kubernetes（k8s）都是 GO 寫(xiě)的

python

像一門(mén)生物語(yǔ)言，目前看來(lái)更容易處理算法、人工智能、網(wǎng)絡(luò)爬蟲(chóng)、運(yùn)維方向

java

一款20多年的語(yǔ)言，不斷的變強(qiáng)。涌現(xiàn)了很多高質(zhì)量的庫(kù)，幾個(gè)有代表性的：

netty rebbitmq：輕松實(shí)現(xiàn)消息隊(duì)列
elasticSearch： 輕松實(shí)現(xiàn)搜索引擎
spring-boot： 面向配置，更加輕松的構(gòu)建web服務(wù)端
spring-cloud、dubbo： 輕松構(gòu)建微服務(wù)

以及即將迎來(lái)的 強(qiáng)悍的JAVA11

還有 持續(xù)集成 云服務(wù) devops 等運(yùn)維相關(guān)

總結(jié)

go 和 python 的出現(xiàn)讓我們服務(wù)端開(kāi)發(fā)者能做更多的事情，比如自動(dòng)化運(yùn)維、寫(xiě)中間件。逐漸偏向全棧方向發(fā)展。而 JAVA 20多年來(lái)的生態(tài)圈子發(fā)展，能幫助我們寫(xiě)出更健壯的服務(wù)。以及狠狠向我們?cè)襾?lái)的：人工智能、devops、云服務(wù)等技術(shù)，令我們眼花繚亂，開(kāi)源成為了一種潮流，技術(shù)分享成了每個(gè)人都想做的事情，我稱(chēng)之為：技術(shù)爆炸的時(shí)代

經(jīng)歷

我近兩年很煩惱：如何才能讓前后端更加優(yōu)雅的通信？

曾經(jīng)使用多種后端模板引擎直到完全摒棄，后到 node 做代理、渲染 + grunt 進(jìn)行數(shù)處理，之后逐漸使用

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

這樣如果不得不用 NODE 也只會(huì)成為 Rest 中的一員而不用經(jīng)過(guò) NODE 做繁瑣的通信了。這種前后分離的方式達(dá)到了滿意的效果，前端不必再管后端的事情，后端？寫(xiě)好自己的服務(wù)就好了。

更詳細(xì)的內(nèi)容下一章 《開(kāi)篇：深入聊聊前后分離》 講述

目前在寫(xiě)《從零構(gòu)建前后分離項(xiàng)目》系列，修正和補(bǔ)充以此為準(zhǔn)

不斷更新的 項(xiàng)目實(shí)踐地址

彩蛋：提前預(yù)覽下一章傳送門(mén)