觀點｜螞蟻金服玉伯：我們是如何從前端技術進化到體驗科技的？

小螞蟻說：

王保平，花名玉伯。熟悉前端和SeaJS的人一定對這個名字不陌生。作為前端領域的一枚大大大牛，他現在擔任螞蟻金服體驗技術部負責人。本文，他分享了他從前端一路進階更新到體驗科技的個人思考，并詳細介紹了體驗科技的曆史及未來發展，以及本次體驗科技開放的願景。

前端的本質是什麼？随着移動和物聯網的發展，前端技術又會有哪些變化？希望通過本文内容大家能對這些問題以及體驗科技有更進一步的了解，文末有文章相關的PPT及視訊連結，歡迎查閱，也歡迎大家留言交流。

作者介紹：王保平，花名玉伯，現任螞蟻金服體驗技術部負責人。2008 年入職淘寶 UED，與團隊一起奠定了阿裡巴巴在國内前端技術領域的領先地位。2012 年加入支付寶，緻力于設計語言 Ant Design、資料可視化 AntV、智能建站、圖形與藝術等領域的工作。目前一心打造服務于螞蟻金服與業界億萬客戶的世界一流的螞蟻體驗科技，緻力于讓使用者體驗美好。

什麼是前端技術

我第一次接觸前端開發是 2002 年大學期間，轉眼 15 年多。這些年我一直在思考一個問題：究竟什麼是前端技術？很長很長一段時間，前端技術的定義非常清晰，就是浏覽器端的 HTML、CSS、JS 技術。我們用這些技術做出各種各樣的頁面，我們是離使用者最近的程式員。

記得 2009 年開始接觸 Node，很快前端技術開始爆炸性增長。最開始的變化，是前端壓縮工具從基于 Java 的 YUI Compressor 開始切換到基于 Node 實作的 UglifyJS 等工具。除了前端工具上的一路狂奔，在服務端領域也出現了 Express 等架構，前端開始通過 Node 完成服務端模闆甚至整個 MVC 層的開發。在螞蟻金服，服務端層我們更多把 Node 定位為 BFF 層實作，BFF 是 Backend For Frontend 的縮寫，翻譯成使用者體驗适配層。

BFF 模式下，整體分工很清晰，後端通過 Java 等語言負責服務實作，理想情況下給前端提供的是基于領域模型的 RPC 接口，前端則在 BFF 層直接調用服務端 RPC 接口拿到資料，按需加工消費資料，并實作人機互動。基于 BFF 模式的研發，很适合擁有前端技術背景的全棧型工程師。這種模式的好處很明顯，後端可以專注于業務領域，更多從領域模型的視角去思考問題，頁面視角的資料則交給前端型全棧工程師去搞定。領域模型與頁面資料是兩種思維模式，通過 BFF 可以很好地解耦開，讓彼此更專業高效。

除了服務端的滲透，從 2013 年開始，阿裡開始無線 ALL IN 戰略，這對前端影響非常大。有相當多的前端開始轉型為 iOS 工程師（轉型為 Android 的比較少，有部分 Java 工程師轉型成了 Android 開發），沒有轉型的，也開始大量投入到 Mobile Web 開發。這個大背景下，前端與用戶端技術開始互相融合，特别是在容器層。從 2015 年開始，物聯網 IoT 逐漸興起，前端開始涉足 IoT 裝置上的應用研發。端的本質是 devices，桌上型電腦、手機、IoT 裝置都是一台台 devices，很多會直接被使用者使用，有使用者使用的 devices，就會有人機互動需求，就會有前端的工作價值。前端是離使用者最近的工程師，這個定位一直沒變。

非常有意思的是，在移動端的架構裡，這幾年也出現了基于 RPC 接口 + 網關 + BFF 的架構體系，在研發效率、網絡性能等方面均有優勢。随着 IoT 應用的湧現與複雜化，我相信最終也會出現 BFF 架構。BFF 模式不僅僅是一種技術架構，從社會分工角度講，BFF 更是一種多元價值導向的分層架構，每一層都有不錯的空間去施展，不僅能發揮工業社會雙手的作用，還能使用上雙手上面的腦袋。齒輪不再是被動跟着轉，而是開始擁有自驅的轉動力。同一時期，業界也出現了一些類似的職業融合。比如 DevOps 倡導開發也懂運維，不少大公司在推行開發也懂測試，測試則轉型為更專業的品質工具部門，還有前端也懂設計的 DesignOps 的出現等等。各種全棧概念的湧現，都是在重新探索更合理的分層協作模式。紛紛擾擾，成敗如風。

補充一個說明，當年提出的前後端分離，并不準确，這些年一直努力糾正為前後端分層的理念。專業的分工協同對效能的提升很關鍵。全棧的含義是指分層演化後，每一層的技術棧要求，是每一層橫向技能的全，而不是縱向跨層的通（縱向跨多層都能通的人才非常少，就如當今社會已經非常難誕生博物學家了）。不斷探索更好的分層協作是有意思的，這就如人類家庭裡夫妻的關系一樣，男權、女權都不可取，社會的演化最終會視人為人，每個個體平等、自由，社會會以一種必然的不可阻擋的形态往前演進。

回到前端發展曆史，前面說了這麼多，隻說了一件事，前後端分層協作的各種模式。協作的邊界是資料，後端提供資料服務接口，前端消費資料實作人機互動。不同模式下，BaaS（Backend as a Service）的含義各有不同。在 BFF 模式下，由于 BFF 層的運維部署需要，前端還需負責 BFF 層的 PaaS 平台建設。不同模式下的工程體系各有不同，工程的本質是讓一群人做好一堆事，涉及代碼規範、協作流程、運維部署、性能與安全等很多領域，這裡不再一一展開。

服務端 Node 與各種終端的湧現，讓前端進入了大前端範疇，這時候的前端，已遠遠不隻是浏覽器端的頁面實作技術，而是後端服務與人機界面的連接配接器。

什麼是體驗科技

我屬于在無線 ALL IN 戰略中，選擇留下來繼續做 PC Web 的前端。雖然公司重點轉向無線，但 PC 業務一直沒停。随着近幾年整個阿裡集團“大中台、小前台”的政策，越來越多的企業級中背景産品處于兵荒馬亂階段，設計師非常缺失，随手一抓，都是大量體驗比較糟心的産品。這過程中，越來越感覺什麼地方有問題，一定在某些點上我們沒做好。當時沒多想，就想着既然缺設計師，我們就嘗試去招聘。于是體驗技術部開始擁有了設計師，非常艱辛的起步，非常感激的是，雖然艱辛，但找到了一些與我一樣堅信中背景産品價值的設計師。一旦有了設計師，整個中背景産品的使用者體驗，一下子就提升上來了。

設計團隊的融入，日常的各種碰撞交流，讓我的思維發生了很大變化。前端技術再牛，都很難直接解決産品層的使用者體驗。對中背景産品來說，設計的價值也遠遠不止于讓産品的顔值提升，設計的更多更多價值，在于深入到産品的業務邏輯裡去，去幫助業務梳理産品資訊架構與任務流程。使用者體驗是一個非常綜合的事，需要各種專業人士在同一個産品上聚焦發力，一起共同努力才能真正提升産品體驗。設計師在這個過程中很痛苦，很多中背景産品都是非常垂直領域的業務産品，中間件、ECS、ODPS 等一堆堆專業術語讓設計師們痛苦不堪，幸運的是，我們扛了過來。

接下來的故事，在今天各個講師的分享裡，不少都有提及。整個團隊的重心，開始非常清晰地往幾個方向發展：

• TWA 方向：這是比 BFF 更大的概念 。TWA 是 Techless Web App 的縮寫，是一種技術理念，希望越來越多的開發者，可以不用再關注流程、建構、環境、部署等各種事，希望能做到技術無感化（Techless），讓每一位開發着能安安靜靜的快樂編碼。
• UI 智能化方向：Ant Design 是一個設計體系，antd 是 Ant Design 的 React 實作。這幾年 antd 的發展，不僅讓前端編碼更快更爽了，同時讓一個曆史悠久但生生不息的領域重燃希望：是否存在人機互動界面智能可視化搭建的可能？這個領域，這一兩年在阿裡内部非常火，各種搭建産品層出不窮，目前都還處于比較垂直的領域，泛化到行業級通用的産品還沒怎麼出現。我們也開始嘗試，而且我們相信天時地利人和，一定能折騰出點什麼，正在努力中，或許能夠在不久的将來展示給大家。
• 資料可視化方向：一直關注我們的朋友相信對 G2 和 AntV 已經有了一個整體了解（參考閱讀《螞蟻金服開源：資料驅動的高互動可視化圖形文法G2》）。可視化方向我們是從 2014 年開始正式投入人員去做，最開始的想法來自科幻片，大家如果喜歡看科幻片的話，會留意到各種人機互動界面都是各種可視化效果了，很少很少有傳統網頁。可視化是個曆史非常悠久的領域，我們國小時學會的乘法豎式，就是一種可視化，可以幫助我們減少記憶成本，同時提升計算速度。
• 圖形互動化方向： 這個領域我們才開始一年多，但這是我們非常笃定的一個方向。很多小孩，對書本都比較抗拒，但對遊戲有着天生的喜愛。螞蟻森林讓大家從表單形式的公益，變成了互動遊戲型的公益。越來越多的人機互動形式，會是有互動互動的圖形界面。應用的泛互動化，是一個很大趨勢。支付寶是個生活服務平台，各種生活服務的互動有趣化，一定是更有吸引力的。

看更遠的未來，我相信對體驗科技來說，自然化和虛拟化會是兩個大趨勢。

比如當我分享一個 PPT，要翻頁時，需要點選鍵盤按鈕，為什麼電腦不能直接了解我的意圖而自動翻頁呢？比如我隻要頭往下示意一下，就能自然而然翻到下一頁。我們現在很多行為，跳脫出來看，能發現很多很多不自然。天貓精靈等各種智能音箱，真正去用時，離自然互動還有比較遠的距離。Ant Design 設計價值觀裡，最最重要的就是自然價值觀，一切才剛剛開始探索。

再說虛拟化。虛拟化不僅僅指 AR、VR 等技術，看過黑客帝國、西部世界等科幻片的，會對虛拟化有更多體感。如果以後每個小孩出生時，就會被植入一個能五感俱全的晶片，這種情況下，我們的人機互動會是怎麼樣的。太多可能性與挑戰在等着我們。

這一切都是體驗科技，是技術與設計的融合，是服務與使用者連接配接，是下圖中的一個公式。

體驗科技是 UX = f(services) 這個公式，能将各種各種的 services（後端服務） 通過技術與設計的融合，轉變成體驗一流的使用者産品。這個公式的一個實作，就是螞蟻體驗雲。螞蟻體驗雲的初心，是希望能幫助有夢想的你，将一個個優秀的想法，通過體驗雲實作成一個個終端産品。

體驗雲才剛剛起步，目前已在内部服務螞蟻金服、阿裡巴巴集團，同時快速孵化出了雲鳳蝶、語雀、小錢袋等創新産品。雖然還很不完善，但我們希望能盡快與使用者一起成長。很多激動人心的事正在發生，通過體驗科技的開放，我們希望着能為世界帶來更多平等的機會。

文末福利：文章相關PPT釘盤連結：https://space.dingtalk.com/s/gwHOAB39IQLOD7oxKAPaACBiMWI3YzYzZWRjOTg0NDVmOGI1NGU4Y2YyODY0MWQ2Yw

密碼: bvNk

視訊連結：https://v.youku.com/v_show/id_XMzMwMzg2MDIwOA==.html