時(shí)光如梭省骂，轉(zhuǎn)眼一逝，已經(jīng)在阿里呆了三年了最住。在阿里有句話 —— 一年香钞澳，三年醇，五年陳涨缚。另外還有一句話就是說(shuō)在阿里轧粟，要呆完三年才算是阿里人。自己非常的榮幸脓魏，有幸在阿里成功的呆了三年兰吟，也有幸成人 —— 成為阿里人。借著這次茂翔，對(duì)自己在阿里過(guò)去的三年光陰做一個(gè)簡(jiǎn)單的整理與總結(jié)揽祥。就算是對(duì)過(guò)去三年的復(fù)盤(pán)吧。
不以失敗論英雄
在阿里檩电，滿(mǎn)一周年的同學(xué)被稱(chēng)為一年香拄丰，一年壇發(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è)很好的稱(chēng)味 —— 重構(gòu)工程師。但是在我的眼理纱烘，我自認(rèn)為進(jìn)入手淘的時(shí)候杨拐，我只是一名頁(yè)面仔，只是會(huì)切切圖（俗稱(chēng)頁(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í)就是做一淘類(lèi)似于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)冤馏，就是做一套類(lèi)似于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)建，但這一切并不意味著就能落地猖吴。
如何讓人愿意為你買(mǎi)單摔刁。剛才也說(shuō)到了，雖然UI上的規(guī)范能很好的通過(guò)代碼來(lái)實(shí)現(xiàn)海蔽，但這并不意味著共屈，你的東西能讓人愿意買(mǎi)單。這也是自己當(dāng)初或者以前從未想過(guò)的一件事情党窜。為什么這么說(shuō)呢拗引？因?yàn)樵诖酥埃约阂恢闭J(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)稱(chēng)為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à)的專(zhuān)業(yè)戶(hù)。這個(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ì)呆滿(mǎn)三年的時(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)吉懊。
