從前端技術(shù)到體驗科技

1、 從前端技術(shù)到體驗科技什么是前端技術(shù)第一次接觸前端開發(fā)是 2002 年大學(xué)期間，轉(zhuǎn)眼 15 年多。這些年一直在思考一個問題：究竟什么是前端技術(shù)？很長很長一段時間，前端技術(shù)的定義非常清晰，就是瀏覽器端的 HTML、CSS、JS 技術(shù)。我們用這些技術(shù)做出各種各樣的頁面，我們是離用戶最近的程序員。記得 2009 年開始接觸 Node，很快前端技術(shù)開始爆炸性增長。最開始的變化，是前端壓縮工具從基于 Java 的 YUI Compressor 開始切換到基于 Node 實現(xiàn)的 UglifyJS 等工具。除了前端工具上的一路狂奔，在服務(wù)端領(lǐng)域也出現(xiàn)了 Express 等框架，前端開始通過 Node 完成服

2、務(wù)端模板甚至整個 MVC 層的開發(fā)。在螞蟻金服，服務(wù)端層我們更多把 Node 定位為 BFF 層實現(xiàn)，BFF 是 Backend For Frontend 的縮寫，翻譯成用戶體驗適配層。BFF 模式下，整體分工很清晰，后端通過 Java 等語言負(fù)責(zé)服務(wù)實現(xiàn)，理想情況下給前端提供的是基于領(lǐng)域模型的 RPC 接口，前端則在 BFF 層直接調(diào)用服務(wù)端 RPC 接口拿到數(shù)據(jù)，按需加工消費數(shù)據(jù)，并實現(xiàn)人機交互?；?BFF 模式的研發(fā)，很適合擁有前端技術(shù)背景的全棧型工程師。這種模式的好處很明顯，后端可以專注于業(yè)務(wù)領(lǐng)域，更多從領(lǐng)域模型的視角去思考問題，頁面視角的數(shù)據(jù)則交給前端型全棧工程師去搞定。領(lǐng)域模型與

3、頁面數(shù)據(jù)是兩種思維模式，通過 BFF 可以很好地解耦開，讓彼此更專業(yè)高效。除了服務(wù)端的滲透，從 2013 年開始，阿里開始無線 ALL IN 戰(zhàn)略，這對前端影響非常大。有相當(dāng)多的前端開始轉(zhuǎn)型為 iOS 工程師（轉(zhuǎn)型為 Android 的比較少，有部分 Java 工程師轉(zhuǎn)型成了 Android 開發(fā)），沒有轉(zhuǎn)型的，也開始大量投入到 Mobile Web 開發(fā)。這個大背景下，前端與客戶端技術(shù)開始互相融合，特別是在容器層。從 2015 年開始，物聯(lián)網(wǎng) IoT 逐步興起，前端開始涉足 IoT 設(shè)備上的應(yīng)用研發(fā)。端的本質(zhì)是 devices，臺式機、手機、IoT 設(shè)備都是一臺臺 devices，很多會直接

4、被用戶使用，有用戶使用的 devices，就會有人機交互需求，就會有前端的工作價值。前端是離用戶最近的工程師，這個定位一直沒變。非常有意思的是，在移動端的架構(gòu)里，這幾年也出現(xiàn)了基于 RPC 接口 + 網(wǎng)關(guān) + BFF 的架構(gòu)體系，在研發(fā)效率、網(wǎng)絡(luò)性能等方面均有優(yōu)勢。隨著 IoT 應(yīng)用的涌現(xiàn)與復(fù)雜化，我相信最終也會出現(xiàn) BFF 架構(gòu)。BFF 模式不僅僅是一種技術(shù)架構(gòu)，從社會分工角度講，BFF 更是一種多元價值導(dǎo)向的分層架構(gòu)，每一層都有不錯的空間去施展，不僅能發(fā)揮工業(yè)社會雙手的作用，還能使用上雙手上面的腦袋。齒輪不再是被動跟著轉(zhuǎn)，而是開始擁有自驅(qū)的轉(zhuǎn)動力。同一時期，業(yè)界也出現(xiàn)了一些類似的職業(yè)融合。

5、比如 DevOps 倡導(dǎo)開發(fā)也懂運維，不少大公司在推行開發(fā)也懂測試，測試則轉(zhuǎn)型為更專業(yè)的質(zhì)量工具部門，還有前端也懂設(shè)計的 DesignOps 的出現(xiàn)等等。各種全棧概念的涌現(xiàn)，都是在重新探索更合理的分層協(xié)作模式。紛紛擾擾，成敗如風(fēng)。補充一個說明，當(dāng)年提出的前后端分離，并不準(zhǔn)確，這些年一直努力糾正為前后端分層的理念。專業(yè)的分工協(xié)同對效能的提升很關(guān)鍵。全棧的含義是指分層演化后，每一層的技術(shù)棧要求，是每一層橫向技能的全，而不是縱向跨層的通（縱向跨多層都能通的人才非常少，就如當(dāng)今社會已經(jīng)非常難誕生博物學(xué)家了）。不斷探索更好的分層協(xié)作是有意思的，這就如人類家庭里夫妻的關(guān)系一樣，男權(quán)、女權(quán)都不可取，社會的演

6、化最終會視人為人，每個個體平等、自由，社會會以一種必然的不可阻擋的形態(tài)往前演進。回到前端發(fā)展歷史，前面說了這么多，只說了一件事，前后端分層協(xié)作的各種模式。協(xié)作的邊界是數(shù)據(jù)，后端提供數(shù)據(jù)服務(wù)接口，前端消費數(shù)據(jù)實現(xiàn)人機交互。不同模式下，BaaS（Backend as a Service）的含義各有不同。在 BFF 模式下，由于 BFF 層的運維部署需要，前端還需負(fù)責(zé) BFF 層的 PaaS 平臺建設(shè)。不同模式下的工程體系各有不同，工程的本質(zhì)是讓一群人做好一堆事，涉及代碼規(guī)范、協(xié)作流程、運維部署、性能與安全等很多領(lǐng)域，這里不再一一展開。服務(wù)端 Node 與各種終端的涌現(xiàn)，讓前端進入了大前端范疇，這時

7、候的前端，已遠(yuǎn)遠(yuǎn)不只是瀏覽器端的頁面實現(xiàn)技術(shù)，而是后端服務(wù)與人機界面的連接器。什么是體驗科技我屬于無線 ALL IN 戰(zhàn)略中，選擇留下來繼續(xù)做 PC Web 的前端。雖然公司重點轉(zhuǎn)向無線，但 PC 業(yè)務(wù)一直沒停。隨著近幾年整個阿里集團“大中臺、小前臺”的策略，越來越多的企業(yè)級中后臺產(chǎn)品處于兵荒馬亂階段，設(shè)計師非常缺失，隨手一抓，都是大量體驗比較糟心的產(chǎn)品。這過程中，越來越感覺什么地方有問題，一定在某些點上我們沒做好。當(dāng)時沒多想，就想著既然缺設(shè)計師，我們就嘗試去招聘。于是體驗技術(shù)部開始擁有了設(shè)計師，非常艱辛的起步，非常感激的是，雖然艱辛，但找到了一些與我一樣堅信中后臺產(chǎn)品價值的設(shè)計師。一旦有了設(shè)

8、計師，整個中后臺產(chǎn)品的用戶體驗，一下子就提升上來了。設(shè)計團隊的融入，日常的各種碰撞交流，讓我的思維發(fā)生了很大變化。前端技術(shù)再牛，都很難直接解決產(chǎn)品層的用戶體驗。對中后臺產(chǎn)品來說，設(shè)計的價值也遠(yuǎn)遠(yuǎn)不止于讓產(chǎn)品的顏值提升，設(shè)計的更多更多價值，在于深入到產(chǎn)品的業(yè)務(wù)邏輯里去，去幫助業(yè)務(wù)梳理產(chǎn)品信息架構(gòu)與任務(wù)流程。用戶體驗是一個非常綜合的事，需要各種專業(yè)人士在同一個產(chǎn)品上聚焦發(fā)力，一起共同努力才能真正提升產(chǎn)品體驗。設(shè)計師在這個過程中很痛苦，很多中后臺產(chǎn)品都是非常垂直領(lǐng)域的業(yè)務(wù)產(chǎn)品，中間件、ECS、ODPS 等一堆堆專業(yè)術(shù)語讓設(shè)計師們痛苦不堪，幸運的是，我們扛了過來。接下來的故事，在今天各個講師的分享里，

9、不少都有提及。整個團隊的重心，開始非常清晰地往幾個方向發(fā)展：TWA 方向：這是比 BFF 更大的概念，上午不四的分享里有詳細(xì)闡述，可參考 知乎專欄文章 （/p/32219319）。TWA 是 Techless Web App 的縮寫，是一種技術(shù)理念，希望越來越多的開發(fā)者，可以不用再關(guān)注流程、構(gòu)建、環(huán)境、部署等各種事，希望能做到技術(shù)無感化（Techless），讓每一位開發(fā)著能安安靜靜的快樂編碼。UI 智能化方向：Ant Design 是一個設(shè)計體系，antd 是 Ant Design 的 React 實現(xiàn)。這幾年 antd 的發(fā)展，不僅讓前端編碼更快更爽了，同時讓一個歷史悠久但生生不息的領(lǐng)域重燃

10、希望：是否存在人機交互界面智能可視化搭建的可能？這個領(lǐng)域，這一兩年在阿里內(nèi)部非常火，各種搭建產(chǎn)品層出不窮，目前都還處于比較垂直的領(lǐng)域，泛化到行業(yè)級通用的產(chǎn)品還沒怎么出現(xiàn)。我們也開始嘗試，而且我們相信天時地利人和，一定能折騰出點什么，正在努力中，或許在下次 SEE Conf 大會中會展示給大家。數(shù)據(jù)可視化方向：下午絕云和御術(shù)的分享，相信大家對 G2 和 AntV 已經(jīng)有了一個整體了解?？梢暬较蛭覀兪菑?2014 年開始正式投入人員去做，最開始的想法來自科幻片，大家如果喜歡看科幻片的話，會留意到各種人機交互界面都是各種可視化效果了，很少很少有傳統(tǒng)網(wǎng)頁?？梢暬莻€歷史非常悠久的領(lǐng)域，我們小學(xué)時學(xué)會

11、的乘法豎式，就是一種可視化，可以幫助我們減少記憶成本，同時提升計算速度。圖形互動化方向： 上午好修和景夫有分享，這一塊才開始一年多，是我們非常篤定的一個方向。很多小孩，對書本都比較抗拒，但對游戲有著天生的喜愛。螞蟻森林讓大家從表單形式的公益，變成了互動游戲型的公益。越來越多的人機交互形式，會是有互動交互的圖形界面。應(yīng)用的泛互動化，是一個很大趨勢。支付寶是個生活服務(wù)平臺，各種生活服務(wù)的互動有趣化，一定是更有吸引力的?？锤h(yuǎn)的未來，我相信對體驗科技來說，自然化和虛擬化會是兩個大趨勢。我現(xiàn)在在分享這個 PPT，要翻頁時，需要點擊鍵盤按鈕，為什么電腦不能直接理解我的意圖而自動翻頁呢？比如我只要頭往下示

12、意一下，就能自然而然翻到下一頁。我們現(xiàn)在很多行為，跳脫出來看，能發(fā)現(xiàn)很多很多不自然。天貓精靈等各種智能音箱，真正去用時，離自然交互還有比較遠(yuǎn)的距離。Ant Design 設(shè)計價值觀里，最最重要的就是自然價值觀，一切才剛剛開始探索。再說虛擬化。虛擬化不僅僅指 AR、VR 等技術(shù)，看過黑客帝國、西部世界等科幻片的，會對虛擬化有更多體感。如果以后每個小孩出生時，就會被植入一個能五感俱全的芯片，這種情況下，我們的人機交互會是怎么樣的。太多可能性與挑戰(zhàn)在等著我們。這一切都是體驗科技，是技術(shù)與設(shè)計的融合，是服務(wù)與用戶連接，是下圖中的一個公式。體驗科技是 UX = f(services) 這個公式，能將各種各種的 services（后端服務(wù)） 通過技術(shù)與設(shè)計的融合，轉(zhuǎn)變成體驗一