在今天，大前端并不是一個(gè)陌生的詞匯，我們偶爾會(huì)聽(tīng)人談起它，前些天還看到卓同學(xué)寫(xiě)了一篇《大前端時(shí)代下App開(kāi)發(fā)者的生存之道》，說(shuō)明這個(gè)詞開(kāi)始成為某種共識(shí)了。
但是大前端到底指的是什么？事實(shí)上大前端并沒(méi)有明確的定義，它由國(guó)內(nèi)業(yè)界發(fā)明，甚至沒(méi)有對(duì)應(yīng)的英文詞匯（如果有，請(qǐng)悄悄告訴孤陋寡聞的筆者）。有人對(duì)發(fā)明技術(shù)詞匯不以為然，但我認(rèn)為國(guó)內(nèi)大前端相關(guān)技術(shù)發(fā)展相較于國(guó)外并不差，我們有必要在理論、標(biāo)準(zhǔn)方面也有所建樹(shù)，這樣才能與我們的發(fā)展情況相匹配。
上個(gè)月我在籌備GMTC2017大會(huì)的時(shí)候，走訪了美團(tuán)點(diǎn)評(píng)的劉平川老師、滴滴的左志鵬老師、手淘的天施老師，對(duì)大前端的問(wèn)題進(jìn)行了深入的討論，在這里，我想用這樣一篇文章來(lái)拋磚引玉，探討大前端的定義。希望能看到更多關(guān)于它的討論和分享。
文末有大前端主題征文活動(dòng)，歡迎參加。
如果分析我們到底在什么時(shí)候使用大前端，大概有三種不同的語(yǔ)境，在每種語(yǔ)境下，大前端的定義都有所不同。
在前端同學(xué)的口中，大前端有時(shí)與NodeJS一起提，有時(shí)與前后端分離一同提起，事實(shí)上，大前端概念也正是由前端同學(xué)提出，從這里，我們可以得出大前端的原始定義。
過(guò)去幾年，前端技術(shù)經(jīng)歷了爆發(fā)式的發(fā)展，這種發(fā)展最重要的推動(dòng)者之一就是NodeJS。NodeJS為前端建立了與系統(tǒng)之間溝通的橋梁，從此前端技術(shù)不僅能在服務(wù)端大放異彩，還能在本地的前端開(kāi)發(fā)工具與工作流上大展身手，前端從此被解放了，JavaScript統(tǒng)治世界的論調(diào)一度甚囂塵上。
不過(guò)，當(dāng)人們冷靜之后，發(fā)現(xiàn)NodeJS在服務(wù)端并沒(méi)有太多的優(yōu)勢(shì)，再加上NodeJS技術(shù)本身發(fā)展的一些波折，導(dǎo)致它在服務(wù)端的應(yīng)用并不理想。不過(guò)，前端同學(xué)還是取得了一些階段性勝利，其結(jié)果就是前后端分離。
在以前前端頁(yè)面模板由后端生成，導(dǎo)致在頁(yè)面需要頻繁修改的時(shí)候效率低下，前后端分離指的是后端只提供接口，前端對(duì)頁(yè)面有完整控制，同時(shí)通過(guò)中間層將前后端隔開(kāi)，在這里對(duì)數(shù)據(jù)進(jìn)行抽取、聚合、分發(fā)等操作。這個(gè)中間層，通常也是由前端同學(xué)負(fù)責(zé)。
從這個(gè)意義上，大前端的原始定義可以稱(chēng)為前端技術(shù)的擴(kuò)大化，包括NodeJS，同時(shí)對(duì)Web頁(yè)面有更強(qiáng)的控制權(quán)，開(kāi)發(fā)承載更多功能的頁(yè)面。
移動(dòng)互聯(lián)網(wǎng)時(shí)代到來(lái)之后，移動(dòng)App成為新的主流，而瀏覽器的地位則逐漸降低，傳統(tǒng)的前端開(kāi)發(fā)遇到尷尬。
當(dāng)然，前端并未真正遭遇困境，以PhoneGap/Cordova為代表的Hybrid開(kāi)發(fā)，以及內(nèi)嵌在App中的WebView開(kāi)發(fā)，再加上微信成為主流之后的“微信Web”，前端技術(shù)其實(shí)在移動(dòng)端也有很多的使用場(chǎng)景。
但是，當(dāng)時(shí)人們提起移動(dòng)開(kāi)發(fā)，主要指的還是iOS與Android原生開(kāi)發(fā)技術(shù)，這一情況隨著React Native的發(fā)布得到了改變。其實(shí)直到現(xiàn)在，在國(guó)內(nèi)外大規(guī)模使用React Native仍然不多，但是它的確能解決原生的跨平臺(tái)代碼復(fù)用、動(dòng)態(tài)化等痛點(diǎn)，又避免了之前Hybrid的性能問(wèn)題，因此受到廣泛關(guān)注。
隨著React Native的加入，前端的技術(shù)棧再次擴(kuò)展。并且React Native讓我們發(fā)現(xiàn)，其實(shí)通過(guò)加入一個(gè)虛擬視圖層（Virtual DOM），邏輯操作和模型部分的代碼能夠得到很大程度的復(fù)用，在已有的實(shí)踐總結(jié)中，大部分React Native代碼都得到了80%以上的復(fù)用。
虛擬視圖層也不僅僅只能用在移動(dòng)端，在所有通過(guò)圖形界面進(jìn)行人機(jī)交互的地方都可行，在PC、Web、移動(dòng)設(shè)備甚至還未發(fā)明出的未來(lái)的種種設(shè)備上，只要系統(tǒng)能運(yùn)行JavaScript引擎，理論上都可以采用類(lèi)似React Native的開(kāi)發(fā)方案。這種前端技術(shù)，當(dāng)然可以稱(chēng)為大前端。
如果說(shuō)前后端分離是前端在縱向上變大，那么這種跨不同的終端的前端技術(shù)則可以說(shuō)是在橫向上變大。
在實(shí)際中，還有一種使用大前端的情況，那就是國(guó)內(nèi)公司的大前端團(tuán)隊(duì)/部門(mén)。據(jù)我了解的情況，目前美團(tuán)點(diǎn)評(píng)、餓了么、網(wǎng)易杭研都有叫大前端的團(tuán)隊(duì)或者在對(duì)外時(shí)使用該稱(chēng)謂。
不過(guò)，由于之前大前端并沒(méi)有明確的定義，這些團(tuán)隊(duì)的人員構(gòu)成并不相同，它們都是各個(gè)公司在自己對(duì)大前端的理解，以及對(duì)公司業(yè)務(wù)的支持需求下設(shè)立的。具體情況如下（可能有偏差）：
美團(tuán)點(diǎn)評(píng)大前端團(tuán)隊(duì)：包括FE、iOS、Android開(kāi)發(fā)，以及一些工程化工作。
餓了么大前端團(tuán)隊(duì)：以FE為主，包括NodeJS，以及Weex等。
網(wǎng)易杭研大前端團(tuán)隊(duì)：去年底在網(wǎng)易杭研執(zhí)行院長(zhǎng)汪源的一次分享中，他稱(chēng)網(wǎng)易杭研大前端的技術(shù)體系，包含Web前端、PC客戶(hù)端和移動(dòng)端。
這些寫(xiě)在新聞稿、印在名片上的文字，是幫助大前端概念落地的重要助力，同時(shí)也是最終確定大前端的定義到底是什么的判定依據(jù)。當(dāng)然，目前案例太少，還不足以影響我們對(duì)大前端的理解。
在客戶(hù)端開(kāi)發(fā)上，Native與HTML5之爭(zhēng)持續(xù)快十年，吵了人們都失去興趣了，從現(xiàn)在來(lái)看，并沒(méi)有誰(shuí)取代誰(shuí)，而是有融合的趨勢(shì)，融合之后的產(chǎn)物就是大前端。
在這里我大膽預(yù)言：大前端不僅會(huì)成為移動(dòng)開(kāi)發(fā)與Web前端的發(fā)展趨勢(shì)，也將會(huì)是未來(lái)的顯示設(shè)備終端的開(kāi)發(fā)技術(shù)趨勢(shì)。
為什么這么說(shuō)？
我們已經(jīng)進(jìn)入一個(gè)終端碎片化的時(shí)代，iPhone第一代發(fā)布到今年就整整10年，在這10年里，我們并沒(méi)有發(fā)現(xiàn)智能手機(jī)有被取代的跡象。但是創(chuàng)新仍在繼續(xù)，于是我們有了智能手表、TV、眼鏡、頭戴VR等等新設(shè)備，可以想象這樣的設(shè)備仍然會(huì)繼續(xù)增多。
這些新設(shè)備同時(shí)也是新平臺(tái)，與智能手機(jī)類(lèi)似，可以安裝第三方應(yīng)用，并且，這些平臺(tái)基本都支持瀏覽器或內(nèi)嵌瀏覽器引擎。雖然有些平臺(tái)限制使用Web技術(shù)開(kāi)發(fā)應(yīng)用，但這只是平臺(tái)政策原因，只要放開(kāi)限制，前端技術(shù)就能以某種姿態(tài)進(jìn)入，甚至成為主流。
有早期Hybrid和后來(lái)的React Native的探索，在顯示終端應(yīng)用的開(kāi)發(fā)上，前端基本已經(jīng)成為必備技術(shù)。
Serverless中文譯為無(wú)服務(wù)器架構(gòu)，是軟件架構(gòu)領(lǐng)域的一個(gè)熱門(mén)概念。這里的無(wú)服務(wù)并不是說(shuō)不需要服務(wù)器，而是說(shuō)新的架構(gòu)取代了傳統(tǒng)服務(wù)器的概念。Serverless的代表是2014年亞馬遜發(fā)布的AWS lamda，后續(xù)各大云計(jì)算廠商也紛紛跟進(jìn)。
對(duì)于終端開(kāi)發(fā)者，并不需要太深入的了解Serverless，因此這里不過(guò)多介紹，只需要知道它被認(rèn)為是云計(jì)算發(fā)展的趨勢(shì)之一。
Serverless與大前端的關(guān)系則在于，Serverless需要更強(qiáng)大的前端，在《Serverless Architectures on AWS》一書(shū)中介紹了Serverless的五大原則，當(dāng)中有這樣一條：
Create thicker, more powerful front ends
因此，從軟件架構(gòu)的發(fā)展趨勢(shì)來(lái)看，前端會(huì)越來(lái)越“大”，在整個(gè)系統(tǒng)中的重要性也會(huì)提升。
說(shuō)了這么多，到底哪些是大前端的代表技術(shù)？從業(yè)務(wù)上來(lái)說(shuō)，我認(rèn)為終端開(kāi)發(fā)、網(wǎng)關(guān)設(shè)計(jì)、接口設(shè)計(jì)、桌面端的工程化都可以算是大前端的業(yè)務(wù)范疇。具體的技術(shù)，則是基于HTML5、NodeJS的通用技術(shù)，以及各平臺(tái)的專(zhuān)有技術(shù)。從現(xiàn)階段來(lái)說(shuō)，還需要掌握一些代表性的框架、平臺(tái)等。
前端框架目前有三架馬車(chē)，除了Angular之外，React與Vue都已經(jīng)形成各自的生態(tài)體系。
生態(tài)的意義就是覆蓋全面，幾乎沒(méi)有短板，React和Vue已經(jīng)覆蓋了目前主流的系統(tǒng)平臺(tái)，并且可以用React Native、Weex等框架進(jìn)行原生開(kāi)發(fā)，相較于其它技術(shù)有很強(qiáng)的優(yōu)勢(shì)。
PWA是Google力推的技術(shù)，對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，它代表著標(biāo)準(zhǔn)化的努力和開(kāi)放的理想。雖然從目前來(lái)看，它還達(dá)不到實(shí)用階段，但從我近期獲得的一些信息表明，這項(xiàng)技術(shù)還是有很大潛力的，也有不少的支持者。今年可能就會(huì)有更多的實(shí)踐案例涌現(xiàn)出來(lái)。
微信小程序正式發(fā)布之后，與它未發(fā)布之前的火熱形成了反比，在市場(chǎng)上幾乎沒(méi)有聲音了。但這只是產(chǎn)品策略的原因，并不是技術(shù)帶來(lái)的問(wèn)題。事實(shí)上微信小程序的用戶(hù)體驗(yàn)很不錯(cuò)，表明了這項(xiàng)技術(shù)的應(yīng)用潛力。
小程序更多的還是為我們帶來(lái)了一種可能性，超級(jí)App成為PC時(shí)代瀏覽器的精神繼承者，成為我們新的操作系統(tǒng)。
最后來(lái)說(shuō)說(shuō)大前端帶來(lái)的影響。
移動(dòng)設(shè)備作為主流的終端設(shè)備，其應(yīng)用開(kāi)發(fā)技術(shù)也應(yīng)該是大前端最關(guān)注的技術(shù)。在以前移動(dòng)開(kāi)發(fā)的技術(shù)棧以原生開(kāi)發(fā)為主，但以后恐怕做移動(dòng)開(kāi)發(fā)需要同時(shí)掌握前端技術(shù)才行。卓同學(xué)的文章也表達(dá)了這個(gè)意思。
在今年1月份的WeexConf上，天施老師分享的一段話讓我頗有感觸，他的大意是移動(dòng)端經(jīng)過(guò)10年演化，創(chuàng)新變緩，移動(dòng)開(kāi)發(fā)正走在標(biāo)準(zhǔn)化的道路上，所以Weex會(huì)遵循W3C的規(guī)范。而我有更深一層的理解：移動(dòng)開(kāi)發(fā)之前很多組件都需要靠自研，但隨著大廠更多的開(kāi)源，我們?cè)诨A(chǔ)組件/框架上的自研需求會(huì)越來(lái)越少，移動(dòng)開(kāi)發(fā)沒(méi)有W3C這樣的規(guī)范，但會(huì)有基于開(kāi)源的事實(shí)標(biāo)準(zhǔn)。
所以，我認(rèn)為純?cè)囊苿?dòng)開(kāi)發(fā)的道路會(huì)越來(lái)越窄，整個(gè)移動(dòng)開(kāi)發(fā)的技術(shù)棧必須要做一個(gè)大的改變。
隨著大前端的概念逐漸深入人心，會(huì)帶來(lái)什么？我認(rèn)為會(huì)出現(xiàn)新的職業(yè)：大前端工程師。
它與以前的Web前端的區(qū)別是，大前端將做更多的終端開(kāi)發(fā)、工程化等工作，而不僅僅只是開(kāi)發(fā)Web頁(yè)面。大前端工程師將能搞定所有端上的開(kāi)發(fā)。與充滿(mǎn)爭(zhēng)議的全棧工程師相比，它更具可操作性。
并且，大前端工程師將會(huì)是一個(gè)擁有強(qiáng)大生命力的職業(yè)，因?yàn)轱@示終端設(shè)備的生命力會(huì)很強(qiáng)，畢竟人類(lèi)的信息獲取有80%以上是通過(guò)視覺(jué)，無(wú)論Amazon Echo這樣的語(yǔ)音交互設(shè)備如何演化，顯示終端都會(huì)有一席之地，大前端也因而不會(huì)失業(yè)。
本篇內(nèi)容肯定有偏頗的地方，我所說(shuō)的也不可能都是對(duì)的。希望它能引起你的思考，那么本文就達(dá)到目的了。
作者介紹
徐川，InfoQ中文站移動(dòng)主編，GMTC大會(huì)主編。長(zhǎng)期關(guān)注移動(dòng)開(kāi)發(fā)與前端技術(shù)發(fā)展。
聯(lián)系客服
