阿里妹導(dǎo)讀：前端是個(gè)資源型角色，在認(rèn)知里對(duì)業(yè)務(wù)的理解深度不夠，加上通常負(fù)責(zé)業(yè)務(wù)領(lǐng)域很廣，比較難有積累和沉淀。如果問(wèn)一個(gè)畢業(yè)10年的JAVA老司機(jī)，他跟你談的一定是大流量下的分布式架構(gòu)，而前端可能還是昨天茶余飯后討論vue和react，或者是angular誰(shuí)更強(qiáng)。

如何突破？如何提供業(yè)務(wù)更多價(jià)值？前端們一直在苦苦探尋。網(wǎng)上很多文章，給人啟發(fā)，但每個(gè)人面對(duì)的環(huán)境，負(fù)責(zé)的業(yè)務(wù)不同，不一定都適用。今天，阿里巴巴高級(jí)前端技術(shù)專(zhuān)家城池將結(jié)合自己過(guò)去幾年在阿里云的前端經(jīng)驗(yàn)，做個(gè)總結(jié)。

1.0 版本——工具&團(tuán)隊(duì)

今年是我來(lái)阿里云的第五個(gè)年頭了，從沒(méi)有想過(guò)會(huì)在一個(gè)公司呆的如此之久，更沒(méi)想過(guò)我能在一個(gè)崗位上沉淀4、5年。剛?cè)肼氃诎⒗镌瓶刂婆_(tái)團(tuán)隊(duì)，主要負(fù)責(zé)云盾控制臺(tái)、drds控制臺(tái)等，開(kāi)發(fā)過(guò)程中發(fā)現(xiàn)大部分場(chǎng)景是「表格」、「表單」，為了避免自己不斷重復(fù)開(kāi)發(fā)，封裝了simpleForm以及控制臺(tái)cli腳手架，可以做到新開(kāi)發(fā)控制臺(tái)一鍵敲定(這個(gè)腳手架直到去年還有人問(wèn)我如何用……也是經(jīng)久不衰)。

后由于組織結(jié)構(gòu)調(diào)整，我從控制臺(tái)團(tuán)隊(duì)獨(dú)立出來(lái)，負(fù)責(zé)當(dāng)時(shí)的網(wǎng)站運(yùn)營(yíng)方向，開(kāi)始比較艱難地從0-1組件團(tuán)隊(duì)過(guò)程。當(dāng)時(shí)業(yè)務(wù)相對(duì)比較簡(jiǎn)單，主要是：阿里云官網(wǎng)以及官網(wǎng)的Nodejs、云市場(chǎng)業(yè)務(wù)。由于在控制臺(tái)團(tuán)隊(duì)主要用的angularjs，感覺(jué)上手成本比較大，在建立新團(tuán)隊(duì)，以及我自己可以選擇的時(shí)候，React成了我的首選。當(dāng)時(shí)vue還沒(méi)成熟，其實(shí)能選的也只有react。

新的技術(shù)體系，需要有配套的工程化體系，當(dāng)時(shí)Def還處在1.0時(shí)期，為了穩(wěn)定以及減少開(kāi)發(fā)成本，很自然我們?cè)趚ef上做了插件式開(kāi)發(fā)，結(jié)合自己業(yè)務(wù)特性，分裝了響應(yīng)的模板，以及定制了開(kāi)發(fā)周期。

后由于xef1.0升級(jí)2.0，導(dǎo)致我們工具的不穩(wěn)定，且改動(dòng)非常大，逐步將我們的工程化體系獨(dú)立，這就有了后續(xù)的DBL（當(dāng)時(shí)叫屌爆了）。我跟老板做匯報(bào)時(shí)，老板覺(jué)得這名字上不了大雅之堂，還硬是憋了個(gè)比較有內(nèi)涵的名字——實(shí)在不好記，我現(xiàn)在都記不起來(lái)了。

這個(gè)階段，我們做了很多技術(shù)上的嘗試，團(tuán)隊(duì)成員都非常有激情。團(tuán)隊(duì)基礎(chǔ)設(shè)施建設(shè)，我們一直在優(yōu)化，隨著Dawn的基于中間件式的pipeline方式設(shè)計(jì)，可以說(shuō)是將工程化做到一個(gè)比較高的高度，未來(lái)不管是webpack升級(jí)到多少，或者新的打包工具出現(xiàn)，對(duì)我們來(lái)說(shuō)影響都比較小。

面向未來(lái)的模式，讓我們只需要修改內(nèi)核，使用者無(wú)感知。同時(shí)，新的方案也完全遵循集團(tuán)的標(biāo)準(zhǔn)。另外還有一個(gè)好處是：dawn不局限在react，你可以使用任何框架；dawn不局限在redux，你可以使用任何你喜歡的數(shù)據(jù)管理，實(shí)際上我們自己有用mota，mobx，graphql-apollo等等【1】。

除了折騰傳統(tǒng)前端領(lǐng)域，也嘗試做了很多跨棧的事情。在我所負(fù)責(zé)的業(yè)務(wù)中，由于「端」業(yè)務(wù)的確實(shí)，我們更多的是偏「全棧」。前端同學(xué)做全棧，講實(shí)話(huà)是不行的——絕大部分前端同學(xué)在架構(gòu)、運(yùn)維部署方面還是經(jīng)驗(yàn)偏少，考慮更多的是跟展現(xiàn)層相關(guān)。

在全棧路上，我們主要有兩個(gè)策略：

• 大前端下自己寫(xiě)部分業(yè)務(wù)的Java
• 利用serverless通過(guò)代理統(tǒng)一配置化轉(zhuǎn)

通過(guò)以上的技術(shù)基礎(chǔ)建設(shè)，已經(jīng)為我們構(gòu)建了很好的基礎(chǔ)。業(yè)務(wù)布局對(duì)應(yīng)著團(tuán)隊(duì)、組織的建設(shè)。過(guò)去幾年，團(tuán)隊(duì)從0到1建設(shè)，到目前N個(gè)在崗?fù)瑢W(xué)，形成了四個(gè)梯隊(duì)，三個(gè)業(yè)務(wù)方向&一個(gè)技術(shù)架構(gòu)方向，一路走來(lái)，感覺(jué)帶團(tuán)管理水很深，很多時(shí)候不是說(shuō)你帶的人越多越好，最近看到一本書(shū)提到一個(gè)詞「情感成熟」，這個(gè)非常重要。一個(gè)技術(shù)好，做業(yè)務(wù)的好手未必能管理好團(tuán)隊(duì)，在不同階段需要適應(yīng)不同角色的要求，最重要的是時(shí)刻保持憂(yōu)患意識(shí)、保持持續(xù)學(xué)習(xí)。在團(tuán)隊(duì)建設(shè)時(shí)，需要重點(diǎn)區(qū)分manager和leader，尤其是業(yè)務(wù)團(tuán)隊(duì)我們更希望成為leader，去帶著做業(yè)務(wù)，而不僅僅是做績(jī)效管理。

過(guò)去一年，我們?cè)跇I(yè)務(wù)思維指導(dǎo)下，owner了部分業(yè)務(wù)，并利用橫向的技術(shù)打通、橫向的業(yè)務(wù)思維，取到了一些成果，接下來(lái)進(jìn)入2.0。

2.0 業(yè)務(wù)思維——以橫向視角推進(jìn)業(yè)務(wù)賦能

我們通常把組織中的人分為：“一”字型、“|”字型、“T”字型、“+”字型。前端正好是—字型團(tuán)隊(duì)，負(fù)責(zé)的業(yè)務(wù)非常廣，而前端又是個(gè)非常稀缺的崗位，招聘很困難，所以盤(pán)子越大資源瓶頸越明顯。「一字型」角色團(tuán)隊(duì)，典型的問(wèn)題就是對(duì)業(yè)務(wù)的深度理解不夠，單純從技術(shù)層面去做營(yíng)銷(xiāo)的搭建、中后臺(tái)的可視化，結(jié)果都不盡如人意。這么說(shuō)起來(lái)，可能你覺(jué)得沒(méi)法往下看了，天花板在那里，如何突破其實(shí)并沒(méi)有太多可參考的例子。我寫(xiě)這篇總結(jié)，正是有些這樣的感悟，希望給大家做一些輸入，幫助大家去思考。

「一字型」雖然從業(yè)務(wù)上看我們的深度不夠，但從專(zhuān)業(yè)技能看我們是標(biāo)準(zhǔn)的「 | 字型」。前端經(jīng)過(guò)這10來(lái)年的發(fā)展，語(yǔ)言、框架、工具已經(jīng)逐步趨于穩(wěn)定，各種端的性能也越來(lái)越流暢，生態(tài)非常活躍，任何你碰到的困難相信社區(qū)都已經(jīng)有比較成熟的方案。前端生態(tài)快速發(fā)展的10年，也驗(yàn)證了我們這些人有著非常強(qiáng)大的學(xué)習(xí)能力，7天一個(gè)框架、3天一個(gè)數(shù)據(jù)庫(kù)估計(jì)都不是太大難事(略夸張，但表達(dá)的是這么個(gè)意思)。前端直接對(duì)接客戶(hù)，對(duì)客戶(hù)體驗(yàn)的敏感、對(duì)流程數(shù)據(jù)化的敏感、對(duì)業(yè)務(wù)邏輯流程的感知，都是我們生存的根，也是我們獨(dú)一無(wú)二的能力，這個(gè)根我們不能丟。

在前端縱深領(lǐng)域的深耕，讓我們成為了「緊缺資源」，隨著工具的完善，前端們也更希望利用技術(shù)為業(yè)務(wù)賦能。如何賦能？擋在我們面前的是「意識(shí)」。

在營(yíng)銷(xiāo)中，認(rèn)知、需求、品牌、品類(lèi)、價(jià)格五個(gè)要素中，「認(rèn)知」最為重要。許多一線互聯(lián)網(wǎng)公司在自己主營(yíng)業(yè)務(wù)范疇不斷布局，構(gòu)建了龐大的生態(tài)，做過(guò)很多嘗試，但看起來(lái)最終還是圍繞本身的基因做生態(tài)投資成功率要高一些。那我們想要業(yè)務(wù)賦能，瓶頸就在于「你個(gè)切頁(yè)面」也要賦能嗎？好好做好體驗(yàn)、提效不好嗎？我認(rèn)為「體驗(yàn)、提效」這是前端最核心的能力，也是畢生都努力要實(shí)現(xiàn)的目標(biāo)，坦白講我們沒(méi)法馬上解決資源瓶頸問(wèn)題，畢竟現(xiàn)在畢業(yè)生都在應(yīng)聘算法、AI、人工智能；我們也沒(méi)辦法搞一輪體驗(yàn)提升計(jì)劃；這是個(gè)很漫長(zhǎng)的過(guò)程。

但如果我們能以業(yè)務(wù)的角度出發(fā)，去發(fā)現(xiàn)問(wèn)題進(jìn)而輔助以技術(shù)手段解決，并沉淀平臺(tái)，應(yīng)對(duì)未來(lái)千變?nèi)f化的需求，可能更為實(shí)際一些。做為團(tuán)隊(duì)的TL，除了在專(zhuān)業(yè)上給與同學(xué)「|」型的能力縱深，也更希望帶著團(tuán)隊(duì)同學(xué)獲得更多業(yè)務(wù)體感。離開(kāi)業(yè)務(wù)談技術(shù)、談中臺(tái)都是空中樓閣；離開(kāi)業(yè)務(wù)談前端，注定只能是重復(fù)造輪子，而這種低水平的重復(fù)正在發(fā)生，且可能會(huì)持續(xù)很久。

在很長(zhǎng)一段時(shí)間里，我都試圖把我們「一字型」業(yè)務(wù)廣度做個(gè)抽象和融合，希望把「點(diǎn)狀」形成「線」，進(jìn)而形成整體「面」解決方案。我所負(fù)責(zé)的業(yè)務(wù)中，主要有4個(gè)大方向：

• 官網(wǎng)&營(yíng)銷(xiāo)——for長(zhǎng)尾
• 商業(yè)化流程后臺(tái)——for小二
• 核心售賣(mài)流程——核心能力層
• 銷(xiāo)售、合作伙伴

官網(wǎng)&營(yíng)銷(xiāo)：主要包含獲客、激活、轉(zhuǎn)換、留存幾個(gè)節(jié)點(diǎn)，構(gòu)建高效的「人」、「貨」、「場(chǎng)」。很長(zhǎng)一段時(shí)間里，阿里云的內(nèi)容維護(hù)、營(yíng)銷(xiāo)大促都是基于集團(tuán)CMS來(lái)的。傳統(tǒng)大促會(huì)場(chǎng)、卡片的方式，前端挖坑后運(yùn)營(yíng)編輯內(nèi)容，而阿里云的「商品」跟淘系有著比較大的差別。

另外，我們也沒(méi)有招商、選品的體系，導(dǎo)致這種簡(jiǎn)單人肉運(yùn)行的大促方式存在很多弊端，比如：不高效、不復(fù)用、不能做個(gè)性化、數(shù)據(jù)流程監(jiān)控力度不夠精細(xì)等。此外「投放」能力的建設(shè)還不夠，沒(méi)有辦法做到精細(xì)化的人群做精準(zhǔn)的營(yíng)銷(xiāo)內(nèi)容投放。為了解決這些問(wèn)題，去年開(kāi)始，由前端團(tuán)隊(duì)和pd一起推進(jìn)完善的營(yíng)銷(xiāo)體系建設(shè)：

• 在原有商品的基礎(chǔ)上，構(gòu)建了「營(yíng)銷(xiāo)商品」的概念。更抽象的「貨」，且可視化在線配置直接拉取了實(shí)時(shí)價(jià)格和庫(kù)存。通過(guò)我們1.0工具建設(shè)的dawn，打通開(kāi)發(fā)流程，使得整個(gè)開(kāi)發(fā)鏈路一致，成本更低。可抽象的貨匹配上專(zhuān)門(mén)為貨打造的UI視圖，形成場(chǎng)景能力沉淀。
• 構(gòu)建ACE(Alibaba Cloud Experience)架構(gòu)體系，打通搭建體系，通過(guò)技術(shù)降級(jí)打通各類(lèi)「場(chǎng)」，更好地承載好營(yíng)銷(xiāo)商品的投放。
• 通過(guò)全鏈路場(chǎng)景的曝光、點(diǎn)擊、轉(zhuǎn)化，以及最終成交的商品信息等數(shù)據(jù)的積累，生成用戶(hù)畫(huà)像，提供內(nèi)容場(chǎng)景化方案（在不同場(chǎng)景中精確得向用戶(hù)展示商品或信息)完善「人」的定位。

商業(yè)化商品配置：上面提到「營(yíng)銷(xiāo)商品」時(shí)提到「基礎(chǔ)商品」。目前阿里云基礎(chǔ)商品主要分為：「公有云商品」和「技術(shù)輸出型」。過(guò)去很長(zhǎng)一段時(shí)間我們偏公有云的能力建設(shè)，今年年初才開(kāi)始逐步融入專(zhuān)有云體系。

在商業(yè)化系統(tǒng)中，我們的小二需要配置售賣(mài)規(guī)則、價(jià)格，需要定義商品模型；同時(shí)復(fù)雜的規(guī)格之間的約束，異常復(fù)雜。如何提高商業(yè)化的輸入和輸出的強(qiáng)體驗(yàn)，我們還有很長(zhǎng)的路要走。結(jié)合今年的專(zhuān)有云項(xiàng)目，從模板的方式出發(fā)，將一類(lèi)產(chǎn)品做個(gè)聚合，簡(jiǎn)化商品模型配置的步驟，大大提高了配置效率，提高體驗(yàn)。

銷(xiāo)售&合作伙伴：15年剛開(kāi)始組建團(tuán)隊(duì)(這里指的都是前端團(tuán)隊(duì)，不是業(yè)務(wù)團(tuán)隊(duì))，15年 - 18年3月大部門(mén)的核心KPI是營(yíng)收、是首購(gòu)用戶(hù)數(shù)，主打的是中長(zhǎng)尾客戶(hù)，獲得了非常高速的市場(chǎng)增長(zhǎng)。

后來(lái)團(tuán)隊(duì)cover范圍不斷擴(kuò)大，也負(fù)責(zé)銷(xiāo)售&合作伙伴體系，圍繞著「市場(chǎng)營(yíng)銷(xiāo)」、「商機(jī)培育」、「商機(jī)轉(zhuǎn)化」、「合同履約」構(gòu)建了我們自己的銷(xiāo)售CRM系統(tǒng)。To C的業(yè)務(wù)通常比較好理解，畢竟我們也是C的一員，這段to B的經(jīng)歷，結(jié)合業(yè)務(wù)一號(hào)位的培訓(xùn)班，讓了解到銷(xiāo)售系統(tǒng)的核心，除了工具，最想要的是解決方案，是產(chǎn)品能力的豐富。

大概介紹了各個(gè)方向的業(yè)務(wù)，回到我們討論的主題來(lái)——借助橫向優(yōu)勢(shì)，整合資源&架構(gòu)提供業(yè)務(wù)賦能。為了分析他們之間的共性，我們經(jīng)過(guò)很多次的討論，終于匯聚得到我們的業(yè)務(wù)流程大圖：

從這個(gè)流程大圖中，各個(gè)分支最后都需要依賴(lài)「售賣(mài)能力」，售賣(mài)能力不同場(chǎng)景中有不同表現(xiàn)：

• 表現(xiàn)在營(yíng)銷(xiāo)中是「彈窗buy(減少跳出，直接購(gòu)買(mǎi))」、購(gòu)物車(chē)(多產(chǎn)品交叉購(gòu)買(mǎi)、數(shù)據(jù)算法推薦)、套餐(多產(chǎn)品打包優(yōu)惠售賣(mài))、提貨券(下單和生產(chǎn)分離的售賣(mài)能力)；
• 表現(xiàn)在銷(xiāo)售鏈路中是「產(chǎn)品配置清單」、「采購(gòu)單」、「CBM提供給大客戶(hù)的CTO價(jià)格計(jì)算器」；
• 表現(xiàn)在商品商業(yè)化鏈路中是「模板化」配置清單能力。

在一大團(tuán)子中找到業(yè)務(wù)的共性「售賣(mài)能力」，在經(jīng)歷一段時(shí)間比較耗資源、耗時(shí)的煙囪式開(kāi)發(fā)方式后，抽象出了售賣(mài)的核心支持層——紫金闕。這一層，我們定位為業(yè)務(wù)中臺(tái)，偏前端層面，也是大前端的領(lǐng)域范疇。唯一需要指出的是，我們用的是Java，沒(méi)有用nodejs，無(wú)其他差別。最后架構(gòu)如下：

新的架構(gòu)模式下，我們減少了大量的前后端溝通，比如「分銷(xiāo)采購(gòu)市場(chǎng)」以傳統(tǒng)開(kāi)發(fā)方式需要1-2個(gè)月，我們2周就搞定了。新的架構(gòu)模式，在可預(yù)見(jiàn)的未來(lái)，可以很好的支持各種營(yíng)銷(xiāo)新玩法，也可以支持銷(xiāo)售和合作伙伴的「解決方案」。

我想說(shuō)的是，如果沒(méi)有我們?nèi)繕I(yè)務(wù)的橫向視角，我們的抽象方案不會(huì)這么通用，這是前端團(tuán)隊(duì)的優(yōu)勢(shì)。如果沒(méi)有大前端穩(wěn)定的技術(shù)生態(tài)，我們也沒(méi)機(jī)會(huì)去做業(yè)務(wù)賦能。這才是前端的未來(lái)，利用橫向優(yōu)勢(shì)整合，結(jié)合某個(gè)領(lǐng)域做深做透，形成垂直深度，為業(yè)務(wù)提供價(jià)值，也讓我們的技術(shù)方案「有的放矢」。前端經(jīng)常是圍繞一個(gè)點(diǎn)做需求，得到工具，但無(wú)法提供解決方案，因?yàn)闆](méi)有業(yè)務(wù)屬性；唯有結(jié)合業(yè)務(wù)特性，做好沉淀，工具變成平臺(tái)才能釋放更大價(jià)值。

3.0探索以技術(shù)能力為業(yè)務(wù)提供增值

「云計(jì)算」核心是解決企業(yè)成本的問(wèn)題，用低成本獲得超強(qiáng)的計(jì)算、存儲(chǔ)能力，獲得高并發(fā)下彈性擴(kuò)容的能力。云計(jì)算提出了很多概念：IAAS、PAAS、SAAS等，相對(duì)前端角色來(lái)講，體感并不是很強(qiáng)。但是BaaS的出現(xiàn)，讓前端眼前一亮。

試下想，原先我們需要大量后臺(tái)開(kāi)發(fā)的應(yīng)用，逐步都沉淀成領(lǐng)域能力，提供BaaS服務(wù)給前端調(diào)用，前端再也不用考慮部署、運(yùn)維，只關(guān)心業(yè)務(wù)代碼，想想也是心動(dòng)。目前市面上提供類(lèi)似服務(wù)的公司很多，有專(zhuān)門(mén)做后臺(tái)數(shù)據(jù)存儲(chǔ)的如Leancloud、有做數(shù)據(jù)分析的、有做消息推送的等。所以，BAAS會(huì)是前端的春天嗎？這個(gè)拭目以待。

扯了理想，我們也說(shuō)說(shuō)現(xiàn)狀。目前阿里云大概是Buy In Aliyun，我們售賣(mài)的是IAAS層的資源，用戶(hù)核心的業(yè)務(wù)流程還是基于自己的研發(fā)體系。在前端這個(gè)縱深領(lǐng)域內(nèi)，基于云打造「云端一站式研發(fā)流程」，將企業(yè)前端變成：Work In Aliyun or Dev In Aliyun。通過(guò)對(duì)企業(yè)前端生命周期的分解，通過(guò)WebIDE來(lái)承載整個(gè)流程：

1. 將創(chuàng)建關(guān)聯(lián)阿里云的code

2.阿里云前端構(gòu)建工具dawn作為基礎(chǔ)構(gòu)建能力。

可定制化團(tuán)隊(duì)構(gòu)建的中間件(webpack、lint、server、mock等)、構(gòu)建stage(init、dev、test、publish)；基于工程化化能力提供統(tǒng)一的規(guī)范，提供各種不同應(yīng)用框架的初始化模板。

3.代碼點(diǎn)擊發(fā)布后，自動(dòng)編譯，并發(fā)布到cdn。

在此基礎(chǔ)流程之上，我們提供serverless相關(guān)能力，通過(guò)調(diào)用BaaS領(lǐng)域服務(wù)能力，以及FaaS網(wǎng)關(guān)觸發(fā)能力，實(shí)際上我們可以完全一站式，且是前端主導(dǎo)的應(yīng)用開(kāi)發(fā)。

前面提到我們的serverless應(yīng)用「云查詢(xún)」，這一層我們逐步進(jìn)行能力下沉，變成serverless基礎(chǔ)能力。各公司幾乎都有營(yíng)銷(xiāo)搭建體系，過(guò)去搭建的玩法不夠多樣，主要依托cms能力自行開(kāi)發(fā)，隨著現(xiàn)在各種「端」能力的延伸、多樣性化，營(yíng)銷(xiāo)搭建也變得越來(lái)越復(fù)雜。而我們基于「云查詢(xún)」之上沉淀出的「頁(yè)櫥」搭建體系，完全可以借助「云端一站式研發(fā)流程」提供很好的SAAS化服務(wù)。這是我們的優(yōu)勢(shì)，「云端前端解決方案」也只有我們適合做這個(gè)，這里只列舉了其中一個(gè)場(chǎng)景，類(lèi)似的機(jī)會(huì)還有很多。

總體感覺(jué)，一云多端借助serverless前端的春天已然來(lái)臨。抓住我們核心的競(jìng)爭(zhēng)力，并同時(shí)發(fā)現(xiàn)業(yè)務(wù)中的問(wèn)題，跨端推進(jìn)解決，這是最好的出路。你問(wèn)我做什么的，我…… 我就是阿里云CPO（首席頁(yè)面仔啊）。

原文發(fā)布時(shí)間為：2019-04-22
本文作者： 城池
本文來(lái)自云棲社區(qū)合作伙伴“ 阿里技術(shù)”，了解相關(guān)信息可以關(guān)注“ 阿里技術(shù)”。

總結(jié)

以上是生活随笔為你收集整理的在阿里云做前端，是种怎样的体验？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。