《從零構建前後分離web項目》：開篇 - 縱觀WEB歷史演變

來自專欄 web全棧工程師的自我修養2 人贊了文章

開篇 ： 縱觀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 做繁瑣的通信了。這種前後分離的方式達到了滿意的效果，前端不必再管後端的事情，後端？寫好自己的服務就好了。

更詳細的內容下一章 《開篇：深入聊聊前後分離》 講述

關於我

• 目前在寫《從零構建前後分離項目》系列，校對或更新以此地址為準

• 不斷更新的 項目實踐地址

• 彩蛋：提前預覽下一章傳送門 ??

推薦閱讀：