Angular、Vue、React 和前端的未來

最近社群針對架構的争論，從發文互怼再到粉絲站隊再到大漠窮秋準備離職，令人唏噓不已。不知從何而起，前端圈已經逐漸變成了前端娛樂圈。越來越多的人開始站隊 Angular、Vue、React，僅僅圍繞這些庫或者架構進行前端技術讨論，這實在不是什麼好的現象。其實我想基于我個人的經驗聊下前端的演進和未來，希望可以貢獻微薄的力量，消除一些我個人認為的前端社群不太好的風氣。

注意：以下隻是我個人對于前端和業務的了解和感悟，不代表任何其他人和我所在公司、團隊的觀點，意見不同歡迎一起讨論。

========

以史為鑒，想要知道前端的未來，必須知道前端的過去，抽象前端發展的規律。

前端的曆史

前端的發展始終伴随着端的發展。

PC 端的興起

06 年左右國内網際網路公司開始有了前端工程師的概念，原因很簡單，是因為上網通路網頁的人數增多，大型網際網路公司為了提升使用者體驗專門剝離了這樣一個崗位來解決相關問題。這是第一批專業前端工程師的起源。

在這幾年中的發展，進行了很多輪的技術方案、架構、浏覽器的演進。比如 jQuery 相容性庫，再到 Require.js 異步加載，再到現在 React、Vue、Angular 等附帶程式設計思想的前端庫以及前後端分離、前端建構器、樣式預處理器等。這些演進都是随着 PC 端的使用者量的增多和業務複雜度的提升，為了使用者體驗和開發者體驗而進化的。

移動端的興起

09 年左右，智能手機的興起導緻了移動端開發的熱潮。人人擁有智能手機，這種特殊的端的特性，也産生了新的業務形态。是以無線前端相關需求開始爆發，無線前端開發、iOS/Android 工程師等需求量非常大。

這幾年中的發展，先從最初把 PC 端頁面放在手機上渲染，再到出來響應式設計的概念，再到專門做無線端頁面，再到獨立用戶端和 Weex、React Native 這些跨終端的方案。也是出現了非常多的技術演進，這些演進不難看出也是因為使用者量的增多和業務複雜度的提升，為了使用者體驗和開發者體驗而進行優化的。

PC 端的衰落

14 年左右，其實 PC 端頹廢之勢早已顯現，但在雙十一下被放大。是以阿裡系前端在這個時間點附近就開始弱化 PC 端前端的投入。 以前 PC 端業務，在無線端流量更大的直接被下掉，核心鍊路的 PC 端業務能用就可以了，不再做效果、功能疊代優化。甚至很多業務直接不做 PC 端隻做無線端。業務名額也從 PC 的 PV、UV 變成了用戶端的 DAU 等名額。

在這個時間，隻做 PC 端的前端，毫無無線端經驗的前端，将會慢慢喪失競争力。PC 相容庫 jQuery 之流也漸漸被替換廢棄，因為 PC 的業務很少花費精力做相容性測試，甚至目前我們團隊的業務從來都隻測試最新版 Chrome。可以看到，随着端和業務形态的變化，很多前端演進的産物會逐漸被替換廢掉。

移動端的衰落

移動端目前還沒有衰落，但一個端隻要興起，就會有衰落的時候。總會有新的、更好的、更高效的端來替代老的端。但這個時機是難以預測的。

前端的未來

回顧前端的曆史，前端總是伴随的端的變化而變化：

端的出現 -> 業務場景的落地 -> 需要端的開發者 -> 端開發者學習、演進 -> 端的開發效率提升 -> 新的端出現 -> 端的沒落 -> 端開發者轉領域或者被淘汰

這也就是為什麼前端需要學習這麼多東西，有這麼龐大的體系的原因。每一個端都有它自己的特性。比如未來可能會火的 VR、AR 端，它們的特性就不同于二維平面的移動端，掌握 VR、AR 端的開發就需要新學習很多三維圖形圖像以及圖像識别領域的東西。

是以如果你想要知道前端的未來，你需要預測端的發展。但端的發展是很難預測的，回到 06 年，有誰會想到會有智能手機，并開創了移動端這個端？

而現在火熱的 VR、AR 端，目前看下來并不具備普适性。你需要在特定地點或者佩戴比較大的裝置才可以用，你可以帶着它給人做手術第一視角給學生做示範，但你上廁所蹲坑更願意掏出手機看新聞而不是帶着 VR 眼鏡看。現有的技術很難将其很自然的融入到我們的生活中。

沒有普适性和極大使用者量的端，不會有太大的開發需求量，主要是特定領域的端開發者。如果這個端死掉了，端的開發者将一無所有。但下一個幹掉移動端的端到底是什麼？我們可能很難預料，隻能順應時代的發展快速學習頂上去。但人的精力有限，跟站在巨人肩膀上的每年出來活力四射的校招生，你又能競争幾年？

那麼現在前端還可以做什麼？

除了移動端領域，既然無法預料到未來的端，那我們在當下和一段未來可以做什麼？

其實在上面這些前端的曆史發展中，其實暗藏了一條被忽略的前端的線。我們再來回顧一下前端技術的疊代規律：

端的技術演進的原因，本質是因為業務的複雜度提升。比如一個資訊類業務，最初就展示一個資訊清單和資訊詳情頁面，那麼簡單的 HTML 就可以完成。之後他們對清單和詳情頁增加了很多元素，比如有的詳情頁面增加了投票功能、有的詳情頁展示問答和評論功能等。業務邏輯的複雜就導緻這個咨詢詳情頁需要 前後端分離、平台化機制、前端元件化、異步加載子產品渲染 等技術演進。然而這隻是消費者端的前端，營運者端的前端卻被忽略掉了。某類詳情頁顯示投票、某類詳情頁顯示問答和評論，都是業務規則，是需要營運者在營運背景進行操作和配置；前端元件化是需要有元件化平台來管理并推送相關元件等。

暗藏的這條被忽略的前端的線，其實就是中背景前端。簡單的說，就是整個業務鍊路中偏向于營運端背景鍊路的前端。

随着前台業務的複雜度提升，營運背景的複雜度成倍提升。簡單的前端互動已經難以滿足營運的需求和效率。以前配置營運規則，隻需要送出個表單即可，而現在則需要操作一個更複雜的表單，表單上面各種資料接口異步請求、關聯變化。營運平台的建設和效率，在快速變化的網際網路環境，在某些情況下是關乎于公司業務發展的，可以預見的是這将成為前端需求的爆發點。

相比面向消費者端的前端，中背景的前端更加穩定，通常隻需要面向 PC 端即可，但是需要基于複雜的業務場景進行抽象産出通用技術方案和産品，面臨的挑戰并不會很小。

阿裡系前端在做什麼？

阿裡的業務體系很龐大，很多業務十分深入，是以阿裡系前端也會提前針對業務發展的預期，做一些技術儲備。包括早期的 Node 前後端分離、前端工程化體系、Weex（weapp 等）在國内都是領跑的，而且有足夠的業務場景進行落地。是以通常可以作為前端領域的風向标。

現在這個時間節點，整個阿裡集團各個 BU 都有團隊在做中背景産品。就我所知就有四五套元件體系、五六個可視化搭建體系。目前元件體系領跑的有 

@玉伯

 下面的開源産品 ant-design 以及内部沒開源的跨 BU 聯合協作的後起之秀 Fusion。

而在淘寶終端技術團隊，我們的暫未開源的 ICE 中背景技術産品也是集團範圍内強有力的中背景産品，經過我們一年的打拼已經基本站穩淘寶中背景業務，開始逐漸輻射到菜鳥、盒馬、搜尋等 BU 的中背景業務。我們團隊基于 Fusion 中背景體系，針對業務封裝了大量技術解決方案，并布局可視化拖拽系統和前端人工智能領域，處于領先位置。同時我們有非常大的中背景業務場景 淘寶商家背景 和 淘寶達人平台，這些都是面向百萬級使用者對外的中背景業務。

這些都可以說明中背景前端領域可能是未來會爆發的一個領域，這個領域會立足業務、助力業務，快速産出（比如拖拽建立背景頁面、特定領域解決方案）營運平台頁面或者内部産品以響應複雜的業務邏輯變化。

Angular、Vue、React 架構之争

上面内容全程沒有提 Angular、Vue、React，因為這些庫或者架構都是基于現有端的業務體系，基于使用者體驗和開發者體驗演進出來技術方案，并沒有什麼優劣之分，各有各的長處。而在整個前端演進過程中，隻是一塊很小的内容。

Angular 限制多，擅長複雜中背景場景和多人協作。Vue 靈活，适用于簡單業務快速疊代（當然也有 Vue 做中背景的）。React 元件化設計的好，可以實作比較好的元件生态進行複用。對于這些架構，你隻需要基于現有的業務體系和開發者經驗，做好最佳的技術方案選型即可。在某些場景下甚至 jQuery 反而是更好的技術選型。

而随着端的變化，一輪一輪的架構和技術方案會持續疊代，當新的端或者業務領域出現之後，更适合的庫或者架構将會出現。那麼 Angular、Vue、React 很容易的就會像現在我們對待 jQuery 一樣，被我們更新換代掉。畢竟一個公司賺錢是因為業務賺錢，而不會因為你用了 Vue 或者 Angular 這些技術架構而賺錢。哪個庫或者架構适合你的業務形态，可以給你帶來穩定的系統和好的使用者體驗，讓你有高效的開發效率，當然就選哪個了。

前端新手很容易會把架構當成前端的全部，比如我前幾年剛學會 jQuery 可以用 jQuery 寫出任何特效的前端頁面，當時的我認為 jQuery 就是前端的全部，用熟了就可以一招走天下。但工作時間長了你才會發現 jQuery 隻是滿足了當時的業務需求，技術架構是随時會變的，不變的是特定業務的解決思想和方案。這個我認為才是非架構研發的前端需要探讨研究的更有價值的内容，比如針對無線頁面跨頁面跳轉的狀态本地存儲方案、多頁面無重新整理的單頁面路由方案等等。

寫在最後

再次重申，以上隻是我個人的觀點。希望可以幫助大家看到更大的前端演進的全貌，避免在一個小節點死怼。

希望讨論的可以加我下微信或者直接在評論中評論，跟随讨論我可能會修改本文部分内容來保障内容盡可能正确。

原文釋出時間：2018年05月11日

作者：

于江水

本文來源：

知乎 

 如需轉載請聯系原作者