4月的一個(gè)周五傍晚，剛剛結(jié)束一場(chǎng)語(yǔ)音會(huì)議的明哥，拿起桌上的咖啡，一口灌了下去。同時(shí)，翻了翻攤在右手邊的筆記本，可能在思考即將拋給他的一些問(wèn)題。

在華為已經(jīng)工作第15個(gè)年頭的他，目前是華為云官網(wǎng)研發(fā)團(tuán)隊(duì)的技術(shù)負(fù)責(zé)人，看護(hù)著華為云對(duì)外的“門(mén)面”。

作為技術(shù)管理者，明哥有個(gè)小習(xí)慣，“每天給自己留一些靜默時(shí)間，在這段時(shí)間內(nèi)，盡量不處理郵件、工作信息，能夠做一些代碼開(kāi)發(fā)、review、技術(shù)研究的工作?！?/p>

他還習(xí)慣把事務(wù)性的工作都安排在前半周，后半周能有相對(duì)完整的時(shí)間，和團(tuán)隊(duì)的架構(gòu)師、設(shè)計(jì)師系統(tǒng)討論比較大的技術(shù)方案。

在鉆研技術(shù)這塊，明哥喜歡往下走，去看它的底層運(yùn)行機(jī)制，它的源碼。他也是 “一萬(wàn)個(gè)小時(shí)定律”的擁躉者，始終堅(jiān)信積累足夠的時(shí)間和精力，一定能在技術(shù)上有所建樹(shù)，觸類(lèi)旁通。

所以，他能和團(tuán)隊(duì)僅用半年多的時(shí)間，完成一次幾乎不可能的挑戰(zhàn)。

再難，官網(wǎng)“門(mén)面”不能倒

在華為南京研究所露天長(zhǎng)梯的二層平臺(tái)上，一直豎著一塊海報(bào)板：二戰(zhàn)中被打得像篩子一樣、渾身彈孔累累的伊爾2飛機(jī)，依然堅(jiān)持飛行，終于安全返回。

兩年前的下午，明哥雙手環(huán)胸站在辦公室的落地窗前，緊緊盯著這塊海報(bào)，思緒卻停在十分鐘前接到的任務(wù)上：他的團(tuán)隊(duì)需要在有限的時(shí)間內(nèi)，完成官網(wǎng)內(nèi)容生產(chǎn)平臺(tái)的全部自研重構(gòu)，且達(dá)到業(yè)界領(lǐng)先的水平。

這是一次走出技術(shù)舒適圈的挑戰(zhàn)，放棄他們非常熟悉的技術(shù)架構(gòu)，一切從頭開(kāi)始，好比明明有一條高速公路通往終點(diǎn)，但是你不能走，你得自己新建一條。

這期間，華為云官網(wǎng)團(tuán)隊(duì)既要保證日常業(yè)務(wù)的正常運(yùn)轉(zhuǎn)，按部就班解決各種業(yè)務(wù)需求，又要抽調(diào)出足夠的人手搭建新的內(nèi)容平臺(tái)，時(shí)間緊、人手少、任務(wù)重。

在不斷的技術(shù)研討，重寫(xiě)代碼，驗(yàn)證測(cè)試后，項(xiàng)目的最小可用版本完成了showcase，彼時(shí)大家都很有成就感，也覺(jué)得終于能緩一緩了。然而一個(gè)更緊急的任務(wù)再次拋向他們：為了快速催熟產(chǎn)品，接下來(lái)的大促期間將直接使用自研系統(tǒng)。

此時(shí)離大促還有兩個(gè)月，開(kāi)發(fā)團(tuán)隊(duì)除了要分出一部分兵力生產(chǎn)頁(yè)面（為了確保用戶(hù)體驗(yàn)，頁(yè)面要全新設(shè)計(jì)），還要補(bǔ)齊高并發(fā)、高可用、安全可信等產(chǎn)品化所必須的能力。通常，這樣的能力一般至少需要3到6個(gè)月，才能打磨完善的差不多。

明哥和團(tuán)隊(duì)只有背水一戰(zhàn)，那段時(shí)間里，任務(wù)板上寫(xiě)滿(mǎn)了被拆分的工作細(xì)節(jié)，新的方案不斷覆蓋舊的版本，會(huì)議室里坐陣的技術(shù)專(zhuān)家走了一波，又新來(lái)一波……大家拒絕妥協(xié)，一門(mén)心思埋頭往前沖。

比如，為了保證生產(chǎn)出來(lái)的頁(yè)面在任何情況下都不能丟，設(shè)計(jì)團(tuán)隊(duì)翻閱了大量資料，與安全、可用性、性能專(zhuān)家多次討論和原型驗(yàn)證，然后選擇了最‘冗余’的方案，最終成功應(yīng)對(duì)多次突發(fā)情況，經(jīng)受住了大促的考驗(yàn)。

歷時(shí)8個(gè)月，從項(xiàng)目啟動(dòng)到第一個(gè)基于自研的內(nèi)容生產(chǎn)頁(yè)面誕生，官網(wǎng)團(tuán)隊(duì)交出了一份漂亮的成績(jī)單。

“挑戰(zhàn)非常大，但我們成功了。”

與此同時(shí)，他們還“順帶”開(kāi)發(fā)了一個(gè)PQP頁(yè)面質(zhì)量平臺(tái)，負(fù)責(zé)自動(dòng)檢查頁(yè)面上線(xiàn)前的內(nèi)容質(zhì)量，包括頁(yè)面的404、敏感字詞、中英文單詞的拼寫(xiě)、圖標(biāo)的設(shè)計(jì)元素是否符合規(guī)范等等。

從接手華為云官網(wǎng)開(kāi)始，質(zhì)量就是懸在明哥頭上的達(dá)摩克利斯之劍。用他的話(huà)說(shuō)，“質(zhì)量這個(gè)東西，不出問(wèn)題的時(shí)候大家不會(huì)覺(jué)得多重要，但凡發(fā)生問(wèn)題，就會(huì)成為眾矢之的，所謂善戰(zhàn)之將無(wú)赫赫之功?！?/p>

如何保證頁(yè)面質(zhì)量穩(wěn)定，這一點(diǎn)往往是不少前端技術(shù)人員忽視的。“我們找咨詢(xún)公司，合作伙伴問(wèn)了一圈，大家都沒(méi)有這樣的工具，更多的是靠流程保證，比如發(fā)現(xiàn)問(wèn)題通知oncall，再逐層找到負(fù)責(zé)人。雖然管理手段能夠運(yùn)行下去，但效率太低了?！?/p>

所以，將這種“人拉肩扛”的問(wèn)題處理方式，轉(zhuǎn)化為工具能力，做成平臺(tái)去賦能，再貫穿到整個(gè)頁(yè)面的發(fā)布流程，是一件成就感與挑戰(zhàn)并存的事情。

當(dāng)前，PQP平臺(tái)已在華為內(nèi)部“開(kāi)源”，包括華為官網(wǎng)在內(nèi)的80多個(gè)網(wǎng)站都已經(jīng)接入，用于看護(hù)網(wǎng)站的內(nèi)容質(zhì)量。

談及質(zhì)量，不僅是頁(yè)面內(nèi)容的質(zhì)量，還有官網(wǎng)穩(wěn)定性的質(zhì)量。試想，12306的每一次崩潰，后面是多少用戶(hù)的吐槽罵聲。

為了維護(hù)華為云官網(wǎng)的穩(wěn)定性，他們也針對(duì)高可用做了多層保障，比如多副本的容災(zāi)備份，數(shù)據(jù)多活等等，在全球4個(gè)地區(qū)的6個(gè)機(jī)房都安置了華為云官網(wǎng)的服務(wù)器，并且采購(gòu)了4家不同的CDN廠(chǎng)商規(guī)避可能出現(xiàn)的任何主客觀(guān)風(fēng)險(xiǎn)。構(gòu)建多個(gè)逃生通道，一鍵完成流量的快速切換。就像剝洋蔥一樣，剝開(kāi)一層里面依然保證完好無(wú)缺。

“華為云官網(wǎng)是我們的門(mén)面，控制臺(tái)、后臺(tái)服務(wù)或許可以?huà)欤?strong>但官網(wǎng)就像上甘嶺的那面旗幟，哪怕是個(gè)光桿司令，我也不能倒，一定要豎在那里。”

云原生藏在業(yè)務(wù)里

門(mén)面不能倒，為了這個(gè)目標(biāo)，華為云官網(wǎng)的架構(gòu)以及生產(chǎn)發(fā)布流程也在不斷優(yōu)化完善中。

以前端框架為例，React性能強(qiáng)大且靈活，Angular有豐富的組件，Vue簡(jiǎn)潔易構(gòu)建，選起來(lái)頗有些亂花漸欲迷人眼。

明哥也曾陷入選擇何種技術(shù)框架的糾結(jié)中，團(tuán)隊(duì)經(jīng)過(guò)一番討論，選擇了一個(gè)折中的方式——他們和web能力中心定下原則：基礎(chǔ)能力團(tuán)隊(duì)維護(hù)一套主流技術(shù)框架和組件庫(kù)，各業(yè)務(wù)團(tuán)隊(duì)有自己的選擇權(quán)，可以直接使用，也可以根據(jù)需要選擇其他技術(shù)棧，但核心是遵從統(tǒng)一的設(shè)計(jì)規(guī)范，達(dá)到即使不同技術(shù)棧生產(chǎn)的頁(yè)面也能讓用戶(hù)無(wú)感知差異的效果。 正所謂好馬配好鞍，讓開(kāi)發(fā)人員根據(jù)各自看護(hù)的業(yè)務(wù)特性找到最匹配的框架。

但問(wèn)題隨之而來(lái)，如何將這些新、老技術(shù)棧，以及不同技術(shù)框架生產(chǎn)的頁(yè)面放在一起呈現(xiàn)給用戶(hù)？

華為云引入了微前端框架，讓各個(gè)小團(tuán)隊(duì)，不同的技術(shù)棧都能共生。 微前端的目的是低耦合，它把各模塊之間的影響降到最低，各模塊能按需使用不同的技術(shù)棧，從而降低技術(shù)棧切換的成本，確保產(chǎn)品平滑過(guò)渡，避免一刀切帶來(lái)的質(zhì)量風(fēng)險(xiǎn)。

同時(shí)，所有的服務(wù)都部署在容器里的，一切皆代碼。諸如應(yīng)用程序、中間件、底層操作系統(tǒng)都被打包成標(biāo)準(zhǔn)的包，不管在什么環(huán)境，什么時(shí)候部署，模塊都是一樣的，不會(huì)出現(xiàn)因?yàn)橄到y(tǒng)、中間件版本、配置不一致引發(fā)的研發(fā)環(huán)境和生產(chǎn)環(huán)境狀態(tài)不同的情況。這也是持續(xù)交付、快速迭代的基礎(chǔ)。

從人拉肩抗的低效率開(kāi)發(fā)，到如今標(biāo)準(zhǔn)的頁(yè)面發(fā)布流程，華為云官網(wǎng)的架構(gòu)也進(jìn)入到一個(gè)新的階段：后臺(tái)采用微服務(wù)架構(gòu)，前端采用微前端架構(gòu)，頁(yè)面上線(xiàn)遵守標(biāo)準(zhǔn)的DevOps流程，化繁為簡(jiǎn)，充分利用技術(shù)的特性，破除實(shí)際業(yè)務(wù)的瓶頸。

舉個(gè)例子，以前的網(wǎng)站開(kāi)發(fā)不管是頁(yè)面功能，還是頁(yè)面內(nèi)容的變化，都繞不開(kāi)發(fā)人員，網(wǎng)頁(yè)上任何一個(gè)細(xì)微的變化都得去修改html代碼或者CSS腳本。這種情況下，隨便修改一個(gè)字，開(kāi)發(fā)需求排下來(lái)，小半個(gè)月過(guò)去了。

為了讓大家都能得到“解脫”，所以有了頁(yè)面生產(chǎn)平臺(tái)，可以讓業(yè)務(wù)人員自助完成頁(yè)面修改；有了可視化搭建，拖拽組件即可完成所見(jiàn)即所得的網(wǎng)頁(yè)制作；有了系統(tǒng)的內(nèi)容質(zhì)量檢測(cè)平臺(tái)，能夠保證頁(yè)面的安全上線(xiàn)。通過(guò)IT化，讓所有上線(xiàn)動(dòng)作都高效可控，打通官網(wǎng)內(nèi)容DevOps的最后一環(huán)。

這也是明哥對(duì)于云原生的理解，“云原生本身并不能算一套架構(gòu)，它更像是一個(gè)定義，一套方法論。 打開(kāi)來(lái)看，云原生無(wú)非這幾個(gè)關(guān)鍵元素：微服務(wù)、DevOps、持續(xù)交付、容器化?！?/p>

目前，DevOps方面，華為云有一套統(tǒng)一的發(fā)布流水線(xiàn)平臺(tái)，所有服務(wù)均通過(guò)這個(gè)平臺(tái)發(fā)布到生產(chǎn)環(huán)境；持續(xù)交付方面，華為云官網(wǎng)有65%左右的特性是通過(guò)按特性獨(dú)立發(fā)布的，每周都會(huì)有幾百個(gè)特性發(fā)布到生產(chǎn)環(huán)境上。

讓子彈再飛一會(huì)兒

康威定律里曾提到，組織的架構(gòu)決定了整體的技術(shù)架構(gòu)。由于華為云的前端和后端組織相對(duì)分離，雙方各司其職，技術(shù)溝通中難免會(huì)產(chǎn)生一些小的摩擦。不過(guò)，當(dāng)前端技術(shù)浪潮洶涌而來(lái)之時(shí)，它也在試圖用技術(shù)去彌合人為原因造成的各種溝通問(wèn)題。

以Node.js為例，通俗點(diǎn)說(shuō)它是運(yùn)行在服務(wù)端的JavaScript，可以讓懂JS的前端人員寫(xiě)出簡(jiǎn)單的后端服務(wù)，完成一些接口的拼裝?！巴ㄟ^(guò)Node.js，如果一個(gè)程序員針對(duì)一個(gè)簡(jiǎn)單的需求，從前端到后端都由他自己來(lái)實(shí)現(xiàn)，由于省去溝通成本以及同步版本發(fā)布的動(dòng)作，效率能提升30%?！?/p>

明哥表示，這就是我們常說(shuō)的“大前端”、“全棧開(kāi)發(fā)者”。而全棧能力就是消解一些組織團(tuán)隊(duì)互相配合產(chǎn)生的損耗，減少損耗，自然可以給開(kāi)發(fā)效率、模式帶來(lái)質(zhì)的提升。

談到開(kāi)發(fā)效率的提升，時(shí)下大火的Serverless正在掀起一場(chǎng)云計(jì)算領(lǐng)域的革命，這場(chǎng)風(fēng)暴也波及到了前端，對(duì)于此，明哥顯得謹(jǐn)慎很多。

Serverless勾勒了一個(gè)不需要搭建環(huán)境、部署中間件，沒(méi)有特定使用場(chǎng)景、業(yè)務(wù)類(lèi)型，只需部署代碼的世界。這是技術(shù)人員的“烏托邦”，但明哥認(rèn)為當(dāng)前的Serverless技術(shù)有一定的局限性。開(kāi)發(fā)團(tuán)隊(duì)不可能只使用一種技術(shù)或者組件，而不少技術(shù)或者框架，是需要在中間件、操作系統(tǒng)層面進(jìn)行分析調(diào)優(yōu)工作，Serverless目前沒(méi)有達(dá)到這個(gè)靈活性和適配性。

華為云官網(wǎng)團(tuán)隊(duì)也嘗試過(guò)應(yīng)用Serverless提高開(kāi)發(fā)效率，比如把一些后臺(tái)執(zhí)行不敏感、可用性要求較低的服務(wù)部署上去，再通過(guò)定時(shí)器觸發(fā)，也能達(dá)到一定效果。但是只要涉及到全場(chǎng)景，尤其是多部件的解決方案，就不會(huì)考慮首選Serverless服務(wù)。

“可能我比較謹(jǐn)慎，有先進(jìn)或者新的技術(shù)，習(xí)慣性觀(guān)察一陣子，讓子彈再飛一會(huì)， 技術(shù)成熟穩(wěn)定后再跟上，那個(gè)時(shí)候也不晚?！?/p>

明哥在技術(shù)棧選擇這條路上也走過(guò)不少?gòu)澛罚J(rèn)為，前端團(tuán)隊(duì)選擇技術(shù)棧一定要結(jié)合實(shí)際業(yè)務(wù)需求，再去觀(guān)察技術(shù)棧的生態(tài)是不是持續(xù)演進(jìn)中，人云亦云、好高騖遠(yuǎn)不可取，如果沒(méi)有合適的，寧愿自研也好過(guò)妥協(xié)。

沖破技術(shù)標(biāo)簽，視野決定高度

回望前端技術(shù)的迭代，可以說(shuō)是瞬息萬(wàn)變，新的框架、組件庫(kù)層出不窮，新的編程語(yǔ)言一波波襲來(lái)……

涉獵不同技術(shù)棧的明哥一直在思索，技術(shù)的目的是什么？在建設(shè)華為云官網(wǎng)的過(guò)程中，他似乎找到了答案。

以JAVA為首的后端技術(shù)棧，在幾十年的迭代中，無(wú)論是技術(shù)語(yǔ)言，還是框架都趨于穩(wěn)定。相較之下，前端還朝著技術(shù)成熟曲線(xiàn)的峰頂狂奔中，未來(lái)也會(huì)逐漸從百花齊放過(guò)渡到一兩個(gè)成熟穩(wěn)定框架一統(tǒng)江山，一步步補(bǔ)全整個(gè)生態(tài)的階段。

目前一些主流框架本質(zhì)上也是大同小異，選擇一個(gè)領(lǐng)域或者技術(shù)棧深耕，愈往下探，愈會(huì)發(fā)現(xiàn)其中的一致性規(guī)律。

大浪淘沙中，明哥認(rèn)為比較有潛力和探索空間的三個(gè)技術(shù)方向是沉浸式、智能化以及低碼化。

首先是沉浸式的效果，所見(jiàn)即所得的前端正在追求更豐富的展現(xiàn)和互動(dòng)形式。比如工業(yè)制造領(lǐng)域的仿真模擬，可以對(duì)孿生的數(shù)字模型進(jìn)行各種測(cè)試驗(yàn)證。同樣，在前端領(lǐng)域，也能把產(chǎn)品可視化地呈現(xiàn)在網(wǎng)站上，讓用戶(hù)直觀(guān)地感知解決方案的運(yùn)作模式。

說(shuō)到這里，他在空氣中比劃了一下，“你想象把后臺(tái)看不見(jiàn)摸不著的一些組網(wǎng)解決方案搬到前臺(tái)，方案中的流程、數(shù)據(jù)流動(dòng)都是可以看得到的，很神奇， 但也非?？简?yàn)后端數(shù)據(jù)和前端渲染能力的結(jié)合，不過(guò)我們正在努力。”

第二個(gè)是智能化，一方面華為云官網(wǎng)團(tuán)隊(duì)會(huì)在搜索和推薦中進(jìn)一步優(yōu)化智能算法和策略，達(dá)到精準(zhǔn)的千人千面智能化推薦，提升用戶(hù)的注冊(cè)轉(zhuǎn)化率；另一方面，團(tuán)隊(duì)會(huì)在內(nèi)容的智能生產(chǎn)方面，包括文章、圖片、廣告等，做出更多的探索，協(xié)助運(yùn)營(yíng)人員、業(yè)務(wù)人員生產(chǎn)出更高質(zhì)量的內(nèi)容。

第三個(gè)方向是低碼化，現(xiàn)在多數(shù)業(yè)務(wù)人員可以自主生產(chǎn)簡(jiǎn)單的頁(yè)面，涉及一些復(fù)雜頁(yè)面才有開(kāi)發(fā)人員介入。以后，無(wú)論是面向運(yùn)營(yíng)人員，還是最終用戶(hù)，越來(lái)越多的頁(yè)面、接口、流程都會(huì)通過(guò)低碼化或者無(wú)碼化的方式實(shí)現(xiàn)。

前端新技術(shù)的出現(xiàn)，最終目的還是為了能夠響應(yīng)業(yè)務(wù)，快速地解決生產(chǎn)、運(yùn)營(yíng)的需求，這也是所有技術(shù)都在探索的方向。

到了這個(gè)階段，大前端的范疇也在擴(kuò)充，明哥也更習(xí)慣站在架構(gòu)師的角度去看面前呈現(xiàn)的這些網(wǎng)頁(yè)，觀(guān)察它們背后的一系列邏輯。“但凡涉及到用戶(hù)可感知的內(nèi)容，其實(shí)都是大前端要關(guān)注的，對(duì)于前端人員來(lái)說(shuō)，前端不僅是一個(gè)技術(shù)，它更像是一個(gè)目的?！?/strong>

最開(kāi)始，前端這個(gè)概念在業(yè)界比較模糊，前端人員都自嘲“切圖仔”，也沒(méi)有現(xiàn)在流行的三大框架，混沌初開(kāi)，大家都摸著石頭過(guò)河。

這個(gè)時(shí)代已經(jīng)一去不復(fù)還，如今的前端人員，技術(shù)是基礎(chǔ)，在此之上的思維和視野則決定了技術(shù)的高度。

“比如大家常常在論壇上為哪個(gè)編程語(yǔ)言最好而爭(zhēng)得面紅耳赤。其實(shí)，囿于一個(gè)技術(shù)的優(yōu)劣，就是在給自己貼標(biāo)簽。就像有的前端人員會(huì)糾結(jié)技術(shù)路線(xiàn)，認(rèn)為寫(xiě)頁(yè)面看不到發(fā)展空間，這是把自己困在‘前端’的標(biāo)簽里。”

“如果你的定位是一個(gè)簡(jiǎn)單的開(kāi)發(fā)，一項(xiàng)技能足矣。但想要成長(zhǎng)，得學(xué)會(huì)跳出那個(gè)圈子，換種思路，比如以提高用戶(hù)體驗(yàn)為目標(biāo)，可以學(xué)的技術(shù)就不只是某一個(gè)框架或語(yǔ)言。在此過(guò)程中，將自身的技術(shù)能力和定位從開(kāi)發(fā)人員向架構(gòu)師，乃至CTO的標(biāo)準(zhǔn)去提升?！?/p>

心中有教堂，月亮和六便士，都可以擁有。