點(diǎn)擊上方關(guān)注 前端技術(shù)江湖，一起學(xué)習(xí)，天天進(jìn)步

個(gè)人簡介

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

進(jìn)入公司前在一個(gè)普通一本大學(xué)的數(shù)學(xué)院，四年總的來說，折騰了一年前后端PHP + JQuery一把梭，折騰了一年游戲，折騰了一年AI， 最后一年本來打算考研，由于個(gè)人興趣原因放棄，轉(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)歷了不少。

個(gè)人經(jīng)歷

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

經(jīng)歷

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

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

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

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

感悟

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

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

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

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

C端組件庫建設(shè)

經(jīng)歷

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

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

除了實(shí)現(xiàn)組件庫本身， 也適當(dāng)“折騰”了一下，比如當(dāng)時(shí)我們習(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í)間面臨了較多的技術(shù)挑戰(zhàn)，在完成工作的同時(shí)技術(shù)水平得到了快速的成長。搭上了業(yè)務(wù)快速發(fā)展的便車。

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

經(jīng)歷

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

技術(shù)上接觸到了微前端、中后臺低代碼搭建體系等， 針對中后臺常見的表單+表格場景折騰了一個(gè)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)展。

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

感悟

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

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

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

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

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

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

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

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

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

• 事事有回應(yīng)， 件件有著落。

• 充分考慮工作的優(yōu)先級， 有序進(jìn)行。

• 合理排期， 及時(shí)暴露項(xiàng)目風(fēng)險(xiǎn)。

• ......

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

工作習(xí)慣建議

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

每天第一件事情

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

收錄

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

開會之前

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

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

方向

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

深度

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

廣度

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

熱情

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

開放

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

新人落地建議

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

關(guān)于焦慮

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

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

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

一起戰(zhàn)斗

字節(jié)跳動國際化電商（麥哲倫）團(tuán)隊(duì)招新啦！校招實(shí)習(xí)皆可投遞，不打雜，可轉(zhuǎn)正，可回?fù)?/strong>！

【加入國際化電商（麥哲倫），美好生活觸手可及】 盼望著，盼望著，字節(jié)的機(jī)會又來啦～就現(xiàn)在！有一個(gè)絕好的機(jī)會（麥哲倫項(xiàng)目）擺在你面前哦，快來找我內(nèi)推吧！來這里，你的每一行代碼都在影響眾多消費(fèi)者，每實(shí)現(xiàn)一個(gè)功能都會被商家使用。來這里，你將有機(jī)會對接字節(jié)跳動全產(chǎn)品矩陣，見證國際化電商業(yè)務(wù)（麥哲倫）團(tuán)隊(duì)成長，支撐公司的收入增長。如果你也想和我們一起探索下一個(gè)國際化電商引爆點(diǎn)，在億萬級用戶的場景中應(yīng)用最新技術(shù)，解決業(yè)界頂尖的技術(shù)難題！那就快來加入我們吧！各崗各級，統(tǒng)統(tǒng)都喜歡！最nice的團(tuán)隊(duì)氛圍和最nice的成長機(jī)會，還等什么？快來找我內(nèi)推！

【崗位類型】：前端/后端/客戶端/測試開發(fā)工程師等。

【職位地點(diǎn)】：北京/上海/深圳

【投遞方式】：發(fā)送郵件， 主題格式【名字+手機(jī)號碼+城市+崗位+實(shí)習(xí)/校招/社招】到[email protected]. 可以隨時(shí)發(fā)送郵件查詢投遞進(jìn)展，可以加wx: xushaojun0獲取簡歷優(yōu)化建議、 面試準(zhǔn)備建議。

參考資料

原文鏈接：https://juejin.cn/post/6980671091526074404

The End

點(diǎn)個(gè)『在看』支持下