Web開發的發展史
英文原文: Full stack web development
導讀:Arunr 把過去 15 年以來,Web 開發從最初的純 HTML 到 CGI、PHP\JSP\ASP、Ajax、Rails、NodeJS 這個過程簡要地進行了介紹。Arunr 計劃把這個作為一個大綱,接下來把每一部分詳細地寫點東西。如果你想了解 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 樣式風格頁面。
翻譯: 伯樂在線 - 蟈蟈
譯文鏈接: http://blog.jobbole.com/45169/