女生如何在前端路發(fā)展中尋求突破

第十四屆|前端成長晉升專場，8-29 即將直播，10 位講師(螞蟻金服/稅友等)，點(diǎn)我上車? (報名地址)：

正文如下

本文是第十一屆 - 前端早早聊女生前端職業(yè)發(fā)展專場，也是早早聊第 76 場，來自政采云團(tuán)隊前端團(tuán)隊的前端開發(fā)專家 —— 沫沫的分享（完整版含演示請看錄播視頻和 PPT）：

自我介紹

大家好。我叫陳夢蘭，花名沫沫，來自政采云團(tuán)隊，今天給大家分享的主題是：女生如何在前端職業(yè)發(fā)展中去尋求突破。

雖然今天的主題看似是關(guān)于女性，但實(shí)際內(nèi)容是男生女生都受用的。

目前，我就職于政采云有限公司，擔(dān)任前端技術(shù)專家一職，實(shí)線帶領(lǐng) 10 人負(fù)責(zé)項目采購業(yè)務(wù)線，虛線負(fù)責(zé)前端物料體系建設(shè)和前端 AI 智能化方向。

分享大綱

本次分享的內(nèi)容主要分為兩個部分：

第一部分，關(guān)于個人成長，整體概覽下我的個人職業(yè)發(fā)展過程，以及在這個過程中，我在每個階段所遇到的問題、瓶頸和破局的方法。

第二部分，主要是通過整個成長過程后，沉淀的一些經(jīng)驗總結(jié)和對未來的展望。

個人成長過程

第一階段：一線執(zhí)行

2014-1017 年，當(dāng)時這個階段的目標(biāo)是：夯實(shí)技術(shù)基礎(chǔ)、擴(kuò)展技術(shù)廣度，盡可能多的接觸復(fù)雜的業(yè)務(wù)場景和技術(shù)方案。

在編碼上，要關(guān)注編碼規(guī)范和代碼質(zhì)量，盡可能每個需求都自己做下 Code Review，或者讓師兄一起 Code Review，總結(jié)最佳實(shí)踐。平時可以抽空看一些開源項目的源碼，會有很多的收獲。

另外，提及到擴(kuò)展技術(shù)廣度，我個人覺得比較好的一種方式是：從實(shí)際的場景或者問題出發(fā)，去尋找解決方案，過程中去學(xué)習(xí)和實(shí)踐新的技術(shù)，這樣成長速度會更快。

如果我們只是一門心思學(xué)了很多東西，而短時間內(nèi)得不到實(shí)際場景的應(yīng)用，一方面容易感覺到迷茫和困頓，另一方面，很多時候只有在實(shí)際場景中應(yīng)用后才會發(fā)現(xiàn)一些問題和新的關(guān)聯(lián)知識點(diǎn)。

第二階段：業(yè)務(wù)接口人/師姐

2018 年開始帶 2 個同學(xué)，負(fù)責(zé)一條業(yè)務(wù)線，獨(dú)當(dāng)一面。

當(dāng)時除了自己作為那條業(yè)務(wù)線的核心開發(fā)以外，還需要協(xié)助新人/師弟成長，幫助他們提升技術(shù)能力和職業(yè)化能力。

作為業(yè)務(wù)接口人，需要把控技術(shù)方案的合理性和擴(kuò)展性，了解業(yè)務(wù)的短期和長期規(guī)劃，考量需求的投入產(chǎn)出比，盡可能的幫助業(yè)務(wù)實(shí)現(xiàn)利益最大化等等。

回顧那個時候，其實(shí)也是綜合能力快速提升的階段。潛移默化中，跨團(tuán)隊的溝通協(xié)調(diào)能力，風(fēng)險把控能力，業(yè)務(wù)理解力都有很大的提升。

第三階段：組長 Acting

2019 年開始帶 7-8 個人，負(fù)責(zé)多條業(yè)務(wù)線。當(dāng)時大家都是之前來自不同的業(yè)務(wù)團(tuán)隊，相互之間的熟悉度和信任度會差一些。

所以，剛開始我是刻意安排兩兩結(jié)對的方式來對接不同業(yè)務(wù)，讓大家彼此之間快速熟悉起來。我一直認(rèn)為，沒有什么比一起 “打過仗” 來得更容易建立信任關(guān)系。

隨著整個小組的凝聚力逐漸加強(qiáng)，而后，為了更好的支撐多條業(yè)務(wù)線，就要考慮小組的梯度建設(shè)，業(yè)務(wù)接口人的培養(yǎng)和我自己的 Backup 培養(yǎng)。

以上這些都是對小組內(nèi)部的團(tuán)隊建設(shè)，除此之前，還需要具備某個領(lǐng)域的技術(shù)專項化能力，虛線能帶動其他人共建和落地一些技術(shù)建設(shè)的事情。

我個人在這個階段負(fù)責(zé)的是前端物料體系的建設(shè)。當(dāng)然，在這個階段需要面對更多的人和事，更多跨團(tuán)隊的溝通和推動，對自身軟實(shí)力的培養(yǎng)也會很有幫助。

當(dāng)前階段：Team Leader

從工作內(nèi)容上來說，很多跟去年是類似的，今年負(fù)責(zé)的也是對我而言嶄新的業(yè)務(wù)和團(tuán)隊。

目前對我而言，也需要進(jìn)一步強(qiáng)化體系化能力、對內(nèi)對外的影響力、跨部門的推動和建設(shè)、梯隊建設(shè)和人才培養(yǎng)、績效管理（確定績效目標(biāo)，過程跟進(jìn)，結(jié)果評估）等等。

經(jīng)驗總結(jié)

第一階段：一線執(zhí)行

在一線執(zhí)行階段，當(dāng)時遇到的問題是，在外企這樣一個比較安逸的環(huán)境工作了 3 年后，明顯感覺到自己的成長已經(jīng)進(jìn)入了滯緩期，同時在工作節(jié)奏偏慢的氛圍下，感覺這樣下去自己會走下坡路。

所以，當(dāng)時的選擇是跳槽來到了政采云。但在半年多之后，已經(jīng)逐步熟悉了業(yè)務(wù)和技術(shù)棧，能獨(dú)立負(fù)責(zé)后，發(fā)現(xiàn)自己本質(zhì)上還是在做 “純業(yè)務(wù)執(zhí)行” 的事情，跟之前沒什么太大的區(qū)別。

這邊講的 “純業(yè)務(wù)執(zhí)行” 指的是，能夠很好的把業(yè)務(wù)需求做完并按時交付，但并不會思考如何從業(yè)務(wù)和技術(shù)的角度出發(fā)，做得更好。

破局：認(rèn)知的突圍

這個階段的破局，很大程度是思想和認(rèn)知方面的轉(zhuǎn)變。

我意識到，換平臺并不能解決根本問題，而本質(zhì)上是我把自己當(dāng)做了一個單純的執(zhí)行角色，覺得做完了產(chǎn)品需求就夠了。

但業(yè)務(wù)支撐并不只是如期交付業(yè)務(wù)需求就可以了，而是要自驅(qū)的去發(fā)現(xiàn)業(yè)務(wù)中的一些痛點(diǎn)問題，尋找解決方案，并推進(jìn)落地，然后再不斷迭代優(yōu)化，形成一個完整的閉環(huán)。其實(shí)就是從做完到做好，給業(yè)務(wù)帶來改變。

有時候我會想，對公司而言，我的個人價值點(diǎn)在哪里，如果只是做業(yè)務(wù)純執(zhí)行，那么其實(shí)所有人都是一樣，因為做完業(yè)務(wù)是最最基本的，本職工作而已。

所以，個人價值的體現(xiàn)在于，能發(fā)現(xiàn)別人發(fā)現(xiàn)不了的問題點(diǎn)，解決別人解決不了的事情。

案例：知識問答小機(jī)器人

這邊給大家分享一個具體的 Case。當(dāng)時有個知識問答小機(jī)器人的業(yè)務(wù)需要交接到我這邊。

交接過程中，和業(yè)務(wù)方、產(chǎn)品提前溝通了后續(xù)一個季度的業(yè)務(wù)規(guī)劃，期望在全平臺所有業(yè)務(wù)的所有頁面全部植入這個小機(jī)器人，總計 100+ 個前端應(yīng)用。

但基于當(dāng)時植入的技術(shù)方案，這個植入成本非常高，每個業(yè)務(wù)線需要挨個手動接入，并且后續(xù)小機(jī)器人的迭代，各業(yè)務(wù)線也需要發(fā)版。

顯然當(dāng)時的技術(shù)方案對后續(xù)業(yè)務(wù)的擴(kuò)展是有影響的，所以，決定推動重構(gòu)，最終實(shí)現(xiàn)了個業(yè)務(wù)線的 0 成本植入，后續(xù)迭代各業(yè)務(wù)線也無感知。

這個 Case 其實(shí)很小，但可能大家在日常工作中都會遇到類似的問題。

我們可以總結(jié) 2 點(diǎn)經(jīng)驗

• 第一，主動提前了解業(yè)務(wù)后續(xù)規(guī)劃，不要只看當(dāng)下產(chǎn)品導(dǎo)入的需求，會對技術(shù)方案的選擇很有幫助。
• 第二，需要有一定的洞察力，能發(fā)現(xiàn)一些痛點(diǎn)問題，尋找解決方案，并推進(jìn)落地，幫助業(yè)務(wù)快速推廣。

復(fù)盤

針對一線執(zhí)行階段，我做了下復(fù)盤和總結(jié)，主要分為 4 個方面：在這個階段的基本要求、更高的標(biāo)準(zhǔn)、素質(zhì)瓶頸以及能力結(jié)構(gòu)的瓶頸。

1. 基本要求，包括業(yè)務(wù)理解和支撐能力；獨(dú)立承擔(dān)和獨(dú)立執(zhí)行；扎實(shí)的技術(shù)功底和編碼質(zhì)量；風(fēng)險反饋意識。其中風(fēng)險反饋意識是比較容易忽略的，這也是一個比較重要的基本要求。
• 比如前期技術(shù)方案評估有疏漏；
• 在研發(fā)過程中需求有變更；
• 需求拆解不夠細(xì)，導(dǎo)致估時不夠準(zhǔn)確等等。
• 為什么風(fēng)險反饋意識這么重要？我們很難做到所有需求在具體執(zhí)行過程中，確保完全沒有風(fēng)險。導(dǎo)致風(fēng)險的原因有很多：
• 假設(shè)真的出現(xiàn)了風(fēng)險，那及時反饋就很重要了，如果是在最后一刻搞不定了才反饋的話，那團(tuán)隊也無法橫向協(xié)助解決問題，可能最終會導(dǎo)致項目延期。
• 千萬不要覺得反饋風(fēng)險是不是顯得自身能力不夠，在我看來，及時反饋風(fēng)險是職業(yè)化的體現(xiàn)。事后可以復(fù)盤，后續(xù)如何規(guī)避類似風(fēng)險的發(fā)生，但當(dāng)下最有效的就是及時反饋問題。
• 這個階段往往已經(jīng)一個人負(fù)責(zé)某個業(yè)務(wù)模塊或者業(yè)務(wù)線了，所以，業(yè)務(wù)理解力、獨(dú)立承擔(dān)和獨(dú)立執(zhí)行也很重要，這點(diǎn)能體現(xiàn)出我們的技術(shù)功底和解決問題的能力。
2. 更高標(biāo)準(zhǔn)，包括對編碼質(zhì)量的精益求精；自驅(qū)主動的發(fā)現(xiàn)痛點(diǎn)問題，具備強(qiáng)執(zhí)行力，針對問題能輸出好的解決方案并推動落地。
• 一部分人可能對問題的感知力比較弱，本質(zhì)上也沒有精益求精的習(xí)慣。
• 還有一部分人缺乏的不是對問題的感知力，而是發(fā)現(xiàn)問題后的視而不見，可能會吐槽下，但不會主動去尋找解決方案，并推動落地解決。
• 但其實(shí)我們的目標(biāo)是問題能夠最終得以落地解決，所以就需要具備強(qiáng)執(zhí)行力。
3. 素質(zhì)瓶頸，體力。在這個階段大多數(shù)事情都是通過體力來解決，下個階段就是用腦力來解決問題。
4. 能力結(jié)構(gòu)瓶頸，包括業(yè)務(wù)理解能力、技術(shù)方案能力、溝通能力、反饋意識、推動落地的強(qiáng)執(zhí)行力。

第二階段：業(yè)務(wù)/團(tuán)隊核心

在作為業(yè)務(wù)接口人/師姐的階段，開始帶幾個新人，負(fù)責(zé)一條大的業(yè)務(wù)線。當(dāng)時遇到的問題用一個字概括就是 “忙”，但這種情況下的忙其實(shí)是有問題的。

由于當(dāng)時自己在這條業(yè)務(wù)線待的時間比較長，對整體業(yè)務(wù)更熟悉，所以其他協(xié)作方遇到問題會習(xí)慣于找到我。

剛開始很多事情還是習(xí)慣于自己來解決，每天加班到很晚，而對于新人而言，反而得不到更快速的成長，小組整體的業(yè)務(wù)支撐能力也偏低。

破局：思考和復(fù)盤

越忙的時候，越要抽出時間來思考和復(fù)盤。

當(dāng)變成業(yè)務(wù)接口人之后，不僅要考慮自己個人的能力提升，更要學(xué)會靠一群人的力量解決問題，更要考慮其他人的成長和小組整體的業(yè)務(wù)支撐能力。

要給新人足夠的授權(quán)和信任，制定新人培養(yǎng)計劃，在過程中進(jìn)行輔導(dǎo)，每周階段性溝通，協(xié)助新人快速成長。

同時，每周組織小組內(nèi)部 Code Review、業(yè)務(wù)分享和技術(shù)分享等等，這些都是提升小組成員業(yè)務(wù)理解力、技術(shù)能力以及整體產(chǎn)出能力的很好方式。

案例：物料體系0到1的建設(shè)

這個階段，除了實(shí)線負(fù)責(zé)業(yè)務(wù)線以外，還虛線主導(dǎo)整個前端物料體系的建設(shè)。

這邊給大家解釋下什么是 “虛線” 的技術(shù)建設(shè)。在我們公司并不是由獨(dú)立的前端架構(gòu)組來做技術(shù)建設(shè)，而是來自不同業(yè)務(wù)線的同學(xué)組成 “虛線” 小組的形式。

本身所有的技術(shù)建設(shè)其實(shí)都是為業(yè)務(wù)服務(wù)的，業(yè)務(wù)線的同學(xué)會更深入了解業(yè)務(wù)上的問題，以及如何落地。

接下去，我大概回顧下，如何從 0 到 1 規(guī)劃和建設(shè)整個物料體系的。

當(dāng)時我們面臨了什么問題呢？

• 第一，由于歷史原因，各業(yè)務(wù)線的視覺規(guī)范不統(tǒng)一；
• 第二，當(dāng)時公司內(nèi)部只有一個 React 選型的 UI 組件庫，對整個物料體系而言還只是很薄的一層。

我們知道物料體系建設(shè)很明確的目標(biāo)就是對內(nèi)進(jìn)行研發(fā)提效。首先，我們思考一個問題，如何實(shí)現(xiàn)研發(fā)提效？對物料體系而言，很直觀的 2 個方向就是通過物料復(fù)用和工具化來提效。

那物料應(yīng)該包含哪些內(nèi)容呢？因為前端交付的是完整的頁面，我們可以把一個頁面拆解為模板、業(yè)務(wù)組件、UI 組件、底層視覺規(guī)范，具體詳細(xì)見上圖。

而工具化其實(shí)就是為了讓研發(fā)同學(xué)在使用物料的過程中更加便捷，進(jìn)一步提效。當(dāng)然，還有任何技術(shù)建設(shè)中，必不可少的一個模塊，就是量化數(shù)據(jù)統(tǒng)計。

數(shù)據(jù)可以很好的反映出整個物料體系在業(yè)務(wù)線的使用情況，也是為后續(xù)物料體系不斷優(yōu)化迭代提供數(shù)據(jù)支撐。

其實(shí)，我的第一版規(guī)劃里面并沒有全部涵蓋上面所有的內(nèi)容，大概只有 70% 左右。我想說的是，有時候很多事情一下子想不全沒關(guān)系，這是一個逐漸完善的過程。先 0 到 1 建設(shè)最最核心的能力，然后再不斷豐富完善，進(jìn)行 1 到 10 的優(yōu)化迭代。

另外，這邊也給大家分享下，如何做好整體規(guī)劃？明確且細(xì)致的規(guī)劃能夠讓大家更有目標(biāo)感和方向感，也能更好的把控推進(jìn)節(jié)奏。

一種思維方式是，先確定大方向需要做什么，然后細(xì)化各種 Action，最后思考這些 Action 達(dá)成了哪些目標(biāo)。

但其實(shí)更好的是以下這種方式：

1. 從業(yè)務(wù)/技術(shù)場景出發(fā)，分析背景/現(xiàn)狀

2. 根據(jù)現(xiàn)狀，分析和羅列出痛點(diǎn)和問題

3. 為了解決這些痛點(diǎn)和問題，我們需要指定的整體目標(biāo)是什么

4. 將整體目標(biāo)進(jìn)行細(xì)化拆解成階段性小目標(biāo)

5. 針對每個階段性小目標(biāo)，思考要達(dá)成階段性小目標(biāo)，有哪些可突破的方向

6. 有了具體方向后，針對性的拆解成對應(yīng)的 Action

7. 制定里程碑計劃

8. 落地和推廣

復(fù)盤

針對業(yè)務(wù)接口人/師姐階段，同樣做了復(fù)盤和總結(jié)，主要分為 4 個方面：在這個階段的基本要求、更高的標(biāo)準(zhǔn)、素質(zhì)瓶頸以及能力結(jié)構(gòu)的瓶頸。

1. 基本要求，包括深入理解業(yè)務(wù)、獨(dú)當(dāng)一面、培養(yǎng)新人/師弟、把控風(fēng)險、把控技術(shù)方案、溝通協(xié)調(diào)能力。

2. 更高標(biāo)準(zhǔn)，包括考慮投入產(chǎn)出比（ROI）、幫業(yè)務(wù)贏、帶動和影響他人。

• 在業(yè)務(wù)高速發(fā)展的公司，業(yè)務(wù)需求的增加速度是非?？斓?/strong>，通常需求體量是超過研發(fā)資源負(fù)荷量的。
• 在研發(fā)資源有限的情況下，我們需要考慮投入產(chǎn)出比，和產(chǎn)品一起實(shí)現(xiàn)業(yè)務(wù)價值交付的最大化。
• 為什么投入產(chǎn)出比的考量很重要？

3. 素質(zhì)瓶頸，腦力。

4. 能力結(jié)構(gòu)瓶頸，包括主導(dǎo)能力、流程感知、ROI 考量、跨部門的項目 PM 能力。

第三階段：Leader

第三階段 Leader 階段，因為今年正好剛輪崗到了一個新的團(tuán)隊，所以我著重講下今年遇到的一些問題以及解決方法。

來到這個嶄新的團(tuán)隊，第一件事就是盤人和盤事，過程中我發(fā)現(xiàn)了以下幾個問題：

• 業(yè)務(wù)流程鏈路長，復(fù)雜度高，研發(fā)同學(xué)對整體業(yè)務(wù)熟悉度不夠

• 部分項目的技術(shù)選型老舊（jQuery），歷史 “債務(wù)” 較多

• 合作伙伴同學(xué)占比較高，代碼質(zhì)量參差不齊

• 需求迭代流程不合理，一線同學(xué)疲憊感較重

破局：團(tuán)隊環(huán)境升級

面對上述這些問題，目前我的解決方法如下：

• 分享沉淀：加強(qiáng)內(nèi)部業(yè)務(wù)分享，建立業(yè)務(wù)知識庫

• 技術(shù)選型升級：降低復(fù)雜度和維護(hù)成本，研發(fā)提效

• 流程規(guī)范：標(biāo)準(zhǔn)化、合理化

• 梯隊建設(shè)：培養(yǎng)自己的 Backup。每條業(yè)務(wù)線都配備業(yè)務(wù)接口人+合作伙伴。每個新人指定對應(yīng)師兄，一對一幫帶。

• 團(tuán)隊凝聚力&氛圍：互幫互助、樂于分享、群策群力

復(fù)盤

作為 Leader，我也還在不斷地學(xué)習(xí)和成長中?；仡櫾谶@個階段的經(jīng)歷，我也簡單做了下復(fù)盤和總結(jié)，同樣分為 4 個方面：在這個階段的基本要求、更高的標(biāo)準(zhǔn)、素質(zhì)瓶頸以及能力結(jié)構(gòu)的瓶頸。

1. 基本要求，包括梯隊建設(shè)、績效管理、溝通協(xié)調(diào)、推動優(yōu)化&改變。

2. 更高標(biāo)準(zhǔn)，包括破圈建設(shè)、跨部門項目的 PM 能力、探索新的技術(shù)領(lǐng)域。

• 破圈建設(shè)就是跨出前端職能部門，以更開闊的視野去看，各個職能部門之間更好的協(xié)作和共建，幫助業(yè)務(wù)拿到更好的結(jié)果。

3. 素質(zhì)瓶頸，心力。

4. 能力結(jié)構(gòu)瓶頸，包括前瞻性、目標(biāo)感、主導(dǎo)力、整合力、推動并拿結(jié)果的能力、影響力、領(lǐng)導(dǎo)力。

職能·能力矩陣

上述圖表達(dá)的是作為一個優(yōu)秀的職業(yè)化的前端，所該具備的能力項矩陣。

縱向分成 4 塊，業(yè)務(wù)支撐力、技術(shù)創(chuàng)新力、組織發(fā)展力、內(nèi)外影響力。很多能力項之前都有詳細(xì)講過，這邊就不再贅述了。

其實(shí)每個人的成長過程都是在不斷的豐富和提升自己的能力項：

• 在業(yè)務(wù)非常忙的時候，過程中可以重點(diǎn)提升自己業(yè)務(wù)支撐力。
• 在業(yè)務(wù)相對穩(wěn)定的時候，可以做一些技術(shù)建設(shè)，更好的為業(yè)務(wù)賦能。

Tips

• 任何職業(yè)階段，過硬的技術(shù)功底都是立身之本

• 關(guān)注行業(yè)動態(tài)、了解新技術(shù)和趨勢

• 多橫向/縱向對比，三人行必有我?guī)?/p>

• 勤復(fù)盤，勤總結(jié)

• 保持利他和共贏的思維

未來：智能化

提到未來，我所想到的一個詞就是 “智能化”。過去的幾年我們用 Low Code 搭建的方式完成了一次大幅度的提效，但搭建最終還是要依賴于組件的迭代。

相信接下去就是智能化的時代，簡單的 HTML + CSS 都可以通過智能化的方式直接從 UI 視覺稿生成可用代碼。

目前我們已經(jīng)開始了 “前端智能化（UI to Code）” 方面的探索，對這方面有興趣的同學(xué)，歡迎加入我們。

好書推薦

我個人非常推薦《金字塔》這邊書籍，它能夠幫助我們強(qiáng)化思考架構(gòu)能力和邏輯溝通能力，幫助我們更高效的思考、表達(dá)和解決問題。

招聘時間

下面是我的微信。目前我們團(tuán)隊正在招賢納士中，歡迎有更多的小伙伴加入到我們中來。