時(shí)光如梭，轉(zhuǎn)眼一逝，已經(jīng)在阿里呆了三年了。在阿里有句話 —— 一年香，三年醇，五年陳。另外還有一句話就是說(shuō)在阿里，要呆完三年才算是阿里人。自己非常的榮幸，有幸在阿里成功的呆了三年，也有幸成人 —— 成為阿里人。借著這次，對(duì)自己在阿里過(guò)去的三年光陰做一個(gè)簡(jiǎn)單的整理與總結(jié)。就算是對(duì)過(guò)去三年的復(fù)盤(pán)吧。
不以失敗論英雄
在阿里，滿一周年的同學(xué)被稱為一年香，一年壇發(fā)，酒香四溢。我們因愛(ài)而相信，相互認(rèn)同!
到現(xiàn)在，就算是已經(jīng)過(guò)去三年，一直都還在回味，還在慶幸，慶幸自己在三年前能進(jìn)入阿里，進(jìn)入手淘團(tuán)隊(duì)。同時(shí)非常慶幸自己能和一群大神，一群有著朝氣，一群非常優(yōu)秀的年輕人共事。在此，我要特別感謝@winter大大給我這樣的機(jī)會(huì)，而且一直在不同的時(shí)間點(diǎn)給我的指點(diǎn)。在我心中，他是我人生中的導(dǎo)師，也是我在大海航行中的指明燈。我非常慶幸，在我的人生成長(zhǎng)和職業(yè)成長(zhǎng)中能碰到@winter大大。
事實(shí)上對(duì)我稍微了解的同學(xué)都知道，我事實(shí)就是一名重構(gòu)，當(dāng)然也有人給了一個(gè)很好的稱味 —— 重構(gòu)工程師。但是在我的眼理，我自認(rèn)為進(jìn)入手淘的時(shí)候，我只是一名頁(yè)面仔，只是會(huì)切切圖（俗稱頁(yè)面仔或切圖仔），當(dāng)然，我有一個(gè)稍微有入眼的就是對(duì)CSS略有了解。這或許是我能進(jìn)入這個(gè)團(tuán)隊(duì)的原因之一吧（事實(shí)上，我自己一直都不清楚，我是怎么被 @winter 大大看中的，也問(wèn)過(guò)多次，至今天未得到答案）。
扯了這么多，大家可能看得有點(diǎn)煩，這不就是記個(gè)流水賬嗎？其實(shí)是的，在這篇文章中我只是想記錄，回憶我自己的在阿里三年的經(jīng)歷，不管算得上，還是算不上成長(zhǎng)經(jīng)歷。當(dāng)然，如果你覺(jué)得有興趣，愿意浪費(fèi)這個(gè)時(shí)間，歡迎繼續(xù)往下閱讀。
在我的印象中，進(jìn)入手淘的第一年，我做的第一件事情，就是做一個(gè)UI組件規(guī)范。
其實(shí)就是做一淘類似于Twitter的Bootstrap，或者說(shuō)比其更優(yōu)秀的，適合手淘UI風(fēng)格的組件。但事實(shí)上，最終這件事情我沒(méi)有成功（也就是說(shuō)沒(méi)有落地）。雖然沒(méi)有落地，但我在做這件事情的過(guò)程中，我覺(jué)得到了很多從未有學(xué)到的東西，這里簡(jiǎn)單的回憶一下當(dāng)年的心路歷程。
最初的出發(fā)點(diǎn)，就是做一套類似于Bootstrap的UI規(guī)范，能夠統(tǒng)一手淘的一些設(shè)計(jì)風(fēng)格，一些組件的風(fēng)格。說(shuō)實(shí)話最初覺(jué)得這件事情并不難，自認(rèn)為非常容易的一件事，哪怕是 @winter大大跟我說(shuō)過(guò)，這事不好做，但我還是堅(jiān)信這事并不難。這或許就是初生牛犢不怕虎吧。而最終的結(jié)果也告訴我了，我把事情相得太簡(jiǎn)單的了。后來(lái)我自己把這個(gè)過(guò)程仔細(xì)的回復(fù)了一下，未能成功的原因有：
把事情想得太簡(jiǎn)單。說(shuō)實(shí)話，最實(shí)的想法，自己想得太簡(jiǎn)單了。不就是一套UI規(guī)范嗎？有什么難的，又不是沒(méi)做過(guò)。為什么會(huì)這么的認(rèn)為，其中是一原因的，那時(shí)候我自認(rèn)為我是一名優(yōu)秀的CSSer，特別是認(rèn)為對(duì)Bootstrap有了足夠的了解，自認(rèn)為在手淘這么一個(gè)強(qiáng)大而又復(fù)雜的團(tuán)隊(duì)，也能輕易的把這套規(guī)范做出來(lái)，并且能落地。事實(shí)上，并非如此。雖然和設(shè)計(jì)師一起商定了一些UI上的規(guī)范，也完成了UI組件的構(gòu)建，但這一切并不意味著就能落地。
如何讓人愿意為你買單。剛才也說(shuō)到了，雖然UI上的規(guī)范能很好的通過(guò)代碼來(lái)實(shí)現(xiàn)，但這并不意味著，你的東西能讓人愿意買單。這也是自己當(dāng)初或者以前從未想過(guò)的一件事情。為什么這么說(shuō)呢？因?yàn)樵诖酥?，自己一直認(rèn)為自己在這個(gè)領(lǐng)域做得非常的棒，自己就是最好的，但事實(shí)上并非如此。也就是說(shuō)自己一直在騙自己，直到這件事情發(fā)生之后，我才知道，原來(lái)我是這么的幼稚 —— 你認(rèn)為好的，并不代表真的好；只有別人認(rèn)為好的，才是真的好！
只有知道失敗原因，才能通向成功。其實(shí)失敗并不可怕，可怕的是不知道是怎么失敗的。值得慶幸的是，我自己知道自己為什么沒(méi)有成功。有內(nèi)在自我的因素，也有外在的環(huán)境因素。那么先來(lái)說(shuō)內(nèi)在的因素。那個(gè)時(shí)候自己的看問(wèn)題，或者說(shuō)規(guī)劃事情只著重眼前或者過(guò)去，并沒(méi)有綜合性，長(zhǎng)遠(yuǎn)的去看問(wèn)題。這個(gè)原因造成自己的做事情的想法僅停留在過(guò)去或現(xiàn)在。另外還有一個(gè)自以為是的原因，總以為自己足已優(yōu)秀，其實(shí)自己一文不值。為什么呢？因?yàn)橹挥心愫透鄡?yōu)秀的人在一起，你才能發(fā)現(xiàn)自己的不足。簡(jiǎn)單的歸納：“自以為事，夜郎自大”。
除在自己內(nèi)在的因素之外，還有外在的因素。其實(shí)在2015年的時(shí)候，React和Vue這樣的優(yōu)秀的框架已經(jīng)出來(lái)了。由于自己的知識(shí)面狹小，未能及時(shí)的借助這些優(yōu)秀的框架去發(fā)力，去構(gòu)建更強(qiáng)大的，更靈活的UI組件和業(yè)務(wù)組件。事實(shí)上，那個(gè)時(shí)候，團(tuán)隊(duì)其他的同學(xué)已經(jīng)有用React去做一些非常有意思的事情，只不過(guò)我自己一直活在自己的世界當(dāng)中。
特別是上次聽(tīng)了@八哥在FDConf的分享，對(duì)我的觸動(dòng)更深。當(dāng)初我和@八哥在團(tuán)隊(duì)做著同樣的一件事情，有一些思路基本上是一樣的，比如說(shuō)，先實(shí)現(xiàn)HTML+CSS這樣的組件化（你可以理解成CSS UI Kit或者說(shuō)CSS Framwork吧），然后再借力React或Vue，甚至是其他的Web組件的實(shí)現(xiàn)方案，將以前靜態(tài)化的組件，變成動(dòng)態(tài)化的。事實(shí)做著同一樣的事情，但是@八哥成功了，我失敗了。失敗必有其失敗的原因：貧窮的知識(shí)限制你的想象力。
如果你現(xiàn)在在團(tuán)隊(duì)也正在做著這樣的一件事情，我個(gè)人強(qiáng)烈推薦您閱讀一下@八哥 在FDConf 2018 上海峰會(huì)上分享的主題《從零開(kāi)始建設(shè)服務(wù)化的 Web 設(shè)計(jì)規(guī)范》。
有失必有所得，這是我一直堅(jiān)信的。雖然在做UI規(guī)范，從制定到實(shí)施再到推廣，最后胎死腹中。我自己并不后悔，因?yàn)槲医?jīng)歷了 —— 結(jié)果并不重要，重要的是這個(gè)過(guò)程。 當(dāng)然，在這短短的一年當(dāng)中，也有很多值得回憶的事情。比如說(shuō)，我經(jīng)歷了人生中的第一個(gè)雙11，雖然在這一件的雙11中，就打打醬油，體驗(yàn)了雙11的神圣之處。這一年的雙11給我的感覺(jué)用兩個(gè)字來(lái)描述就是好奇。
好奇歸好奇。但在這個(gè)過(guò)程中，將移動(dòng)端的適配方案向社區(qū)進(jìn)行了一次的推廣 —— 《使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配》。這個(gè)適配方案就是大家熟知的Flexible方案，就算是到今天，也還有很多人在使用這個(gè)適配方案。當(dāng)然這個(gè)方案也被社區(qū)簡(jiǎn)稱為rem適配方案，甚至也給很多新手造成了誤區(qū)，認(rèn)為只要使用rem單位，就能完美的實(shí)現(xiàn)移動(dòng)端的適配。
在這一年中，另外一件事情讓我值得回憶的是，在上海Qcon全球軟件開(kāi)發(fā)大會(huì)分享了《Web重構(gòu)之道》。在此需要非常感謝 @賀老 給我這樣一次機(jī)會(huì)，也要感覺(jué)@winter大大的指點(diǎn)。雖然以前也參與過(guò)一些社區(qū)大會(huì)的分享，但對(duì)于這一次的分享我還是非常在意，也是非常的認(rèn)真去準(zhǔn)備了。在準(zhǔn)備分享這個(gè)話題的過(guò)程，我才明白了一個(gè)道理，而且對(duì)我來(lái)說(shuō)是非常重要的一個(gè)道理 —— 不應(yīng)該把自己圈在某一領(lǐng)域，需要跳出領(lǐng)域去思考。這也是我這幾年一直做的，也是這幾年一直指引我方向的地方。
探索是一件幸福的事情
2015年的雙11雖然我打了一次醬油，僅僅是體驗(yàn)了一下大促的感覺(jué)。但在2015的年貨節(jié)，開(kāi)啟我自己在技術(shù)的探知的新領(lǐng)域 —— Web動(dòng)畫(huà)。
回到2015年，動(dòng)畫(huà)對(duì)于Web領(lǐng)域而言，并不是什么新東西，因?yàn)樵谀莻€(gè)時(shí)候Web頁(yè)面上早就有動(dòng)畫(huà)的影子，特別是一些交互中也有動(dòng)畫(huà)的身影。眾人所知的是：
gif動(dòng)效圖，通過(guò)一個(gè)gif格式的圖片實(shí)現(xiàn)一個(gè)動(dòng)效，哪怕是幾個(gè)不同效果的幀切換
Flash動(dòng)效，當(dāng)初的Flash還是非常強(qiáng)大的，他能做出足夠強(qiáng)大的動(dòng)畫(huà)效果，甚至是模擬一個(gè)影視效果
視頻，通過(guò)視頻來(lái)做一個(gè)動(dòng)效
JavaScript動(dòng)畫(huà)，即
canvas動(dòng)畫(huà)
而2015年，在手淘上出現(xiàn)的動(dòng)畫(huà)場(chǎng)景，或者說(shuō)使用實(shí)現(xiàn)動(dòng)畫(huà)的技術(shù)方案，大多數(shù)都在使用gif的動(dòng)效圖和視頻。事實(shí)上，那個(gè)時(shí)候CSS動(dòng)畫(huà)已經(jīng)成型，只是很少人有探知CSS3動(dòng)畫(huà)在實(shí)際場(chǎng)景中的運(yùn)用。值得慶幸的是，我是其中一位嘗吃螃蟹的弄潮兒。在2015的年貨節(jié)，第一次嘗試著使用CSS的動(dòng)畫(huà)技術(shù)，將gif（或視頻）轉(zhuǎn)換成CSS動(dòng)效，用代碼實(shí)現(xiàn)的的一個(gè)動(dòng)畫(huà)效果 —— 也就是CSS動(dòng)效！。
從此也開(kāi)啟了我在動(dòng)畫(huà)領(lǐng)域中的探索。也開(kāi)始了手淘互動(dòng)動(dòng)效中的探索。
當(dāng)然自己也曾自詡：開(kāi)啟手淘互動(dòng)動(dòng)效0-1的過(guò)程。
從這之后一直到2016的年底甚至是2017年年初，基本上自己成了制作動(dòng)畫(huà)的專業(yè)戶。這個(gè)過(guò)程是幸福的過(guò)程，也是痛苦的過(guò)程。幸福是因?yàn)樽约阂恢痹谔剿鳎纯嗍亲约河|碰到自己的天花板。
隨著技術(shù)的發(fā)展和業(yè)務(wù)方對(duì)動(dòng)效新的需求，我曾經(jīng)自以為豪的動(dòng)畫(huà)技術(shù)也面臨瓶頸。特別是2016年 淘寶造節(jié)節(jié)的邀請(qǐng)函 動(dòng)效的出現(xiàn)，曾經(jīng)的動(dòng)畫(huà)技術(shù)越來(lái)越是一個(gè)瓶頸，也越來(lái)越是痛點(diǎn)。
痛并快樂(lè)著
自從2015年年底開(kāi)始，其實(shí)我的工作內(nèi)容就主要是和動(dòng)畫(huà)打交道了。這樣的一個(gè)過(guò)程是快樂(lè)的，也是痛苦的。快樂(lè)是因?yàn)槊看味加行碌臇|西，痛苦是技術(shù)越來(lái)越是自我的瓶頸。
在這個(gè)過(guò)程當(dāng)中，除了業(yè)務(wù)方對(duì)動(dòng)畫(huà)效果有著更高的要求之外，還追求著更快的開(kāi)發(fā)效率。這個(gè)時(shí)候我們也開(kāi)始在思考團(tuán)隊(duì)自身的痛苦 —— 如何快速，有效的開(kāi)發(fā)動(dòng)效。基于這個(gè)原因，我們開(kāi)啟了動(dòng)畫(huà)領(lǐng)域新的探索。其實(shí)在這個(gè)探索的過(guò)程中，需要非常感謝 我曾經(jīng)的Boss（@子之）和現(xiàn)任的Boss(@渚薰)給予的支持與指點(diǎn)。在這個(gè)過(guò)程中，我們一起創(chuàng)建了一款制作動(dòng)畫(huà)的技術(shù)產(chǎn)品：AFT —— Animation Flow Tools。
在這個(gè)過(guò)程中，自己經(jīng)歷了以前從未甚至是不敢接觸的技術(shù)領(lǐng)域。比如說(shuō)，參與技術(shù)產(chǎn)品架構(gòu)的設(shè)計(jì)，整體的實(shí)施方案以及項(xiàng)目的管理等等。從而在這一個(gè)過(guò)程，我們有幸探索了一個(gè)實(shí)現(xiàn)動(dòng)畫(huà)的新思路 —— 數(shù)據(jù)驅(qū)動(dòng)動(dòng)效。而且也改變了整個(gè)動(dòng)效的開(kāi)發(fā)模式。
所說(shuō)這樣的一個(gè)過(guò)程是痛并快樂(lè)著的。
觸碰天花板
大家都知道，這幾年前端技術(shù)發(fā)展速度可以用突飛猛進(jìn)來(lái)描述。那么在自己曾引以為傲的動(dòng)畫(huà)領(lǐng)域，越發(fā)感覺(jué)到自己的短板。特別是當(dāng)Web 3D動(dòng)畫(huà)，和WebGL相關(guān)的技術(shù)在動(dòng)畫(huà)領(lǐng)域中運(yùn)用之后，感覺(jué)自己就是一個(gè)生手了。而且這些新的技術(shù)點(diǎn)，將改變以往的動(dòng)效，能做出更多有意思的東西。也就是說(shuō)，這個(gè)時(shí)候我碰到了自己的天花板。
記得同事跟我說(shuō)過(guò)，當(dāng)你在一個(gè)團(tuán)隊(duì)呆滿三年的時(shí)候，你會(huì)觸碰到你的短板，觸碰到天花板。其實(shí)我處于這樣的現(xiàn)象，這也讓我開(kāi)始迷茫起來(lái)，很多時(shí)候失去了方向。整個(gè)人都不是狀態(tài)。要改變這個(gè)狀態(tài)，說(shuō)真的不是件容易的事情，特別是在一個(gè)優(yōu)秀的團(tuán)隊(duì)，身邊有一群優(yōu)秀而且比你更拼的人，這讓你會(huì)有一種恐懼，一種窒息的感覺(jué)。這種感覺(jué)伴隨我許久。很多時(shí)候嘗試著去改變，但改變總是以失敗告終。
小時(shí)候老師就告訴我們 —— 失敗是成功之母。只有經(jīng)歷失敗，或者說(shuō)陣痛才能迎來(lái)改為。事實(shí)的確如此，其實(shí)在這個(gè)階段自己也動(dòng)搖過(guò)，想去逃避，但逃避總是不能解決所有問(wèn)題的。在經(jīng)歷過(guò)一段痛苦之后，重拾方向，重新開(kāi)啟新的旅程。
集眾小，成大器
只有經(jīng)歷過(guò)拙折的人，才能夠成長(zhǎng)。雖然自己在動(dòng)畫(huà)領(lǐng)域已碰到了天花板，在這一領(lǐng)域我開(kāi)始選擇停留（其實(shí)這是一種錯(cuò)誤的做法）。我開(kāi)始在尋找新的方法，也就是利用自己擅長(zhǎng)的領(lǐng)域去做自己擅長(zhǎng)的事情。從這個(gè)角度出發(fā)，去觀察，發(fā)現(xiàn)適配一直是團(tuán)隊(duì)，甚至是前端開(kāi)發(fā)人員的一個(gè)痛點(diǎn)。基于這個(gè)出發(fā)點(diǎn)，我又重新開(kāi)始了UI適配方案的探索。
前面也提到過(guò)了，對(duì)于移動(dòng)端的適配方案，其實(shí)在手淘或者說(shuō)社區(qū)已有一套成熟的方案 —— Flexible適配方案或者說(shuō)Flexible的變異方案。但隨著技術(shù)向前的推移，重新在探索另一種適配的方案，也就是vw適配方案。表面上看上去，只是一個(gè)UI適配方案的探索，事實(shí)在這個(gè)過(guò)程中自己收獲不少。為什么這么說(shuō)呢？
在我過(guò)去的認(rèn)知里，對(duì)于新的技術(shù)，或者新的方案的探索。只要自己了解清楚了，然后寫(xiě)篇文章做個(gè)科普性就算是完成了。但事實(shí)上并非如此，因?yàn)槟愕奈恼掠袥](méi)有人看還是個(gè)問(wèn)題，言外之意，你應(yīng)該把你的技術(shù)方案提供一個(gè)更易于實(shí)施的方案，或者說(shuō)更易于落地的方案。這樣一來(lái)，我開(kāi)始將自己研究的東西，通過(guò)一種落地或者更易于實(shí)施的可能性在向前推進(jìn)。比如說(shuō)，整個(gè)構(gòu)建工具，比如說(shuō)寫(xiě)個(gè)NPM包等等。而這一切最終的目標(biāo)是，讓所有使用這個(gè)方案的同學(xué)能以零成本運(yùn)用到自己的項(xiàng)目，而且是有助于業(yè)務(wù)開(kāi)發(fā)。
除此之外，在整個(gè)過(guò)程中我學(xué)到了，在一個(gè)團(tuán)隊(duì)中，甚至是在一個(gè)領(lǐng)域當(dāng)中，可以去挖掘一此痛點(diǎn)，哪怕是一個(gè)小小的痛點(diǎn)，然后能通過(guò)自己的技術(shù)去解決這些痛點(diǎn)。這也算是成功的。除此之外，還可以利用自己的技術(shù)去做一處錦上舔花的事情。
貼標(biāo)簽，撕標(biāo)簽
很多時(shí)候，人是自相矛盾的。我也不能除外。一直以來(lái)，我都在給自己貼標(biāo)簽，比如CSS，比如說(shuō)重構(gòu)。雖然很多時(shí)候我都在自嘲 —— 我是一名頁(yè)面仔！雖然事實(shí)上我真是一名頁(yè)面仔。事實(shí)上，我一直想把這個(gè)標(biāo)簽撕掉，但這是一件很難的事情。然而，這一切并不重要，重要的是你應(yīng)該改變思想，改變對(duì)事物的看法與思考。當(dāng)明白這一點(diǎn)之后，你身上貼的標(biāo)簽是什么也就并不重要了。在此我特別記得 @winter跟我說(shuō)的，跳出圈子去思考，你會(huì)把事情（或事物）看得更清楚。
比如說(shuō)，雖然我更擅長(zhǎng)一點(diǎn)的領(lǐng)域是CSS，但到今天，經(jīng)過(guò)這幾年的變化，我從未把自己劃在一個(gè)圈子中。因?yàn)槲宜娅C的不再是CSS這樣單一領(lǐng)域的東西，我開(kāi)始涉及很多自己從示涉獵的東西。比如說(shuō)設(shè)計(jì)、交互、JavaScript等。那么這個(gè)時(shí)候，你能說(shuō)我身上的標(biāo)簽是什么呢？事實(shí)上并不重要了，重要的是你自己得清楚自己需要的是什么？
總結(jié)
這是一篇流水帳，回憶的是自己在阿里三年的成長(zhǎng)經(jīng)歷與過(guò)程。希望對(duì)大家有所幫助。
文章涉及到圖片和代碼，如果展示不全給您帶來(lái)不好的閱讀體驗(yàn)，歡迎點(diǎn)擊文章底部的 閱讀全文。如果您覺(jué)得小站的內(nèi)容對(duì)您的工作或?qū)W習(xí)有所幫助，歡迎關(guān)注此公眾號(hào)。
