這個題目有點大, 因為對於開發富應用和SPA(單頁面應用, Single Page Application), 一個前端工程師需要掌握太多太多知識和工具了. 這裡只說我自己最近半年在摸索和研究前端富應用和SPA相關技術的過程中的一些經驗和總結.

選擇合適的開發IDE

一個好的IDE可以讓你敲鍵盤的次數大大減少, 我個人推薦使用Sublime Text, 速遞快, 功能強大, 可擴充, 這也是我目前正在使用的IDE.

選擇合適的開發語言

呃, 難道還有別的選擇? 開發前端應用不都是用Javascript麼? 對的, 因為現在有了CoffeeScript. 相比於Javascript的類C++/Java靜態語言語法, CoffeeScript提供了更貼近自然語言的動態語言語法, 更少的程式碼, 更少的語法漏洞, 更好的程式碼可讀性.

選擇合適的Javascript前端MVC框架

Javascript 程式很難除錯, 特別是當代碼行數超過一定量級之後. 為了讓程式邏輯更有條例, 與伺服器端的web框架類似, 前端也有很多Javascript庫或者框架提供了MVC或類MVC架構. 按照MVC架構進行設計, 可以很清晰地將Module(資料模組), View(頁面展示), Controller(使用者行為響應控制)進行分離. 對於小型web應用來說, 這可能無關緊要, 甚至MVC帶來的弊端會掩蓋它的優點, 但對於一個超過上千行的web應用來說, 一個清晰的程式架構可以極大地減少模組間的耦合性.

模組定義與載入管理

Javascript 語言自身不提供程式碼的載入管理, 當JavaScript程式碼分成多個模組, 處於不同檔案中時, 如何管理模組之間的依賴關係以及檔案的載入順序, 就會變成一個非常棘手的事情. 並且JavaScript自身不提供名字空間的管理, 不同模組, 不同的JavaScript庫之間的都有可能出現命名衝突.

目前前端使用最廣泛的前端AMD庫應當是RequireJS.當然還有淘寶玉伯的Seajs.

程式碼質量靜態檢查

Javascript程式碼的書寫格式非常自由, 甚至帶著錯都能執行下去, 這也是為什麼JavaScript程式碼很難除錯的原因之一.

進行程式碼質量的靜態檢查可以極大減少由於語法漏洞或者拼寫疏忽帶來的這些額外錯誤, 推薦使用

單元測試

單元測試是一個非常大的話題, 我沒有辦法用簡短的一段話或者一篇文章將單元測試涉及到的方法和工具都介紹清楚.

技術大牛們都不願意做單元測試, 當然, 很少有軟體工程師願意承認自己不是技術大牛:). 因為人員, 時間或者其他各種因素, 很多軟體工程師們都願意首先捨棄單元測試, 去保證功能的實現.

這 裡我不想挑起爭論, 但我的經驗的確是, 從個人角度上看, 單元測試能很大加深程式設計師對程式碼的理解程度, 加速個人能力的提升; 從專案角度上看, 技術經理需要權衡當前的開發, 迴歸測試和後繼的程式碼維護成本之間的平衡, 然後決定是否實施單元測試, 以及多少程度的單元測試, 這是技術經理的職責.

在前端web應用中比較常用的單元測試框架包括：

Mock庫可以採用SinonJS. 如果願意, 還可以採用Should, Expect, Chai等Assertion庫.

另外, 如果希望在持續整合中加入對測試的支援, 還需要加入Non-GUI瀏覽器的支援, 目前採用比較多的方案是:

Minification & Concatenation

為了提高web應用的載入速度, 必須對Javascript檔案, CSS檔案進行Minification和Concatenation, 根據經驗, 優化後的程式碼載入速度比優化前的要提高數倍.

常用的工具包括:

大部分開源的JavaScript構建工具都集成了對這些工具的支援, 因此沒必要在這些工具上面花太多精力. 使用了RequireJS的應用, 可以直接使用其自帶的r.js進行程式碼優化.

構建和部署

任 何web應用工程都需要構建和部署, 一個自動化的構建和部署指令碼能讓程式設計人員更加專注於應用本身, 而不被繁瑣的流程所困擾. 自動化的構建和部署是一個web前端專案最基本的要求, 當專案開始的時候, 專案組最好能在頭兩個迭代週期就完成自動化的構建和部署指令碼的開發.

目前使用比較多的構建工具有:

• jake
• CoffeeScript自帶的cake
• make
• grunt

我個人比較傾向於grunt, 如果工程中用了RequireJS, bbb(grunt擴充套件)是更好的選擇.

在網路地址本例子工程中, 我使用grunt/bbb開發了構建和部署指令碼, 可以完成:

• 檔案的複製和清除
• CoffeeScript的編譯
• JSHint
• Minification & Concatenation
• 在Phantom環境下執行Jasmine單元測試
• Debug/Release Web伺服器

感興趣的人可以去看看上述例子工程的grunt.js配置檔案, 也可以將這個例子工程作為web前端專案的模板.

下面的幾點感觸和具體的技術細節無關, 但是我個人覺得, 對於每個想以程式設計作為自己職業規劃的程式設計師來說, 這幾點尤其重要.

瞭解業界的技術發展動態

軟體技術發展很快, 對於熱愛技術的程式設計師來說, 必須經常更新自己的知識, 才能保證自己不會落伍. 因此, 每天都需要花一定時間去閱讀, 瞭解行業最新的技術發展動態.

我的習慣是用Google Reader訂閱幾個經常更新的前端技術相關的RSS:

另外, 有些郵件週報也很不錯:

多閱讀開原始碼, 最好參與感興趣的開源專案

GitHub是一個非常有用的站點, 在上面能看到那些大牛們是怎麼討論問題, 如何思考問題, 以及如何實現或者修正的. 閱讀開源專案的文件能瞭解概要, 如果需要了解細節, 最有效的方式是閱讀程式碼, 特別是看針對問題的提交記錄.

善於利用網際網路工具

遇到問題的時候, 要知道如何去尋找問題的答案

StackOverflow是一個非常有名的程式設計問答站點, 我所遇到的大部分程式設計問題都能在上面找到答案, 即便沒有答案, 也能找到其他人對這個問題的考慮. 另外, 別忘了強大的Google Search. 如果Google被牆, 可以考慮用Bing. 我不喜歡百度, 因為其搜尋的命中率太低了.

善於使用雲端的工具

選擇合適的工具對於軟體專案來說, 可以極大地提高工作效率, 起到事半功倍的效果. 好的商業軟體大多需要支付鉅額的費用, 並且搞不好還水土不服. 為了控制成本, 可以多嘗試嘗試雲端的工具. 在知乎上有關於這些工具的討論, 大家有興趣可以去看看別人怎麼做的.

多參與技術社群活動, 學會分享

多參加技術社群的活動, 包括線上的技術解答, 以及線下的技術講座等. 分享越多, 獲得也就越多.