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 樣式風格頁面。
英文原文:Full stack web development
譯文連結: http://blog.jobbole.com/45169/