Web開發技術發展歷史

Web的誕生

        提到Web,不得不提一個詞就是“互聯網”。Web是World Wide Web的簡稱,中文譯爲萬維網。“萬維網”和我們經常說的“互聯網”是兩個聯繫極其緊密但卻不盡相同的概念。今天“互聯網”三個字已經承載了太多的內涵,提到互聯網,我們通常想到的一種戰略思維,或者是一種顛覆傳統的商業模式。拋開那些紛繁凌亂的商業化概念,迴歸技術本身,互聯網就是指通過TCP/IP協議族互相連接在一起的計算機網絡。而Web是運行在互聯網上的一個超大規模的分佈式系統。Web設計初衷是一個靜態信息資源發佈媒介,通過超文本標記語言(HTML)描述信息資源,通過統一資源標識符(URI)定位信息資源,通過超文本轉移協議(HTTP)請求信息資源。HTML、URL和HTTP三個規範構成了Web的核心體系結構,是支撐着Web運行的基石。用通俗的一點的話來說,客戶端(一般爲瀏覽器)通過URL找到網站(如www.google.com),發出HTTP請求,服務器收到請求後返回HTML頁面。可見,Web是基於TCP/IP協議的,TCP/IP協議把計算機連接在一起,而Web在這個協議族之上,進一步將計算機的信息資源連接在一起,形成我們說的萬維網。大家開發的Web應用本質上就是可以提供信息或者功能的Web資源,成爲Web這個全球超大規模分佈式系統中的一部分。在技術層面進一步理解Web和互聯網,建議找一本計算機網絡的書去看看,瞭解一下計算機網絡的分層結構和發展歷史。

        1991年8月6日,Tim Berners Lee在alt.hypertext新聞組貼出了一份關於World Wide Web的簡單摘要,標誌了Web頁面在Internet上的首次登場。最早Web主要被一幫科學家們用來共享和傳遞信息,全世界的Web服務器也就幾十臺。第一個Web瀏覽器是Berners Lee在NeXT機器上實現,也只能跑在NeXT機器上,蘋果和喬布斯的粉絲對NeXT的歷史肯定耳熟能詳。真正使得Web開始流行起來的是Mosaic瀏覽器,這便是曾經大名鼎鼎的Netscape Navigator的前身。Berners Lee在1993年建立了萬維網聯盟(World Wide Web Consortium,W3C),負責Web相關標準的制定。瀏覽器的普及和W3C的推動,使得Web上可以訪問的資源逐漸豐富起來。這個時候Web的主要功能就是瀏覽器向服務器請求靜態HTML信息。95年的時候馬雲在美國看到了互聯網,更準確的說他其實看到的就是Web,阿里早先做的黃頁也就是把企業信息通過進行HTML展示的Web應用。

Static-Page

動態內容的出現:CGI

        最初在瀏覽器中主要展現的是靜態的文本或圖像信息,GIF圖片則第一次爲HTML頁面引入了動態元素。不過人們已經不僅僅滿足於訪問放在Web服務器上的靜態文件,1993年CGI(Common Gateway Interface)出現了,Web上的動態信息服務開始蓬勃興起。CGI定義了Web服務器與外部應用程序之間的通信接口標準,因此Web服務器可以通過CGI執行外部程序,讓外部程序根據Web請求內容生成動態的內容。Perl因爲跨操作系統和易於修改的特性成爲CGI的主要編寫語言。當然,CGI可以用任何支持標準輸入輸出和環境變量的語言編寫,比如Shell腳本,C/C++語言,只要符合接口標準即可。比如你用C語言編寫CGI程序,你把希望返回的HTML內容通過printf輸出就可以發送給Web服務器,進而返回給用戶。

CGI

Web編程腳本語言:PHP/ASP/JSP

        這個時候我們已經可以在Web上提供動態功能了,比如網站訪問的計數,表單的處理。CGI對每個請求都會啓動一個進程來處理,因此性能上的擴展性不高。另外,想象一下用在Perl和C語言中的程序中去輸出一大堆複雜的HTML字符串,是不是有點蛋疼,可讀性和維護性是個大問題。爲了處理更復雜的應用,一種方法是把HTML返回中固定的部分存起來(我們稱之爲模版),把動態的部分標記出來,Web請求處理的時候,你的程序先生成那部分動態的內容,再把模版讀入進來,把動態內容填充進去,形成最終返回。舉個例子,搜索一個關鍵詞,搜索引擎的Web服務器可以先從後臺索引服務器裏拿到數據,然後把這些數據填充到返回結果的HTML模版中,返回給瀏覽器。但是這件事情自己來做顯然太繁瑣而且是重複勞動。於是1994年的時候,PHP誕生了,PHP可以把程序(動態內容)嵌入到HTML(模版)中去執行,不僅能更好的組織Web應用的內容,而且執行效率比CGI還更高。之後96年出現的ASP和98年出現的JSP本質上也都可以看成是一種支持某種腳本語言編程(分別是VB和Java)的模版引擎。96年W3C發佈了CSS1.0規範。CSS允許開發者用外聯的樣式表來取代難以維護的內嵌樣式,而不需要逐個去修改HTML元素,這讓HTML頁面更加容易創建和維護。此時,有了這些腳本語言,搭配上後端的數據庫技術,Web更是開始大殺四方了,像電子商務這樣的應用系統也可以通過Web技術來構建。Web已經從一個靜態資源分享媒介真正變爲了一個分佈式的計算平臺了。反過來看,你也應該知道,不是隻有當今這些流行腳本語言可以寫Web應用,C語言一樣可以做這件事情。前面舉的搜索引擎通過C語言來獲取數據和渲染Web頁面的例子在追求極致訪問速度的互聯網公司是非常常見的,但是腳本語言在開發效率上更勝一籌。

PHP

分佈式企業計算平臺:J2EE/.Net

        Web開始廣泛用於構建大型應用時,在分佈式、安全性、事務性等方面的要求催生了J2EE(現在已更名爲Java EE)平臺在1999年的誕生,從那時開始爲企業應用提供支撐平臺的各種應用服務器也開始大行其道。Java Servlet、Java Server Pages (JSP)和Enterprise Java Bean (EJB )是Java EE中的核心規範,Servlet和JSP是運行在服務器端的Web組件,EJB運行在服務器端的業務組件,是一種分佈式組件技術。2000年隨之而來的.net平臺,其ASP.net構件化的Web開發方式以及Visual Stidio.net開發環境的強大支持,大大降低了開發企業應用的複雜度。ASP.Net第一次讓程序員可以像拖拽組件來創建Windows Form程序那樣來組件化地創建Web頁面,Java平臺後來出現的JSF也承襲了這一思想。兩大平臺在相互競爭和模仿中不斷向前發展。

J2EE

框架橫飛的年代:MVC,ORM

        兩大平臺誕生之後,組件化編程技術盛極一時,Web技術的發展開始了一段框架橫飛的年代,各種輔助Web開發的技術框架層出不窮。雖然腳本語言大大提高了應用開發效率,但是試想一個複雜的大型Web應用,訪問各種功能的URL地址紛繁複雜,涉及到的Web頁面多種多樣,同時還管理着大量的後臺數據,因此我們需要在架構層面上解決維護性和擴展性等問題。這個時候,MVC的概念被引入到Web開發中來了。2004年出現的Struts就是當時非常流行的Java Web開發的MVC框架。MVC早在1978年就作爲Smalltalk的一種設計模式被提出來了,應用到Web應用上,模型Model用於封裝與業務邏輯相關的數據和數據處理方法,視圖View是數據的HTML展現,控制器Controller負責響應請求,協調Model和View。Model,View和Controller的分開,是一種典型的關注點分離的思想,不僅使得代碼複用性和組織性更好,使得Web應用的配置性和靈活性更好。這是Spring MVC的示意圖,典型的MVC架構。

Spring-MVC

        此外,數據訪問也逐漸通過面向對象的方式來替代直接的SQL訪問,出現了ORM(Object Relation Mapping)的概念,2001年出現的Hibernate就是其中的佼佼者,已經成爲Java持久層的規範JPA的主要參考和實現。更多的全棧框架開始出現,比如2003年出現的Java開發框架Spring,同時更多的動態語言也被加入到Web編程語言的陣營中,2004年出現的Ruby開發框架Rails,2005出現的Python開發框架Django,都提供了全棧開發框架,或者自身提供Web開發的各種組件,或者可以方便的集成各種組件。比如Spring基於IoC和AOP思想可以方便得整合出全套Web開發組件,SSH(Struts+Spring+Hibernate)一度成爲Java Web開發的標配。值得一提的時Rails這個MVC框架,26歲的丹麥大神David Heinemeier Hansson在開發著名項目管理軟件BaseCamp的過程中形成,Ruby語言本身在快速開發上的優勢,加上Rails諸如崇尚DRY(Don't)Repeat Yourself)原則, 約定優於配置,擁抱REST等特性,使其迅速成爲一個極其流行的Web開發框架。

MVC

迴歸Web本質:REST

        注意,看到這裏的時候,你會發現Web開發的重點已經不在於HTTP/HTML/URL這樣的Web基礎架構了,而是各種平臺下的各種框架和組件技術(MVC/ORM/分佈式組件技術等等)。所以今天很多人可能會用一個MVC框架構建Web網站,但是可能並不瞭解Web本身。2000年的時候,Roy Fielding在他的博士論文中從構架風格的角度來剖析了Web本身,將Web內在的設計原則和思路系統得論述出來。Roy Fielding是HTTP協議的主要設計者,也是Apache服務器項目的聯合創始人,他的這篇博士論文提出來的REST(Representation State Transformation)也成爲一種流行的Web架構風格。REST鼓勵基於URL來組織系統功能,充分利用HTTP本身的語義,而不是僅僅將HTTP作爲一種遠程數據傳輸協議。Web應用的開發應該回歸Web的本質特徵。Rails在發展過程中也完全擁抱REST,成爲REST的堅定支持者。有些人認爲REST和MVC是兩種對立的風格,其實不盡然,兩者是互爲補充的,從Rails是一個全面支持REST的MVC框架這一點就可窺見。

瀏覽器端的魔術:AJAX

        Web應用同時涉及到瀏覽器端和服務器端,之前的介紹除了簡單提到了CSS規範之外,主要關注的是服務器端的技術發展。在客戶端,1995年NetScape公司設計的JavaScript被用作瀏覽器上運行腳本語言爲網頁增加動態性。微軟隨後推出類似JScript,但是缺乏統一的語言規範,使得瀏覽器兼容性成爲一個程序員的夢魘。JavaScript最終被提交到歐洲計算機製造商協會(ECMA),做爲中立的ECMA開始了標準化腳本語言之路,並將其命名爲ECMAScript。JavaScript可以響應瀏覽器端的用戶事件,檢測表單的正確性,動態修改HTML頁面結構DOM,因此可以減少與服務器端的通信開銷,並且做出很酷的頁面動態效果。​2005年出現的AJAX這個概念使得JavaScript再次大放異彩​。AJAX即“Asynchronous JavaScript and XML”(異步的JavaScript與XML技術),指的是一套綜合了多項技術的瀏覽器端網頁開發技術,可以基於JavaScript的XmlHttpRequest的用於創建交互性更強​的Web應用。AJAX是一種已有技術的mashup,多種技術組合在一起形成了其特色和優勢,早在1998年就已經開始有人使用。Google在地圖和Gmail等產品中對這項技術的深入應用,以及AJAX這個吸引眼球的名字的提出,使其正式站在了聚光燈下,開始吸引無數人的目光。我們知道Web應用中用戶提交表單時就向Web服務器發送一個請求,服務器接收並處理傳來的表單,並返回一個新的網頁。而前後兩個頁面中的往往大部分HTML代碼是一樣的,每次都返回整個頁面內容是一種帶寬資源的浪費。而AJAX應用僅向服務器發送並取回必須的數據,並在客戶端採用JavaScript處理來自服務器響應,更新頁面的局部信息。這樣不僅瀏覽器和服務器的數據交換大大減少,而且客戶端也可以更加快速地響應用戶操作。如果你用Gmail就應該知道,Gmail從來都不刷新頁面,所有的請求都是通過AJAX獲取數據進行局部更新。AJAX的出現,以及諸如EXTJS、DOJO等一些前端開發框架的出現,也使得單頁應用(Single Page Application)在這個時候流行起來。

AJAX

前端MVC:Angular/Backbone

        這種模式下,前後端的分工非常清晰,前後端的關鍵協作點是 Ajax 接口,規定好交互接口後,前後端工程師就可以根據約定,分頭開工,開發環境中通過Mock等方式進行測試,同時在特定時間節點進行前後端集成測試。但是,隨着業務功能的愈發複雜(看看現在的Gmail),這種模式本質上和JSP時代的Web開發並無本質區別,只不過是將複雜的業務邏輯從JSP文件轉移到了JavaScript文件中而已。現在,對於一個前端功能、交互複雜的SPA,JavaScript代碼很容易膨脹(超過10萬行)。很自然地,像服務端從JSP向MVC框架轉換的過程一樣,前端開發也出現了大量的MVC框架,比較典型的包括BackboneJS, AngularJS, EmberJS, KnockoutJS。總的來說,MV*框架的提出是爲了解決前端開發的複雜度,提供一套規則組織代碼、分層(MVC),通過合理的組織和分層,前端的代碼職責明確、清晰,便於開發與測試。

Frontend-MVC

JavaScript在服務器端的逆襲:Node

        各大瀏覽器的競爭,使其引擎的性能不斷提升,至今Google V8引擎的性能已經足以運行大型Javascript程序。在V8之上加以網絡、文件系統等內置模塊,形成了如今的Node.js。

        隨着Node.js的出現,JavaScript開始擁有在服務端運行的能力,它的異步本質使得Node.js在處理I/O密集型業務中優勢凸顯,而大多Web業務中I/O性能都是瓶頸。eBay、Yahoo、甚至Microsoft Azure紛紛引入Node.js以提升性能。Node.js的package每天都有幾千萬的下載量。這對前端工程師來說可是一個好消息,精通JavaScript的他們也能夠做服務端開發了!雖然現實中並不是這樣美好(服務端開發涉及的不僅僅是語言層面),但一種新的開發模式也因此興起:瀏覽器端處理展現層邏輯、而服務端Controller這一層以及相關的模板渲染、路由、數據接口以及Session/Cookie先關處理實際上交給了Nodejs來做。通過Nodejs, 意味着前後端很多代碼可以複用(例如數據驗證邏輯),在需要SEO的場景下也可以選擇服務端模板渲染。

        但另一方面,JavaScript剛被引入到服務器端開發,其生態環境還未成熟,甚至大量的常用package主版本號都是0。長期用來實現頁面邏輯,天生自由的JavaScript,在服務器端開發中,仍未形成統一的開發範型。不同開發原則和編碼風格的應用,都將對Node.js項目的性能、可維護性產生重大影響。現在而言,服務器端javascript開發究竟是魔鬼還是天使,仍取決於團隊中的開發者。

Node

結語

        Web技術依然在快速發展,Web本身的基礎規範也在不斷完善,HTML5和CSS3引入了更多激動人心的特性。回顧Web的發展歷史,從某個角度看,就是抽象層次不斷提高的一個過程,更高的抽象層次屏蔽更低層的複雜性,從而提高開發效率。每當技術發展到一定程度,出現某些侷限性的時候,就會有更優秀的技術出現來突破這些侷限性。其實這是計算機技術發展的一個普遍規律,比如高級語言的出現屏蔽了彙編語言的複雜性,幫助我們更快速的編程;數據庫技術的出現使得我們無需關心物理存儲和訪問細節,寫簡單的SQL語句就能搞定,更進一步,ORM框架使得我們通過一條語句調用一個類的一個方法就能方便就行數據操作。我們應該讓自己的技術視野具備一定的高度和廣度,看到一門技術的發展規律和發展歷程,這是一種技術修養的體現,其實跟人文修養是一樣的。同時也應該具有一定的深度,因爲我們往往站在比較高的抽象層次,比如今天你寫幾行代碼就能把數據庫創建好,增刪改查的功能也自動生成好了,但是成爲高手需要你對底層的原理機制有更透徹的理解,真正遇到問題的時候才能抽絲剝繭迎刃而解。


        本文轉自David博士關於《Web開發技術發展歷史》的文章

發佈了12 篇原創文章 · 獲贊 13 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章