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

前端早讀課發表於2018-01-11

前言

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

什麼是前端技術

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

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1


記得 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 與各種終端的湧現,讓前端進入了大前端範疇,這時候的前端,已遠遠不只是瀏覽器端的頁面實現技術,而是後端服務與人機介面的聯結器。

0?wx_fmt=jpeg

什麼是體驗科技

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

0?wx_fmt=jpeg

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

0?wx_fmt=jpeg

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

  • TWA 方向:這是比 BFF 更大的概念,上午不四的分享裡有詳細闡述,可參考 知乎專欄文章 。TWA 是 Techless Web App 的縮寫,是一種技術理念,希望越來越多的開發者,可以不用再關注流程、構建、環境、部署等各種事,希望能做到技術無感化(Techless),讓每一位開發著能安安靜靜的快樂編碼。

  • UI 智慧化方向:Ant Design 是一個設計體系,antd 是 Ant Design 的 React 實現。這幾年 antd 的發展,不僅讓前端編碼更快更爽了,同時讓一個歷史悠久但生生不息的領域重燃希望:是否存在人機互動介面智慧視覺化搭建的可能?這個領域,這一兩年在阿里內部非常火,各種搭建產品層出不窮,目前都還處於比較垂直的領域,泛化到行業級通用的產品還沒怎麼出現。我們也開始嘗試,而且我們相信天時地利人和,一定能折騰出點什麼,正在努力中,或許在下次 SEE Conf 大會中會展示給大家。

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

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


0?wx_fmt=jpeg

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

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

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

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

0?wx_fmt=jpeg

0?wx_fmt=jpeg

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

0?wx_fmt=jpeg

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

0?wx_fmt=jpeg

感謝聆聽,期待交流。

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

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

0?wx_fmt=jpeg

相關文章