2018年·玉伯《從前端技術到體驗科技(附演講視訊)》
玉伯在首屆螞蟻體驗科技 SEE Conf 大會上分享的總結,已經取得玉伯本人同意,釋出cnode和node全棧公眾號。以下是正文
很抱歉在首屆螞蟻體驗科技 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(後端服務) 通過技術與設計的融合,轉變成體驗一流的使用者產品。這個公式的一個實現,就是螞蟻體驗雲。螞蟻體驗雲的初心,是希望能幫助有夢想的你,將一個個優秀的想法,通過體驗雲實現成一個個終端產品。
體驗雲才剛剛起步,目前已在內部服務螞蟻金服、阿里巴巴集團,同時快速孵化出了雲鳳蝶、語雀、小錢袋等創新產品。雖然還很不完善,但我們希望能儘快與使用者一起成長。很多激動人心的事正在發生,通過體驗科技的開放,我們希望著能為世界帶來更多平等的機會。
感謝聆聽,期待交流。
附 SEE Conf 演講視訊: 優酷地址 http://v.youku.com/v_show/id_XMzMwMzg2MDIwOA==.html
最後,演講 PPT 已精心整理並轉換為 PDF 上傳至 SEE Conf 語雀線上知識庫,歡迎下載(請 註冊語雀,個人描述內註明 #知乎seeconf# 便可快速申請邀請碼,登入後即可下載)
少抱怨,多思考,未來更美好
全文完
歡迎關注Cnode官方公眾號【node全棧】
如果想參與評論,請點選閱讀原文連結,進入國內最專業的cnode論壇
你身邊如果有朋友對Node.js或全棧感興趣,可以轉發給他們看看哦,O(∩_∩)O先謝過
相關文章
- 觀點|螞蟻金服玉伯:我們是如何從前端技術進化到體驗科技的?前端
- 【第1164期】從前端技術到體驗科技前端
- 支付寶玉伯:從前端到體驗,如何把格局做大前端
- 2018年喜歡的架構技術演講架構
- 視訊對講技術
- web技術支援| 從視訊元素流式傳輸到視訊元素Web
- 前端技術 | 從Flux到Redux前端Redux
- 技術年貨:美團技術沙龍合輯大放送——85個演講,70+小時視訊
- 前端技術演進(七):前端跨棧技術前端
- 2018最新區塊鏈技術,從入門到精通視訊教程(比特幣基礎技術)區塊鏈比特幣
- 從一到億,前端三年。 | 掘金技術徵文前端
- 前端技術演進(一):Web前端技術基礎前端Web
- 阿里雲視訊雲技術專家 LVS 演講全文:《“雲端一體”的智慧媒體生產製作演進之路》阿里
- 【從頭到腳】前端實現多人視訊聊天— WebRTC 實戰(多人篇)| 掘金技術徵文前端Web
- 玉伯的人生答案:做一個簡單自由有愛的技術人
- 《社交網路時代》作者演講視訊
- 優酷播放黑科技 | 自由視角技術體驗優化實踐優化
- HashiConf 2018 視訊資源:主題演講以及Breakout SessionsSession
- 聲網視訊通話,視訊直播小程式 SDK 初體驗 | 掘金技術徵文
- 前端技術演進(六):前端專案與技術實踐前端
- FMS 流媒體視訊技術
- 技術演講那些事:如何不讓你的演講令人討厭
- 從 Flutter 的視訊渲染到 App 落地經驗FlutterAPP
- 前端技術演進(二):前端與協議前端協議
- 前端技術演進:參考文章前端
- Android 聲網音視訊體驗記錄|掘金技術徵文Android
- IBM:從客戶體驗到企業體驗(附下載)IBM
- 那些年的體驗技術部
- 恆訊科技講解:CDN的原理技術及使用方法
- 前端技術演進(八):未來前端趨勢前端
- 走進JavaWeb技術世界10:從JavaBean講到SpringJavaWebBeanSpring
- 由「圖片」到「視訊」,澎思科技打破視訊行人再識別(ReID)技術三項世界紀錄
- 前端技術演進(九):參考文章前端
- 從技術到管理
- 前端技術演進(五):現代前端互動框架前端框架
- 福利|精選大咖演講乾貨、精華筆記、課件分享(附PPT/視訊)筆記
- MIT 最新技術:從靜音視訊中提取聲音MIT
- 讓前端開發者失業的技術,Flutter Web初體驗前端FlutterWeb