阿里前端談：前端發展史，引領新技術、前端價值

阿里前端技術委員會主。席圓心老師發表了《前端路上的思考》的演講，分別從前端的發展歷程、今天的機會、如何引領新技術、前端價值這四個方面談了下他的看法。本文整理內容如下。

前端發展史

我把前端發展編為五個階段，這個五個階段跟網路上看到的階段分析不同。我認為每個階段有一個理論或者方法論的支撐，帶來了一次飛躍。

第一階段

第一階段放在 2003 年。大家那個時候都知道，那個時候講求所有的 HTML、CSS、JS 是我們所謂結構樣式行為的分離，這個理論造就了今天前端主體。

在這之前基本是兩種職位，一個是 JAVA 工程師，一個是設計。當時的設計是包含了視覺設計以及 HTML+CSS。但是因為這種結論理念的到來，讓前端開始真正變為前端，專注於今天大部分前端所工作的內容。這個理念核心的出現，帶來了整個前端崗位的出現。其實伴隨著 2003 年之後，國內第一次出現真正的前端的崗位是 2005 年，這期間有一個延續性。之後很多公司出現了重構工程師，也是今天很多前端的主體。

第二階段

第二階段是 2008 年。當時有一個理念認為 90% 的效能優化都在前端。在前臺體系裡面，這個理論讓前端價值得到進一步體現。

前端現在可以回答對公司的體現是什麼：我們可以通過效能的優化帶來更好的體驗、更高的轉化率等。突然發現前端整個崗位體現了很大的價值。我相信經歷了那個時代的人都記得 YSlow，那個包括今天影響前端對於效能體系所有的思維，這是第二階段。

但是第二階段帶來了什麼？上面有寫，帶來了工程化的開啟。怎麼理解？今天要做很多效能優化，需要通過工具、流程把體系更好的工程化，然後得到一個最佳的結果。所以我認為它是一個工程化的開啟。之後我們可以看到，最早用 Ant 前端工具，到今天有 GRUNT、Webpack、Babel 等。這樣來看，第二個階段是在 2008 年整個效能優化的過程，理念就是 90% 效能優化在前端。

第三階段

第三個階段是 2013 年。我今天分享跟大家原來理解的階段不一樣，大家有從框架階段來定義，也有從中間技術 W3C 什麼時候出現，或者從 Node.js 什麼時候出現來定義。出現並不是一個階段。其實發現 Node.js 早於 2013 年，可能是 2008/2009 年就出現了，但是為什麼那個時候沒有出現變化？換到今天，我們更願意用另外一個詞就是前後端分層，在後端體系裡面讓前端更加專注前臺的 UI 層、邏輯層，後端關注後臺的介面，讓我們之間分工更加明確。後端如果開發一個頁面，跟前端說頁面有問題，但是前端一看是後端把標籤寫錯誤了，這就是合作方式不合理。

前後端的分層促進了對於前端體系的發展，也開始慢慢的影響到今天從前端到全棧的過程。讓很多人更有機會使用 Node.js 從工程的工具開發慢慢過渡到可以用 JS 做應用開發，這在 2013 年是很大的變化。當然這裡面有很多 Node.js 的框架，在上層的資料層，我們也會看到 GraphQL 整個邏輯編排的體系，所以會把這個體系帶到前端，今天大家所看到的 BFF，也是基於這一套體系的發展。這是前端第三個發展階段，始於 2013 年。

第四階段

第四個階段我相信很多人都有感觸，因為移動時代的來臨，改變了今天整個 PC 和無線的格局，也改變了我們前端大部分人開發的方式。

一開始理論是 Mobile first，後面是 Write Once，Run anywhere。這個時代是什麼？我們把 PC 工作轉到無線工作，這裡面很多人糾結，那個潮流來臨時候發現大量前端湧向了客戶端，客戶端出現了蓬勃發展。但是今天大量的客戶端又湧向了前端。兩者之間不停轉化。為什麼？因為大家都在思考到底是 H5 還是 Native，未來到底是 H5 開發還是 Native 開發？

我認為這個焦點就有錯誤。為什麼糾結今天用 H5 還是 Native 解決問題？我覺得今天到了無線時代，焦點應該在這裡：怎麼樣用最標準化的開發能夠讓更多的人開發這個頁面、怎麼樣能夠提供像 H5 一樣標準的頁面。

回到這個焦點，在移動時代來臨的時候，在每個 APP 如何重新定義渲染引擎，這個渲染引擎是什麼樣的？大家可以看到，封裝是最早的，可以把 H5 封裝 APP，以及RN，WEEX，以及今天的Flutter。整個主線和思維按照這個理念進行，而且時至今日這個理念依舊在影響我們前端開發。

第五階段

第五個階段是低程式碼對於整個體系影響。

這裡有一個背景就是網際網路下的風口，所有的企業都看 to B 的體系，無論是阿里還是京東，to B 的體系有一個什麼樣的東西？其實我們在前端的體系裡面把 to B 看成是中後臺，那裡面有什麼樣的特質？比如說佈局是高度標準化的，它的表單是高度標準化的，它的表格是高度標準化的，它的視覺化圖表是高度標準化……這個體系存在大量的標準化，而不像 C 端多樣化，這個體系裡面，如何用低程式碼或者無程式碼的體系來完成對這個體系的重塑，這是在 2016 年重點看待的事情，也是 2016 年給我們帶來很多的變化。今天很多公司提供這樣的解決方案，比如說今天微軟的 PowerApps，大家在這個領域在做新的探索。

小結

我們回顧可以看到：2003 年結構樣式行為分離，預示著前端崗位的出現。2008 年 90% 效能優化在前端，開啟了工程化。2013 年前後段分離，帶來了全棧的演進。2014 年 Mobile first 是無線時代的來臨。2016 年 LOW/NO Code 出現，帶來了中後臺的重塑。

今天的機會

我們看今天是什麼？每一個今天重點投入的方向背後思考是什麼？我們今年阿里經濟體前端委員會四大技術方向：第一搭建服務，第二是 Serverless，第三是智慧化，第四是 IDE。

搭建服務

首先看搭建服務。今天講到了低程式碼和無程式碼通過什麼方式完成？第一，肯定中間包含了大量的元件、元件、模組。

在消費端體系裡面，我們也在做很多嘗試，比如說原來的頻道活動，在活動的體系裡面也是高度抽象化的，所以在這個體系裡面，我們可以看到整個搭建服務無論是在中後臺還是整個無線端，以及 PC 端都有大量場景，這樣大量場景需要把整個框架標準化，希望把裡面的元件、元件以及模組標準化，還希望把這樣的服務能夠服務於今天所有無論是中後臺也好，C 端頁面也好，希望有這樣的體系——服務化標準化的方式服務，打通整個體系，這就是為什麼把搭建服務認為是面向未來最重要的方向。

Serverless

今天很多人聽到了 Serverless，很多人對於 Serverless 理解有所不同。我如何理解這個 Serverless？我理解 Serverless 有兩個角色：

一個是內，內是站在公司角度 Serverless 對前端的影響。

一個是外，外可能是在雲上如何提供 Serverless 能力的提取。

回到公司的內，Serverless 帶來什麼樣的影響呢？我覺得可以讓前端更加貼近業務，可以讓更多能力下沉。前端轉到 Node 體系有一個很大的挑戰，很多人說不是你會寫 Node.js 你就是前端工程師，我非常同意這樣說法。但是到了 Serverless 我們可以不用關注部署，不用關注運維，不需要關注所有的 DevOps，也不需要關注底層資料庫的狀態，他會讓我們前後端整個的體系像前後端分層一樣又往前邁一步。

智慧化

去年在 D2 講過智慧化，智慧化一定是未來，為什麼這樣講？因為在 AI 來臨的時候，我們能否從一個 Design 變成一個 Code？今天每個公司的前端都有大量的設計、大量原始碼，我們通過大量設計稿和原始碼進行機器學習，讓中間的佈局可學習，讓中間的元件可學習，我相信未來 D2C 一定能夠解決前端生產力瓶頸，讓前端從今天大量低端開發、手工工作中解放出來，將精力轉移到很多領域深度的參與、深度的突破。

所以我覺得，智慧化一定會帶來前端未來格局的變化，因為 AI 讓很多低效的工作通過這樣的方式完成。回到另外一個問題，無論是在無線化的時代，還是中後臺的時代，整個抽象程度是高度收斂的，不像原來做 C 端的 PC 是發散的。在收斂的情況下，一定是可以基於收斂的體系進行規模化，而這個規模化是我們希望通過 AI 的方式完成整體的改造。我相信一定會帶來前端另外一個變化。

新興領域

前面我們講了今天阿里的前端的四大技術方向，這四大方向思考我已經陳述了，希望給大家帶來一些思考。當然除了四大方向，我們依舊有很多沒有列在上面的部分。

上面說的三部分，對於未來我們依舊有很多的空間去探索。來看新互動，前端的強項是通過互動完成所有的工作，當所有新的技術來臨的時候，怎麼樣在新環境下完成所有工作？比如說今天 VR 時代來臨的時候，怎麼完成 VR 互動？整個領域跟現在的開發領域有什麼差異？是到它的體系重構前端引擎嗎？還是有很多東西是值得我們想象和思考的。

物聯網時代來臨，我們團隊有專門做 IOT，他們是做很多新零售。我們要做什麼改變，也是前端要看待的事情。在那個體系裡面，可以用 JS 寫什麼樣的驅動？可以推動這個行業做什麼樣的發展？其實都給前端開啟了一道門。

最後 5G，中美搞得很緊張，都是因為跟 5G 相關。但是，5G 來臨帶來了什麼？思考這個問題。我們今天大量的在觀測效能的消耗、相容性的問題，未來隨著整個網速的提升一定會移向雲端。如果今天在手機上做非常複雜的 3D 渲染，你會發現非常的卡頓。如果今天在手機上做非常複雜的遊戲、動畫也是很挑戰的。今天吃雞都是在 PC 端玩而不是手機上玩，因為對於整個效能消耗、渲染整個體系有很強的要求。

5G 來臨會變成什麼？所有渲染在雲端完成，通過流媒體互動的方式完成所有的體系，第一個解決了所有在觀測渲染效能問題。第二解決了大量相容性問題。會變得更加簡單。

我們要正確看待一個技術變革的時候，會帶來什麼？什麼樣的變化？這是我們需要深入思考的部分，因為這個一定會對未來形成一些變化，而我們的預判決定了我們今天如何看待未來，如何統治未來，我們應該做什麼。我相信新互動、IOT 還有 5G 一定會對前端未來的發展形成另外的影響。

如何引領技術

為什麼會有這個話題？這也是這兩年沉痛的思考。阿里前端有 2000 多人，這些人能力很強，但是在國內上高質量的前端都是上萬人，今天在前端的領域，我們對於前端領域的影響又是多少？其實是不成正比的。回到現在我們應該做什麼？我們應該思考什麼？我們應該如何促進整個國內前端的影響力以及高質量？我覺得不止是站在阿里團隊的角度思考，更應該站在國內前端的角度思考，我們能做什麼？

其實有一些東西大家覺得難嗎？其實我覺得好像也不難。說 Flutter 就是基於下沉的渲染，繪圖引擎做上層的多終端的方案。我記得剛剛進入無線時代做相容性的解決方案，思路是一脈相承的，為什麼我們做了一個東西沒有聲音沒有繼續探索。而另外一個方案應運而生了。

第一，我們不是沒有思考力。第二，回到今天時代，你們看完了可以立馬寫一個。但是，為什麼是他寫的？看完他的理念可以立即寫出一個東西。在這裡再往下走，理念我們也有了，能力我們也有了，就是沒有出來東西，這是值得大家認真思考的問題。

從表象到本質

剛才我講時代變化的時候，我的理論是，因為它有一個理論支撐了一個時代變化。框架也一樣，框架一定會有基於某個問題解決他的問題。React.js 解決了什麼？就是最開始很痛苦，然後就用別的方式重構。無論以前講的 MVC、MVP 還是 MVVM。大家說以前這個東西我提過，但是最後變成公共標準不是我，而是別人。

當然首先回到一個理念，今天針對某一個東西要做什麼。首先要有理念，比如說今天我期望解決當下的多終端適配的問題，希望通過多途徑渲染完成體系的變化。回到的問題是今天如何解決問題？這個問題是什麼？我如何定義這個問題？我們要形成一個理念，才能往後走，往後走怎麼走？

前端價值

前面我講的很多東西你做到了，但是很多人回到公司都要回答一個問題：前端對於公司的價值是什麼？前端對於公司價值一定不是專業的建設，但是專業建設是必不可少的，但同時作為組織裡面的崗位要回答，我這個崗位對於公司的價值是什麼？所以我說，前面都做到了不等於價值。技術能力也不等於整個企業價值。這裡面應該做什麼樣的思考？

傳統三件套

傳統三件套也是今天很多團隊在做的：如何提升前端效率，讓資源變得更加的高效？如何做效能優化、體驗優化？很多團隊都在做效能優化。另外如何保障產品的質量等等。這是作為一個開發崗位最基本應該做到的。

Gap 在哪裡
比如說今天運營策略是什麼？引領模式是什麼？產品邏輯是什麼？業務閉環是什麼？轉化漏洞是什麼？市場佔比是什麼？它要求的一定不是一個前端的能力，它要求的是另外三個能力：商業化的思考能力、資料化的能力，以及產品化的能力。

如何思考商業的閉環？站在產品角度產品邏輯應該是什麼？產品應該怎麼做？怎麼樣通過了解今天的資料看待很多問題，推動體系的變化？這是我們前端都需要增強的。當你具備了這三個能力的時候，我相信你在公司的價值一定會得到體現。

總結

今天的我們還只是在啟程的路上，未來的世界還在變化，比如說 Serverless 都在變化，未來的路怎樣還未可知。最後把一句話送給所有人：路漫漫其修遠兮，吾將上下而求索。

無論是在學習web前端開發，還是已經工作的，這裡推薦一下我們的前端學習交流群：784783012 ，這裡是把夢想照亮的地方，同為了生活而拼搏奮鬥，大家互相幫助。新手加入即可獲得經過整理的最前沿的前端技術資料，不定時更新技術，從企業招聘人才需求 到怎麼學習前端開發，和學習什麼內容都有免費系統分享。好友都在裡面交流，歡迎加入

點選：  加入

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2650876/，如需轉載，請註明出處，否則將追究法律責任。