01.10 從前端技術到體驗科技

很抱歉在首屆螞蟻體驗科技 SEE Conf 大會上,給大家講得有點磕絆不太清楚。今天寫下來行諸文字,希望一些思考能與大家進一步交流。(設計師朋友可以跳過前端技術部分,直接看後面章節)


什麼是前端技術

第一次接觸前端開發是 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(後端服務) 通過技術與設計的融合,轉變成體驗一流的用戶產品。這個公式的一個實現,就是螞蟻體驗雲。螞蟻體驗雲的初心,是希望能幫助有夢想的你,將一個個優秀的想法,通過體驗雲實現成一個個終端產品。

從前端技術到體驗科技

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

從前端技術到體驗科技

感謝聆聽,期待交流。


分享到:


相關文章: