今天分享這篇，相信讀完會有些收獲。本文經(jīng)作者授權(quán)轉(zhuǎn)載，原文鏈接：https://juejin.cn/post/6980671091526074404

個人簡介

19年底12月進(jìn)入字節(jié)實(shí)習(xí)，第二年7月畢業(yè)轉(zhuǎn)正。到前幾天正好全職一周年。

進(jìn)入公司前在一個普通一本大學(xué)的數(shù)學(xué)院，四年總的來說，折騰了一年前后端PHP + JQuery一把梭，折騰了一年游戲，折騰了一年AI，最后一年本來打算考研，由于個人興趣原因放棄，轉(zhuǎn)而到字節(jié)專心做前端。感興趣的可以看這篇標(biāo)題黨：我是如何從雙非非科班到大廠程序員的？

目前在字節(jié)跳動國際化電商團(tuán)隊(duì)，主要做中后臺相關(guān)的工作。目前團(tuán)隊(duì)還在北京、上海、深圳招聘前端工程師，包括但不限于實(shí)習(xí)、校招、社招。感興趣歡迎翻到文末了解投遞信息。

入職這一年多來做過中臺業(yè)務(wù)、C端業(yè)務(wù)、B端業(yè)務(wù)。從0到1做過C端組件庫，目前也在折騰procode提效工具。整體而言，還是經(jīng)歷了不少。

個人經(jīng)歷

某中臺C端業(yè)務(wù)

經(jīng)歷

正式畢業(yè)前做了一段時間的中臺支付頁面。

彼時項(xiàng)目草創(chuàng)，需要用服務(wù)端提供的shell腳本生成一個id，然后在本地起node服務(wù)的時候還需要手動去mock一些cookie，賬號之類的，上線前再把mock代碼去掉。

其次是當(dāng)時開發(fā)的Form，在需求開發(fā)中不斷加入了新的功能，代碼逐漸變得難以維護(hù)。當(dāng)時準(zhǔn)備調(diào)研業(yè)界的表單方案，做一個重構(gòu)。一個是當(dāng)時的前端水平還有限，一個是需求緊張排不上日程。

當(dāng)時還因?yàn)橐恍╉撁娼M件同時承載了多個業(yè)務(wù)方，到我開發(fā)第三個業(yè)務(wù)方的時候，需要測試和回歸的工作量也進(jìn)一步加大。所以冒著風(fēng)險重構(gòu)拆分，將公共的部分抽離為公共組件的形式。

感悟

當(dāng)時沒有意識到，其實(shí)有很多問題反而是一種機(jī)會，這受限于當(dāng)時的技術(shù)視野和能力?，F(xiàn)在看來，可以從研發(fā)提效到質(zhì)量保障推進(jìn)許多方案。

比如最簡單的把需要mock改代碼的地方抽離到多環(huán)境env文件中，通過自定義webpack-plugin的方式來實(shí)現(xiàn)啟動時自動生成id號。

比如梳理現(xiàn)有業(yè)務(wù)并考慮未來變化建設(shè)C端組件庫。

使用e2e測試對覆蓋關(guān)鍵case，確保上線的質(zhì)量等。

C端組件庫建設(shè)

經(jīng)歷

在團(tuán)隊(duì)啟動國際化電商業(yè)務(wù)前有一段時間的空窗期，感激這段時間的自己，每天像海綿一樣吸收團(tuán)隊(duì)現(xiàn)有項(xiàng)目中的技術(shù)實(shí)現(xiàn)，學(xué)習(xí)相關(guān)技術(shù)棧，從一個對前端工程化一竅不通到具有一定的認(rèn)識。

很幸運(yùn)能在剛畢業(yè)的時候就有機(jī)會自主對一個C端組件庫從技術(shù)選型到開發(fā)落地，當(dāng)時調(diào)研了公司內(nèi)外的C端組件庫技術(shù)方案，結(jié)合我們業(yè)務(wù)的特點(diǎn)整理了一套技術(shù)方案。

除了實(shí)現(xiàn)組件庫本身，也適當(dāng)“折騰”了一下，比如當(dāng)時我們習(xí)慣使用的styleguidist不支持移動端預(yù)覽，不支持RTL^[1]、暗黑模式的預(yù)覽，為了避免重復(fù)去寫一些h5 Demo頁供UI驗(yàn)收，使用webpack的別名的方式+自定義展示容器的方式實(shí)現(xiàn)了styleguidist在移動端的預(yù)覽。后面產(chǎn)出了技術(shù)分享: 聊聊 React 組件庫的技術(shù)選型與設(shè)計(jì)

感悟

這段時間面臨了較多的技術(shù)挑戰(zhàn)，在完成工作的同時技術(shù)水平得到了快速的成長。搭上了業(yè)務(wù)快速發(fā)展的便車。

國際化電商中后臺業(yè)務(wù)

經(jīng)歷

這是最近半年多做的一塊業(yè)務(wù)，整體投入到業(yè)務(wù)中的一個小模塊。

技術(shù)上接觸到了微前端、中后臺低代碼搭建體系等，針對中后臺常見的表單+表格場景折騰了一個procode代碼生成工具，目前正逐步完善中。

業(yè)務(wù)上開始了解自己負(fù)責(zé)的業(yè)務(wù)模塊的背景知識、業(yè)務(wù)數(shù)據(jù)，參與業(yè)務(wù)的中長期規(guī)劃，合作各方角色的雙月目標(biāo)。和兩三名同學(xué)一起進(jìn)行該模塊的開發(fā)，跟進(jìn)項(xiàng)目進(jìn)展。

同時開始作為新人導(dǎo)師帶領(lǐng)新人融入團(tuán)隊(duì)和工作中。

感悟

這個階段遇到了許多業(yè)務(wù)之外的挑戰(zhàn)，個人的軟素質(zhì)逐漸成為成長的瓶頸，對于新人的培養(yǎng)等事情也缺少經(jīng)驗(yàn)。需要再多思考、多總結(jié)，優(yōu)化做事情的方式方法。

對前端技術(shù)的認(rèn)識

個人目前對前端的認(rèn)識主要是三駕馬車：效率、性能和質(zhì)量。

通過這三駕馬車對業(yè)務(wù)產(chǎn)生基本的完成需求以外的更大的價值。比如人效的提升可以支撐更多的業(yè)務(wù)需求，性能的提升可以提高用戶的留存和在漏斗中的轉(zhuǎn)化率。質(zhì)量的保證能確保用戶穩(wěn)定的體驗(yàn)。

除了業(yè)務(wù)開發(fā)以外的事情，基本都圍繞這三件事情來展開。

對于前端體系的認(rèn)識這里不在展開，已經(jīng)有太多相關(guān)的總結(jié)和結(jié)構(gòu)圖。

對前端工程師的認(rèn)識

一個靠譜的前端工程師不僅需要扎實(shí)的技術(shù)基礎(chǔ)，更需要思考技術(shù)對業(yè)務(wù)的價值。

很多事情說起來很簡單，但少有人能做到，比如靠譜二字，比如

事事有回應(yīng)，件件有著落。
充分考慮工作的優(yōu)先級，有序進(jìn)行。
合理排期，及時暴露項(xiàng)目風(fēng)險。
......

除了技術(shù)之外，還有許多具有挑戰(zhàn)的事情，比如新人的培養(yǎng)等等。

工作習(xí)慣建議

分享一些很普通但有用的工作習(xí)慣。

每天第一件事情

每天上班的時候，我會先看看今天的日程，有哪些必須參加的會議，占用的時間。
然后是清理待辦事項(xiàng)，比如目前手上有哪些需求，是否需要和合作的同學(xué)溝通當(dāng)前的進(jìn)展和排期。
接著估計(jì)，今天有多少可支配的時間，按照優(yōu)先級規(guī)劃一下今天在不同時間段做的事情。

收錄

首先工作中遇到的一些重要文檔，我會收錄在一個個人的doc里。
按照和我相關(guān)性的高低來分類，依次是物流 -> 運(yùn)營平臺 -> 麥哲倫電商。
特別是做一個需求的時候，可能會有PRD（產(chǎn)品文檔）、服務(wù)端技術(shù)文檔、測試case文檔等等，為了避免需要的時候找不到文檔，及時收錄是非常有必要的。當(dāng)然如果這個需求需要出前端技術(shù)文檔，可以歸攏到前端技術(shù)文檔中。

開會之前

重要會議之前必須認(rèn)真閱讀文檔（一般是PRD或者技術(shù)方案），做到心里有數(shù)，帶著問題來參加會議，提高效率。
會上整理TODO，如有必要發(fā)到群里at相關(guān)處理人?！?會后將相關(guān)文檔整理到個人的工作文檔集中，確保需要的時候能快速檢索到。

學(xué)習(xí)建議

方向

前期結(jié)合自己的工作來學(xué)習(xí)，優(yōu)先學(xué)目前以及未來一段時間工作用得到的。這樣能有更多正反饋，保持學(xué)習(xí)的動力，同時也能更快地把學(xué)習(xí)轉(zhuǎn)化為工作上的產(chǎn)出。后期再考慮學(xué)得更加系統(tǒng)，建立體系化的知識。好奇心多一點(diǎn)好奇心，比如工作中為了插入一個icon用到了svg，使用base64的方式無法覆蓋它的顏色，通過更改源文件的fill屬性解決了問題。那么使用svg還有哪些方式？各種方式的優(yōu)缺點(diǎn)？如果項(xiàng)目使用了svgr/webpack將所有的svg作為React Component引入了，這時候有部分svg文件又希望用base64的方式引入要怎么做？等等。再比如，每天都在跑的項(xiàng)目，是如何配置的？yarn dev背后做了什么。提交的代碼經(jīng)過了CI/CD。我們的項(xiàng)目是怎么配置CI/CD的？這些都可以在完成需求之后，有余力的時候去學(xué)習(xí)。我們的項(xiàng)目本身就是一個最好的學(xué)習(xí)資料。因?yàn)樗钦嬲囊恍┘夹g(shù)在實(shí)戰(zhàn)中的落地，有疑問可以請教相關(guān)同事。

深度

一個是你自己切實(shí)做的事情，從技術(shù)調(diào)研、選型到落地，并產(chǎn)出分享，這是最扎實(shí)的。

廣度

可以用中午休息的時間，會議中間的碎片時間，或者需求之間一些比較休閑的時間來多看看。比如其他部門的周報，了解他們做了什么，公司內(nèi)外的技術(shù)社區(qū)等。這些內(nèi)容簡單瀏覽并不能學(xué)得非常深入，但是可以成為你后面做技術(shù)調(diào)研時候的想法的來源，遇到能借鑒的場景的時候，能想到它們。同時也逐漸對前端技術(shù)有一個整體的認(rèn)識。

熱情

是否對于技術(shù)抱有熱情，這可能是非常重要的一點(diǎn)。如果對技術(shù)的熱情一般，也可以通過學(xué)習(xí)和工作最相關(guān)的技術(shù)，轉(zhuǎn)化為在工作中結(jié)局問題，來使自己獲得充實(shí)感。因?yàn)橛行┘夹g(shù)，局限于我們當(dāng)前的工作用不到，可能很長時間是比較難在工作里運(yùn)用的，容易打擊學(xué)習(xí)的積極性，這也是為什么更加建議從工作相關(guān)的部分入手。

開放

需要對技術(shù)抱有更加開放的態(tài)度，能接受和了解不同的技術(shù)選型、技術(shù)觀點(diǎn)?？梢匀プ鲆恍┓窒?，讓其他人來幫你review和提出建議。

新人落地建議

每個新人必定經(jīng)歷的就是熟悉公司內(nèi)的基建，到能完成中小規(guī)模的需求（針對校招、實(shí)習(xí)同學(xué)來說）。在逐漸達(dá)到這個能力的過程中，可以從一些簡單但是很有價值的事情入手，做的需求中有沒有哪些組件是可以復(fù)用的，抽象成公共組件？如果原來一個組件只是在你的頁面上使用，那么它的設(shè)計(jì)和通用性都沒有那么嚴(yán)格，如果是需要作為公共組件，還需要考慮哪些？前期還是集中精力在自己能力范圍內(nèi)寫好代碼，對于溝通、對業(yè)務(wù)的理解都可以在能把代碼寫得相對OK之后再花心思去做，畢竟成長具有階段性。同時可以思考自己的長處和短板，發(fā)揮長處相對來說比較容易，但克服短板可能是一個長期的過程。就我來說，我的短板在于過于焦慮，這一點(diǎn)從我的經(jīng)歷中可以很明顯的看出。最近在慢慢讓心態(tài)變得平和一些，希望可以克服這個短板。新人比較大的一個問題就是容易有問題不及時溝通，逞強(qiáng)。這一點(diǎn)我也是這樣，有一些同學(xué)會做的比我好些。排期上明顯不合理，遇到的問題確實(shí)自己思考了也無法解決，這時候就要尋求mentor、其他同事、leader的幫助。

關(guān)于焦慮

我常常很焦慮，所以關(guān)于這個，可能是比較有經(jīng)驗(yàn)的，主要考慮以下幾點(diǎn)：

正視自己的成長是有階段的，是需要時間的。
對未來需要有計(jì)劃和預(yù)估，但做事情的時候更多關(guān)注當(dāng)下，這樣你會更專注，也能減少一些焦慮。
多付出。焦慮本身是一種對自己的狀態(tài)不滿意的心理，如果希望做得更好，首先要接受付出更多。要正視到付出得到回報是有延遲的。就比如各位在進(jìn)入公司之前也花了一段時間準(zhǔn)備和學(xué)習(xí)，那個時候頭上并沒有一個距離拿到字節(jié)offer還有多少的進(jìn)度條。所以這件事，還是一個延遲滿足的問題。同時，可能要偶爾思考一下付出是否在一個正確的方向。比我我剛?cè)肼毮菚船F(xiàn)在寫博客很熱，也想著去寫一些博客。但是現(xiàn)階段更重要的還是輸入，自己的提高。付出這件事情，考慮清楚優(yōu)先級和方向，持續(xù)投入，然后相信會有回報。

可能網(wǎng)上（主要是脈脈和知乎）會有許多關(guān)于前端和程序員35歲的焦慮，我剛?cè)肼毜臅r候也經(jīng)歷過很長一段時間的這個焦慮。所謂狹路相逢勇者勝，我們在自己的這條賽道上付出更多些，做得更好些也就不錯了。這個階段，更多把精力放在適應(yīng)工作節(jié)奏以及個人的成長上面去，面向未來兩三年做規(guī)劃，關(guān)注成長、保持學(xué)習(xí)即可。