如何從前端小白到帶團隊的技術(shù)小牛
正文如下
本文是第十一屆 - 前端早早聊女生前端職業(yè)發(fā)展專場，也是早早聊第 69 場，來自 百度 鰻魚小姐姐 的分享講稿簡要整理版（完整版含演示請看錄播視頻和 PPT）：
一、前言
大家好，我是鰻魚，現(xiàn)在在百度擔任前端開發(fā)，今天要跟大家分享一下自己的成長歷程，先簡單的自我介紹一下。我是 14 年在學校就開始接觸前端，16 年 4 月的時候在菜鳥實習，17 年 7 月校招進入百度到現(xiàn)在。在百度之后，大概是經(jīng)歷了一年半左右，從 T3 走到 T5，18年底開始負責一些事情，并輔助團隊建設，現(xiàn)在是大概帶十個人左右。
說實話作為本次直播第一個，有點緊張，特別這是一個妹子專場。自己雖然作為妹子，然而一個踏入職場沒多久的妹子，感覺還沒經(jīng)歷太多的“男女生差異”，經(jīng)驗也不是太多，所以著重點不在于“女前端的差異”。
不過互聯(lián)網(wǎng)行業(yè)，一般都是女生當男生用，男生當畜生用，所以無論男女，都會有一定的職業(yè)發(fā)展上的困惑。這里主要會側(cè)重于在成長過程中，我們可能會經(jīng)歷哪些階段，可以通過哪些維度來理解，結(jié)合自己的經(jīng)歷分享一些個人覺得不錯的小經(jīng)驗。
本次分享大體包括兩部分，一個是自己的成長經(jīng)歷描述，分為適應期，熱血期，焦慮期，還有突破期。其次是一些具體的經(jīng)驗分享，后續(xù)仔細講。
二、成長歷程
1. 適應期
這是剛進入職場的小萌新的時期，主要是 16 年在菜鳥實習，以及剛進入百度前一兩個月的一小段經(jīng)歷，這個時期在我身上，主要是從校園到職場的過程。
這個時期的背景：自己雖然在學校有接觸前端，但都是小打小鬧的類型，沒有系統(tǒng)的做過大項目。而且經(jīng)歷過那個時期的同學可能有感受，當時是出于前端技術(shù)混亂的一個階段，自己還是停留在使用 jQuery 操作 DOM，對于現(xiàn)代前端每天都會用的 npm 都不是很清楚，更別說 Vue 或者 React 了。在溝通合作方面，對項目的一個開發(fā)運作流程也不是很清楚，還停留在別人讓做什么就做什么的階段。
然后自己當時進去是在做什么呢？
在業(yè)務上，做的是一個快遞的電子面單編輯器的東西。當時的技術(shù)棧是 Vue +TypeScript，作為一個 npm 是啥都不知道的人，基本上也只是打打輔助，幫忙修修小 Bug； 然后還有個基礎(chǔ)建設的任務，說實話現(xiàn)在已經(jīng)不記得是做了啥了。在被負責的同學催了無數(shù)次，只能說照葫蘆畫瓢，提交上去，后來發(fā)現(xiàn)，提交的內(nèi)容基本上被改得我也不認識了； 另外還有個小工作，作為實習生，一個比較偏打雜類型的東西，就是幫各大業(yè)務部門上線各種合同協(xié)議上線的功能，很簡單，就是 Word 轉(zhuǎn) HTML 然后幫忙優(yōu)化優(yōu)化樣式，上線。
現(xiàn)在回過頭看，這個經(jīng)歷真的就是平平無奇的，技術(shù)上其實也沒感受到太大的進步，但是有一些特質(zhì)是有了一些苗頭的，對于自己之后的成長有很大的幫助。
在做合同上線的時候，發(fā)現(xiàn)都是機械勞動，秉著偷懶是程序員美德的一個想法，這種事情肯定是說能不自己做就不自己做。但是有過類似想法的同學都知道，想讓業(yè)務方自己操作，但是去讓一個不懂技術(shù)的人寫幾行代碼上線真的就太難了。
然后自己經(jīng)過各種研究，發(fā)現(xiàn)當時的淘寶有套 CMS 系統(tǒng)，能直接上線 HTML。這在當時相當于是一個跨部門的調(diào)研，在自己嘗試幾次之后，書寫了轉(zhuǎn)換攻略，以及一份 CSS 文件給整成了模版，教相關(guān)同學使用后就完全交出去了。后續(xù)在其他的業(yè)務中也有借鑒這種模式。
說完上面的故事，其實這里有兩個特質(zhì)是值得去沉淀的：
不只是滿足于分配的任務，可能還會主動做一些額外的事情，雖然是個簡單的實習生還什么都不懂； 能從普通的小事里面發(fā)現(xiàn)更優(yōu)解決方案。
總結(jié)下來就是會搞事情，這個特質(zhì)一直持續(xù)到了后面的整個成長過程中。
2. 熱血期
在過了一個基本的適應期之后，業(yè)務開始逐漸熟悉，然后就進入了下一個階段熱血期，這個時期聽名字就知道，是充滿激情與熱情的一個時期。
首先還是說一下大背景，這是在進入百度之后的幾個月后，發(fā)現(xiàn)團隊內(nèi)部的歷史包袱還是比較重的，項目基本是 Riot 框架開發(fā)，就是一個過氣的小網(wǎng)紅，甚至有殘留的 jQuery，更別說現(xiàn)代的工程化組件化這些東西了，以及團隊對于新人的培養(yǎng)機制也是有待加強的階段。
那這個時期自己做了什么呢？具體做的業(yè)務就不詳細說了，也就是一些 Web 端，移動端的開發(fā)。當時自己感覺很多東西看得不順眼。然后在項目中給了一定的任務，但沒有太大的約束，就有空間去各種搗鼓。不僅說業(yè)務上接觸了 PC 端移動端，以及 HyBird 的混合開發(fā)，在基礎(chǔ)建設層面，也沉淀了不少通用組件，梳理了團隊代碼規(guī)范，還弄了幾個腳手架，照著 AntD 的市場弄了個內(nèi)部的腳手架市場。額外的甚至還玩了玩 Three.js 的 3D 動畫，學了學 OC 的基本語法，并給我們 iOS 客戶端提交了代碼。
總的來說就是一句話，這個時期，不斷的基于現(xiàn)有的業(yè)務，衍生出了很多可以沉淀的東西，也有去提前調(diào)研一些前沿感興趣的東西，并貢獻進了基礎(chǔ)建設層面。
回過頭看，這個時期，是技能點突飛猛進的階段?；緝?nèi)部提交記錄每天都是滿的，沒怎么休息過，每天下班或者周末回家，都是沒啥事就開開心心寫代碼。到現(xiàn)在為止，也是系統(tǒng)記錄的加班時間，跟自己每天的代碼提交記錄是完全對不上的。這個時期的所作所為，為后面把控全局能力提供了一定的視野基礎(chǔ)。
總結(jié)來看呢，這個時期有兩個點自我感覺不錯的：
對待項目，是一個主動，積極熱情的態(tài)度，不光只是應付了事； 專注，雖然剛剛說做的事情多，但是每個事情其實都是一步步，專心的去完成的。
3. 焦慮期
上個時期大概維持了一年多吧，其實也沒有太明確的界限之分，然后就進入了下個時期。
隨著參與業(yè)務的增多，以及逐漸從配角變成主要負責人，什么事情都想親力親為，逐漸有些應付不過來。發(fā)現(xiàn)之前在熱血期雖然搗鼓了很多東西，但是落地的效果比較一般。更加悲慘的是，當時自己的老大離職了，團隊人員變動也挺大的，在這個階段，自然而然的就有些焦慮。
焦慮期，這個時期做了什么東西呢？
首先是一個推進工程化落地的過程，畢竟剛剛說落地效果不佳，就找部門其他團隊商量對策不斷改進，最終全部門接入。其次是還有些項目，開始承擔項目負責人的角色，不光是前端開發(fā)，還把控整個項目的進度節(jié)奏。以及有一個小小的實驗點，就是有一個稍微簡單的項目，使用 Node.js 做后臺，算是 JS 打入了一個新領(lǐng)域。
現(xiàn)在回過頭來看這個時期，實際上就是充滿荊棘的。
我相信大家或多或少都體會過，我們的人生可能不會是一直一帆風順的，我對這個時期的認知，就是職業(yè)生涯的焦慮期。比如我自己就遇到了三個經(jīng)典的挫折：
由于之前熱血期像打了雞血一樣，處于一個向前狂奔的狀態(tài)。很多事情更在意產(chǎn)出，而忽略了整體的質(zhì)量，以至于累積的技術(shù)債開始讓自己踩坑； 團隊的調(diào)整和人員的變動，讓大家開始在工作上感覺到迷茫和失落； 負責的東西多了，任務繁雜之后，什么事都想自己做，明顯精力不夠用，經(jīng)常就是白天各種扯，晚上回家繼續(xù)寫代碼。
幸運的，自己熬過了這個焦慮期，感覺不用多久，就會升職加薪、迎娶白富美、走上人生巔峰，想想還有點小激動呢。
說回正題，走出焦慮期的關(guān)鍵所在，可能不在于你做什么事，而在于你怎么去做事，以及如何去看待事情，一句話概括，就是軟技能。以我自己為例，感覺主要有三個點：
對于技術(shù)債，通過每次項目的復盤，不斷總結(jié)反思，去看到自己的不足并快速改正； 對于團隊的變動，可以去調(diào)整自己的心態(tài)，以及用積極的心態(tài)進一步影響周圍的同學； 在面對事情過多的情況，這個其實就是時間管理的范疇，市面上有很多文章書籍可以參考，自己的經(jīng)驗就是每天花十分鐘整理好自己的 TODO 系統(tǒng)，分清優(yōu)先級，再開始工作。
4. 突破期
最后一個階段突破期，這個時期感覺是從 19 年的 6 月開始的，但也還是目前的一個時期。
這個時期的一個大背景就是，自己在技術(shù)上已經(jīng)有一定的沉淀了，但是缺乏整體的規(guī)劃。團隊上經(jīng)過不斷的招聘，開始趨于穩(wěn)定，自己也有一定的精力開始思考更多的東西。在協(xié)同方面目前充當一個技術(shù)管理的角色，當然還是會實際參與一些業(yè)務開發(fā)，但是通過經(jīng)驗的積累有了更高層面的視野。
這個時期，不僅是技術(shù)上的成長，有更加豐富解決問題的能力，日常任務工作開始感覺到能夠更好的應對。這個時期具體是做了什么呢？
在業(yè)務上，自己主要負責對一個歷史性大型項目梳理出了一套漸進式重構(gòu)方案，然后呢在新人項目由于進度把控不當，也會當當救火隊員，參與開發(fā)。另外更多的可能是一些自己搗鼓的事情，比如說團隊的規(guī)章制度的完善，去規(guī)范項目的開發(fā)流程，以及在部門層面推進 Code Review，和文檔沉淀之類的東西，并參與部門層面的基礎(chǔ)建設。
因為這就是目前的時期，所以其實也沒有回過頭看的環(huán)節(jié)了。最開始，感覺到很多事情都趨于穩(wěn)定，沒有太大的挑戰(zhàn)，這時候想起了大家常說的一個詞，舒適區(qū)。這里思考一下，我們討論的舒適區(qū)到底是什么？個人感覺舒適區(qū)有兩個特點：
你當下做的事情能夠應付自如； 你被動接觸新的挑戰(zhàn)的機會變少。
那么我們應該如何去走出舒適區(qū)，大家應該都聽說過一句話，溫故而知新。這里稍微改動一下，就是我們的答案了，溫故，和知新。
溫故，其實就是一個厚積薄發(fā)的過程。舉個例子，比如 CI 的處理，基本上看到的問題都知道怎么做，但是這還是處于遇到問題解決問題的狀態(tài)，甚至有一小部分問題只是停留在表層，沒有觸及到問題的根源。然而有些同學就止步不前，進入了舒適區(qū)。
這里有幾個走出舒適區(qū)的建議：
系統(tǒng)化的去看待問題； 追溯根源； 多沉淀。
再送大家一句話，華羅庚說的：讀書最好狀態(tài)，先把書讀厚，再把書讀薄。實際在工作過程中也是一樣。
剛才說的是溫故，現(xiàn)在說一下知新，顧名思義就是探索新的領(lǐng)域。通常來說大家在一段環(huán)境呆久了，可能就會稍微有麻木，看不到新的方向，這個時候，可以看看外面的世界。具體呢，可能需要自己感悟。
其實剛剛跟大家扯了那么久，感覺我自己也并沒有突破這個階段，只是說在不斷探索的過程中，有了一些感悟，并給大家簡單分享分享。
總的來看，自己一路走來經(jīng)歷的幾個階段：
適應期，主要是能力提升； 熱血期，開始分辨優(yōu)劣，形成個人主張的一個過程； 焦慮期，主要是出現(xiàn)一些現(xiàn)實跟預期不符的一些沖突管理，并在沖突解決中尋求自我成長； 最后是，在一切趨于穩(wěn)定的狀態(tài)，懂得怎么去走出舒適區(qū)。
比如說對于工作任務上，在適應期的時候是被指派的，在熱血期就開始能對任務做一個自我把控，在焦慮期的時候?qū)W會了整體的項目排期，并開始知道和指派其他同學，在突破期的時候，就開始負責多項目的排期，當然有一些細節(jié)層面的排期會委托給其他同學負責跟進。
基本上就是一個能力提升，到形成個人主張，到?jīng)_突出現(xiàn)，以及后續(xù)穩(wěn)定求變的過程。另外還有個人主張，業(yè)務能力，技術(shù)設計，團隊協(xié)作這幾個維度，都有一定的變化，這里就不做贅述。
三、經(jīng)驗分享
上面的自我故事已經(jīng)講完了，可能每個階段已經(jīng)都有一些小回顧總結(jié)，有心的同學可能已經(jīng)發(fā)現(xiàn)了，那里的經(jīng)驗也有不少。然后讓我們整理再來看，總結(jié)總結(jié)升華升華，上述所有經(jīng)歷貫穿的有幾個點。
1. 方向
首先呢，方向。可能大家初入職場，有時候有很多不適應的地方，會出現(xiàn)迷茫，找不到自己的方向?；蛘咴诼殘鲋衅?，一直埋頭寫業(yè)務，覺得自己沒有任何進步，想努力又不知道怎么做。
這里呢，先拋出一個問題，思考一下，作為一名前端工程師，我們平時在做啥?
這里引用王興的一句話，他認為 “互聯(lián)網(wǎng)改變了生活的方方面面，最重要的是衣食住行，生老病死?！?/p>
個人感覺其實這就是我們的所有產(chǎn)品需求的根源。
為了滿足上述的需求，總結(jié)下來，產(chǎn)品做的主要也就三件事。把線下的變成線上的，把手動的變成自動的，把一些繁瑣的變成智能的。即電子化，自動化，智能化。
然后在看回我們的前端，前端做的工作，主要是負責產(chǎn)品的界面，流程，數(shù)據(jù)這幾方面，他作為一個人機交互的粘合劑的存在的。往下拆分，最簡單的有界面的渲染，交互體驗優(yōu)化，基礎(chǔ)業(yè)務邏輯的開發(fā)，動畫動效的探索。有些業(yè)務為了更好的用戶體驗，可能需要進行多端支持，比如說移動端，小程序，React Native 等。然后我們?yōu)榱颂嵘_發(fā)體驗，我們有中臺服務，需要了解構(gòu)建部署，需要跟不同的人協(xié)調(diào)，需要處理研發(fā)交付的流程等。
這些每個點再往下拆分，又能有很多很多的小點，這里要表明的一個點就是，前端不簡單，對于一些不知道方向，不知道做什么，是一件很正常的事情。
個人的建議來說，一開始，迷茫的時候，不用被市面上的各種資料給嚇到，不用想著面面俱到，什么都想深入研究。初入職場，作為新鮮血液，很多東西跟你認知的不一樣，因為這個時候是難得的，沒有麻木的慣性的理念束縛，所以可以優(yōu)先的去接觸不同的東西，不斷探索。然后把所有看不爽的東西都可以記下來，后面等時機成熟了，所有令你不爽的，都是優(yōu)化空間。
然后當你看的東西多了之后，可能才能找到你所喜歡的方向，然后深耕下去。其實這個的專業(yè)術(shù)語叫， T 字型人才，具體細節(jié)可以自己查找。
這個是喬布斯在 05 年斯坦福演講說的話：“You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future.”
對英語不大好的同學，簡單翻譯一下：雖然你現(xiàn)在可能看不見未來，但在未來的某個時刻回頭看，你生命的點點滴滴都是有聯(lián)系的，你目前的所作所為都構(gòu)成了你的未來。
2. 態(tài)度
可能我們在職場生活中，都會遇到一些不如意的事。比如一個凡是有規(guī)模的，存在了一定時間的公司，基本都會有歷史債的存在，也可能會有其他溝通協(xié)調(diào)你覺得不舒服的地方。這個時候，就是傳說中的，豐滿的理想和骨感的現(xiàn)實不一樣，你的態(tài)度是怎樣的，不同的態(tài)度導致出來的結(jié)果肯定是不一樣的。這里我們看個小例子。
有小 A 和小 B 兩個同學，他們進了同一家公司，發(fā)現(xiàn)，這里還是一個刀耕火種的時代，老板每天只是看著你的系統(tǒng)做完了沒上線了沒，公司盈利多少。這是一個很常見的場景，然后兩個同學他們不同的態(tài)度。
小A：進來開始吐槽，這公司怎么這樣啊，跟我想象的一點都不一樣，垃圾公司毀我青春。然后他出去跟之前同學吃飯，也這么吐槽沒想到他們是這樣的，遇到一個人吐槽一次，然后就沒有然后了。
小B：他感覺，這家公司雖然說基礎(chǔ)建設差了點，但是整體業(yè)務還是不錯的。所以他就不斷的思考怎么去優(yōu)化，結(jié)合實際手頭上的業(yè)務，積極貢獻，并跟自己的負責人不斷討論規(guī)劃。
然后這個故事就到這里截止了，假設 小 A 和小 B 后續(xù)還在這家公司，那一年后，三年后他們的發(fā)展會是一個怎樣的效果，大家可以自行腦補一下。
3. 格局
下一個點，就是格局，格局這東西說起來比較虛，但是不同格局的人，看到的東西是不一樣的。還是舉例子的形式來看看。
假設有一個問題，就大家在業(yè)務之中經(jīng)?？赡苡龅降囊粋€現(xiàn)象，頁面加載時間長。然后不同人他們看到的東西可能就是不一樣的。
對于初級同學，他可能覺得，我代碼寫成這樣了，感覺還行也沒什么辦法，不知道應該做什么，然后就放哪里了表示搞不定。
對于中級同學，他可能會從前端層面分析，嘗試優(yōu)化資源體積，或者從體驗層，加個 Loading 動畫或者寫個骨架圖之類的。
對于高級同學，他可能會嘗試從全鏈路去分析，比如我假設這是一個在客戶端打開的前端頁面，從 Webview 初始化的時間，到前端資源請求速度，接口拉取時間等各個地方去看，并推動不同角色協(xié)助優(yōu)化這事。
對于進階同學，他覺得光全鏈路的分析完了解決了這個問題還不夠，可能還會思考為什么會有這個問題，其他業(yè)務有沒有遇到。從全局來看怎么去避免他，比如說增加一些開發(fā)規(guī)范，完善數(shù)據(jù)監(jiān)控等。
這里說的這個例子，也許還有更高的層次，但是剛剛說的這些大家可能也能感受到不一樣的處理方式，那我們應該怎么去提升自己的格局呢？
我們經(jīng)常自己調(diào)侃自己，別人問你是干嘛的，可能就會說，自己是搬磚的，所以我們這里就以搬磚為例子。大家初入職場，都是從搬磚開始。
但是對于不同的人呢，他可能會有不同的發(fā)展路線。比如有的人，剛進入的時候在搬磚，過了三年還是在搬磚，所以他還是從前的那個搬磚工。
而有的人可能在進去半年的之后就發(fā)明了推板車，可以一次性搬更多磚，后面過了一年買了臺拖拉機，再過兩年又搞起了樓房 3D 打印，這個時候他也可能從搬磚工到了技術(shù)總監(jiān)，然后到區(qū)域經(jīng)理的級別。
這個例子可能知道說明，不同的人會產(chǎn)生的結(jié)果不一樣。我們在平時遇到問題的時候，有時候可以嘗試從更高的角度去看問題，想想如果他是你，他會怎么做，都站到下一個高度去思考，慢慢的，你的格局應該就會有所提升了。
4. 軟技能
第四個點，軟技能。當達到一定程度之后，可能會是限制技術(shù)人員發(fā)展的一個因素了。有時候，不光光說你的代碼寫得多牛逼就行，可能還需要一點點，代碼之外的生存指南。
簡單解釋一下，什么是軟技能？
這里自己畫了幾幅畫。首先，我們大家在日常生活工作中，除了面對自己的電腦寫代碼，還會要接觸各種不同的人，去溝通協(xié)調(diào)，也要去處理各種五花八門的事情。你怎么把這些東西處理好，就是軟技能的體現(xiàn)了。
所謂軟技能，無非是幾個點：
處理人與人之間的關(guān)系，即溝通能力； 處理任務任務之間的關(guān)系，怎么把他們串起來，即時間任務管理能力； 怎么去處理人和事混雜的項目，就是組織協(xié)調(diào)能力。
具體怎么提升，市面上有很多很多的書可以學習，很多也都是道理都懂系列，具體肯定是要自己不斷的實踐感悟練習出來的。這里強調(diào)的一個點，軟技能不容忽視，但是具體要怎么做，需要自己自行體會。
5. 可復制性
可復制性，這是一個可能聽得比較少的一個詞，具體的一個思想呢，就是：你能力很強，終究只是一個人能力很強，你怎么讓你的能力，轉(zhuǎn)移到其他人身上，甚至再從其他人轉(zhuǎn)移到其他人身上。
繼續(xù)舉個栗子?：你可能覺得 Code Review 很重要，你每天辛辛苦苦的幫 ABC 三個同學去做 Code Review，提出各種意見思路。但是呢，如果你是一個帶二十個人的 Leader，如果你每天幫每個人看半小時，加起來就是十個小時，那你一天就不用干別的事了。
這個時候，你可能要做的，不僅是停留在努力的給別人做 Code Review，而是要讓你做 Code Review 的能力，復制到被你 Review 的同學的身上。對 ABC 同學，Code Review 的同時，告訴他們這事很重要，以及應該怎么去做，等到一定程度之后，可能 ABC 已經(jīng)得到了你的真?zhèn)?，這個時候，他們也能代替你，去給 甲乙丙丁 做 Code Review，但是這樣還不夠。
可復制性的這件事，應該是個遞歸的過程。作為一個 Team Leader，你不僅自己要強，你還要能夠培養(yǎng)其他同學變強，還要培養(yǎng)其他變強的同學，有培養(yǎng)其他的同學變強的能力。這里可能比較繞，再重復一遍：你還要培養(yǎng)其他變強的同學，有培養(yǎng)其他的同學變強的能力。
比如上述的 ABC 學會了怎么去給別人 Code Reivew，你還要思考，如何讓 ABC 有能力教別人去做 Code Review 這就是所謂的可復制性，這個是在大家后期帶團隊的時候可能需要具備的一個能力。
6. 興趣
上面我們羅列了五個點：方向，態(tài)度，格局，軟技能，和可復制性?？隙ㄟ€有很多其他的點我們需要去思考，但是呢，還有一個最最最重要的，就是興趣。
無論說你有再強力的外部支持，比如說有很多的資源素材，在很牛逼的團隊，或者你有再好的方法工具，甚至你有再高的報酬，都比不上你自己對技術(shù)的一個興趣和熱情，這才是支撐你快速成長的一個必備特性。 ** **
四、推薦的書
《軟技能--代碼之外的生存指南》，這是一本面向技術(shù)人員的職場書籍，對于初入職場或者有困惑的同學可以看看，它的優(yōu)點是全面，你很少會在一本介紹職場的書籍里面看到對你健身的建議。缺點：涉及的話題多但是不深入，但是的確是很多道理都懂系列，自行取舍。
五、廣告時間
大家有興趣或者有問題的，可以加早早聊專場的微信群，或者說直接加個人微信(加微信 codingdreamer 邀請進 Group，直接加鰻魚小姐姐微信)。
目前是招 T4 T5 的同學，地點在北京和上海都是處于一個正在招聘的狀態(tài)。對于深圳的小伙伴可以觀望觀望，應該七月份就會啟動了。具體介紹可見：
謝謝大家～
掃碼關(guān)注公眾號，訂閱更多精彩內(nèi)容。
給個[在看]，是對達達最大的支持！
