淺談阿里前端的多樣化
簡單分享幾個前端領域在阿里的應用場景，附帶一些我對前端技術領域的一些思考，期待交流互動
2007年，Jeff Atwood 提出了一個著名的觀點，戲謔又似認真地稱其為?Atwood's Law（https://blog.codinghorror.com/the-principle-of-least-power/）：
any application that can be written in JavaScript, will eventually be written in JavaScript.
時間快速穿行13年到今天，仿佛在印證戲言成真：在互聯(lián)網(wǎng)軟件工業(yè)的疆域上，以ECMAScript 為圓點朝各個方向射出一箭，凡目力所及的范圍內(nèi)，皆似灑落上了這一箭之威。
而在阿里，也像在詮釋著這些上述斷言，前端技術如初生牛犢般從蠻荒時代的PC Web 踏入到多個領域，在許多重要戰(zhàn)場中發(fā)揮著重要作用。
在這兒，借著 D2 大會的契機，簡單分享幾個前端領域在阿里的應用場景，附帶一些我對前端技術領域的一些思考，期待能夠和眾多的行業(yè)同仁們有交流互動的機會。
從 Web 互動到媒體互動
在早期，Web上的互動是為提升頁面氛圍作為附庸而存在的，為此有一個專用詞“網(wǎng)頁特效”作為代稱。
曾經(jīng)很長一段時間，互聯(lián)網(wǎng)上存在大量的特效代碼庫、特效網(wǎng)站專門服務于開發(fā)者。而這些特效的基礎原理就是通過 Javascript來變換樣式和操作DOM實現(xiàn)的。
隨著標準組織和瀏覽器廠商的不斷努力，現(xiàn)代化互動的基礎開始成型。除了硬件性能提升外，HTML5/CSS3，Canvas、WebGL讓互動的開發(fā)顯得更為標準、更高效可行，而非各種原理古怪、性能堪憂的Hack技巧。這也讓在Web上實現(xiàn)大型互動成為可能性 - 可是要知道，曾幾何時，F(xiàn)lash幾乎是“雙十一狂歡城” 唯一的選擇。
今天，互動產(chǎn)品及對應的互動前端技術早已成為各大互聯(lián)網(wǎng)公司的標配：
在技術上，繼承了Web的優(yōu)勢，能夠調整迭代，無需發(fā)版，天生跨端的同時還能兼具不錯的性能。
在商業(yè)形態(tài)上，更游戲化的互動包括不限于“螞蟻森林”、“淘寶人生”、“天貓農(nóng)場”等類社交游戲產(chǎn)品使“人與人”、“人與平臺”之間的互動具備了更好的可玩性、用戶黏性，從而具備了更高的商業(yè)價值。
2020年，互動技術也成為阿里經(jīng)濟體前端技術的重點發(fā)力方向。
以淘系互動技術為例，它構建在一個大型、完備的前端基座上：一體化的工程、構建、容器、框架、發(fā)布系統(tǒng)、渲染引擎。
互動前端技術的核心簡單地大概分為三部分：
（互動）框架：基于游戲領域的通用構架，自底到頂?shù)姆謱訉崿F(xiàn)-Render/Render OBJ/Design Pattern/Utils，具備加載器、ECS、場景、插件化擴展等基礎能力。
（互動）素材中心：接收并處理互動展示層所需要的資源并輸出成型的互動素材，并通過SaaS化服務進行管理。
（互動）研發(fā)平臺：面向互動生產(chǎn)者的工作平臺，它具備包括不限于編碼、拼裝、編排在內(nèi)的構建能力。
基于這套互動技術體系，冷冰冰的商業(yè)化產(chǎn)品開始具備了越來越多的趣味性和創(chuàng)意體驗。
當互聯(lián)網(wǎng)基礎設施不斷完善，硬件與帶寬成本持續(xù)降低，直播/短視頻逐漸形成獲取用戶時間的主流產(chǎn)品形態(tài)，也成為人&人、人&機互動的新場景。
傳統(tǒng)的解決方案是在視頻媒體上“遮蓋”一層Web頁面，內(nèi)嵌在頁面中的互動（如領取紅包）和視頻內(nèi)容沒有事實上的關聯(lián)，而是通過預置的邏輯進行觸發(fā)，“偽裝”成視頻與互動同步的用戶體感。這種方式成本低廉，但代價則是犧牲了創(chuàng)意和靈活性，缺少想像空間，沒有未來。
而媒體智能互動則是更合理的解決方案：通過智能化手段進行手勢、表情等識別，互動素材與效果均與視頻內(nèi)容強關聯(lián)，并在視頻流上完成素材渲染。
從實時渲染角度來看，核心技術環(huán)節(jié)在：圖像采集、數(shù)據(jù)處理、算法識別、渲染計算、端渲染展示
從研發(fā)生產(chǎn)角度來看，關鍵流程在：玩法生產(chǎn)、應用管理、玩法使用、端渲染展示
上述每個節(jié)點都涉及到各個關聯(lián)技術及工具/產(chǎn)品，正是這些能力組成了媒體智能的技術體系。
從長遠來看，無論在互動的自身形態(tài)、輸入方式、承載媒介還是玩法創(chuàng)意，都必將有長足地發(fā)展，對于前端體系的從業(yè)人員，只要持續(xù)關注用戶&終端、熟悉業(yè)務、不斷學習必定會獲得長足的技術競爭力和創(chuàng)造力！
搭建，不止于提效
過去幾年，我在負責面向消費者端的搭建體系：把形形色色、千奇百怪的頁面都看作組件們的集合，然后用極致簡單的搭積木方式將它進行可視化組裝。
如果拿冰山舉例，我們盡量讓用戶們（運營、開發(fā)者）只看到露出海面的那一段，把概念和實操盡一切可能地簡化，而被屏蔽在冰山下面的東西，包括了一系列的交付
高度被抽象的?界面+數(shù)據(jù)描述標準?，我們稱之為模塊；
兼顧性能和靈活性的?客戶端+服務端渲染架構?；
離線的、簡潔的?零代碼可視化平臺；
提供線上服務的?頁面渲染引擎 + 數(shù)據(jù)網(wǎng)關;
有了這些交付物（以及基于它構建的大型生態(tài)），前端、設計師、后端（多數(shù)時候甚至不需要）圍繞著高度可被復用的產(chǎn)品模塊即可進行頁面組裝，將業(yè)務發(fā)布上線。這個方案簡單又高效。以至于在很長時間，這套構架最終產(chǎn)生成了數(shù)以百萬計的各種頁面，其中包括不限于雙十一，我們在阿里系各種App看到的很多頁面都是基于這樣的方案出來的。
然而這并不是終點。
其實道理也很簡單：當效率上達到一定臨界點后（通常是邊際效應開始遞減），對應的技術方案都越界碰觸到另一個領域。
搭建技術也一樣 - 一個業(yè)務的運行通常不是搭建一個頁面就完成了 - 它涉及到整個業(yè)務的執(zhí)行周期。好比一個線下商場要做一場年貨活動，上架商品?這個任務只是工作中的一部份，其他包括不限于選商家、選貨品、制造氛圍、顧客動線都是必須得完成的工作。
而線上業(yè)務的運行亦如此，除了“搭建頁面” 這個看似簡單的動作外，還有各種上下游環(huán)節(jié)，包括不限于 - 數(shù)據(jù)哪來（選品）、以什么規(guī)則展示（算法千人千面）、抵達什么用戶（人群規(guī)則）、界面是怎樣的（新式交互）、在哪兒展示（跨端渲染）、瀏覽體驗是否又快又好（性能&質量）、業(yè)務效果如何（數(shù)據(jù)看板）等等，每個環(huán)節(jié)都或多或少地關聯(lián)著前端相關技術。
基于此，我們根據(jù)業(yè)務的實際需要拓展了系統(tǒng)的功能邊界。慢慢地，原本的面向效率、被高度抽象化的工具系統(tǒng)成為了一個解決具象業(yè)務的產(chǎn)品。
在這個轉變過程中，原本核心工作是完成前臺頁面的前端程序員，逐漸成為了一個面向業(yè)務的技術工程師，而其工作職責從原來的高效交付擴大到了方方面面，技術視野、技術能力都得到了很大的提升。這時，我們也很難單純用技術棧來界定這位程序員是前端抑或是后端工程師。
相信在未來，這樣的前端工程師會越來越多，也會成為前端發(fā)展的一個方向。
技術棧從來不是技術人的桎梏！
Serverless，孕育新的生產(chǎn)關系
還是得談談這個話題，如果說越發(fā)完善的研發(fā)工程體系在提升交付整備質量、周全的性能故障監(jiān)控系統(tǒng)在改進交付效果，那么 Serverless 就是在嘗試著在最合適的環(huán)節(jié)來優(yōu)化生產(chǎn)關系。
想必很多初入 CRUD 階段的前端同學都嘗試寫過一個形如 Todo、blog-like等應用，基于廣受各類教程推薦的 Express/Koa+MongoDB+ReactJS/VueJS 套件方案實現(xiàn)。
然而寫完應用后的躊躇滿志在遇到技術面試/業(yè)務應用時則一片茫然：怎么和預想的不一樣？?- 性能調試、高可用、容量規(guī)劃、多應用調用、數(shù)據(jù)庫優(yōu)化、跨棧中間件等等都是未曾太多考慮的問題，但若稍加深入思考，無需很久就進入新一階段的靈魂拷問：為什么我要使用Node而不是其他工業(yè)化程度更高的語言技術棧？
而云原生下的Serverless 讓多數(shù)前端們開始解除束縛：
便捷可彈的BaaS服務
弱/低運維成本
現(xiàn)代化的函數(shù)計算
高速交付
無用贅談太多的優(yōu)勢，只需緩解運維成本、穩(wěn)定可彈的計算資源，在完備地BaaS下，離終端用戶足夠近的前端們就能快速的進行多棧開發(fā)，而這則很大機會帶來的生產(chǎn)關系的變革，重新定義前后端的邊界 - 把原來以 BFF 層為界碑的研發(fā)模式重新刷新一遍。
在這個基礎上，一部份的前端職能會發(fā)生深刻的變化，他們?yōu)槌蔀殡x業(yè)務更近的產(chǎn)品工程師，既可以實施商業(yè)小程序/輕應用，也能主導一場營銷大促、也能驅動一個新業(yè)務場景的誕生。
當然，圍繞著這種生產(chǎn)關系的周邊生態(tài)，如職業(yè)定義、招聘要求、未來前景、企業(yè)人才規(guī)劃都會隨之發(fā)生變化。
也期待著這一天的到來。
關于 D2 多樣化專場
其實在阿里以至行業(yè)，有更多的垂直深入的前端技術場景，包括不限于智能研發(fā)、文檔協(xié)同、行為分析、跨端IoT、中后臺研發(fā)、數(shù)據(jù)可視化、跨端研發(fā)等技術領域，限于篇幅不在此贅述，其中一部分領域性內(nèi)容也會在 D2 大會上進行輸出。
D2 組委會成員們花了相當多的時間和精力組織預選、試講和遴選，從超過40個話題里面選取了少數(shù)具有代表性、技術性的內(nèi)容，而它們都來自各領域的技術專家們基于實際的業(yè)務場景進行抽象淬煉，內(nèi)容質量和信息密度都經(jīng)得起推敲，也感謝這些熱愛技術、愿意分享的嘉賓們。
寫到最后
在最后，今年的D2設立了“多樣化”專題，當然不是為了證明前端無所不至這種狹隘觀點。
其實，除了很多人記得的?Atwood?的妙語外，?Reg Braithwaite?也有箴言：
The strength of JavaScript is that you can do anything. The weakness is that you will.
軟件語言史上至今沒有、相信未來也不會有銀彈。
任何一項技術的誕生都源于解決某類邏輯事務，而隨著問題逐漸被緩解，帶著技術信仰的領域頭羊們總會試圖在衍生場景中復用技術優(yōu)勢，撞破邊界牢籠 - 盡管大多最終頹然而止 - 這是不幸的，但確實是幸福的：不幸的是他們沒有成功，幸運的也正是他們失敗了。
在前端領域，包括不限于標準規(guī)范、應用框架、解決方案每隔一個階段就會被更新，我們不需要抱怨要學習的東西如此之多。因為這一方面預示著這項技術的工業(yè)化程度還需要提升，同樣地，在問題的背面也意味著行業(yè)空間大，具備非凡活力，行業(yè)人擁有了不起的創(chuàng)造力和多且大的發(fā)展機會。
相信驅動這些活力和創(chuàng)造力的，不是來自空中造樓閣欲望，而是技術人對解決現(xiàn)實世界問題的渴望。
同時也衷心祝愿所有參加D2的前端同行們能夠在這個快速變化、發(fā)展的技術領域中找到最適合的賽道成就自我！
