Web前端技術歷經的洗禮和蛻變

隨着互聯網產業的爆炸式增加，與之伴生的Web前端技術也在歷經洗禮和蛻變。尤爲是近幾年隨着移動終端的發展，愈來愈多的人開始投身或轉行至新領域，這更爲當今的IT產業注入了新的活力。儘管Web前端技術誕生至今時日並不長，但隨着Web技術的逐漸深刻，從此將會在如下幾方面發力。

1.Web移動終端開發。

2.JavaScript的兄弟們。

3.百花齊放的類庫和框架。

4.工程化的Web前端開發規範。

Web移動終端開發

PhoneGap：一個開源的開發框架，使用HTML、CSS和JavaScript來構建跨平臺的移動應用程序。它使開發者可以利用iPhone、Android、Palm、Symbian、BlackBerry、WindowsPhone和Bada等智能手機的核心功能，包括地理定位、加速器、聯繫人、聲音和振動等。除了在本地編譯應用以外，還可使用PhoneGap提供的雲端Build工具進行應用編譯。也就是說，只須要將用HTML5寫好的應用上傳到PhoneGap的雲端服務器，PhoneGapBuild便可將其編譯成適合不一樣平臺的應用。

前端知識圖譜

SenchaTouch：說到這裏，就不得不提一些面向移動端的WebUI庫，畢竟PhoneGap是一個工具，要想基於Web技術構建完整的App，必須選擇一些適用的移動UI庫。而最值得一提的是SenchaTouch，它可讓WebApp看起來像NativeApp。美麗的用戶界面組件和豐富的數據管理，所有基於最新的HTML5和CSS3的Web標準，全面兼容Android和iOS設備。PhoneGap昭示着一種開發趨勢，即App也可使用Web前端技術來完成。而做爲開發者最經常使用的UI工具箱，SenchaTouch又進一步加速了這種趨勢，目前在淘寶已有大量的項目採用這種思路來搭建，即在內置應用的外殼加上自定義的基於移動Web的UI庫。相信在將來這種模式必會愈來愈流行。

Sencha Touch：說到這裏，就不得不提一些面向移動端的WebUI庫，畢竟PhoneGap是一個工具，要想基於Web技術構建完整的App，必須選擇一些適 用的移動UI庫。而最值得一提的是Sencha Touch，它可讓Web App看起來像Native App。美麗的用戶界面組件和豐富的數據管理，所有基於最新的HTML5和CSS3的Web標準，全面兼容Android和iOS設備。PhoneGap 昭示着一種開發趨勢，即App也可使用Web前端技術來完成。而做爲開發者最經常使用的UI工具箱，Sencha Touch又進一步加速了這種趨勢，目前在淘寶已有大量的項目採用這種思路來搭建，即在內置應用的外殼加上自定義的基於移動Web的UI庫。相信在將來這 種模式必會愈來愈流行。

Media Queries：在CSS2時代，若是你曾經爲網站設計過打印版CSS，那麼就會明白CSS3 Media Queries的做用。不過，CSS3的Media Queries比CSS2的Media Queries能夠獲取這些數據：瀏覽器窗口的寬和高、設備的寬和高、設備的手持方向（橫向仍是豎向）和分辨率等。也就是說，Media Queries提供了一種基於不一樣的平臺寫CSS的技術。這項技術在2011年初被推廣開來，至今已很是火熱，尤爲是在Web頁面仍佔互聯網流量大多數的 今天，這種兼容技術能很快讓網站兼容移動設備，保證產品實現最快的跨平臺的兼容性和多平臺的可用性。

Zepto.js：一個專爲 Mobile WebKit瀏覽器（如Safari和Chrome）而開發的JavaScript框架。它標榜本身簡約的開發理念可以幫助開發人員簡單、快速地完成開發 交付任務。更重要的是這個JavaScript框架是超輕量級的，只有5KB。Zepto.js的語法借鑑且兼容jQuery。目前已有很多網站開始基於 Zepto.js作應用，由於在拋棄了IE瀏覽器的兼容性問題後，Web開發會變得愈來愈純粹，體積更輕巧，編碼也更加愉悅。不能否認，隨着移動終端開發 愈來愈流行，Zepto.js在將來將會有更加廣闊的應用場景和空間。

Bootstrap: Twitter推出的一個開源的用於前端開發的工具包。它由Mark Otto和Jacob Thornton合做開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範，由動態CSS語言LESS寫成，與CSS 框架Blueprint存在不少類似之處。Bootstrap一經推出便頗受歡迎，一直是GitHub上的熱門開源項目，NASA和MSNBC的 Breaking News都使用了該項目。2012年第二季度，Bootstrap發佈了2.0版，Bootstrap 2.0的一個重大改進是添加了響應設計特性，在1.0中，這是讓不少開發人員抱怨的地方。並且爲了提供更好的針對移動設備的響應式設計方 案，Bootstrap 2.0採用了更爲靈活的12欄網格佈局。此外，它還更新了一些進度欄及可定製的圖片縮略圖，並增長了一些新樣式。值得關注的是，Bootstrap是一個 很是輕量級的框架，2.0在壓縮後只有10KB。Bootstrap爲咱們的網站快速搭建提供了不錯的工具和思路，這個工具集將擁有更旺盛的生命力。

JavaScript的兄弟們

CoffeeScript是一個借鑑Ruby編寫的新編程語言，建立者JeremyAshkenas戲稱它是JavaScript的低調的小兄弟，由於CoffeeScript會將Ruby編譯成JavaScript，並且大部分結構都類似。但不一樣的是，CoffeeScript擁有更嚴格的語法。它的最大功績就是將JavaScript硬綁的C/Java語法拋棄了，改成採用相似Ruby/Python的語法。Ruby/Python原本就是深受Lisp影響的，與JavaScript算是同門師兄，它們的語法通過了實踐考驗，很是適合函數式編程。這種優雅的語言獨具魅力，即將面世的2013版的淘寶首頁即採用了CoffeeScript實現。

TypeScript是微軟開發的JavaScript的超集，TypeScript兼容JavaScript，能夠載入JavaScript代碼而後運行。與JavaScript相比，TypeScript進步的地方在於：加入註釋，讓編譯器理解所支持的對象和函數，編譯器會移除註釋，不會增長開銷；增長一個完整的類結構，使之更像是傳統的面嚮對象語言。因爲JavaScript只是一個腳本語言，並不是用於開發大型Web應用，因此沒有提供類和模塊的概念。而TypeScript擴展了JavaScript實現了這些特性，能更好地支持大規模JavaScript應用開發，吸引了不開發者。但要注意，雖然TypeScript有微軟作後盾看起來頗有保證，但目前提供的只是早期的預覽版本，TypeScript並不像它的網站看起來那樣精美，最終版本可能會在一年後ECMAScript6發佈會肯定，如今的版本只是個開發預覽版。所以，TypeScript從此發展如何，還須要進一步觀察。

此外，在服務器端，Node.js愈來愈流行。現在Node.js不只做爲處理高併發請求的中間層解決方案，還因其靈活的語法和豐富的底層API，愈來愈多的人開始用它來寫工具，尤爲是以前基於Ant或者Java的一些工具現在都有了Node.js的版本。

如此看來，Node.js在命令行工具領域有着更加廣闊的應用場景，甚至能夠代替Perl或者Ruby這些傳統的動態語言。在淘寶Node.js已有很是多的應用場景，例如在數據部門，Node.js被用做處理高併發場景下的容池，專門吸取高併發的請求，甚至可以保持和客戶端的長連接，而這在以前則須要花費很高昂的成本，例如Comet技術等。此外，淘寶的開源前端類庫KISSY也能夠直接運行於Node.js環境，這樣就能夠在命令行運行KISSY代碼，不少前端代碼就有機會採用自動化測試等，提升生產效率。再者，淘寶內部的開發工具鏈也已大部分採用Node.js來構建了。

百花齊放的類庫和框架

SeaJS是由支付寶前端高級技術專家王保平（玉伯）開發的一個遵循CMD規範的模塊加載框架，可用來輕鬆愉悅地加載任意JavaScript模塊和CSS模塊。SeaJS很是小巧，小巧在於其壓縮後體積只有4KB，並且接口和方法也很是少。SeaJS有兩個核心：模塊的定義和模塊的加載。SeaJS能夠加載任意JavaScript模塊和CSS模塊，能保證你在使用一個模塊時，已將所依賴的其餘模塊載入腳本運行環境中。SeaJS可讓你享受寫代碼的樂趣，不用去管那些加載的問題。畢竟如今網頁的可維護性和性能問題同樣嚴峻，體如今：文件太多，不利於維護，前端後端都同樣；HTTP請求過多，固然這個能夠經過合併解決，但若是沒有後端直接合並，那麼人工成本會很是大。用SeaJS就能很是好地解決這些問題。SeaJS遵循CMD規範，所以能夠很方便地書寫模塊。目前已經有愈來愈多的人採用CMD規範來開發項目了。

最近微軟已經正式發佈了Windows8操做系統，Windows操做系統的風格已經徹底變成了磁貼狀的MetroUI。對於微軟來講，這是一個巨大的改變，並且全部微軟的平臺包括桌面、平板、移動端及其網站都使用這個UI風格。

MetroUICSS是一個很是完整的建立Metro風格的網站框架。它自成體系，但也能夠與其餘框架一塊兒使用。使用LESS建立，而且擁有網格系統、排版樣式、表格、按鈕和圖片。同時也擁有內建的JavaScript組件，幫助你生成片狀、菜單、邊欄、進度條和提示等，是一個很是好用的框架。隨着Windows8的進一步流行，這種風格的CSS類庫必定會成爲一種趨勢。

Hype是一個小巧的工具，是MacAppStore新上架的一個HTML5創做工具，其長處是能夠在網頁上作出悅目的動畫效果，無須Flash插件。開發該應用的公司Tumult由兩個前蘋果工程師建立，並得到了YCombinator的投資。因爲公司的聯合創始人之一JonathanDeutsch曾擔任Mail.app後端的技術主管，所以他在接受PaulHontz的TheStartupFoundry訪談時，談到公司創始是爲了解決HTML5創做工具缺少的問題。能夠說，Hype是第一個可用的創做HTML5產品的可視化工具，具備里程碑式的意義。隨着硬件性能提高，HTML5的應用程序更加傾向於被工具生成，而不像傳統意義上由工程師「切」出來。所以工具化是一個方向，無論HTML5是否真的能在移動終端紮下腳跟，這種方向是值得堅持的。畢竟，HTML5的應用開發如今還處於原始社會。

iScroll.js是使用原生JavaScript編寫的一個模擬滾動效果的小類庫，不依賴於任何JavaScript框架。旨在解決移動WebKit系瀏覽器的區域滾動問題，兼容MobileSafari、Android默認瀏覽器、Safari、Chrome、Firefox5+、Opera11+、IE9+及其餘WebKit核心瀏覽器。最新版本爲iScroll4。這個小庫一問世就備受關注，由於它不只能夠在PC端完美模擬滾動效果，在移動終端裏對觸屏事件的支持也堪稱完美。

iScroll4是2011年末問世的，2012年在移動終端產品開發中大放異彩，在淘寶的諸多產品中都用到了這個JavaScript庫。iScroll是小而精的經典做品，名字也帶着蘋果範兒。但美中不足的是，只能使用ID調用。不過這個小特性不是什麼大問題，能夠經過二次封裝來解決。期待iScroll4在移動終端裏有更多精彩的表現。

前端MVC在2011年是比較火的話題，隨着愈來愈多的人開始嘗試使用諸如JavaScriptMVC和Backbone.js這些MVC類庫，更多的產品也看起來更像「軟件」而非「網頁」。但因爲前端環境的複雜性，咱們也漸漸發現「這種」MVC並不是完美，只能應用於「基於數據驅動」的場景，而對「基於事件驅動」的場景卻沒有太好的解決辦法。目前，淘寶有不少產品在嘗試使用「有限自動機」來彌補MVC在這方面的不足。所以，新場景下的MVC還須要更深刻的提煉。

工程化的Web前端開發規範

2012年，關於前端開發編碼規範的討論越來越多。國外和國內的頂尖開發者幾乎同時對編碼規範產生了很大興趣，前Yahoo!首頁首席前端工程師N.C.Zakas在他那本《高可維護的JavaScript》書中也提到規範在團隊協做過程當中的重要性。而以下這兩個方面，是值得咱們探討和深思的。

AMD與CMD規範之爭，隨着CommonJS的進一步普及，CommonJS規範在標準的模塊開發領域發揮着愈來愈重要的做用，而CommonJS在瀏覽器端的難以實現卻爲這份規範增添了一絲變數。本質上講，CommonJS是一種用於同步加載JavaScript代碼的API規範，很是簡單優雅。爲了在瀏覽器端實現這種機制，則不得不加入了一層異步回調，這即是AMD（Modules/Asynchronous-Definition）。RequireJS實現了這個規範，而Dojo也將立刻徹底支持（Dojo1.6）。規範自己很是簡單，甚至只包含了一個API。玉伯在開發SeaJS的過程當中，更多地保持了CommonJSModules規範的風格，即CMD（CommonModuleDefinition）。較之AMD，CMD沒有采用單一的API來適用於多個功能，而是根據不一樣功能定義不一樣的API。我認爲，二者在完備性上是基本一致的，但在社區理念和編程風格上有所差別，開發者能夠根據本身的偏好來選擇使用AMD仍是CMD編程風格。

Java語言編碼規範對於前端開發編程規範有很是大的影響。在Zakas的《高可維護性JavaScript》一書中提到了五種JavaScript編程規範，都和Java語言編碼規範有着相似的淵源：Crockford編程規範、jQuery核心風格指南、SproutCore編程風格指南、Google的JavaScript風格指南和Dojo編程風格指南。無論是哪一種規範，都強調了編碼風格一致的重要性，這也可看出，前端團隊開發愈來愈看重規範，JavaScript的靈活性須要某種程度的限制。

總之，經過上面的闡述，咱們能夠看到前端技術的不斷進步和推陳出新，也可以體會到項目過程的工程化，解決方案的輕量化，庫和框架的多元化，知識結構的體系化，這種趨勢在從此會變得愈來愈明顯，也昭示着前端技術的發展方向。

說到前端技術知識結構的體系化建設，這是我這些年來一直都在作的事情，在2011年也畫了一張圖來講明個人觀點——前端技術體系的建設是一項長期的任務。畢竟前端新技術新知識層出不窮，對於經典的知識結構的整理也頗有挑戰性，但這項工做終究須要有人去作，爲新入道的人指出一個大體的方向。對於前端工程師的成長問題，我也寫過一篇長文「前端開發十日談」，幫助新人們解惑。