大數據

四年,如何從前端小白蛻變為前端技術專家?

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

image.png

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

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

職業經歷

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

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

image.png

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

image.png

▐ 新人菜鳥-入職第1年

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

image.png

我就在師兄的指導下,設計了這麼一個基於 PSD 解析的規範化合圖方案,這是技術方案的簡圖。

image.png

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

image.png

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

image.png

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

image.png

▐ 獨當一面-升級打怪

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

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

image.png

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

image.png

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

image.png

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

image.png

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

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

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

image.png

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

image.png

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

image.png

關鍵技能

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

▐ 技能一:跳出技術視角

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

image.png

▐ 技能二:追求極致

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

image.png

▐ 技能三:結構化的表達

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

image.png

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

一些反思

▐ 反思一:No 三點一線

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

image.png

▐ 反思二:Keep learning

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

image.png

好書推薦

最後向大家推薦《鳳凰項目》這本書,他是以小說的形式,講述了一個凌亂的無可救藥的運維項目組,是如何一步步達成最後高效且舒心的工作狀態。通過該書,能學會有效的自我、團隊、項目管理方法,讓開發不再深陷於無盡的業務交付。

image.png

image.png

關注「淘系技術」微信公眾號,一個有溫度有內容的技術社區~

image.png

Leave a Reply

Your email address will not be published. Required fields are marked *