阿里前端委員會主席圓心：將來前端的機會在哪裏？

阿里妹導讀：在近期舉辦的行業大會上，阿里前端技術委員會主席，淘系技術部資深總監圓心發表了《前端路上的思考》的演講，分別從前端的發展歷程、今天的機會、如何引領新技術、前端價值這四個方面進行深刻探討。流年笑擲，將來可期，一塊兒來看看資深前端人對行業將來的洞察與判斷。

鄭葉飛（花名：圓心）
阿里巴巴集團前端技術委員會主席，也是 D2 前端技術論壇發起人。
2007 年加入淘寶，曾參與天貓、快樂淘寶、聚划算等創業團隊。現任淘系技術部資深總監，負責淘系前端技術、行業與工做臺團隊，推動了淘寶前端工程化、無線化、全棧化、智能化的快速演進。且一直熱身於推動國內前端技術的交流與發展。

提早 get 完整版 PPT，點擊下方連接閱讀原文，一鍵下載，先睹爲快~

前端發展史

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

第一階段

第一階段放在 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 帶來什麼樣的影響呢？我以爲可讓前端更加貼近業務，讓更多能力下沉。前端轉到 Node 體系有一個很大的挑戰，不少人說不是你會寫 Node.js 你就是前端工程師，我很是贊成這樣說法。可是到了 Serverless 咱們能夠不用關注部署，不用關注運維，不須要關注全部的 DevOps，也不須要關注底層數據庫的狀態，他會讓咱們先後端整個的體系像先後端分層同樣又往前邁一步。

目前個人團隊裏面，不只包括前端，還有 200 多個 JAVA 開發，你們共同推動全部的體系變革，但願團隊裏面全部業務邁向 Serverless。Serverless 須要把後端能力平臺化，把底層數據模型、領域模型和能力模型高度後臺化，對整個體系進行重塑。以後前端會有大量的業務邏輯開發，讓前端更加貼近業務，讓前端更加理解業務，我以爲 Serverless 將來會在整個先後端開發模式上帶來新的變革。

回到外部體系，它是什麼？五年前在 D2 我講了一個想法：在雲上更多經過 Serverless 方式提供函數式編程，讓開發者編程更加快捷。端就是今天小程序，小程序就是將來端上的一個跨端的解決方案，並且有必定的收益、安全可控，雲上必定是以 Serverless 的方式和端之間作鏈接，可讓這個體系運轉很好。

我今天看到一個數聽說國內今天在雲上的 Serverless，有 60% 到 70% 的程序都是經過 Node.js 在運行，因此 Node 在這當中有很大的空間。研發平臺是什麼樣？上層數據接入網關是什麼樣？還有編排是什麼？這是今天 Serverless 聚焦的領域並往下完成基礎設施的建設。固然像我講的，Serverless 必定會帶來前端很大的變革。

智能化

去年在 D2 講過智能化，智能化必定是將來，爲何這樣講？由於在 AI 來臨的時候，咱們可否從一個 Design 變成一個 Code？今天每一個公司的前端都有大量的設計、大量原代碼，咱們經過大量設計稿和原代碼進行機器學習，讓中間的佈局可學習，讓中間的元件可學習，我相信將來 D2C 必定可以解決前端生產力瓶頸，讓前端從今天大量低端開發、手工工做中解放出來，將精力轉移到不少領域深度的參與、深度的突破。

因此我以爲，智能化必定會帶來前端將來格局的變化，由於 AI 讓不少低效的工做經過這樣的方式完成。回到另一個問題，不管是在無線化的時代，仍是中後臺的時代，整個抽象程度是高度收斂的，不像原來作 C 端的 PC 是發散的。在收斂的狀況下，必定是能夠基於收斂的體系進行規模化，而這個規模化是咱們但願經過 AI 的方式完成總體的改造。我相信必定會帶來前端另一個變化。

IDE

你們會問，爲何 IDE 會變成大家的核心方向？我講一下思考。今天阿里的前端咱們作了叫工程中臺，工程中臺作到了前端代碼從提交到發佈的管控，固然包括中間提交以後整個代碼的編譯、構建、檢測以及發佈。可是在前臺的部分，每一個團隊都有一個工具，而這個工具在各團隊之間割裂的，沒法複用。由於工程不只僅是提交到發佈，前端工程化應該從編碼開始到發佈，應該是一個完整的鏈路、完整的格局。

回到這個體系裏面，如何可以收斂前面整個的開發狀態，我以爲是能夠經過 IDE 內核構建整個基礎。可以把整個體系打通，同時全部團隊、全部能力，做爲組件的形式存在，組件可讓更多人基於一樣一個架構進行高質量的交付，這樣才能造成一個完整的生態。

固然若是僅僅是面向內部，IDE 還達不到做爲整個集團的四大方向之一。好比說還有不少 ISV，不少小程序開發、互動的開發、一些工做的開發，咱們也提供 IDE 給 ISV 的，可是那個體系是內部的精簡版。若是今天把整個 IDE 從內到外所有打通，就是基於一套完整的架構，而後基於上面的能力內外均可以互通，能夠帶來整個生態的能力提高。

小結

今天講到了，在整個搭建體系，在整個低代碼、無代碼的體系，依託 IDE 提供不少的能力，咱們是否能夠把本地的 IDE 跟雲端 IDE 體系徹底打通，經過一套架構完成全部的體系構建，經過組件的生態所有打通，造成完整的閉環，我以爲徹底能夠。

往外延伸，回到今天的雲體系，也須要提供一個 IDE 給今天更多人使用。你會發現，IDE 是能夠把內外、線上線下、全部的開發者生態所有打通，可以讓集團全部的前端的能力服務於阿里全部的生態，這就是我認爲 IDE 會做爲咱們核心戰略之一的緣由，咱們須要促進這個體系的完成。

新興領域

前面咱們講了今天阿里的前端的四大技術方向，這四大方向思考我已經陳述了，但願給你們帶來一些思考。固然除了四大方向，咱們依舊有不少沒有列在上面的部分。

上面說的三部分，對於將來咱們依舊有不少的空間去探索。來看新交互，前端的強項是經過交互完成全部的工做，當全部新的技術來臨的時候，怎麼樣在新環境下完成全部工做？好比說今天 VR 時代來臨的時候，怎麼完成 VR 交互？整個領域跟如今的開發領域有什麼差別？是到它的體系重構前端引擎嗎？仍是有不少東西是值得咱們想象和思考的。

物聯網時代來臨，咱們團隊有專門作 IoT，他們是作不少新零售。咱們要作什麼改變，也是前端要看待的事情。在那個體系裏面，能夠用 JS 寫什麼樣的驅動？能夠推進這個行業作什麼樣的發展？其實都給前端打開了一道門。

最後 5G，中美搞得很緊張，都是由於跟 5G 相關。可是，5G 來臨帶來了什麼？思考這個問題。咱們今天大量的在觀測性能的消耗、兼容性的問題，將來隨着整個網速的提高必定會移向雲端。若是今天在手機上作很是複雜的 3D 渲染，你會發現很是的卡頓。若是今天在手機上作很是複雜的遊戲、動畫也是很挑戰的。今天吃雞都是在 PC 端玩而不是手機上玩，由於對於整個性能消耗、渲染整個體系有很強的要求。

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

咱們要正確看待一個技術變革的時候，會帶來什麼？什麼樣的變化？這是咱們須要深刻思考的部分，由於這個必定會對將來造成一些變化，而咱們的預判決定了咱們今天如何看待將來，如何統治將來，咱們應該作什麼。我相信新交互、IoT 還有 5G 必定會對前端將來的發展造成另外的影響。

如何引領技術？

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

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

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

從表象到本質

剛纔我講時代變化的時候，個人理論是，由於它有一個理論支撐了一個時代變化。框架也同樣，框架必定會有基於某個問題解決他的問題。React.js 解決了什麼？就是最開始很痛苦，而後就用別的方式重構。不管之前講的 MVC、MVP 仍是 MVVM。你們說之前這個東西我提過，可是最後變成公共標準不是我，而是別人。

固然首先回到一個理念，今天針對某一個東西要作什麼。首先要有理念，好比說今天我指望解決當下的多終端適配的問題，但願經過多途徑渲染完成體系的變化。回到的問題是今天如何解決問題？這個問題是什麼？我如何定義這個問題？咱們要造成一個理念，才能日後走，日後走怎麼走？

理念到落地

經過雙引擎促使今天的變化。

今天的人才引入要作什麼？咱們針對前面提出不少假設，以及對於將來暢想的思考以及針對今天問題的深度解決，針對這些體系要進行專業人才的引入。今天要作 IDE 就須要原來作過 IDE 專業人才。今天須要一些跨界，跨界是怎麼講？原來模塊加載，有幾年前端流行模塊加載，模塊的 JS 理念來源於哪裏？Python。就是從一個語言到另一個語言，吸取長處，讓這個長處到咱們的體系中解決問題，其實咱們須要跨界人才帶來更多元化的思考，而不只僅是咱們本身的思考。多元化必定會帶來不少的思路，和今天不少學術同樣，必定會有相互之間交集所出現的學科。今天也是但願有更多不一樣跨界人才加入促使這個體系變化。

另外是研究型人才。今天咱們若是要作可視化，不少公司在作可視化，可是可視化實際上是一個學術的領域。在大學裏面是有課程的。可是回到體系，咱們對它的思考是什麼，深度夠不夠？包括今天 3D 也同樣，在不少大學也是有課的，圖形渲染怎麼樣，該怎麼作，是有很是複雜的學術背景的。對於咱們來說，這些人才咱們有沒有？我以爲這是每一個公司、每一個團隊要思考的一個問題。

再往上就是經過雙引擎。我指望不少東西經過低代碼、無代碼完成大量低效工做後，剩下的精力放在應用的深度上。

第二學術人才加入，咱們須要經過學術化探討加入更多新理論進來，經過這兩個雙引擎，可以把咱們前面提到的理念落到技術，這是整個國內目前很缺失的部分，也是我今天認爲最須要改變的部分。

影響力建設

兩個途徑：

• 第一個途徑是標準組織。跟前端相關的標準組織就三個，一個是 TC39，第二 W3C，第三是 Node 基金會。今天如何經過咱們的思考，咱們的能力影響今天的標準？我以爲前段時間有人跟我抱怨，說 TC39 方案不合理，我有更好的方案，但是他們就不聽個人。咱們如何解決這些問題？這是咱們要思考的問題。
• 第二個途徑是開源生態，咱們如何經過開源生態完成全部東西。咱們今天作的還不夠，有的公司團隊在開源方面作得還不錯。回到今天整個國內，咱們如何具有社區化運營的基因，我以爲值得全部人思考的問題，包括我本身也在思考這方面的問題。

標準組織

咱們首先要了解標準組織是怎麼樣的？有什麼樣的方向？制度是什麼樣的？我要參與什麼？不能參與什麼？要了解怎麼運轉，加上咱們的思考判斷、對於將來趨勢的判斷，以及咱們對於深度應用的判斷，而後推進整個標準組織的完善。

開源生態

開源生態簡單。怎麼挖掘、培育和運營來使咱們的體系變成一個社區化的運營。

其實有時候不必定說作開源的社區，首先團隊能不能作到社區化的運做？我相信不少團隊是作不到的。團隊內的技術項目不是從上至下的，而是像社區同樣運做，這可以促進整個生態的完善，這是能夠推動的部分。

籌備中國前端聯盟

另外由於 Hax 的痛苦，包括阿里的前端、360、Hax，咱們看如何籌備中國前端聯盟，但願經過這個聯盟幫助將來中國前端的發展，咱們往下落地的過程當中還有一些細節在繼續推動。

這個組織要作的事情：

• 標準對接
• 開源共建
• 信息互通

經過協同協做造成世界性的影響，但願這個組織將來可以成立，也是基於前面講的不少點的思考。今天具有思考，具有能力，可是今天沒有世界級的影響。這是很痛的一個點，中國前端要往前發展，必定造成世界級的影響，世界級的影響必定靠全部人聯合在一塊兒。

前端價值

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

傳統三件套

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

Gap 在哪裏

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

如何思考商業的閉環？站在產品角度產品邏輯應該是什麼？產品應該怎麼作？怎麼樣經過了解今天的數據看待不少問題，推進體系的變化？這是咱們前端都須要加強的。當你具有了這三個能力的時候，我相信你在公司的價值必定會獲得體現。

總結

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

原文連接 本文爲雲棲社區原創內容，未經容許不得轉載。