簡介：作者簡介：瓏晴——淘系技術部前端技術專家，16 年校招實習轉正進入的阿里，當時是在聚劃算前端團隊，隨著業務變化一路從聚劃算到天貓至今加入淘系技術部，負責日常活動營銷的同時，也多次參與大促會場&互動的研發，在支持業務的過程中不斷挖掘提煉創新，最終完成從前端小白到前端技術專家的蛻變。

作者簡介：瓏晴——淘系技術部前端技術專家，16 年校招實習轉正進入的阿里，當時是在聚劃算前端團隊，隨著業務變化一路從聚劃算到天貓至今加入淘系技術部，負責日常活動營銷的同時，也多次參與大促會場&互動的研發，在支持業務的過程中不斷挖掘提煉創新，最終完成從前端小白到前端技術專家的蛻變。

本文，將結合筆者的 4 年，從以下幾點具體談談我的前端成長之路。

• 職業經歷
• 關鍵技能
• 一些反思

職業經歷

? 職場初探-實習的那幾個月

首先是實習期，當時是北郵的一個師兄內推來的杭州這邊。實習期間，主要負責 2 塊東西， XList 和周末淘寶， XList 是聚劃算之前的一個解決無盡滾動的框架，當時主要還是在熟悉團隊的工具鏈、看源碼，順便給其他業務打打雜。

這個時期的重點是團隊融入和興趣探索，對實習生本身能力要求并不高，所以這個階段的同學們不要過于焦慮，重點還是看自己的個人意愿與團隊的匹配度來進一步決定是否要繼續待在這樣的團隊。

? 新人菜鳥-入職第1年

然后是入職第 1 年，我的菜鳥時期。我入職的時候，剛好趕上聚劃算整個在做品牌升級，當時存在一個商家素材不規范的問題，亟需解決以提升用戶體驗。

我就在師兄的指導下，設計了這么一個基于 PSD 解析的規范化合圖方案，這是技術方案的簡圖。

在 PSD 解析的基礎上，我還提供了一個可視化界面給設計師調控實現配置生成圖片，界面是參考 sketch 實現的。

這個方案在聚劃算整個實施之后，也取得了很好的業務結果，覆蓋了 90% 的業務線，平均每天合圖超過 1w 張。而這個工具，也是當時團隊內部第一個完整的 node 應用。

總的來說，第 1 年是新人時期，在這段時間，要開始學習識別業務需求，能進行方案設計，推動個人技術棧的成型。這個時期，我們完成的是從學生到社會人身份上的轉變，在做業務的同時，一定要時不時的抬抬頭，把自己做的東西拿出來跟大家分享，既增進了團隊對自己的了解，也促進了自己對知識的進一步總結概括。

? 獨當一面-升級打怪

接下來，就是作為新人成功 landing 之后的升級打怪了。這個時期，我給自己的定義是獨當一面。這里主要結合我個人做的另一個工具闡述。

坑位研發，是我們電商前端工程師日常開發過程中繞不開的事情，這是一些常見的商品坑位。

受之前做的配置生成圖片工具的啟發，我萌生了用編輯器產出布局的想法。

然后，我就做了一個坑位可視化開發工具，左邊是編輯器界面，右邊是消費者側渲染的 demo。通過這個工具，設計人員簡單復制粘貼、拖拖拽拽就可以生成一個新坑位，極大地降低了 UI 的開發成本。

這是當時在會場上的應用情況，做到了業務變化的分鐘級響應。

但是，工具在推廣過程中，也遇到了一些問題，包括如下

• 不支持存在事件交互、數據處理等邏輯的場景
• 運行時解析方式在端上性能不佳
• 脫離正常的研發流程
• 。。。

當然，這些問題也正好給了我獨立 owner 且重構產品的機會。于是，我結合了當時天貓的研發體系，推出了融入開發體系的模塊可視化研發方案，即 2.0 版本。這是 2.0 版本的完整鏈路圖。

下圖是 2.0 版本上線之后取得的結果，也是在那一年拿到了年度 3.75，并成功晉升。

從我個人角度，獨當一面這個時期的重點是在能游刃有余的完成分發到自己的工作之外，建設核心能力、尋求突破。這個時期，已經對業務有了較為深刻的了解，可以從零到無設計一塊東西，技術上能夠對接業務方，技術之外要能做項目管理，協同多方有效完成任務。

關鍵技能

接下來，我將重點介紹下我過去 3 年多解鎖的一些關鍵技能。

? 技能一：跳出技術視角

第 1 個關鍵技能是跳出技術視角。不少開發都有類似【我只是一個技術，不應該參與 QA、PM 的工作】的想法，實際上也確實有人在技術路線越走越精深，并得到了認可。然而，凡事都有個但是，很多人技術水平非常高，但一直得不到認可，這種現象更為常見。尤其對于我們前端來說，很難徹底脫離上下游、脫離業務方來完成工作，甚至除了 QA 和 PM 的工作之外，還需要向業務方 “推銷” 自己的工具。一個更加 “全面” 的前端才能更加順風順水。那么，怎么做到更加全面呢？可以從以下幾個方面入手，比如從 why 出發做事情，做業務的同學，關注業務數據、跟進線上問題，做技術產品的同學，提供出色的產品服務文檔。

? 技能二：追求極致

第 2 個關鍵技能是追求極致，也可以理解為我們常常稱贊的匠人精神。以我為例，我入職第一年就做了個在線編輯器，在完成基礎功能的同時，還增加了快捷鍵、輔助線、自動吸附等功能，不斷打磨編輯器的產品體驗，因此也吸引了很多小伙伴的加入，共同把這個產品推廣到更多的業務域。

? 技能三：結構化的表達

第 3 個關鍵技能是結構化的表達。俗話說的好，酒香也怕巷子深，結構化的表達，是我們在完成事情的前提下，更好地讓別人（比如你的老板）get 到你的產出及價值。結構化的表達離不開結構化的思維方式，大家可以看看金字塔原理這本書。除此之外，在建立結構化思維的過程中，好的畫圖工具也能實現事半功倍的效果。

既然是復盤，也來做下自我批判，也是對大家的一些建議

一些反思

? 反思一：No 三點一線

程序員長時間工作、加班，三點一線的奔波，對身體傷害其實蠻大的。身體是革命的本錢，要保持一個良好的健身習慣，不需要很頻繁或者很專業的鍛煉，其實每周 1 次的健身房養成習慣就好。保持一個良好的身體狀態，工作時其實也能更有精力。

? 反思二：Keep learning

經常會有人說，做業務一直在 CRUD，感覺工作幾年下來沒什么成長。誠然，有意思、有挑戰的工作確實不多見，更多的是一些瑣碎的、重復的工作。所以，在工作之外，也需要花一些時間，關注下業內資訊、新聞，看看書、寫寫博客、參與一下 GitHub 感興趣的項目。keep learning，保持對新技術的關注~

原文鏈接：https://developer.aliyun.com/article/776226?

版權聲明：本文內容由阿里云實名注冊用戶自發貢獻，版權歸原作者所有，阿里云開發者社區不擁有其著作權，亦不承擔相應法律責任。具體規則請查看《阿里云開發者社區用戶服務協議》和《阿里云開發者社區知識產權保護指引》。如果您發現本社區中有涉嫌抄襲的內容，填寫侵權投訴表單進行舉報，一經查實，本社區將立刻刪除涉嫌侵權內容。

總結

以上是生活随笔為你收集整理的四年，如何从前端小白蜕变为前端技术专家？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。