隨著移動(dòng)時(shí)代的到來，前端面臨的挑戰(zhàn)越來越大。從產(chǎn)品角度來看，前端朝著多終端的方向發(fā)展，需要考慮 PC、Pad、Phone、TV 等各種用戶終端的交互實(shí)現(xiàn)。未來的產(chǎn)品形態(tài)，需要高性能跨終端的面向消費(fèi)者的應(yīng)用，也需要傳統(tǒng) PC 端面向企業(yè)的富應(yīng)用。向上是移動(dòng)開發(fā)，向下是企業(yè)應(yīng)用，這兩個(gè)方向都非常重要，對(duì)前端的挑戰(zhàn)則各有不同。

從技術(shù)角度來看，前端不再局限于瀏覽器端的 Web 技術(shù)。隨著 Node.js 技術(shù)的興起，前端開發(fā)開始滲透到服務(wù)器端，將服務(wù)器端的 View、Controller 等層接管過來，成為全棧（Full-stack） 開發(fā)。在全棧的模式下，前后端的分工協(xié)作更加合理高效。全棧之路究竟如何走，目前無論國(guó)內(nèi)國(guó)外，都處于起步階段，充滿誘惑與陷阱。

本屆QCon北京2014，InfoQ特別邀請(qǐng)到支付寶前端技術(shù)部負(fù)責(zé)人王保平（玉伯）來打造“移動(dòng)時(shí)代的前端”專題，關(guān)注跨終端、全棧開發(fā)以及前端工程化。

玉伯是淘寶前端類庫(kù) KISSY 的創(chuàng)始人，也是前端模塊加載器 Sea.js 的創(chuàng)始人。他在前端基礎(chǔ)技術(shù)、網(wǎng)站性能優(yōu)化、企業(yè)應(yīng)用開發(fā)等方面非?；钴S，并且還是一名非常熱心的前端布道者。在 Velocity、QCon、D2、NodeParty 等會(huì)議上積極參與。玉伯在微信上開通 WTP 公眾帳號(hào)（微信號(hào) wtp-notes），暢談技術(shù)、產(chǎn)品與自由夢(mèng)。

以下是采訪內(nèi)容。

InfoQ：大家都知道您是您作為支付寶前端開發(fā)團(tuán)隊(duì)負(fù)責(zé)人，淘寶前端類庫(kù) KISSY、前端模塊化開發(fā)框架SeaJS、前端基礎(chǔ)類庫(kù)Arale的創(chuàng)始人，不過還是請(qǐng)您重新介紹一下自己，及這三個(gè)項(xiàng)目現(xiàn)在的情況吧。

玉伯：我的情況比較簡(jiǎn)單，03年畢業(yè)，在北京漂了5年，08年到杭州加入淘寶，12年轉(zhuǎn)崗到支付寶，現(xiàn)在負(fù)責(zé)支付寶共享平臺(tái)的前端技術(shù)團(tuán)隊(duì)。

在淘寶期間，業(yè)務(wù)需求需要做一個(gè)富文本編輯器，于是有了KISSY Editor，后來做著做著就變成了一個(gè)前端基礎(chǔ)類庫(kù)KISSY，editor是其中一個(gè)組件。11年開始，KISSY的主要開發(fā)工作已移交給同事承玉?，F(xiàn)在已經(jīng)有一個(gè)專門的虛擬團(tuán)隊(duì)維護(hù)，負(fù)責(zé)人是拔赤。

2010年期間，有關(guān)注Node.js和CommonJS社區(qū)，了解到當(dāng)時(shí)的風(fēng)云變幻。強(qiáng)烈覺得模塊化開發(fā)理念不僅需要規(guī)范化、更需要扎扎實(shí)實(shí)的實(shí) 現(xiàn)，當(dāng)時(shí)有FlyScript、BravorJS、RequireJS等種種實(shí)現(xiàn)。個(gè)人不是很喜歡RequireJS的一些理念和實(shí)現(xiàn)，喜歡的 FlyScript則自我閹割了，因此萌生了自己寫一個(gè)的想法，這就是Sea.js。Sea.js已經(jīng)發(fā)展到2.x版本，在國(guó)內(nèi)使用比較廣泛，阿里、騰 訊、中航信等公司都有采用。Sea.js的核心理念是保持簡(jiǎn)單，只做該做的。目前Sea.js 3.0的規(guī)劃已經(jīng)有了雛形，會(huì)進(jìn)一步簡(jiǎn)單，包括構(gòu)建。

2012年到支付寶后，支付寶已經(jīng)有了一套前端基礎(chǔ)類庫(kù)Arale 1.1，因此我并不是Arale的創(chuàng)始人。Arale 1.1的思路與KISSY、YUI等類庫(kù)差不多，都是從底層組件做起，很辛苦很累，但效果并不太好，在可維護(hù)性、易用性等方面，自己做的dom、 event等組件，經(jīng)常不如業(yè)界已經(jīng)成熟的jQuery等類庫(kù)好用。為了解決這些痛點(diǎn)，當(dāng)時(shí)和同事商量后，就有了Arale 2的想法。Arale 2的核心是開放。開放的第一層是拿來主義，業(yè)界已經(jīng)有的成熟方案，經(jīng)過我們考察后，直接引入進(jìn)來用。拿來主義直接讓我們站在了巨人的肩膀上，并能以此做為 基礎(chǔ)，迅速構(gòu)建適合支付寶的一套UI組件庫(kù)。從狹義上講，Arale是為支付寶量身定做的，并不適合直接拿去給其他公司用。從廣義上講，Arale是構(gòu)建 前端基礎(chǔ)類庫(kù)的一種開放式方案，這種方案可以被其他公司借鑒。目前已有不少團(tuán)隊(duì)基于Arale方案構(gòu)建出了適合自己公司業(yè)務(wù)的特定類庫(kù)。Arale目前的 規(guī)劃有兩個(gè)方向：1）進(jìn)一步擁抱社區(qū)，廢棄CMD，擁抱CommonJS，Arale組件的模塊將直接與一個(gè)Node模塊無異。2）基礎(chǔ)組件的 Mobile First化，為移動(dòng)基礎(chǔ)類庫(kù)的構(gòu)建提供體系化方案和最佳實(shí)踐。

對(duì)前端開發(fā)來說，前端基礎(chǔ)類庫(kù)很重要，但從整個(gè)前端領(lǐng)域來看，類庫(kù)依舊是比較小的一塊。還有很多領(lǐng)域非常值得投入，下面有時(shí)間再說說。

InfoQ：阿里內(nèi)部團(tuán)隊(duì)眾多，能否講講支付寶前端團(tuán)隊(duì)的開發(fā)流程和特別之處？

玉伯：從前端開發(fā)來看，阿里內(nèi)部分三種類型：淘系、支付寶系、B2B系。B2B系沒親身體驗(yàn)過，略過不說。淘系和支系的區(qū)別比較明顯，簡(jiǎn)單說下。

淘系的核心業(yè)務(wù)是「導(dǎo)購(gòu)」，業(yè)務(wù)的定位使得淘系大量前端業(yè)務(wù)以前臺(tái)展現(xiàn)為主。這類業(yè)務(wù)，快是第一用戶體驗(yàn)。快不僅是頁面速度快，也包括研發(fā)交付速度要快。也會(huì)有功能交互很復(fù)雜的業(yè)務(wù)，但相對(duì)來說不是很多。

支系的核心業(yè)務(wù)是「支付」，有段時(shí)間也有「導(dǎo)支」業(yè)務(wù)，但很快成為非主流?！钢Ц丁故枪δ苄偷?，與用戶資金相關(guān)，「穩(wěn)定」、「安全」是第一用戶體驗(yàn)。當(dāng)然也求快，但在穩(wěn)定、安全面前，快經(jīng)常要讓道。支系還有兩個(gè)重點(diǎn)是金融與數(shù)據(jù)，與支付一樣偏功能性。

業(yè)務(wù)類型的不同，使得淘系、支系的技術(shù)體系、研發(fā)交付有比較大的差異性。淘寶求快，支付寶求穩(wěn)。目前支付寶也在探索更適合互聯(lián)網(wǎng)的快速輕量級(jí)研發(fā)模式，淘寶在穩(wěn)定、安全上的要求也越來越高。像是兩個(gè)極端，在互相借鑒互相靠攏，差異性應(yīng)該會(huì)長(zhǎng)期存在，但會(huì)逐步減少。

InfoQ：目前您最關(guān)注的重點(diǎn)是什么？

玉伯：目前最關(guān)注的是團(tuán)隊(duì)管理。從帶幾個(gè)人，到突然帶幾十人，壓力很大。除了自己的個(gè)人生活，最在乎的就是這幫兄弟姐妹的未來。目前團(tuán)隊(duì)缺口還很大，近期大量招聘中，職位不限于前端開發(fā)，也希望有 Node、Java、iOS、Android、交互、視覺等經(jīng)驗(yàn)的人員加入。

你瞧，又廣告了。最近晚上做夢(mèng)都在關(guān)注招聘，有個(gè)同事說我近期三句不離招聘，歡迎投遞簡(jiǎn)歷。

InfoQ：您感覺在過去一年中，前端領(lǐng)域是否發(fā)生了令人值得注意的變化？

玉伯：變化太快了，好多變化。百度的berg總結(jié)過一篇2013前端技術(shù)盤點(diǎn)，說得很全面。對(duì)支付寶來說，最大的變化有：

• 全端化。前端不再是折騰各種瀏覽器了，而是需要面對(duì)PC、Pad、Phone甚至TV等各種端。支付寶的做法很干脆實(shí)在，直接讓一批前端開發(fā)轉(zhuǎn)崗到無線部門做iOS開發(fā)。前端部門自身也需要逐步具備跨終端開發(fā)的技能。這是移動(dòng)互聯(lián)網(wǎng)帶給前端最大的沖擊，卻也是最好的禮物。

• 全棧化。Node的興起和成熟，讓前端在解決研發(fā)效率等問題上有了新思路。阿里的整個(gè)技術(shù)體系是基于Java的，前后端的職責(zé)分工一直存在 灰色地帶，特別是在支付寶，厚重的開發(fā)環(huán)境已經(jīng)對(duì)前端研發(fā)效率帶來嚴(yán)重影響。在這種情況下，如果能基于Node實(shí)現(xiàn)前后端運(yùn)行與研發(fā)過程中的清晰分離，將 會(huì)帶來研發(fā)效率上的大提升。全棧不是為了技術(shù)的全面，而是從職責(zé)分工上能讓更合適的人干更合適的事。

• 工程化。前端開發(fā)越來越復(fù)雜，除了運(yùn)行時(shí)的類庫(kù)框架，還有非常非常重要的一塊是研發(fā)交付體系。這一塊各個(gè)大公司的前端都在探索，各個(gè)公司都 有大量實(shí)踐，但感覺都還存在很多優(yōu)化甚至突破的空間。支付寶的研發(fā)交付體系好像是阿里最復(fù)雜的，前端一方面「享受」這種復(fù)雜性帶來的穩(wěn)定性保障，同時(shí)又非 常「痛恨」如此讓人抓狂的各種平臺(tái)、流程。前端的工程化開發(fā)是一個(gè)體系化的問題，相信2014年，支付寶前端在這一塊會(huì)有飛躍式突破。

InfoQ：您是此次“移動(dòng)時(shí)代的前端”專題聯(lián)合出品人，能否談?wù)勀銓?duì)此次專題的內(nèi)容策劃？

玉伯：內(nèi)容策劃上，就是上面說的全端化、全?；?、工程化。篩選的話題，會(huì)來自大公司，也會(huì)來自創(chuàng)業(yè)公司。全端化是移動(dòng)互聯(lián)網(wǎng)對(duì)企業(yè)的需求。全?；?、工程化都是對(duì)研發(fā)效率的關(guān)注，這一塊的進(jìn)展，能讓互聯(lián)網(wǎng)公司特別是大公司的傳統(tǒng)研發(fā)模式發(fā)生變革，讓分工更合理，研發(fā)效率更高。

InfoQ：您對(duì)“全端開發(fā)”這個(gè)新概念怎么看？

玉伯：上面已經(jīng)提到這些概念了。全端我的理解是跨終端，從瀏覽器兼容，走向各種終端的兼容。你想談的應(yīng)該不是這個(gè)，而是 FSD（Full-Stack Developer）。

Full-stack 有些地方翻譯成全端，我更喜歡翻譯成全棧。知乎上有過討論，感覺大家對(duì)全棧的理解有很多差異點(diǎn)。我的理解與大家的有些不一樣。

• 全棧不是什么都懂，而是鼓勵(lì)大家從單一（ | 型）人才變成一專多能（T 型）人才，進(jìn)而變成多專多能（ π 型）人才。

• 對(duì)于前端的全棧之路，在支付寶是鼓勵(lì)大家通過Node掌握服務(wù)端上的UI Layer層開發(fā)，是讓前后端的分工更合理，并非是讓前端去研究后端的專業(yè)領(lǐng)域。表面上看是分久必合、合久必分，實(shí)際上是分工更合理，讓前后端都能朝著更專業(yè)的深度發(fā)展。

• 全棧開發(fā)應(yīng)該根據(jù)不同場(chǎng)景去定義。支付寶的全棧，跟Facebook的，目前就不一樣。中間沒有誰好誰壞，都是從業(yè)務(wù)實(shí)際需求出發(fā)，以及團(tuán)隊(duì)目前的人員情況出發(fā)，自然而然地一種選擇。

InfoQ：在前端開發(fā)以外，您是否還有關(guān)注的技術(shù)領(lǐng)域？為什么？

玉伯：技術(shù)領(lǐng)域這幾年都放在前端了，對(duì)動(dòng)漫制作、數(shù)據(jù)挖掘有濃厚興趣，但尚未投入大量時(shí)間。技術(shù)領(lǐng)域之外，最關(guān) 注團(tuán)隊(duì)管理，越來越發(fā)現(xiàn)很多事情靠一個(gè)人無法達(dá)成，個(gè)人英雄主義時(shí)代已經(jīng)很遙遠(yuǎn)。在當(dāng)下，要達(dá)成一些心中想做的事，要倚靠團(tuán)隊(duì)的力量。自己的定位依舊是技 術(shù)專家，但同時(shí)希望自己能具備leadship，這樣才能達(dá)成自己心中的夢(mèng)想。

此專題詳細(xì)信息，請(qǐng)見專題頁面。關(guān)于此次QCon北京其他專題的詳細(xì)信息，請(qǐng)移步至大會(huì)官網(wǎng)。

需要特別注明的是，每年QCon大會(huì)門票都會(huì)在開幕前售罄，及早預(yù)定可提前確保席位，并享受更低折扣。現(xiàn)在報(bào)名參加將可享受8折優(yōu)惠。團(tuán)體購(gòu)票（5 人及以上）將享有更多優(yōu)惠。詳請(qǐng)咨詢qcon【at】cn.infoq.com，或直接致電010-64738142。報(bào)名請(qǐng)點(diǎn)擊報(bào)名頁面。