【第1164期】從前端技術到體驗科技

前言

在js當道的今日，從知乎還是微博上有看到前端要回歸本質，迴歸使用者體驗。今日早讀文章由@玉伯授權分享。

什麼是前端技術

第一次接觸前端開發是 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 的發展，不僅讓前端編碼更快更爽了，同時讓一個歷史悠久但生生不息的領域重燃希望：是否存在人機互動介面智慧視覺化搭建的可能？這個領域，這一兩年在阿里內部非常火，各種搭建產品層出不窮，目前都還處於比較垂直的領域，泛化到行業級通用的產品還沒怎麼出現。我們也開始嘗試，而且我們相信天時地利人和，一定能折騰出點什麼，正在努力中，或許在下次 SEE Conf 大會中會展示給大家。

• 資料視覺化方向：下午絕雲和御術的分享，相信大家對 G2 和 AntV 已經有了一個整體瞭解。視覺化方向我們是從 2014 年開始正式投入人員去做，最開始的想法來自科幻片，大家如果喜歡看科幻片的話，會留意到各種人機互動介面都是各種視覺化效果了，很少很少有傳統網頁。視覺化是個歷史非常悠久的領域，我們小學時學會的乘法豎式，就是一種視覺化，可以幫助我們減少記憶成本，同時提升計算速度。

• 圖形互動化方向： 上午好修和景夫有分享，這一塊才開始一年多，是我們非常篤定的一個方向。很多小孩，對書本都比較抗拒，但對遊戲有著天生的喜愛。螞蟻森林讓大家從表單形式的公益，變成了互動遊戲型的公益。越來越多的人機互動形式，會是有互動互動的圖形介面。應用的泛互動化，是一個很大趨勢。支付寶是個生活服務平臺，各種生活服務的互動有趣化，一定是更有吸引力的。

  
  

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

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

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

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

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

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

感謝聆聽，期待交流。

視訊地址：http://v.youku.com/v_show/id_XMzMwMzg2MDIwOA==.html

關於本文
作者：@玉伯
原文：https://zhuanlan.zhihu.com/p/32782686