Web應用程序開發演變史
在接下來的幾個月時間里,我打算寫一系列關于完整web開發的文章。這第一篇文章雖然有所粗略,但也能夠充分概括了在之前15年或者更久的時間里web應用程序如何進行演變。并且最后我會囊括下這段時間內所寫的相關技術。
在過去的美好日子里,我們使用的是簡單的web頁面(包括動態gif圖片!)。作為精美設計的典范,蘋果有著這樣的一個網站:
在那時,Web開發還比較簡單,開發者經常會去操作web服務器(主要還是他自己的機器),并且他會寫一些HTML頁面放到服務器指定的文件夾(/www)下。這些HTML頁面,就在瀏覽器請求頁面時使用。
問題就出現了,你只能獲取到靜態內容。倘若你想讓訪問者看到有多少其他訪問者訪問了這個網站呢(還記得那些統計流量的旋轉圖片嗎?!),或者倘若你 想讓訪問者去填寫這樣一個表單,包含有姓名和郵件地址呢?于此就轉向了CGI和Perl腳本,在web服務器端運行一段短小的代碼,并能與文件系統或者數 據庫進行交互。
當時組織CGI/Perl這樣的腳本代碼太混亂了。CGI伸縮性不是太好(經常是為每個請求分配一個新的進程),也不太安全(直接使用文件系統或者 環境變量),同時也沒提供一種結構化的方式去構造動態應用程序。幾年來一直很困惑,直到大約2005年左右,出現了Java Server Pages(JSP),微軟的ASP,以及PHP!我喜歡把當時的參考架構比作成IIS和ASP.NET,你可以用Visual Studio快速構建一個可伸縮并且安全的應用程序。
直到當時,web服務器多半會返回整個頁面或者文檔,但AJAX(2005)的出現,讓事情變得很有意思。AJAX允許客戶端的 JavaScript腳本為局部頁面提供請求服務,然后可以在無需回到服務器情況下動態刷新部分頁面,也就是更新瀏覽器中的document對象,通常稱 作DOM,或者文檔對象模型。
雖然從服務器端返回的仍然是HTML,但瀏覽器上的代碼能把這HTML片段內嵌到當前頁面中。也就是說web應用的響應可以更快,這時我們真正用 web應用取代了web頁面。谷歌的GMail和谷歌地圖都是當時AJAX的殺手級產品。隨后用AJAX局部刷新就如雨后春筍般出現。
在隨后的幾年時間里,AJAX成為了焦點,但在服務器端仍然使用著舊有的技術。大概在2007年,37signals公司公開其成員–Ruby on Rails。那個基于Ruby on Rails 5分鐘構建博客的演示完全征服了全世界的開發者。一夜之間,所以談論的焦點都是關于Rails!Rails的不同之處在于使用規定的方式去設計你的web 應用程序,運用一種已經廣泛在桌面應用開發,但未被搬到web應用上的開發模式。這種模式就叫做模式(數據)-視圖(模板)-控制器(業務邏輯)。 Rails強調,“這事就該這么做”,并且通過許多插件讓構建web應用再一次更加健全。
在2007到2010年期間,涌現了3種開發潮流:
第一個是智能手機和移動應用潮流。通常情況下,許多應用程序同時有web和移動應用兩種版本。盡管如此,服務端仍然返回的是HTML頁面,而不是其它移動應用可以識別。因此,你需要返回的是結構化數據來取代HTML。
第二個開發潮流是jQuery。這是一個非常流行的JavaScript庫,能夠很容易構建動態、美妙的web應用,甚至是AJAX!
第三個潮流是Node.js的發布。這是第一次能讓你用JavaScript開發高性能的服務端程序,進而可能結束“客戶端開發者”要知道HTML/JavaScript,“服務端開發者”要知道.NET/C#/Ruby這樣的噩夢。
盡管這是一個不錯的架構,但我們可以重用一些在客戶端的收獲去簡化那些曾經發生在像客戶端意大利面似的jQuery代碼。和Rails精神類似,我 們需要用一種規定的方式從服務端獲取到數據,再對客戶端的HTML頁面進行包裝。因此,在接下來的2年時間里,業界出現了許多用于簡化客戶端開發的框架, 諸如Backbone,Ember,Derby和Meteor,當然也包括我的最愛,AngularJS。
因此,這就是我們看到的今天,而我后面要講到的參考架構是這樣的,mongodb作為數據庫服務器,node/express作為web應用服務 器,客戶端使用AngularJS,同時也使用Bootstrap樣式風格。我發現這種架構允許我能夠快速構建web服務以及基于AngularJS的客 戶端接口,甚至和其它的服務,如PhoneGap或者其它原生移動開發工具一樣,進行移動應用的開發。
在接下來的幾個星期里,我會發表一些文章來說明這些涉及到的組件,包括:MongoDB,Node/ExpressJS,JSON和REST接口,AngularJS,Karma-mocha測試和Bootstrap樣式風格頁面。