簡(jiǎn)單分享幾個(gè)前端領(lǐng)域在阿里的應(yīng)用場(chǎng)景，附帶一些我對(duì)前端技術(shù)領(lǐng)域的一些思考，期待交流互動(dòng)

2007年，Jeff Atwood 提出了一個(gè)著名的觀點(diǎn)，戲謔又似認(rèn)真地稱其為?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.

時(shí)間快速穿行13年到今天，仿佛在印證戲言成真：在互聯(lián)網(wǎng)軟件工業(yè)的疆域上，以ECMAScript 為圓點(diǎn)朝各個(gè)方向射出一箭，凡目力所及的范圍內(nèi)，皆似灑落上了這一箭之威。

而在阿里，也像在詮釋著這些上述斷言，前端技術(shù)如初生牛犢般從蠻荒時(shí)代的PC Web 踏入到多個(gè)領(lǐng)域，在許多重要戰(zhàn)場(chǎng)中發(fā)揮著重要作用。

在這兒，借著 D2 大會(huì)的契機(jī)，簡(jiǎn)單分享幾個(gè)前端領(lǐng)域在阿里的應(yīng)用場(chǎng)景，附帶一些我對(duì)前端技術(shù)領(lǐng)域的一些思考，期待能夠和眾多的行業(yè)同仁們有交流互動(dòng)的機(jī)會(huì)。

從 Web 互動(dòng)到媒體互動(dòng)

在早期，Web上的互動(dòng)是為提升頁(yè)面氛圍作為附庸而存在的，為此有一個(gè)專用詞“網(wǎng)頁(yè)特效”作為代稱。

曾經(jīng)很長(zhǎng)一段時(shí)間，互聯(lián)網(wǎng)上存在大量的特效代碼庫(kù)、特效網(wǎng)站專門服務(wù)于開(kāi)發(fā)者。而這些特效的基礎(chǔ)原理就是通過(guò) Javascript來(lái)變換樣式和操作DOM實(shí)現(xiàn)的。

隨著標(biāo)準(zhǔn)組織和瀏覽器廠商的不斷努力，現(xiàn)代化互動(dòng)的基礎(chǔ)開(kāi)始成型。除了硬件性能提升外，HTML5/CSS3，Canvas、WebGL讓互動(dòng)的開(kāi)發(fā)顯得更為標(biāo)準(zhǔn)、更高效可行，而非各種原理古怪、性能堪憂的Hack技巧。這也讓在Web上實(shí)現(xiàn)大型互動(dòng)成為可能性 - 可是要知道，曾幾何時(shí)，F(xiàn)lash幾乎是“雙十一狂歡城” 唯一的選擇。

今天，互動(dòng)產(chǎn)品及對(duì)應(yīng)的互動(dòng)前端技術(shù)早已成為各大互聯(lián)網(wǎng)公司的標(biāo)配：

• 在技術(shù)上，繼承了Web的優(yōu)勢(shì)，能夠調(diào)整迭代，無(wú)需發(fā)版，天生跨端的同時(shí)還能兼具不錯(cuò)的性能。

• 在商業(yè)形態(tài)上，更游戲化的互動(dòng)包括不限于“螞蟻森林”、“淘寶人生”、“天貓農(nóng)場(chǎng)”等類社交游戲產(chǎn)品使“人與人”、“人與平臺(tái)”之間的互動(dòng)具備了更好的可玩性、用戶黏性，從而具備了更高的商業(yè)價(jià)值。

2020年，互動(dòng)技術(shù)也成為阿里經(jīng)濟(jì)體前端技術(shù)的重點(diǎn)發(fā)力方向。

以淘系互動(dòng)技術(shù)為例，它構(gòu)建在一個(gè)大型、完備的前端基座上：一體化的工程、構(gòu)建、容器、框架、發(fā)布系統(tǒng)、渲染引擎。

互動(dòng)前端技術(shù)的核心簡(jiǎn)單地大概分為三部分：

1. （互動(dòng)）框架：基于游戲領(lǐng)域的通用構(gòu)架，自底到頂?shù)姆謱訉?shí)現(xiàn)-Render/Render OBJ/Design Pattern/Utils，具備加載器、ECS、場(chǎng)景、插件化擴(kuò)展等基礎(chǔ)能力。

2. （互動(dòng)）素材中心：接收并處理互動(dòng)展示層所需要的資源并輸出成型的互動(dòng)素材，并通過(guò)SaaS化服務(wù)進(jìn)行管理。

3. （互動(dòng)）研發(fā)平臺(tái)：面向互動(dòng)生產(chǎn)者的工作平臺(tái)，它具備包括不限于編碼、拼裝、編排在內(nèi)的構(gòu)建能力。

基于這套互動(dòng)技術(shù)體系，冷冰冰的商業(yè)化產(chǎn)品開(kāi)始具備了越來(lái)越多的趣味性和創(chuàng)意體驗(yàn)。

當(dāng)互聯(lián)網(wǎng)基礎(chǔ)設(shè)施不斷完善，硬件與帶寬成本持續(xù)降低，直播/短視頻逐漸形成獲取用戶時(shí)間的主流產(chǎn)品形態(tài)，也成為人&人、人&機(jī)互動(dòng)的新場(chǎng)景。

傳統(tǒng)的解決方案是在視頻媒體上“遮蓋”一層Web頁(yè)面，內(nèi)嵌在頁(yè)面中的互動(dòng)（如領(lǐng)取紅包）和視頻內(nèi)容沒(méi)有事實(shí)上的關(guān)聯(lián)，而是通過(guò)預(yù)置的邏輯進(jìn)行觸發(fā)，“偽裝”成視頻與互動(dòng)同步的用戶體感。這種方式成本低廉，但代價(jià)則是犧牲了創(chuàng)意和靈活性，缺少想像空間，沒(méi)有未來(lái)。

而媒體智能互動(dòng)則是更合理的解決方案：通過(guò)智能化手段進(jìn)行手勢(shì)、表情等識(shí)別，互動(dòng)素材與效果均與視頻內(nèi)容強(qiáng)關(guān)聯(lián)，并在視頻流上完成素材渲染。

• 從實(shí)時(shí)渲染角度來(lái)看，核心技術(shù)環(huán)節(jié)在：圖像采集、數(shù)據(jù)處理、算法識(shí)別、渲染計(jì)算、端渲染展示

• 從研發(fā)生產(chǎn)角度來(lái)看，關(guān)鍵流程在：玩法生產(chǎn)、應(yīng)用管理、玩法使用、端渲染展示

上述每個(gè)節(jié)點(diǎn)都涉及到各個(gè)關(guān)聯(lián)技術(shù)及工具/產(chǎn)品，正是這些能力組成了媒體智能的技術(shù)體系。

從長(zhǎng)遠(yuǎn)來(lái)看，無(wú)論在互動(dòng)的自身形態(tài)、輸入方式、承載媒介還是玩法創(chuàng)意，都必將有長(zhǎng)足地發(fā)展，對(duì)于前端體系的從業(yè)人員，只要持續(xù)關(guān)注用戶&終端、熟悉業(yè)務(wù)、不斷學(xué)習(xí)必定會(huì)獲得長(zhǎng)足的技術(shù)競(jìng)爭(zhēng)力和創(chuàng)造力！

搭建，不止于提效

過(guò)去幾年，我在負(fù)責(zé)面向消費(fèi)者端的搭建體系：把形形色色、千奇百怪的頁(yè)面都看作組件們的集合，然后用極致簡(jiǎn)單的搭積木方式將它進(jìn)行可視化組裝。

如果拿冰山舉例，我們盡量讓用戶們（運(yùn)營(yíng)、開(kāi)發(fā)者）只看到露出海面的那一段，把概念和實(shí)操盡一切可能地簡(jiǎn)化，而被屏蔽在冰山下面的東西，包括了一系列的交付

• 高度被抽象的?界面+數(shù)據(jù)描述標(biāo)準(zhǔn)?，我們稱之為模塊；

• 兼顧性能和靈活性的?客戶端+服務(wù)端渲染架構(gòu)?；

• 離線的、簡(jiǎn)潔的?零代碼可視化平臺(tái)；

• 提供線上服務(wù)的?頁(yè)面渲染引擎 + 數(shù)據(jù)網(wǎng)關(guān);

有了這些交付物（以及基于它構(gòu)建的大型生態(tài)），前端、設(shè)計(jì)師、后端（多數(shù)時(shí)候甚至不需要）圍繞著高度可被復(fù)用的產(chǎn)品模塊即可進(jìn)行頁(yè)面組裝，將業(yè)務(wù)發(fā)布上線。這個(gè)方案簡(jiǎn)單又高效。以至于在很長(zhǎng)時(shí)間，這套構(gòu)架最終產(chǎn)生成了數(shù)以百萬(wàn)計(jì)的各種頁(yè)面，其中包括不限于雙十一，我們?cè)诎⒗锵蹈鞣NApp看到的很多頁(yè)面都是基于這樣的方案出來(lái)的。

然而這并不是終點(diǎn)。

其實(shí)道理也很簡(jiǎn)單：當(dāng)效率上達(dá)到一定臨界點(diǎn)后（通常是邊際效應(yīng)開(kāi)始遞減），對(duì)應(yīng)的技術(shù)方案都越界碰觸到另一個(gè)領(lǐng)域。

搭建技術(shù)也一樣 - 一個(gè)業(yè)務(wù)的運(yùn)行通常不是搭建一個(gè)頁(yè)面就完成了 - 它涉及到整個(gè)業(yè)務(wù)的執(zhí)行周期。好比一個(gè)線下商場(chǎng)要做一場(chǎng)年貨活動(dòng)，上架商品?這個(gè)任務(wù)只是工作中的一部份，其他包括不限于選商家、選貨品、制造氛圍、顧客動(dòng)線都是必須得完成的工作。

而線上業(yè)務(wù)的運(yùn)行亦如此，除了“搭建頁(yè)面” 這個(gè)看似簡(jiǎn)單的動(dòng)作外，還有各種上下游環(huán)節(jié)，包括不限于 - 數(shù)據(jù)哪來(lái)（選品）、以什么規(guī)則展示（算法千人千面）、抵達(dá)什么用戶（人群規(guī)則）、界面是怎樣的（新式交互）、在哪兒展示（跨端渲染）、瀏覽體驗(yàn)是否又快又好（性能&質(zhì)量）、業(yè)務(wù)效果如何（數(shù)據(jù)看板）等等，每個(gè)環(huán)節(jié)都或多或少地關(guān)聯(lián)著前端相關(guān)技術(shù)。

基于此，我們根據(jù)業(yè)務(wù)的實(shí)際需要拓展了系統(tǒng)的功能邊界。慢慢地，原本的面向效率、被高度抽象化的工具系統(tǒng)成為了一個(gè)解決具象業(yè)務(wù)的產(chǎn)品。

在這個(gè)轉(zhuǎn)變過(guò)程中，原本核心工作是完成前臺(tái)頁(yè)面的前端程序員，逐漸成為了一個(gè)面向業(yè)務(wù)的技術(shù)工程師，而其工作職責(zé)從原來(lái)的高效交付擴(kuò)大到了方方面面，技術(shù)視野、技術(shù)能力都得到了很大的提升。這時(shí)，我們也很難單純用技術(shù)棧來(lái)界定這位程序員是前端抑或是后端工程師。

相信在未來(lái)，這樣的前端工程師會(huì)越來(lái)越多，也會(huì)成為前端發(fā)展的一個(gè)方向。

技術(shù)棧從來(lái)不是技術(shù)人的桎梏！

Serverless，孕育新的生產(chǎn)關(guān)系

還是得談?wù)勥@個(gè)話題，如果說(shuō)越發(fā)完善的研發(fā)工程體系在提升交付整備質(zhì)量、周全的性能故障監(jiān)控系統(tǒng)在改進(jìn)交付效果，那么 Serverless 就是在嘗試著在最合適的環(huán)節(jié)來(lái)優(yōu)化生產(chǎn)關(guān)系。

想必很多初入 CRUD 階段的前端同學(xué)都嘗試寫(xiě)過(guò)一個(gè)形如 Todo、blog-like等應(yīng)用，基于廣受各類教程推薦的 Express/Koa+MongoDB+ReactJS/VueJS 套件方案實(shí)現(xiàn)。

然而寫(xiě)完應(yīng)用后的躊躇滿志在遇到技術(shù)面試/業(yè)務(wù)應(yīng)用時(shí)則一片茫然：怎么和預(yù)想的不一樣？?- 性能調(diào)試、高可用、容量規(guī)劃、多應(yīng)用調(diào)用、數(shù)據(jù)庫(kù)優(yōu)化、跨棧中間件等等都是未曾太多考慮的問(wèn)題，但若稍加深入思考，無(wú)需很久就進(jìn)入新一階段的靈魂拷問(wèn)：為什么我要使用Node而不是其他工業(yè)化程度更高的語(yǔ)言技術(shù)棧？

而云原生下的Serverless 讓多數(shù)前端們開(kāi)始解除束縛：

1. 便捷可彈的BaaS服務(wù)

2. 弱/低運(yùn)維成本

3. 現(xiàn)代化的函數(shù)計(jì)算

4. 高速交付

無(wú)用贅談太多的優(yōu)勢(shì)，只需緩解運(yùn)維成本、穩(wěn)定可彈的計(jì)算資源，在完備地BaaS下，離終端用戶足夠近的前端們就能快速的進(jìn)行多棧開(kāi)發(fā)，而這則很大機(jī)會(huì)帶來(lái)的生產(chǎn)關(guān)系的變革，重新定義前后端的邊界 - 把原來(lái)以 BFF 層為界碑的研發(fā)模式重新刷新一遍。

在這個(gè)基礎(chǔ)上，一部份的前端職能會(huì)發(fā)生深刻的變化，他們?yōu)槌蔀殡x業(yè)務(wù)更近的產(chǎn)品工程師，既可以實(shí)施商業(yè)小程序/輕應(yīng)用，也能主導(dǎo)一場(chǎng)營(yíng)銷大促、也能驅(qū)動(dòng)一個(gè)新業(yè)務(wù)場(chǎng)景的誕生。

當(dāng)然，圍繞著這種生產(chǎn)關(guān)系的周邊生態(tài)，如職業(yè)定義、招聘要求、未來(lái)前景、企業(yè)人才規(guī)劃都會(huì)隨之發(fā)生變化。

也期待著這一天的到來(lái)。

關(guān)于 D2 多樣化專場(chǎng)

其實(shí)在阿里以至行業(yè)，有更多的垂直深入的前端技術(shù)場(chǎng)景，包括不限于智能研發(fā)、文檔協(xié)同、行為分析、跨端IoT、中后臺(tái)研發(fā)、數(shù)據(jù)可視化、跨端研發(fā)等技術(shù)領(lǐng)域，限于篇幅不在此贅述，其中一部分領(lǐng)域性內(nèi)容也會(huì)在 D2 大會(huì)上進(jìn)行輸出。

D2 組委會(huì)成員們花了相當(dāng)多的時(shí)間和精力組織預(yù)選、試講和遴選，從超過(guò)40個(gè)話題里面選取了少數(shù)具有代表性、技術(shù)性的內(nèi)容，而它們都來(lái)自各領(lǐng)域的技術(shù)專家們基于實(shí)際的業(yè)務(wù)場(chǎng)景進(jìn)行抽象淬煉，內(nèi)容質(zhì)量和信息密度都經(jīng)得起推敲，也感謝這些熱愛(ài)技術(shù)、愿意分享的嘉賓們。

寫(xiě)到最后

在最后，今年的D2設(shè)立了“多樣化”專題，當(dāng)然不是為了證明前端無(wú)所不至這種狹隘觀點(diǎn)。

其實(shí)，除了很多人記得的?Atwood?的妙語(yǔ)外，?Reg Braithwaite?也有箴言：

The strength of JavaScript is that you can do anything. The weakness is that you will.

軟件語(yǔ)言史上至今沒(méi)有、相信未來(lái)也不會(huì)有銀彈。

任何一項(xiàng)技術(shù)的誕生都源于解決某類邏輯事務(wù)，而隨著問(wèn)題逐漸被緩解，帶著技術(shù)信仰的領(lǐng)域頭羊們總會(huì)試圖在衍生場(chǎng)景中復(fù)用技術(shù)優(yōu)勢(shì)，撞破邊界牢籠 - 盡管大多最終頹然而止 - 這是不幸的，但確實(shí)是幸福的：不幸的是他們沒(méi)有成功，幸運(yùn)的也正是他們失敗了。

在前端領(lǐng)域，包括不限于標(biāo)準(zhǔn)規(guī)范、應(yīng)用框架、解決方案每隔一個(gè)階段就會(huì)被更新，我們不需要抱怨要學(xué)習(xí)的東西如此之多。因?yàn)檫@一方面預(yù)示著這項(xiàng)技術(shù)的工業(yè)化程度還需要提升，同樣地，在問(wèn)題的背面也意味著行業(yè)空間大，具備非凡活力，行業(yè)人擁有了不起的創(chuàng)造力和多且大的發(fā)展機(jī)會(huì)。

相信驅(qū)動(dòng)這些活力和創(chuàng)造力的，不是來(lái)自空中造樓閣欲望，而是技術(shù)人對(duì)解決現(xiàn)實(shí)世界問(wèn)題的渴望。

同時(shí)也衷心祝愿所有參加D2的前端同行們能夠在這個(gè)快速變化、發(fā)展的技術(shù)領(lǐng)域中找到最適合的賽道成就自我！