阿里妹導(dǎo)讀：思維方式直接決定了一個(gè)人在工作上的效能和產(chǎn)出。經(jīng)驗(yàn)是個(gè)人對過往項(xiàng)目的總結(jié)和處理方式優(yōu)化。今天的文章來自于阿里工程師梓騫，從大學(xué)第一次接觸動態(tài)網(wǎng)頁到現(xiàn)在的資深前端技術(shù)專家，他分享了那些人生中的“大事”，讓我們看到他是如何一步步轉(zhuǎn)變思維方式，積累經(jīng)驗(yàn)，升級打怪。

大家好，我在阿里的花名叫梓騫，現(xiàn)在負(fù)責(zé)業(yè)務(wù)平臺的體驗(yàn)技術(shù)部，主營業(yè)務(wù)是阿里業(yè)務(wù)中臺體系的多端解決方案，同時(shí)還負(fù)責(zé)集團(tuán)前端幾個(gè)基礎(chǔ)設(shè)施：Fusion、ARMS/Retcode前端監(jiān)控、BizCharts數(shù)據(jù)可視化圖表方案、Node鏡像和部分Node中間件等。

跟大家分享我過往的經(jīng)歷：

?

??

如這個(gè)路線圖中所呈現(xiàn)的，我其實(shí)并不是一開始就做前端，用現(xiàn)在的話說屬于全棧。工作之后從事過.Net開發(fā)和C++，其中C++可以算是有5、6年的開發(fā)經(jīng)驗(yàn)，只不過整個(gè)過程都伴隨業(yè)務(wù)前端的開發(fā)，直到在2012年因?yàn)闃I(yè)務(wù)需求專職從事前端開發(fā)工作。在整個(gè)過程中，有非常多的經(jīng)歷，成長其實(shí)也是伴隨整個(gè)過程一點(diǎn)一滴的積累，仔細(xì)回憶下，可以分成幾個(gè)階段。這幾個(gè)階段，也有一些對我發(fā)展起到?jīng)Q定性作用或者轉(zhuǎn)折的事情。

熱情

2003年~2007年，我在大連讀大學(xué)，加入了一個(gè)計(jì)算機(jī)社團(tuán)，維護(hù)學(xué)校校園網(wǎng)以及另一個(gè)校園網(wǎng)站，雖然在之前就接觸過HTML開發(fā)，做過一個(gè)個(gè)人主頁(當(dāng)時(shí)個(gè)人主頁很流行，而且名字基本都叫××的家)，但在社團(tuán)里是第一次接觸到動態(tài)網(wǎng)頁，才知道網(wǎng)站居然還有管理后臺，之前以為是一個(gè)頁面一個(gè)頁面地復(fù)制出來的，也是至此就迷上web開發(fā)，從校園網(wǎng)站的內(nèi)容編輯做起，再慢慢自學(xué)ASP開發(fā)，大一結(jié)束后已經(jīng)可以獨(dú)立負(fù)責(zé)一個(gè)站點(diǎn)的技術(shù)開發(fā)工作。

機(jī)緣巧合，大二剛開學(xué)的時(shí)候?qū)W校的物理實(shí)驗(yàn)室準(zhǔn)備做一個(gè)選課系統(tǒng)，在學(xué)長的鼓勵下我去接了這個(gè)項(xiàng)目開發(fā)，用了幾周的時(shí)間完完全全由一個(gè)人開發(fā)完畢，不久就投入到學(xué)校運(yùn)營，還記得是每周二中午實(shí)驗(yàn)室會開放下一周的實(shí)驗(yàn)課程，因?yàn)橘Y源有限，大家一起去搶課程，當(dāng)時(shí)用ASP+Access (是的，確實(shí)是Access當(dāng)數(shù)據(jù)庫) 在一臺服務(wù)器上撐住了過千的并發(fā)，雖然慢但服務(wù)沒垮，也沒出現(xiàn)超賣的問題。現(xiàn)在想來，這不就是秒殺活動嗎。這個(gè)項(xiàng)目做得還算成功，當(dāng)時(shí)也通過這個(gè)項(xiàng)目認(rèn)識了非常多的老師，這也直接促使后面承接了更多更大的項(xiàng)目，最重要的項(xiàng)目是交通部的一個(gè)內(nèi)容發(fā)布系統(tǒng)，也是一個(gè)人花了兩個(gè)月的時(shí)間完成，當(dāng)時(shí)在社團(tuán)的辦公室里經(jīng)常一個(gè)人寫代碼寫一通宵，那個(gè)時(shí)候年輕，也樂此不疲，也沒覺得累。

大學(xué)四年業(yè)余生活也是在不斷的開發(fā)和各種實(shí)際項(xiàng)目中度的。大學(xué)畢業(yè)的時(shí)候粗略統(tǒng)計(jì)了 一下，各種項(xiàng)目加一起代碼量大概在10W行左右。也是由于這些實(shí)際項(xiàng)目經(jīng)驗(yàn)，在大四的時(shí)候找工作，面試官問的很多問題基本都是實(shí)際項(xiàng)目中遇到過的，所以也很順利拿到了國內(nèi)一家著名互聯(lián)網(wǎng)公司的校招offer，也是我第一家服務(wù)的公司。

打破常規(guī)，積極溝通

畢業(yè)后直接去了第一家公司，在這家公司里，大家叫我的昵稱「泡泡」。可能因?yàn)樽隽颂郞A類系統(tǒng)的原因，也直接被分配到企業(yè)IT部，相當(dāng)于阿里現(xiàn)在的企業(yè)智能事業(yè)部，對于畢業(yè)生，主要工作也就是開發(fā)各種審批流程。

隨著開發(fā)的流程越來越多逐漸發(fā)現(xiàn)一些規(guī)律，有些審批流的代碼幾乎一致，只需要修改部分類名和關(guān)鍵信息即可。可能過去在大學(xué)開發(fā)許多項(xiàng)目的經(jīng)歷，有一個(gè)習(xí)慣一直保持到現(xiàn)在，那就是最受不了來一個(gè)頁面做一個(gè)頁面，如果出現(xiàn)重復(fù)性的勞動，我一定會想辦法用工具、改進(jìn)架構(gòu)、自動化等手段讓機(jī)器去做。所以當(dāng)發(fā)現(xiàn)許多代碼是重復(fù)的時(shí)候，就特別想改變重復(fù)性的coding工作，最開始是批量替換，后來找了個(gè)代碼自動生成的工具，隨著對所負(fù)責(zé)的系統(tǒng)架構(gòu)越來越熟悉，逐漸改項(xiàng)目架構(gòu)，每天下了也是在研究項(xiàng)目架構(gòu)并自己寫demo去驗(yàn)證，到年底總算可以實(shí)現(xiàn)對相似流程簡單配置一下就可完成。

正當(dāng)自己對結(jié)果很開心的時(shí)候，認(rèn)為自己是打破常規(guī)，不僅能完成工作也能主動去改變現(xiàn)有研發(fā)模式，但人生中第一個(gè)考核就是「待改進(jìn)」，相當(dāng)于阿里的3.25，當(dāng)時(shí)百思不得其解，跟主管聊過之后才發(fā)現(xiàn)自己存在幾個(gè)嚴(yán)重的問題，比如目標(biāo)只是完成工作，不關(guān)心業(yè)務(wù)和用戶，也不關(guān)心用戶體驗(yàn)，甚至一個(gè)表達(dá)用了多種交互形式;再比如，不關(guān)心業(yè)務(wù)質(zhì)量，甚至bug直接在線修改，也出現(xiàn)過故障;最后，最嚴(yán)重的問題，遇到問題抱怨過多，比如抱怨自己依賴的組件有bug，抱怨基礎(chǔ)設(shè)施不穩(wěn)定等等，抱怨為什么方案總在變，一個(gè)詞概括就是「學(xué)生思維」，比較自我總是站在自己的角度去看問題。

這次績效，現(xiàn)在看也一直認(rèn)為是一個(gè)轉(zhuǎn)折點(diǎn)，自那以后基本停止抱怨，能夠主動打開心扉去接受現(xiàn)狀，去跟其他人溝通把自己的想法跟其他交流，主動去提出自己的改進(jìn)方案，緊接著的一次考核，居然是A，相當(dāng)于3.5+或者3.75-。現(xiàn)在想來很慶幸當(dāng)時(shí)遇到一位負(fù)責(zé)的主管，如果是說保護(hù)畢業(yè)生在績效上放過一馬，或許再過半年當(dāng)思維方式定型就改不過來了。

「泡泡出品，必屬精品」

一年半以后自己轉(zhuǎn)崗到業(yè)務(wù)部門，主要是C++，所以當(dāng)時(shí)也是徹底從.Net技術(shù)棧切換到C++。依然保持打破常規(guī)、積極溝通，在一線繁忙的業(yè)務(wù)中完成一個(gè)又一個(gè)的項(xiàng)目，在業(yè)務(wù)部門的一個(gè)優(yōu)勢就是，可以告訴親朋好友：“這個(gè)功能是我做的”，所以也特別關(guān)注業(yè)務(wù)，關(guān)注用戶體驗(yàn)，而且當(dāng)時(shí)公司的研發(fā)流程是：在提交測試前需要轉(zhuǎn)體驗(yàn)，就是請產(chǎn)品經(jīng)理體驗(yàn)一下研發(fā)人員開發(fā)的項(xiàng)目是否是自己想要的，功能是否有遺漏，體驗(yàn)好不好之類。

直到有一天，發(fā)生了一件我認(rèn)為對我影響深遠(yuǎn)的事情。有一次照例轉(zhuǎn)體驗(yàn)，不一會收到產(chǎn)品經(jīng)理的回復(fù)，大概意思是，體驗(yàn)非常棒，泡泡做的簡直可以打上「泡泡出品」這個(gè)品牌了。這句話，可能本是產(chǎn)品經(jīng)理一句恭維的話，雖然產(chǎn)品經(jīng)理經(jīng)常恭維程序員，但說者無心聽者有意，這不就是我一直所期望的嗎，經(jīng)我手的項(xiàng)目，就是質(zhì)量過硬體驗(yàn)好，泡泡這個(gè)名字就是品牌。

也自那以后，我的對自己的要求就是提交測試后0 bug，用戶體驗(yàn)就是一級棒，用戶用起來感受就是“這就是我想要的”。為此，自己模擬各種使用環(huán)境自測每一行代碼和異常處理，處理好每一個(gè)交互細(xì)節(jié)，比如對于動畫延遲，不斷去測試延遲100毫秒、200毫秒、300毫秒、400毫秒等參數(shù)，最后發(fā)現(xiàn)300毫秒是最自然的效果，于是把全站的延遲都調(diào)整到300毫秒，已達(dá)到全站所有同一個(gè)交互表達(dá)有統(tǒng)一的表現(xiàn)。 持續(xù)的投入總會有結(jié)果，后來部門期望提升研發(fā)流程的耗時(shí)，節(jié)省測試時(shí)間，試行對于簡單功能或者開發(fā)質(zhì)量高的同學(xué)可以免測發(fā)布，而我就是第一批被批準(zhǔn)為免測發(fā)布的人，我開發(fā)的程序可以直接發(fā)布上線不需要測試，因?yàn)榇_實(shí)在數(shù)據(jù)中顯示，我已經(jīng)有很長時(shí)間沒有被發(fā)現(xiàn)bug。

當(dāng)然，在這背后也付出不少，除了有心去要求自己，技能也需要一點(diǎn)一滴去積累，也沒啥捷徑，計(jì)算機(jī)是一門實(shí)踐的科學(xué)，就是多寫代碼。在我14年離開這家公司的時(shí)候，我的代碼貢獻(xiàn)量是排到小組前列，離開兩年之后還有人告訴我，我的名字還排在前列。

個(gè)人經(jīng)驗(yàn)到組織能力和產(chǎn)品能力

個(gè)人職業(yè)生涯另外一個(gè)轉(zhuǎn)折點(diǎn)是在2012年，在之前都是C++是前端同時(shí)做，到了2012，隨著移動設(shè)備的興起，視頻的播放從傳統(tǒng)的flash過渡到HTML5，并且越來越重視播放體驗(yàn)和變現(xiàn)能力，所以業(yè)務(wù)的重心也開始向播放體驗(yàn)、廣告等方面傾斜，于是我開始專職做前端，主要是從事以HTML5為核心的移動端視頻播放和廣告播放。

HTML5播放并不是簡單的使用video標(biāo)簽就可以解決的，這里面涉及到播放兼容性、播放質(zhì)量跟蹤、清晰度切換、防盜鏈、CDN、貼片廣告、播放后推薦等因素，遠(yuǎn)不是各種教程里寫的簡單設(shè)置個(gè)video標(biāo)簽和src就可以解決的，所以也在實(shí)際項(xiàng)目中攻克了很多技術(shù)細(xì)節(jié)。

然而視頻是互聯(lián)網(wǎng)最基礎(chǔ)的需求之一，越來越多的業(yè)務(wù)也需要嵌入視頻，也需要去適配各種移動設(shè)備，前來咨詢的人越來越多，我發(fā)現(xiàn)我有一半的時(shí)間都在幫各種業(yè)務(wù)解決播放器調(diào)用的問題，于是開始寫了一個(gè)移動播放的白皮書，說明如何實(shí)現(xiàn)移動端播放。雖然文檔能解決部分咨詢的問題，但依然會有各種新的問題來咨詢，后來想想，為什么我不把這些調(diào)用過程封裝成一個(gè)JSSDK呢，把想法跟主管溝通后得到大力支持，就這樣每天下班回家利用業(yè)余時(shí)間花了近1個(gè)月開發(fā)出了這個(gè)SDK，只需要傳入簡單幾個(gè)參數(shù)就可以自動適配平臺渲染出播放器，最初被公司新聞App引用，后來又被公司多個(gè)具有海量訪問的App引用，直到我離職，這個(gè)SDK成為當(dāng)時(shí)前端組最核心的工作之一，每天的調(diào)用量超過億次。

時(shí)隔多年再回首這段經(jīng)歷，才知道無形中做了一件我們稱之為“個(gè)人經(jīng)驗(yàn)到產(chǎn)品能力”的事情，就是把自己在長期業(yè)務(wù)中積累的專家經(jīng)驗(yàn)，以產(chǎn)品化的思路變成一個(gè)技術(shù)產(chǎn)品，讓不具備對應(yīng)經(jīng)驗(yàn)的人也能很低門檻的使用現(xiàn)成的能力，達(dá)到經(jīng)驗(yàn)的可復(fù)制，服務(wù)更多的業(yè)務(wù)。

2014年來到當(dāng)時(shí)的阿里巴巴共享業(yè)務(wù)事業(yè)部，也就是我現(xiàn)在所屬的業(yè)務(wù)平臺事業(yè)部的前身，承載了阿里經(jīng)濟(jì)體電商核心，構(gòu)建阿里巴巴商業(yè)操作系統(tǒng)，雖然現(xiàn)在支撐了阿里經(jīng)濟(jì)體眾多的電商業(yè)務(wù)，但在當(dāng)時(shí)接手了非常多的淘系業(yè)務(wù)，而且許多業(yè)務(wù)都是PC端，大量的頁面依賴的Ajax接口返回結(jié)果才能正確渲染，然而我們并不知道接口的穩(wěn)定性到底如何。做前端最尷尬的事情就在于，所有的錯(cuò)誤都表現(xiàn)在前端，直觀的感受就是前端不給力，進(jìn)而影響到業(yè)務(wù)和用戶。所以急需對接口穩(wěn)定性做監(jiān)測，過去個(gè)人是有這方面的經(jīng)驗(yàn)，但尋找了阿里現(xiàn)存的體系都無法滿足訴求，于是主動聯(lián)合中間件團(tuán)隊(duì)發(fā)起了早期第一版的retcode監(jiān)控平臺(也就是現(xiàn)在阿里云前端監(jiān)控產(chǎn)品ARMS的前身)，同時(shí)配合幾個(gè)新業(yè)務(wù)的上線，效果很明顯，直接發(fā)現(xiàn)了多起線上問題，業(yè)務(wù)方也很認(rèn)可，直接幫我們推薦給了其他團(tuán)隊(duì)，所以也逐漸開始有其他團(tuán)隊(duì)的同學(xué)介入。

所以對于Retcode，當(dāng)時(shí)我們也面臨一個(gè)選擇，就是到底只小精力投入滿足自己需求即可，還是開放出來給其他業(yè)務(wù)團(tuán)隊(duì)使用，因?yàn)槲覀儺?dāng)時(shí)根本就沒有這么多人力和服務(wù)器預(yù)算，而且量變到質(zhì)變，所要處理的數(shù)據(jù)量越來越大的時(shí)候，要投入的技術(shù)方案也會發(fā)生根本變化，對系統(tǒng)自身的穩(wěn)定性要求也更高。后來的事情大家都知道了，我們選擇了開放出來讓大家都接入。我們考慮的原因是：

1. 有業(yè)務(wù)想接入，說明這個(gè)需求是真實(shí)存在的，Retcode在用戶端根據(jù)真實(shí)體驗(yàn)的數(shù)據(jù)監(jiān)測方式大家也是認(rèn)可的;

2. 既然需求存在，即使不開放出來，其他業(yè)務(wù)也會自己做，那么算上重復(fù)投入的人力和機(jī)器成本，反而更浪費(fèi)，而我們開放出來以后，形成規(guī)模效應(yīng)成本反而更容易控制。 開放出來以后，其實(shí)以開始路也并不順，開始服務(wù)不穩(wěn)定，容量經(jīng)常不夠，數(shù)據(jù)不準(zhǔn)確，丟數(shù)據(jù)，還需要解決權(quán)限控制等等，以及各個(gè)業(yè)務(wù)也會提出很多需求，功能也需要不斷完善，整個(gè)過程也是非常的煎熬，當(dāng)時(shí)給團(tuán)隊(duì)要求也是堅(jiān)持一年，一定會有好的結(jié)果。一年之后，我們不僅打磨出了一款好的產(chǎn)品，還歷練出多位在前端APM領(lǐng)域的人才，在全國諸多技術(shù)分享大會上也見到了他們的身影。

到了2016年，我們的業(yè)務(wù)形態(tài)是大量的ToB、ToE系統(tǒng)的開發(fā)，要適配多個(gè)BU的設(shè)計(jì)風(fēng)格，技術(shù)體系上也在React趨勢上行的階段，急需一套打通設(shè)計(jì)到前端實(shí)現(xiàn)的UI域研發(fā)體系。經(jīng)過一系列的調(diào)研和合作溝通，跟ICBU前端團(tuán)隊(duì)一起拍了合作的意向，并跟當(dāng)時(shí)的國際UED的設(shè)計(jì)師一起孵化了Fusion體系。整個(gè)過程其實(shí)也是將多位設(shè)計(jì)師長期在項(xiàng)目中的設(shè)計(jì)分解經(jīng)驗(yàn)和多位前端技術(shù)抽象的經(jīng)驗(yàn)，通過技術(shù)產(chǎn)品化，把多位專家的優(yōu)秀經(jīng)驗(yàn)，從組織能力升級成產(chǎn)品能力。Fusion的能力提升，也是隨著Fusion支持的業(yè)務(wù)場景越來越多，逐步將上層業(yè)務(wù)的需求和用法沉淀下來的，比如一開始是不具備國際化能力的，配置平臺和文檔也是全中文，這是在支持lazada業(yè)務(wù)之后才開始具備國際化的能力;一開始也沒有信息無障礙能力，也是因?yàn)檫m配國際業(yè)務(wù)的法務(wù)要求才沉淀下來，一開始對這塊也沒太多經(jīng)驗(yàn)，部分同學(xué)在業(yè)務(wù)中具備了個(gè)人經(jīng)驗(yàn)之后，再將經(jīng)驗(yàn)產(chǎn)品化。

主動補(bǔ)位，不給自己設(shè)限

因?yàn)檫^去的項(xiàng)目經(jīng)歷，本身自己算是全棧經(jīng)歷，所以一直認(rèn)為前端不是因?yàn)槲覀冇肑avaScript，而是因?yàn)槲覀冋驹跇I(yè)務(wù)最前端，解決業(yè)務(wù)端的問題，所以我們是前端。這個(gè)思想一直作為我從事前端崗位做決策的依據(jù)之一，只要認(rèn)為是跟端相關(guān)，影響到用戶，那就是我們的職責(zé)，或者是我們要去推動解決的。越是開創(chuàng)新戰(zhàn)場的打仗團(tuán)隊(duì)，其實(shí)職責(zé)越不清晰。

印象最深的就是在lazada Voyager項(xiàng)目中，因?yàn)槭情_辟一個(gè)新的戰(zhàn)場，時(shí)間緊任務(wù)重，許多人也是從其他團(tuán)隊(duì)抽調(diào)臨時(shí)組建起來的，其實(shí)有挺多職責(zé)不確定的事情，沒有說這是你的職責(zé)也沒說這不是。遇到這類事情，判斷的唯一依據(jù)就是，這是不是通過端去影響用戶的，如果是，那就是自己的職責(zé)，那么剩下的就是兵來將擋水來土掩，排除萬難解決問題就好，比如項(xiàng)目中出現(xiàn)過客戶端人力不夠的情況，那么考慮到業(yè)務(wù)進(jìn)度，主動補(bǔ)位可以先用Weex或者H5先頂上，再比如埋點(diǎn)也是一個(gè)灰色地帶，產(chǎn)品經(jīng)理也很忙，那就直接主動拉著產(chǎn)品經(jīng)理一起去梳理。表面看來，多做了一些事情短期沒有任何的回報(bào)，甚至還額外加了很多班，但利他是最大的占便宜，在項(xiàng)目發(fā)布后整個(gè)團(tuán)隊(duì)受到的評價(jià)都是很正向。

關(guān)于現(xiàn)在和未來，當(dāng)前主要工作是：

• 阿里電商操作系統(tǒng)前端解決方案;
• 設(shè)計(jì)中臺體系建設(shè) —— 服務(wù)阿里幾千名設(shè)計(jì)師和幾千名前端的設(shè)計(jì)提效、促進(jìn)協(xié)同的設(shè)計(jì)體系;
• 承擔(dān)在集團(tuán)部分Node中間件、Node鏡像等開發(fā)維護(hù)工作;
• 前端大學(xué) —— 阿里經(jīng)濟(jì)體前端委員會人才發(fā)展方向;

其實(shí)，這幾塊工作里，只有第一項(xiàng)是我的kPI目標(biāo)，而其他的比如第二個(gè)設(shè)計(jì)中臺，我個(gè)人覺得這是建設(shè)商業(yè)操作系統(tǒng)UI域解決方案必須要強(qiáng)合作的事情，也由于自己過往在國際UED，對設(shè)計(jì)師的痛點(diǎn)也相對了解，自己也相信解決幾千名設(shè)計(jì)師和幾千名前端的協(xié)同合作效率，改變UI域的研發(fā)模式，一定會給集團(tuán)甚至業(yè)界帶來效率的飛躍，這也是自己長期所相信的相信，既然自己也覺得有價(jià)值，跟自己的主要KPI也有關(guān)聯(lián)，那就去做。而其余的事情，其實(shí)基本不在自己的KPI里，但也是那句「Not Me，Who」，自己覺得有價(jià)值，這個(gè)事情也是需要去做的，那就去做好了。也沒有給自己設(shè)置限制。

總結(jié)

• 興趣是最好的老師，做一件事情首先是自己要有熱情，如果只是當(dāng)成一份工作，內(nèi)心就很難讓你全情投入;
• 認(rèn)真做事能把事情做完，用心做事能把事情做好;
• 利他是最大的占便宜;
• 前端不是因?yàn)槲覀冇肑avaScript，而是因?yàn)槲覀冋驹跇I(yè)務(wù)最前端，解決業(yè)務(wù)端的問題，所以我們是前端;
• 計(jì)算機(jī)是一門實(shí)踐的科學(xué)，多動手是王道，知其然知其所以然;
• 協(xié)同是「兩個(gè)人」的事，但協(xié)同成功是「一個(gè)人」的事，想要最終結(jié)果是成功，必須放下界限，向?qū)Ψ蕉嘧咭徊健?/li>
• 除了自己，沒人能給你設(shè)限。
• 做自己認(rèn)為對的事情，并堅(jiān)持下來。

以上，是我從業(yè)前端這個(gè)崗位過往的經(jīng)歷和感悟，感謝閱讀，共勉。