【總結】1038- 校招前端在位元組跳動一年的收獲

今天分享這篇，相信讀完會有些收獲。

個人簡介

19年底12月進入位元組實習， 第二年7月畢業轉正。到前幾天正好全職一周年。

進入公司前在一個普通一本大學的數學院，四年總的來說，折騰了一年前後端PHP + JQuery一把梭，折騰了一年遊戲，折騰了一年AI， 最後一年本來打算考研，由于個人興趣原因放棄，轉而到位元組專心做前端。感興趣的可以看這篇标題黨：我是如何從雙非非科班到大廠程式員的？

目前在位元組跳動國際化電商團隊， 主要做中背景相關的工作。目前團隊還在北京、上海、深圳招聘前端工程師，包括但不限于實習、校招、社招。感興趣歡迎翻到文末了解投遞資訊。

入職這一年多來做過中台業務、C端業務、B端業務。從0到1做過C端元件庫，目前也在折騰procode提效工具。整體而言，還是經曆了不少。

個人經曆

某中台C端業務

經曆

正式畢業前做了一段時間的中台支付頁面。

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

其次是當時開發的Form， 在需求開發中不斷加入了新的功能， 代碼逐漸變得難以維護。當時準備調研業界的表單方案，做一個重構。一個是當時的前端水準還有限，一個是需求緊張排不上日程。

當時還因為一些頁面元件同時承載了多個業務方，到我開發第三個業務方的時候， 需要測試和回歸的工作量也進一步加大。是以冒着風險重構拆分， 将公共的部分抽離為公共元件的形式。

感悟

當時沒有意識到，其實有很多問題反而是一種機會，這受限于當時的技術視野和能力。現在看來，可以從研發提效到品質保障推進許多方案。

比如最簡單的把需要mock改代碼的地方抽離到多環境env檔案中，通過自定義webpack-plugin的方式來實作啟動時自動生成id号。

比如梳理現有業務并考慮未來變化建設C端元件庫。

使用e2e測試對覆寫關鍵case，確定上線的品質等。

C端元件庫建設

經曆

在團隊啟動國際化電商業務前有一段時間的空窗期，感激這段時間的自己，每天像海綿一樣吸收團隊現有項目中的技術實作，學習相關技術棧，從一個對前端工程化一竅不通到具有一定的認識。

很幸運能在剛畢業的時候就有機會自主對一個C端元件庫從技術選型到開發落地，當時調研了公司内外的C端元件庫技術方案，結合我們業務的特點整理了一套技術方案。

除了實作元件庫本身， 也适當“折騰”了一下，比如當時我們習慣使用的styleguidist不支援移動端預覽， 不支援RTL[1]、暗黑模式的預覽， 為了避免重複去寫一些h5 Demo頁供UI驗收， 使用webpack的别名的方式+自定義展示容器的方式實作了styleguidist在移動端的預覽。後面産出了技術分享: 聊聊 React 元件庫的技術選型與設計

感悟

這段時間面臨了較多的技術挑戰，在完成工作的同時技術水準得到了快速的成長。搭上了業務快速發展的便車。

國際化電商中背景業務

經曆

這是最近半年多做的一塊業務， 整體投入到業務中的一個小子產品。

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

業務上開始了解自己負責的業務子產品的背景知識、業務資料， 參與業務的中長期規劃，合作各方角色的雙月目标。和兩三名同學一起進行該子產品的開發，跟進項目進展。

同時開始作為新人導師帶領新人融入團隊和工作中。

感悟

這個階段遇到了許多業務之外的挑戰， 個人的軟素質逐漸成為成長的瓶頸， 對于新人的培養等事情也缺少經驗。需要再多思考、多總結， 優化做事情的方式方法。

對前端技術的認識

個人目前對前端的認識主要是三駕馬車：效率、 性能和品質。

通過這三駕馬車對業務産生基本的完成需求以外的更大的價值。比如人效的提升可以支撐更多的業務需求， 性能的提升可以提高使用者的留存和在漏鬥中的轉化率。品質的保證能確定使用者穩定的體驗。

除了業務開發以外的事情，基本都圍繞這三件事情來展開。

對于前端體系的認識這裡不在展開，已經有太多相關的總結和結構圖。

對前端工程師的認識

一個靠譜的前端工程師不僅需要紮實的技術基礎，更需要思考技術對業務的價值。

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

• 事事有回應， 件件有着落。
• 充分考慮工作的優先級， 有序進行。
• 合理排期， 及時暴露項目風險。
• ......

除了技術之外， 還有許多具有挑戰的事情， 比如新人的培養等等。

工作習慣建議

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

每天第一件事情

• 每天上班的時候，我會先看看今天的日程，有哪些必須參加的會議，占用的時間。
• 然後是清理待辦事項，比如目前手上有哪些需求，是否需要和合作的同學溝通目前的進展和排期。
• 接着估計，今天有多少可支配的時間，按照優先級規劃一下今天在不同時間段做的事情。

收錄

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

開會之前

• 重要會議之前必須認真閱讀文檔（一般是PRD或者技術方案），做到心裡有數，帶着問題來參加會議，提高效率。
• 會上整理TODO， 如有必要發到群裡at相關處理人。— 會後将相關文檔整理到個人的工作文檔集中，確定需要的時候能快速檢索到。

學習建議

方向

前期結合自己的工作來學習，優先學目前以及未來一段時間工作用得到的。這樣能有更多正回報，保持學習的動力，同時也能更快地把學習轉化為工作上的産出。後期再考慮學得更加系統，建立體系化的知識。好奇心

多一點好奇心，比如工作中為了插入一個icon用到了svg，使用base64的方式無法覆寫它的顔色，通過更改源檔案的fill屬性解決了問題。那麼使用svg還有哪些方式？各種方式的優缺點？如果項目使用了svgr/webpack将所有的svg作為React Component引入了， 這時候有部分svg檔案又希望用base64的方式引入要怎麼做？等等。再比如，每天都在跑的項目， 是如何配置的？yarn dev背後做了什麼。送出的代碼經過了CI/CD。我們的項目是怎麼配置CI/CD的？這些都可以在完成需求之後， 有餘力的時候去學習。我們的項目本身就是一個最好的學習資料。因為它是真正的一些技術在實戰中的落地，有疑問可以請教相關同僚。

深度

一個是你自己切實做的事情，從技術調研、選型到落地， 并産出分享，這是最紮實的。

廣度

可以用中午休息的時間，會議中間的碎片時間，或者需求之間一些比較休閑的時間來多看看。比如其他部門的周報，了解他們做了什麼，公司内外的技術社群等。這些内容簡單浏覽并不能學得非常深入，但是可以成為你後面做技術調研時候的想法的來源，遇到能借鑒的場景的時候，能想到它們。同時也逐漸對前端技術有一個整體的認識。

熱情

是否對于技術抱有熱情，這可能是非常重要的一點。如果對技術的熱情一般，也可以通過學習和工作最相關的技術，轉化為在工作中結局問題，來使自己獲得充實感。因為有些技術，局限于我們目前的工作用不到，可能很長時間是比較難在工作裡運用的，容易打擊學習的積極性，這也是為什麼更加建議從工作相關的部分入手。

開放

需要對技術抱有更加開放的态度，能接受和了解不同的技術選型、技術觀點。可以去做一些分享，讓其他人來幫你review和提出建議。

新人落地建議

每個新人必定經曆的就是熟悉公司内的基建， 到能完成中小規模的需求（針對校招、實習同學來說）。在逐漸達到這個能力的過程中，可以從一些簡單但是很有價值的事情入手， 做的需求中有沒有哪些元件是可以複用的， 抽象成公共元件？如果原來一個元件隻是在你的頁面上使用，那麼它的設計和通用性都沒有那麼嚴格，如果是需要作為公共元件，還需要考慮哪些？前期還是集中精力在自己能力範圍内寫好代碼，對于溝通、對業務的了解都可以在能把代碼寫得相對OK之後再花心思去做， 畢竟成長具有階段性。同時可以思考自己的長處和短闆，發揮長處相對來說比較容易，但克服短闆可能是一個長期的過程。就我來說，我的短闆在于過于焦慮，這一點從我的經曆中可以很明顯的看出。最近在慢慢讓心态變得平和一些，希望可以克服這個短闆。新人比較大的一個問題就是容易有問題不及時溝通， 逞強。這一點我也是這樣，有一些同學會做的比我好些。排期上明顯不合理，遇到的問題确實自己思考了也無法解決，這時候就要尋求mentor、 其他同僚、leader的幫助。

關于焦慮

我常常很焦慮，是以關于這個，可能是比較有經驗的，主要考慮以下幾點：

• 正視自己的成長是有階段的， 是需要時間的。
• 對未來需要有計劃和預估，但做事情的時候更多關注當下，這樣你會更專注，也能減少一些焦慮。
• 多付出。焦慮本身是一種對自己的狀态不滿意的心理，如果希望做得更好，首先要接受付出更多。要正視到付出得到回報是有延遲的。就比如各位在進入公司之前也花了一段時間準備和學習，那個時候頭上并沒有一個距離拿到位元組offer還有多少的進度條。是以這件事，還是一個延遲滿足的問題。同時，可能要偶爾思考一下付出是否在一個正确的方向。比我我剛入職那會看現在寫部落格很熱，也想着去寫一些部落格。但是現階段更重要的還是輸入，自己的提高。付出這件事情，考慮清楚優先級和方向，持續投入，然後相信會有回報。

可能網上（主要是脈脈和知乎）會有許多關于前端和程式員35歲的焦慮， 我剛入職的時候也經曆過很長一段時間的這個焦慮。所謂狹路相逢勇者勝，我們在自己的這條賽道上付出更多些，做得更好些也就不錯了。這個階段，更多把精力放在适應工作節奏以及個人的成長上面去， 面向未來兩三年做規劃，關注成長、保持學習即可。

參考資料

[1]

RTL: https://developer.mozilla.org/zh-CN/docs/Web/CSS/direction