前 言

✿ 簡單就是美

2014 年2 月3 日，我建立了一個新的Microsoft Word 文件，開始撰寫本書。

計畫中，這本書會包含很多方面，一些工具的使用方法，一些軟體開發的「哲學」或方法論，一些公認為比較好的程式設計實作，以及盡可能真實地有關一個Web 應用程式開發中的所有點⋯⋯從最初的簡單需求，逐步演進成部署在真實環境中、可以被所有人存取到的真實程式。

2004 年，我第一次接觸到UNIX（一個執行在PC 個人電腦上的FreeBSD），當看到一些各司其職的指令透過管線連接起來，然後流暢地處理很繁瑣的工作時，就模糊地意識到「簡單的工具組合起來，將發揮出相當大威力」。當然，在隨後更加深入的學習中，我才知道這種體會只能算是處在「野蠻和蒙昧狀態」。

但是也就是從那時候起，我就非常推崇輕量級的開發方式，包含輕量級的函數程式庫、輕量級的工具、輕量級的架構每個程式/ 模組都應該只處理自己的份內之事，僅此而已。將一個艱巨而龐大的工作劃分成小的模組，並對每個小的模組進行更精細的設計，獲得的將是一系列相互獨立、錯誤極少、更容易了解和維護的輕量級的工具集。

甚至，在最理想的情況下，這些輕量級的工具集可以應用在不同的專案中，而實際對於業務的開發則可能非常簡單，只需要將這些工作良好的工具透過某種方式組合起來即可。

簡單就是美（Simple is Beautiful），沒有人不贊同這個觀點，當我們看到簡潔的介面設計、清晰的程式介面時，無不被那種簡單性所打動、所折服。但是要做到簡單這一點絕非易事，人們常常會自然地將事情複雜化。事先將各個模組的職責完全弄清楚幾乎是不可能的，而當專案進行中，要在有發佈壓力的情況下對程式做大規模的重構也是具有很大風險的工作。

可能專案發起之初，專案的結構和程式會比較清晰簡潔。但是當有多人合作開發，或需求沒有被預期地變更，一些臨時的解決方案滲入到程式庫時，一些權宜之計也會被採納，程式庫越來越龐大，越來越難以被了解。最後的結果可能是專案的失敗，也可能是最後不得不留守多人來維護這個遺留的程式庫。

✿ 程式先行

2013 年1 月的週末，我在ThoughtWorks 西安的辦公室，如以往很多個週末一樣，享受著安靜的極大的獨立辦公室。從那時候開始，我就在為本書準備實例，我在之前長期的讀、寫技術文章的經驗中獲得的體會是：實例是最好的老師，甚至是跨越語言（甚至是自然語言）障礙的老師。作為程式設計師，你甚至可以讀懂一份用法文寫的關於如何使用Sinatra 的文章，如果作者提供了足夠清晰的實例的話。

斷斷續續地，我將專案中用到的技術實例取出來，做成足夠小巧，而又能覆蓋到足夠多特性的demo。到了5 月，我要為ThoughtWorks 的歐洲AwayDay 準備一個演講，主題即為輕量級的Web 應用程式開發。雖然這個演講由於時間關係被取消了，但是我在背後做的很多計畫和實例都固定了下來。10 月，我在印度普內做完了一期ThoughtWorks 大學的講師，難得地有了兩周的空閒時間，於是開始整理前端開發的工作流以及工具的介紹等，也產生了很多的實例。

到了12 月，以及2014 年的1 月份，我在國內的一家公司做諮詢服務，有了更多的時間和精力投入到純粹前端的開發中。由於工作本身主要是做諮詢服務，如何將一項技術極佳地發佈給團隊的成員成了最關鍵的問題。所有的概念性的知識都是清晰而簡潔的，但是這種清晰和簡潔，唯有透過實例將技術本身掌握之後，才能體會到。因此，我需要很精心地準備每一個小實例，最後我獲得了很多的實例。事後整理這些實例和心得時，我又發現這些與實際專案有一定連結的實例可以做進一步的取出，並將它們作為本書的素材。

這樣做的好處有很多：在介紹一個概念時，我無需再一次絞盡腦汁去發明一個場景來作為實例；另一方面，在介紹一項新技術時，Hello World（換言之，淺嘗即止）等級的介紹只會給讀者一種錯覺：誤以為這項技術很簡單，而忽略了在實施過程中可能遇到的問題。也就是說，我希望透過實例，以及對實例的解釋，真正將這些技術實施起來，而不僅是看上去很美。

✿ 工具與方法論

我曾經觀察自己以及其他程式設計師的工作方式，特別是ThoughtWorks 聰明的程式設計師們。雖然不至於單調到千篇一律，但是這些高效的程式設計師都有或多或少的相似性。

模組化、輕量級的根本原理來自人類大腦的設計：每次只能關注一件事，某個時刻只能做好一件事。說來容易，事實上想要做到這一點是非常困難的，程式設計師需要在實作中不斷累積，不斷學習，才有可能發現簡單的力量。完成一個軟體的功能，對一個熟練的軟體開發者來說並非難事，但是要讓這個軟體足夠簡單，以適應隨後的變化，且在適應的過程中保障軟體的高品質，並不是一件容易的事情。

✿ 本書組織結構

如果粗略地劃分一下，本書可以分為三部分：第1 章至第6 章為基礎工具及架構的介紹，包含Web 架構，資料庫存取層以及一些前端的技術等；第7 章至第13 章是一些程式設計實作和Web 應用週邊的一些工具和架構的介紹，例如如何進行測試自動化，如何進行自動部署等；第14 章至第16 章是一個實際的實例，這個實例從頭到尾介紹了一個Web 應用從想法到實現，再到實際部署在一個真實的環境中的過程，其中包含了前後端開發、自動化測試、自動化部署以及雲端平台的使用。

本書的各個章節的簡要描述如下：

第1 章：介紹了一些常用的工具如Shell、編輯器、應用程式加速器等的使

用，本書的其他章節會頻繁地使用這些工具。

第2 章：介紹了Ruby 下的Web 開發函數庫Rack 的原理、Sinatra 架構的使用方法以及使用Grape 建立RESTFul 的API。

第3 章：所有的動態的Web 應用程式後台都有資料庫持久層，如何將物件導向的世界和針對關係的資料庫連接起來是每個Web 架構都需要面對的主題。

這一章討論ActiveRecord 及DataMapper 的使用方法。

第4 章：介紹前端的模組化架構Require.js、用戶端的MVC 架構Backbone.js 以及Angular.js。

第5 章：詳細討論CSS 架構，包含Foundation 及Bootstrap，討論了兩個架構的版面配置方式、常用的元件等。

第6 章：隨著前端越來越重要，JavaScript 程式在專案中佔用的比例越來越高，相關的測試也越來越重要，這裡討論了前端的測試架構Jasmine 和Mocha的基本用法。

第7 章：前端開發的形式已不是用編輯器簡單地編輯幾個檔案就可以了，現在的前端開發已經有了完整的工作流：相依管理，單元測試，合併並壓縮JS/CSS，動態載入等等。這一章討論現代的前端開發方式。

第8 章：透過一個實例來介紹如何撰寫更容易維護、更容易擴充的前端程式，本章使用兩種不同的開發想法來撰寫同一個實例，以便讀者更進一步地了解可維護性。

第9 章：介紹如何減少重複工作，將常見的動作自動化起來。這一章討論

Ruby 和JavaScript 中的建置工具的使用方法。

第10 章：持續整合早已不是一個新的概念，事實上越來越多的專案都在使用持續整合伺服器來保障不同團隊的工作可以儘早整合，進一步減少風險，加快發佈的速度。持續整合已經成為開發專案時的標準設定。這一章討論了Jenkins 伺服器，以及使用公開的Travis、Snap 等持續整合服務。

第11 章：一個最容易出錯的地方是混淆不同類型的測試，很多初學者會不自覺地進行整合性質的測試，而忽略了更重要的單元測試；或強調單元測試，卻漏掉了整合測試。

第12 章：我們注重於如何在本機架設環境來完成自動化，我們使用Chef 來自動化設定環境，這樣當伺服器環境發生故障之後，我們可以在數分鐘之內就自動地設定好環境。

第13 章：使用Heroku 的雲端服務可以讓我們快速地將應用程式在幾分鐘之內發佈到網際網路上，這樣所有的人都可以存取我們的應用程式，使用我們的服務。這在原型開發，快速反覆運算中非常有用。

第14 章：從這一章開始，我們開始一個實際的應用程式「奇葩」的開發。使用Bootstrap、Angular.js 進行前端的開發。

第15 章： 繼續「奇葩」的開發， 我們使用ActiveRecord 和Sinatra 作為後端，並介紹如何進行測試。

第16 章：將前兩章的開發結果進行整合，並發佈到Heroku 平台上，同時介紹如何使用亞馬遜的S3 儲存服務，以及如何將S3 服務於Heorku 上的應用整合。

附錄A：描述Web 應用程式運行原理，HTTP 協定本身是獨立於實際的業務應用的，各個後台架構都使用了不同的方式來和HTTP 伺服器整合。

附錄B：描述在AngularJS 中如何進行測試，涵蓋AngularJS 中的控制器、指令以及服務的測試方式。

前 言

✿ 簡單就是美

2014 年2 月3 日，我建立了一個新的Microsoft Word 文件，開始撰寫本書。

計畫中，這本書會包含很多方面，一些工具的使用方法，一些軟體開發的「哲學」或方法論，一些公認為比較好的程式設計實作，以及盡可能真實地有關一個Web 應用程式開發中的所有點⋯⋯從最初的簡單需求，逐步演進成部署在真實環境中、可以被所有人存取到的真實程式。

2004 年，我第一次接觸到UNIX（一個執行在PC 個人電腦上的FreeBSD），當看到一些各司其職的指令透過管線連接起來，然後流暢地處理很繁瑣的工作時，就模糊地意識到「簡單的工具組...

前言
第1 章 環境設定與工具準備
1.1 Shell
1.2 管線
1.3 幾個常用指令
1.4 編輯器
1.5 程式啟動器
1.6 關於Windows
第2 章Web 應用伺服器
2.1 Rack
2.2 Sinatra
2.3 Grape
第3 章 資料庫存取層
3.1 資料庫的存取
3.2 資料庫結構（schema）的修改
3.3 ActiveRecord
3.4 DataMapper
第4 章 用戶端架構
4.1 豐富型使用者端
4.2 Backbone.js 簡介
4.3 Angular.js
第5 章 CSS 架構簡介
5.1 Foundation 簡介
5.2 BootStrap 簡介
第6 章 用戶端測試架構
6.1 Jasmine 簡介
6.2 Mocha
第7 章 現代的前端開發方式
7.1 Karma 簡介
7.2 前端相依管理
7.3 架設專案
7.4 測試驅動開發
7.5 實例Todoify
第8 章 撰寫更容易維護的JavaScript 程式
8.1 應用實例
8.2 重構：更容易測試的程式
8.3 重點分離：另一種實現方式
第9 章 本機建置
9.1 Ruby 中的建置
9.2 JavaScript 中的建置
第10 章 持續整合
10.1 環境架設
10.2 持續整合伺服器
10.3 與Github 整合
第11 章 單元測試與整合測試
11.1 RSpec 單元測試
11.2 整合測試工具Selenium
11.3 架設Selenium 獨立環境
第12 章 環境架設的自動化
12.1 自動化工具Chef
12.2 安裝nginx 伺服器
第13 章 應用程式發佈
13.1 使用Heroku 發佈應用程式
13.2 發佈到虛擬機器環境
13.3 伺服器典型設定
第14 章 範例：植物世界（前端）
14.1 線框圖
14.2 搜索結果頁面
14.3 詳細資訊頁面
14.4 加入JavaScript
第15 章範例：植物世界（後台）
15.1 第一個重疊過程
15.2 發佈到Heroku
15.3 更進一步
第16 章 範例：植物世界（整合）
16.1 發佈
16.2 增加圖片
16.3 新的問題
16.4 檔案儲存
Appendix A Web 運行原理
Appendix B Angular.js 的測試

前言
第1 章 環境設定與工具準備
1.1 Shell
1.2 管線
1.3 幾個常用指令
1.4 編輯器
1.5 程式啟動器
1.6 關於Windows
第2 章Web 應用伺服器
2.1 Rack
2.2 Sinatra
2.3 Grape
第3 章 資料庫存取層
3.1 資料庫的存取
3.2 資料庫結構（schema）的修改
3.3 ActiveRecord
3.4 DataMapper
第4 章 用戶端架構
4.1 豐富型使用者端
4.2 Backbone.js 簡介
4.3 Angular.js
第5 章 CSS 架構簡介
5.1 Foundation 簡介
5.2 BootStrap 簡介
第6 章 用戶端測試架構
6.1 Jasmine 簡介
6.2 Mocha
第7 章 現代的前端開發方式
...