Web的誕生

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

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年建立了萬維網聯(lián)盟（World Wide Web Consortium，W3C），負責Web相關標準的制定。瀏覽器的普及和W3C的推動，使得Web上可以訪問的資源逐漸豐富起來。這個時候Web的主要功能就是瀏覽器向服務器請求靜態(tài)HTML信息。95年的時候馬云在美國看到了互聯(lián)網，更準確的說他其實看到的就是Web，阿里早先做的黃頁也就是把企業(yè)信息通過進行HTML展示的Web應用。

動態(tài)內容的出現：CGI

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

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

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

分布式企業(yè)計算平臺：J2EE/.Net

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

框架橫飛的年代：MVC，ORM

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

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

回歸Web本質：REST

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

瀏覽器端的魔術：AJAX

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

前端MVC：Angular/Backbone

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

JavaScript在服務器端的逆襲：Node

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

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

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

結語

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

歡迎關注公眾號：