《從零構建前後分離web專案》:開篇 - 縱觀WEB歷史演變

莊文達發表於2018-09-01

開篇 : 縱觀WEB歷史演變

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

演變不易,但也是必然,因為為人始終要進步。

WEB 的發展史

一、開山鼻祖 - 石器時代

靜態網站

《從零構建前後分離web專案》:開篇 - 縱觀WEB歷史演變

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

CGI技術

隨後技術性強一點的網站可能會通過 CGI Perl 執行一小段程式碼與資料庫或檔案系統進行互動。比如:

《從零構建前後分離web專案》:開篇 - 縱觀WEB歷史演變
這是1998 年的 Google ,為了達到搜尋條件,不可能用大量的人力去堆砌靜態頁面,所以使用這種方式“曲線救國”,但是 CGI 伸縮性不是太好:每個請求分配一個新的程式,不太安全(直接使用檔案系統或者環境變數),同時也沒提供一種結構化的方式去構造動態應用程式。

靜態網站是最受搜尋引擎歡迎的網站,因為它相對固定,所以網站 SEO 非常好做,我猜測這也是為什麼現在的文件網站大部分都是靜態網頁的原因之一吧。

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

二、前人種樹 - 文明時代

asp 和 jsp

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

1、技術單一,難以維護

《從零構建前後分離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程式碼,不論是開發還是維護都是一件痛苦的事情。

2、不不夠靈活 JSP與Java Servlet一樣,是在伺服器端執行的,通常返回該客戶端的就是一個HTML文字。我們每次的請求:獲取的資料、內容的載入,都是伺服器為我們返回染完成之後的 DOM,這也就使得我們開發網站的靈活度大打折扣,在這種情況下,同年:Ajax火了。

AJAX 的出現

為什麼說 2005Ajax 火了?因為 Ajax 技術並不是 2005 年出現的,他的雛形是 1999 年。

1999年,微軟公司釋出IE5,第一次引入新功能:允許javascript指令碼向伺服器發起HTTP請求[這也就是今天萬惡的 ActiveX 原型]。這個功能當時並沒有引起注意,直到2004年Gmail釋出和2005年Google Map釋出,才引起廣泛重視

Google做了什麼事兒? 在 2005 年,Google 通過其 Google Suggest 使 AJAX 變得流行起來,他大概是這樣的事情:

《從零構建前後分離web專案》:開篇 - 縱觀WEB歷史演變

現在看來很常見的技術手段,當時迅速燃爆了技術圈,以此來實現:非同步互動 這樣既能增加使用者的體驗,又能替代掉頁面部分的服務端程式碼,從此, AJAX 成為指令碼發起 HTTP 通訊的代名詞,次年 W3C 也在 2006 年釋出了 AJAX 的國際標準

總結:

《從零構建前後分離web專案》:開篇 - 縱觀WEB歷史演變

隨後各種 JSP ASP 的改良模板引擎、全新的互動方式也如雨後春筍一般湧現。並且以 JAVA 作為服務端也出現瞭如 Struts 、 Spring、Hibernate 的老一代框架、採用後端 MVC 的方式讓構建 WEB 應用再一次更加健全, WEB 服務正在逐漸由石器時代走向文明時代。

三、化繁為簡 - 工業革命時代

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

前端發展

移動端

手機已經發展出了一些苗頭,網頁也區分了web和移動應用兩種模式,但移動端限制於當時手機行業的技術,發展較慢。

Jquery的出現

出現了非常流行的JavaScript庫:jquery,能夠快速構建動態、美妙的web應用,完美的封裝了Ajax,讓開發者開發網頁變得優雅。

SPA的雛形

《從零構建前後分離web專案》:開篇 - 縱觀WEB歷史演變

隨著文明時代 Ajax 正式提出,加上 CDN 開始大量用於靜態資源儲存,於是出現了 SPA (Single Page Application 單頁面應用)Backbone EmberJS AngularJS 這樣一批前端框架隨之出現,但以當時的配套技術來說,SPA 道路並不好走:例如 SEO 問題、SPA 過多的頁面、複雜場景下 VIEW 的繫結等,都沒有很好的處理。

後端發展

Struts 、 Spring、Hibernate 經過幾年的發展、SSM這個今天被我們說爛了的詞、當時幾乎成了當時 JAVA 服務端的 首要選型,我想這也是為什麼很多公司、或外包公司依然維護這樣一套架構的主要原因。

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

經歷

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

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

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

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

前端爆炸

《從零構建前後分離web專案》:開篇 - 縱觀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 來構建自己簡單的服務端、正在逐漸擺脫“客戶端開發者”的角色

後端爆炸

《從零構建前後分離web專案》:開篇 - 縱觀WEB歷史演變

go

更適合面向伺服器程式設計,以前你如果使用C或者C++做的那些事情,用Go來做很合適,例如、虛擬機器處理、檔案系統等,強如 docker Kubernetes(k8s)都是 GO 寫的

python

像一門生物語言,目前看來更容易處理演算法、人工智慧、網路爬蟲、運維方向

java

一款20多年的語言,不斷的變強。湧現了很多高質量的庫,幾個有代表性的:

netty rebbitmq:輕鬆實現訊息佇列 elasticSearch: 輕鬆實現搜尋引擎 spring-boot: 面向配置,更加輕鬆的構建web服務端 spring-cloud、dubbo: 輕鬆構建微服務

以及即將迎來的 強悍的JAVA11

還有 持續整合 雲服務 devops 等運維相關

總結

gopython 的出現讓我們服務端開發者能做更多的事情,比如自動化運維、寫中介軟體。逐漸偏向全棧方向發展。而 JAVA 20多年來的生態圈子發展,能幫助我們寫出更健壯的服務。以及狠狠向我們砸來的:人工智慧、devops、雲服務等技術,令我們眼花繚亂,開源成為了一種潮流,技術分享成了每個人都想做的事情,我稱之為:技術爆炸的時代

經歷

我近兩年很煩惱:如何才能讓前後端更加優雅的通訊?

曾經使用多種後端模板引擎直到完全摒棄,後到 node 做代理、渲染 + grunt 進行數處理,之後逐漸使用

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

這樣如果不得不用 NODE 也只會成為 Rest 中的一員而不用經過 NODE 做繁瑣的通訊了。這種前後分離的方式達到了滿意的效果,前端不必再管後端的事情,後端?寫好自己的服務就好了。

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

關於我

相關文章