前端的「三化」建設{轉}

JS中國開發者大會於7月11-12日在深圳成功舉辦。該大會號稱JavaScript和Node.js領域含金量最高的技術分享大會，彙集了來自國內外20多位講師及大量JS技術愛好者，幾乎涵蓋了JS領域的全部熱點話題。會後，騰訊AlloyTeam李成熙特別撰寫了該文章，分享了他參會的所見所感。

「每18至24個月，前端都會難一倍」（注：2015深JS大會上，赫門在《前端服務化之路》主題演講中說的一句話）。難，是前端發展史偶然中的必然。但難，也造就着前端當下的繁榮。

Ryan Dah之因此選擇用Javascript做爲Node.js的基礎語言，主要是由於它是單線程的，沒有服務器I/O，沒有歷史包袱，有較低的門檻和比較良好的社區（更多內容可見：Node.js Interview: 4 Questions with Creator Ryan Dahl）。這看似是偶然，但實際上正是Javascript的這些優秀特性必然被歷史選擇，承擔推進Web技術發展的使命。

7月11-12日在深JS大會上，咱們看見的是在Node.js的推進下，前端技術大放異彩，逐漸告別「石器時代」，走向「工業時代」。而經過推進前端邁進」工業時代」的「三化「建設的力量，分別是前端的自動化、實時化與服務化。

前端自動化

前端的自動化技術已經發展了好幾年，以前涌現的grunt、gulp已幫助前端很好地解決了代碼壓縮、生成md五、合圖等功能。自動化屬於「三化」中的基礎，它的發展極大釋放了前端的手腳，讓前端有更多的時間專一於實時化與服務化的發展。大會帶來與前端相關的主題是前端的測試自動化。這相信是前端自動化比較棘手的問題。

馬逸清給咱們展現了七牛存儲在前端測試上的一些嘗試。但目前來當作果仍是至關有限的。其一，他們的作法主要是針對於JavaScript的邏輯，或者是一些基本的UI交互的測試，瀏覽器兼容性的測試、前端頁面與設計稿對齊方面的測試，基本都是空白。其二，即便他們如今能夠對JavaScript的邏輯進行測試，但比較好的切入條件是對DOM的隔離，因此，若是業務使用的是View與Model的框架，如Angular，測試是比較友好的。但若是使用到的是Web Component——這種將JavaScript，CSS和HTML模塊化地放在一塊兒的元素，則比較麻煩。

對於前端頁面與設計稿對齊的測試，咱們團隊AlloyTeam也有一些嘗試，曾開發過一個AlloyDesigner的工具。而對於瀏覽器兼容性測試，在IE流行的時代，爲了兼容IE，不少人喜歡用一個叫IE Tester的工具。但這些都只屬於測試的工具化，離自動化還有很長的距離。

另外，馬逸清還提到，寫這些測試代碼要增長約20%至30%的工做時間。這對於人手不足、業務時間急、需求迭代快的團隊，是一個很多的挑戰。並且這個幅度的時間增長，對這些團隊來講，可能有違自動化的核心理念——效率的提升。

所以，前端的自動化下一步須要關注的是，拓展測試可覆蓋的場景，以及減小額外的時間開銷。

前端服務化

所謂服務化，即便用者只需調用，而毋須知道內部的實現，說白了就是標準化（引自2015深JS大會上，赫門主題演講《前端服務化之路》的內容）。Node.js的出現使前端服務化成爲可能。Node.js開發的系統能夠做爲接入層，調用Java、C++等提供的基礎功能，處理數據庫，而後將數據吐給瀏覽器進行渲染。簡易言之，就是用Node.js代替業務邏輯這一層。最後造就的成果是，不只Java，C++能夠放棄業務邏輯，更專一於數據處理的基礎服務，並且Node.js能更專一於業務邏輯，挺供API服務給瀏覽器端的代碼進行調用。

用Node.js做爲接入層，讓前端涉足「後臺」的業務成爲可能，並且能提升開發效率，還能更方便地使用最新Web技術，如Big Pipe，WebSocket等對頁面進行優化。早前淘寶進行的先後端分離，騰訊AlloyTeam正在進行的玄武框架，都是在推進前端服務化作出努力。

除了Node.js做爲接入層提供服務之外，淘寶的赫門還提出了將前端Web Component做爲一種服務，提供給後臺使用。Javascript的AMD與CommonJS規範的訂立使Javascript的模塊化開發成爲可能，也就天然而然地推進了前端的組件化。但赫門認爲組件化的Web Component是散亂的，並無辦法一統江湖（如Angular、React這類框架），而他的理念就是但願幫助Web Component從新定位，也就是將其標準化。他在演講中舉出一個應用場景：使用React開發了一個組件，給前端直接使用React，而給後端用的時候則先用Flipper輸出成Web Component再用。赫門的這個Flipper在技術上並無太大的新意，其創新之處在於，他基於Flipper提出的服務化理念。

AlloyTeam內部其實有相似的更完善的方案—— MVVM框架Q.js及Ques組件方案。赫門的Flipper只管將代碼轉成標準化Web Component，而Ques組件方案不只在開發過程當中能夠用標準化Web Component，並且在基於構建，開發的過程當中就已經能夠將HTML，CSS及JS模塊化，更好地組織代碼。而Q.js則是一個類Vue.js的的MVVM框架，它可使用Ques組件方案，結合MVVM框架的特性，可以輕鬆駕馭一個項目的開發 Ques。

前端實時化

我不肯定用實時化這個詞來形容是否恰當，但不能否認的是，Web技術的發展使網頁得到更好的響應。目前比較流行的方案就是前端SPA（單頁應用）技術結合後臺的API服務，他們的橋樑是誕生剛滿10年的Ajax。 將來，這種趨勢會獲得強化，並且Web的體驗會愈來愈貼近應用。

會上，前Googler尤雨溪帶來的Meteor正致力於完善這件事。通常的單頁應用都以下圖，UI、客戶端數據和服務器數據相互溝通，達到狀態的更新。而Meteor則但願將客戶端數據這一層變薄甚至直接去掉，以減小性能的損耗，所以他們在客戶端引入一種叫Minimongo的數據庫驅動，它遵照DDP（分佈式數據協議），根據Meteor的說法，是一種簡易的結構化數據獲取及數據更新協議。它的特點是，能夠在客戶端直接定製想要訂閱的數據格式，服務器根據請求對訂閱者進行推送。Meteor的另外一個特點是使用了WebSocket技術。若是你打開TeleScope（使用Meteor技術的一個BBS應用），你能發現它是經過WebSocket獲取數據的實時應用。也正由於Meteor使用WebSocket這個HTML5新特性，Meteor將DDP親切地稱爲WebSocket的REST。

圖片來源： 深JS上，尤雨溪的演講PPT《Database Everywhere: a Reactive Data Architecture for JavaScript Frontends》

另外一個講者，Strikingly CTO郭達峯提到Facebook最近打算開源的一種新技術GraphQL，結合Relay和Reactive，是最新比較熱門的Web開發方案。這種方案跟Meteor相比其實有殊途同歸之妙。在通訊結構方案，這種方案遵循上圖，React負責UI狀態，Relay負責客戶端數據狀態，而GraphQL則負責服務器數據狀態。在通訊協議方案，與Meteor不一樣，它並不限於使用WebSocket，它其實更着眼於解決REST的問題。GraphQL在服務器端發佈一個類型系統，Relay經過客戶端發送一些比較結構化的查詢請求來獲取數據，以下圖。這套解決方案簡化了服務器端，以統一的GraphQL接口提供給Relay這一層，Relay會自動獲取數據並統一進行數據變動的處理，使數據獲取和處理更加高效。

圖片來源：深JS上，郭達峯的演講PPT《GraphQL and Relay》

在實時化應用方面，業界前10年（今年是Ajax誕生10週年）的發展致力於前端的交互與設計方面的優化，例如Ajax的誕生，Angular、React一類框架使單頁應用更爲普及。又如AlloyTeam的AlloyKit離線包系統，使HybridApp體驗更爲完美。而看此次大會，站在10年這個分水嶺上發表的演講，像Facebook這樣的巨頭和Meteor這樣的創新型公司正開始着眼於使先後端的數據通訊更快更好。

結語

前端的自動化、服務化和實時化是前端開發中正在發生的變化，是一系列深入的變革。這些變革使前端的能力更加豐富、創造的應用更加完美。在深圳舉辦的此次中國Javascript大會上的講座，都至關精彩，有意無心地反應出業界的這些變化。但願下一屆的大會能更加國際化，爲咱們帶來更多的技術乾貨。（責編：陳秋歌）

做者：李成熙，騰訊AlloyTeam前端工程師，代碼足跡遍佈北京、深圳、香港、悉尼。關注各類先後端技術，熱愛技術分享。