[[279406]]

最近社區(qū)針對(duì)框架的爭(zhēng)論，從發(fā)文互懟再到粉絲站隊(duì)再到大漠窮秋準(zhǔn)備離職，令人唏噓不已。不知從何而起，前端圈已經(jīng)逐步變成了前端娛樂圈。越來(lái)越多的人開始站隊(duì) Angular、Vue、React，僅僅圍繞這些庫(kù)或者框架進(jìn)行前端技術(shù)討論，這實(shí)在不是什么好的現(xiàn)象。其實(shí)我想基于我個(gè)人的經(jīng)驗(yàn)聊下前端的演進(jìn)和未來(lái)，希望可以貢獻(xiàn)微薄的力量，消除一些我個(gè)人認(rèn)為的前端社區(qū)不太好的風(fēng)氣。

注意：以下只是我個(gè)人對(duì)于前端和業(yè)務(wù)的理解和感悟，不代表任何其他人和我所在公司、團(tuán)隊(duì)的觀點(diǎn)，意見不同歡迎一起討論。

========

以史為鑒，想要知道前端的未來(lái)，必須知道前端的過去，抽象前端發(fā)展的規(guī)律。

前端的歷史

前端的發(fā)展始終伴隨著端的發(fā)展。

PC 端的興起

06 年左右國(guó)內(nèi)互聯(lián)網(wǎng)公司開始有了前端工程師的概念，原因很簡(jiǎn)單，是因?yàn)樯暇W(wǎng)訪問網(wǎng)頁(yè)的人數(shù)增多，大型互聯(lián)網(wǎng)公司為了提升用戶體驗(yàn)專門剝離了這樣一個(gè)崗位來(lái)解決相關(guān)問題。這是第一批專業(yè)前端工程師的起源。

在這幾年中的發(fā)展，進(jìn)行了很多輪的技術(shù)方案、框架、瀏覽器的演進(jìn)。比如 jQuery 兼容性庫(kù)，再到 Require.js 異步加載，再到現(xiàn)在 React、Vue、Angular 等附帶編程思想的前端庫(kù)以及前后端分離、前端構(gòu)建器、樣式預(yù)處理器等。這些演進(jìn)都是隨著 PC 端的用戶量的增多和業(yè)務(wù)復(fù)雜度的提升，為了用戶體驗(yàn)和開發(fā)者體驗(yàn)而進(jìn)化的。

移動(dòng)端的興起

09 年左右，智能手機(jī)的興起導(dǎo)致了移動(dòng)端開發(fā)的熱潮。人人擁有智能手機(jī)，這種特殊的端的特性，也產(chǎn)生了新的業(yè)務(wù)形態(tài)。因此無(wú)線前端相關(guān)需求開始爆發(fā)，無(wú)線前端開發(fā)、iOS/Android 工程師等需求量非常大。

這幾年中的發(fā)展，先從最初把 PC 端頁(yè)面放在手機(jī)上渲染，再到出來(lái)響應(yīng)式設(shè)計(jì)的概念，再到專門做無(wú)線端頁(yè)面，再到獨(dú)立客戶端和 Weex、React Native 這些跨終端的方案。也是出現(xiàn)了非常多的技術(shù)演進(jìn)，這些演進(jìn)不難看出也是因?yàn)橛脩袅康脑龆嗪蜆I(yè)務(wù)復(fù)雜度的提升，為了用戶體驗(yàn)和開發(fā)者體驗(yàn)而進(jìn)行優(yōu)化的。

PC 端的衰落

14 年左右，其實(shí) PC 端頹廢之勢(shì)早已顯現(xiàn)，但在雙十一下被放大。因此阿里系前端在這個(gè)時(shí)間點(diǎn)附近就開始弱化 PC 端前端的投入。 以前 PC 端業(yè)務(wù)，在無(wú)線端流量更大的直接被下掉，核心鏈路的 PC 端業(yè)務(wù)能用就可以了，不再做效果、功能迭代優(yōu)化。甚至很多業(yè)務(wù)直接不做 PC 端只做無(wú)線端。業(yè)務(wù)指標(biāo)也從 PC 的 PV、UV 變成了客戶端的 DAU 等指標(biāo)。

在這個(gè)時(shí)間，只做 PC 端的前端，毫無(wú)無(wú)線端經(jīng)驗(yàn)的前端，將會(huì)慢慢喪失競(jìng)爭(zhēng)力。PC 兼容庫(kù) jQuery 之流也漸漸被替換廢棄，因?yàn)?PC 的業(yè)務(wù)很少花費(fèi)精力做兼容性測(cè)試，甚至目前我們團(tuán)隊(duì)的業(yè)務(wù)從來(lái)都只測(cè)試最新版 Chrome。可以看到，隨著端和業(yè)務(wù)形態(tài)的變化，很多前端演進(jìn)的產(chǎn)物會(huì)逐步被替換廢掉。

移動(dòng)端的衰落

移動(dòng)端目前還沒有衰落，但一個(gè)端只要興起，就會(huì)有衰落的時(shí)候。總會(huì)有新的、更好的、更高效的端來(lái)替代老的端。但這個(gè)時(shí)機(jī)是難以預(yù)測(cè)的。

前端的未來(lái)

回顧前端的歷史，前端總是伴隨的端的變化而變化：

端的出現(xiàn) -> 業(yè)務(wù)場(chǎng)景的落地 -> 需要端的開發(fā)者 -> 端開發(fā)者學(xué)習(xí)、演進(jìn) -> 端的開發(fā)效率提升 -> 新的端出現(xiàn) -> 端的沒落 -> 端開發(fā)者轉(zhuǎn)領(lǐng)域或者被淘汰

這也就是為什么前端需要學(xué)習(xí)這么多東西，有這么龐大的體系的原因。每一個(gè)端都有它自己的特性。比如未來(lái)可能會(huì)火的 VR、AR 端，它們的特性就不同于二維平面的移動(dòng)端，掌握 VR、AR 端的開發(fā)就需要新學(xué)習(xí)很多三維圖形圖像以及圖像識(shí)別領(lǐng)域的東西。

因此如果你想要知道前端的未來(lái)，你需要預(yù)測(cè)端的發(fā)展。但端的發(fā)展是很難預(yù)測(cè)的，回到 06 年，有誰(shuí)會(huì)想到會(huì)有智能手機(jī)，并開創(chuàng)了移動(dòng)端這個(gè)端？

而現(xiàn)在火熱的 VR、AR 端，目前看下來(lái)并不具備普適性。你需要在特定地點(diǎn)或者佩戴比較大的設(shè)備才可以用，你可以帶著它給人做手術(shù)第一視角給學(xué)生做演示，但你上廁所蹲坑更愿意掏出手機(jī)看新聞而不是帶著 VR 眼鏡看?，F(xiàn)有的技術(shù)很難將其很自然的融入到我們的生活中。

沒有普適性和極大用戶量的端，不會(huì)有太大的開發(fā)需求量，主要是特定領(lǐng)域的端開發(fā)者。如果這個(gè)端死掉了，端的開發(fā)者將一無(wú)所有。但下一個(gè)干掉移動(dòng)端的端到底是什么？我們可能很難預(yù)料，只能順應(yīng)時(shí)代的發(fā)展快速學(xué)習(xí)頂上去。但人的精力有限，跟站在巨人肩膀上的每年出來(lái)活力四射的校招生，你又能競(jìng)爭(zhēng)幾年？

那么現(xiàn)在前端還可以做什么？

除了移動(dòng)端領(lǐng)域，既然無(wú)法預(yù)料到未來(lái)的端，那我們?cè)诋?dāng)下和一段未來(lái)可以做什么？

其實(shí)在上面這些前端的歷史發(fā)展中，其實(shí)暗藏了一條被忽略的前端的線。我們?cè)賮?lái)回顧一下前端技術(shù)的迭代規(guī)律：

端的技術(shù)演進(jìn)的原因，本質(zhì)是因?yàn)闃I(yè)務(wù)的復(fù)雜度提升。比如一個(gè)資訊類業(yè)務(wù)，最初就展示一個(gè)信息列表和信息詳情頁(yè)面，那么簡(jiǎn)單的 HTML 就可以完成。之后他們對(duì)列表和詳情頁(yè)增加了很多元素，比如有的詳情頁(yè)面增加了投票功能、有的詳情頁(yè)展示問答和評(píng)論功能等。業(yè)務(wù)邏輯的復(fù)雜就導(dǎo)致這個(gè)咨詢?cè)斍轫?yè)需要 前后端分離、平臺(tái)化機(jī)制、前端組件化、異步加載模塊渲染 等技術(shù)演進(jìn)。然而這只是消費(fèi)者端的前端，運(yùn)營(yíng)者端的前端卻被忽略掉了。某類詳情頁(yè)顯示投票、某類詳情頁(yè)顯示問答和評(píng)論，都是業(yè)務(wù)規(guī)則，是需要運(yùn)營(yíng)者在運(yùn)營(yíng)后臺(tái)進(jìn)行操作和配置；前端組件化是需要有組件化平臺(tái)來(lái)管理并推送相關(guān)組件等。

暗藏的這條被忽略的前端的線，其實(shí)就是中后臺(tái)前端。簡(jiǎn)單的說，就是整個(gè)業(yè)務(wù)鏈路中偏向于運(yùn)營(yíng)端后臺(tái)鏈路的前端。

隨著前臺(tái)業(yè)務(wù)的復(fù)雜度提升，運(yùn)營(yíng)后臺(tái)的復(fù)雜度成倍提升。簡(jiǎn)單的前端交互已經(jīng)難以滿足運(yùn)營(yíng)的需求和效率。以前配置運(yùn)營(yíng)規(guī)則，只需要提交個(gè)表單即可，而現(xiàn)在則需要操作一個(gè)更復(fù)雜的表單，表單上面各種數(shù)據(jù)接口異步請(qǐng)求、聯(lián)動(dòng)變化。運(yùn)營(yíng)平臺(tái)的建設(shè)和效率，在快速變化的互聯(lián)網(wǎng)環(huán)境，在某些情況下是關(guān)乎于公司業(yè)務(wù)發(fā)展的，可以預(yù)見的是這將成為前端需求的爆發(fā)點(diǎn)。

相比面向消費(fèi)者端的前端，中后臺(tái)的前端更加穩(wěn)定，通常只需要面向 PC 端即可，但是需要基于復(fù)雜的業(yè)務(wù)場(chǎng)景進(jìn)行抽象產(chǎn)出通用技術(shù)方案和產(chǎn)品，面臨的挑戰(zhàn)并不會(huì)很小。

阿里系前端在做什么？

阿里的業(yè)務(wù)體系很龐大，很多業(yè)務(wù)十分深入，因此阿里系前端也會(huì)提前針對(duì)業(yè)務(wù)發(fā)展的預(yù)期，做一些技術(shù)儲(chǔ)備。包括早期的 Node 前后端分離、前端工程化體系、Weex（weapp 等）在國(guó)內(nèi)都是領(lǐng)跑的，而且有足夠的業(yè)務(wù)場(chǎng)景進(jìn)行落地。所以通?？梢宰鳛榍岸祟I(lǐng)域的風(fēng)向標(biāo)。

現(xiàn)在這個(gè)時(shí)間節(jié)點(diǎn)，整個(gè)阿里集團(tuán)各個(gè) BU 都有團(tuán)隊(duì)在做中后臺(tái)產(chǎn)品。就我所知就有四五套組件體系、五六個(gè)可視化搭建體系。目前組件體系領(lǐng)跑的有

玉伯

下面的開源產(chǎn)品 ant-design 以及內(nèi)部沒開源的跨 BU 聯(lián)合協(xié)作的后起之秀 Fusion。而在淘寶終端技術(shù)團(tuán)隊(duì)，我們的暫未開源的 ICE 中后臺(tái)技術(shù)產(chǎn)品也是集團(tuán)范圍內(nèi)強(qiáng)有力的中后臺(tái)產(chǎn)品，經(jīng)過我們一年的打拼已經(jīng)基本站穩(wěn)淘寶中后臺(tái)業(yè)務(wù)，開始逐步輻射到菜鳥、盒馬、搜索等 BU 的中后臺(tái)業(yè)務(wù)。我們團(tuán)隊(duì)基于 Fusion 中后臺(tái)體系，針對(duì)業(yè)務(wù)封裝了大量技術(shù)解決方案，并布局可視化拖拽系統(tǒng)和前端人工智能領(lǐng)域，處于領(lǐng)先位置。同時(shí)我們有非常大的中后臺(tái)業(yè)務(wù)場(chǎng)景 淘寶商家后臺(tái) 和 淘寶達(dá)人平臺(tái)，這些都是面向百萬(wàn)級(jí)用戶對(duì)外的中后臺(tái)業(yè)務(wù)。

這些都可以說明中后臺(tái)前端領(lǐng)域可能是未來(lái)會(huì)爆發(fā)的一個(gè)領(lǐng)域，這個(gè)領(lǐng)域會(huì)立足業(yè)務(wù)、助力業(yè)務(wù)，快速產(chǎn)出（比如拖拽創(chuàng)建后臺(tái)頁(yè)面、特定領(lǐng)域解決方案）運(yùn)營(yíng)平臺(tái)頁(yè)面或者內(nèi)部產(chǎn)品以響應(yīng)復(fù)雜的業(yè)務(wù)邏輯變化。

Angular、Vue、React 框架之爭(zhēng)

上面內(nèi)容全程沒有提 Angular、Vue、React，因?yàn)檫@些庫(kù)或者框架都是基于現(xiàn)有端的業(yè)務(wù)體系，基于用戶體驗(yàn)和開發(fā)者體驗(yàn)演進(jìn)出來(lái)技術(shù)方案，并沒有什么優(yōu)劣之分，各有各的長(zhǎng)處。而在整個(gè)前端演進(jìn)過程中，只是一塊很小的內(nèi)容。

Angular 約束多，擅長(zhǎng)復(fù)雜中后臺(tái)場(chǎng)景和多人協(xié)作。Vue 靈活，適用于簡(jiǎn)單業(yè)務(wù)快速迭代（當(dāng)然也有 Vue 做中后臺(tái)的）。React 組件化設(shè)計(jì)的好，可以實(shí)現(xiàn)比較好的組件生態(tài)進(jìn)行復(fù)用。對(duì)于這些框架，你只需要基于現(xiàn)有的業(yè)務(wù)體系和開發(fā)者經(jīng)驗(yàn)，做好最佳的技術(shù)方案選型即可。在某些場(chǎng)景下甚至 jQuery 反而是更好的技術(shù)選型。

而隨著端的變化，一輪一輪的框架和技術(shù)方案會(huì)持續(xù)迭代，當(dāng)新的端或者業(yè)務(wù)領(lǐng)域出現(xiàn)之后，更適合的庫(kù)或者框架將會(huì)出現(xiàn)。那么 Angular、Vue、React 很容易的就會(huì)像現(xiàn)在我們對(duì)待 jQuery 一樣，被我們更新?lián)Q代掉。畢竟一個(gè)公司賺錢是因?yàn)闃I(yè)務(wù)賺錢，而不會(huì)因?yàn)槟阌昧?Vue 或者 Angular 這些技術(shù)框架而賺錢。哪個(gè)庫(kù)或者框架適合你的業(yè)務(wù)形態(tài)，可以給你帶來(lái)穩(wěn)定的系統(tǒng)和好的用戶體驗(yàn)，讓你有高效的開發(fā)效率，當(dāng)然就選哪個(gè)了。

前端新手很容易會(huì)把框架當(dāng)成前端的全部，比如我前幾年剛學(xué)會(huì) jQuery 可以用 jQuery 寫出任何特效的前端頁(yè)面，當(dāng)時(shí)的我認(rèn)為 jQuery 就是前端的全部，用熟了就可以一招走天下。但工作時(shí)間長(zhǎng)了你才會(huì)發(fā)現(xiàn) jQuery 只是滿足了當(dāng)時(shí)的業(yè)務(wù)需求，技術(shù)框架是隨時(shí)會(huì)變的，不變的是特定業(yè)務(wù)的解決思想和方案。這個(gè)我認(rèn)為才是非框架研發(fā)的前端需要探討研究的更有價(jià)值的內(nèi)容，比如針對(duì)無(wú)線頁(yè)面跨頁(yè)面跳轉(zhuǎn)的狀態(tài)本地存儲(chǔ)方案、多頁(yè)面無(wú)刷新的單頁(yè)面路由方案等等。