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

開篇 ： 縱觀WEB歷史演變

在校學習和幾年工做工做中不知不覺經歷了一半的 WEB 歷史演變、對近幾年的發展比較瞭解，結合經驗聊聊 WEB 發展歷史。

演變不易，但也是必然，由於爲人始終要進步。

WEB 的發展史

1、開山鼻祖 - 石器時代

靜態網站

這是 1997 年 Apple 官網，那時的網站不如叫網頁，像一張浮誇的彩色報紙，那時是純粹的 HTML 時代，無論你是否是訪問這個網頁，每一個頁面都是在服務器上存在的。

CGI技術

隨後技術性強一點的網站可能會經過 CGI Perl 運行一小段代碼與數據庫或文件系統進行交互。好比：

這是 1998 年的 Google ，爲了達到搜索條件，不可能用大量的人力去堆砌 靜態頁面,因此使用這種方式「曲線救國」，可是 CGI 伸縮性不是太好：每一個請求分配一個新的進程，不太安全(直接使用文件系統或者環境變量)，同時也沒提供一種結構化的方式去構造動態應用程序。

靜態網站是最受搜索引擎歡迎的網站，由於它相對固定，因此網站 SEO 很是好作，我猜想這也是爲何如今的文檔網站大部分都是靜態網頁的緣由之一吧。

很惋惜我沒能親眼看一看這樣的時代

2、前人種樹 - 文明時代

asp 和 jsp

2005 年左右，前後出現了 微軟的 ASP 和 Java Server Pages [JSP] 等技術,取代了 CGI ，加強了 WEB 與服務端的交互的安全性、用起來也更加簡單，但隨着各個公司WEB業務的複雜性，缺點也逐漸暴露出來：

一、技術單一，難以維護

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代碼，不管是開發仍是維護都是一件痛苦的事情。

二、不不夠靈活 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 服務正在逐漸由石器時代走向文明時代。

3、化繁爲簡 - 工業革命時代

時光啊不斷地飛逝，前端後端也出現了幾個潮流。

前端發展

移動端

手機已經發展出了一些苗頭，網頁也區分了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 服務端的 首要選型，我想這也是爲何不少公司、或外包公司依然維護這樣一套架構的主要緣由。

總結 這幾年的飛速發展，爲咱們節約了大量的經歷、下降了開發者和開發過程的門檻，極大提高了開發效率和迭代速度，我稱之爲工業時代

經歷

說出來你可能不信：大三快結束時實習求得的第一份工做，一我的斷斷續續開發七、8個月，就是鑽研這些自技術棧，獨立開發出一款web應用 微寶創業,慚愧的說：

項目架構從文明時代 -> 走到最後的工業時代！不斷的重構，不斷的上線 ，拼命的學習，我很感謝當時老闆對個人信任和同事對個人幫助。

4、百家爭鳴 - 技術大爆炸時代

時光啊他一刻不停，直到今天 -- 技術只能用爆炸來形容。

前端爆炸

工業時代提出的 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 作繁瑣的通訊了。這種先後分離的方式達到了滿意的效果，前端沒必要再管後端的事情，後端？寫好本身的服務就行了。

這章只是簡單回顧一下發展史，更詳細的內容下一章 《開篇：深刻聊聊先後分離架構》 講述

關於我

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

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

• 彩蛋：提早預覽下一章傳送門 🤓