摘要：大家好，我叫，江湖人稱吃土小叉，目前擔(dān)任公司的前端負(fù)責(zé)人半年多了，一路上摸爬滾打，歷經(jīng)團(tuán)隊(duì)人員變動(dòng)，近日頗有感觸，于是結(jié)合自己近半年的前端負(fù)責(zé)人實(shí)踐經(jīng)驗(yàn)，權(quán)當(dāng)作一個(gè)學(xué)習(xí)記錄，整理歸納一下小作坊團(tuán)隊(duì)前端負(fù)責(zé)人的修煉要點(diǎn)大部分只是記錄了關(guān)鍵詞，

大家好，我叫XX，江湖人稱吃土小2叉，目前擔(dān)任公司的前端負(fù)責(zé)人半年多了，一路上摸爬滾打，歷經(jīng)團(tuán)隊(duì)人員變動(dòng)，近日頗有感觸，于是結(jié)合自己近半年的前端負(fù)責(zé)人實(shí)踐經(jīng)驗(yàn)，權(quán)當(dāng)作一個(gè)學(xué)習(xí)記錄，整理歸納一下小作坊團(tuán)隊(duì)前端負(fù)責(zé)人的修煉要點(diǎn)（大部分只是記錄了關(guān)鍵詞，沒(méi)有詳細(xì)展開），以及自己的實(shí)踐記錄。一些觀點(diǎn)可能不是很成熟，也可能都是一些政治正確的廢話…… 歡迎各位老司機(jī)多開車指點(diǎn)指點(diǎn)，交流交流哈~.

知識(shí)面廣 （前端、后端、數(shù)據(jù)分析、產(chǎn)品、交互）

基礎(chǔ)扎實(shí)

學(xué)習(xí)能力強(qiáng)

服務(wù)意識(shí)

產(chǎn)品思維

心態(tài)良好

善于總結(jié)

溝通能力

營(yíng)造存在感、歸屬感、成就感

把控技術(shù)方向

新人引導(dǎo)

促進(jìn)團(tuán)隊(duì)提升、培養(yǎng)團(tuán)隊(duì)

權(quán)衡公司利益以及 隊(duì)員利益

與其他部門銜接和溝通

創(chuàng)造希望 （eg: 畫大餅、某種意義上的程序員精神鼓勵(lì)師）

團(tuán)隊(duì)建設(shè)、技術(shù)選型、人員安排

團(tuán)隊(duì)建設(shè)

技術(shù)氛圍

人文氛圍

技術(shù)選型

產(chǎn)品需求

穩(wěn)定性

兼容性

開發(fā)效率

招人難易度

留人難易度

轉(zhuǎn)型成本（時(shí)間成本、學(xué)習(xí)成本）

舍棄用戶成本（轉(zhuǎn)化率：兼容性； 訪問(wèn)量：SEO）

人員安排

讓優(yōu)秀的人變得更優(yōu)秀 （技術(shù)棧：最前沿的技術(shù)； 老帶新）

讓普通的人加速提升 （技術(shù)棧：最成熟的技術(shù)）

淘汰余下的人

面試時(shí)經(jīng)常遇到一些人的離職原因就是以下一些……

更快解決問(wèn)題 7

更優(yōu)解決問(wèn)題 8

解決以前不能解決的問(wèn)題 9

編程能力提升 （編碼、設(shè)計(jì)、架構(gòu)） 9

掌握新技術(shù)、新語(yǔ)言、新工具 5

工資提升 6

知名度 7

注： 數(shù)值為XX認(rèn)為的較為合理的權(quán)重值，滿分10，個(gè)人意見，僅供參考

缺一不可

時(shí)間

方向

堅(jiān)持

實(shí)踐

加分項(xiàng)

聰明 （XX注：可遇不可求）

有老司機(jī)指點(diǎn) （XX注：可遇不可求）

好奇心

自我驅(qū)動(dòng)力/主觀能動(dòng)性

專注

注： 除去 聰明、 有老司機(jī)指點(diǎn)， 這兩個(gè)是可遇不可求的； 其余都是可以后天培養(yǎng)的。

工作只使用舊框架、舊技術(shù) 【應(yīng)聘人經(jīng)常提及】
基礎(chǔ)薄弱，學(xué)新技術(shù)難，求帶，抱大腿
光看不練
沒(méi)有時(shí)間
前端要學(xué)的太多太雜，學(xué)了這個(gè)忘了那個(gè)
新框架一個(gè)又一個(gè)， 來(lái)不及學(xué)

保證產(chǎn)品穩(wěn)定性，滿足產(chǎn)品兼容性需求的情況下，盡量讓團(tuán)隊(duì)使用最前沿的技術(shù)

推動(dòng)團(tuán)隊(duì)技術(shù)學(xué)習(xí)、分享氛圍，必要時(shí)給予物質(zhì)獎(jiǎng)勵(lì)

為成員騰出一定自由時(shí)間

讓自己成為隊(duì)員的大腿、答疑解惑

完善技術(shù)文檔

寫優(yōu)秀的代碼

造輪子、改進(jìn)項(xiàng)目基礎(chǔ)設(shè)施

擋需求、砍需求、改需求、加需求

不應(yīng)該回答what的問(wèn)題、 減少回答how的問(wèn)題，而是更多回答why的問(wèn)題

不應(yīng)該每天催著隊(duì)員去學(xué)習(xí)、去分享，而是要激發(fā)隊(duì)員的自我驅(qū)動(dòng)力、主觀能動(dòng)性

不應(yīng)該安排超負(fù)荷任務(wù)，而是分配合理的任務(wù)總量

不應(yīng)該花費(fèi)大量時(shí)間（80%）開發(fā)業(yè)務(wù)需求，而應(yīng)該花一半時(shí)間（50%）思考和設(shè)計(jì)如何改進(jìn)現(xiàn)有開發(fā)模式

回報(bào) >= 付出 （精神、物質(zhì)）

對(duì)產(chǎn)品的認(rèn)可

對(duì)技術(shù)棧的認(rèn)可

對(duì)自己付出的認(rèn)可

對(duì)他人付出的認(rèn)可

助人且助人的反饋是積極的

個(gè)人發(fā)展、晉升

概況： 回報(bào) >= 付出 （精神、物質(zhì)）

首先明確一點(diǎn)，業(yè)務(wù)需求是永遠(yuǎn)做不完的

我們能做的，只是每周根據(jù)已有的開發(fā)資源，開發(fā)相對(duì)最重要最緊急的業(yè)務(wù)

另一方面，也要注意： 程序員自我提升 的重要度也是極高的

合理評(píng)估工期

不斷提升自己，不斷提高效率

量力而為，保重身體

合理審核工期

合理安排任務(wù) 【重要】

技術(shù)選型是否合理、是否高效

新人的引導(dǎo)是否到位

負(fù)責(zé)人牽頭分享

獎(jiǎng)勵(lì)機(jī)制

避免布置過(guò)飽和任務(wù)量

（以下回答來(lái)自XX面試過(guò)的應(yīng)聘人）

我比較期待能有一個(gè)經(jīng)常相互討論最新技術(shù)的環(huán)境

技術(shù)氛圍好點(diǎn)，可以互相交流的，然后加班不要太多，有意義的加班可以接受

希望有挑戰(zhàn)性和持續(xù)成長(zhǎng)空間，同事之間比較容易溝通的，當(dāng)然做的產(chǎn)品有趣就更好了

希望有大牛帶

……

技術(shù)分享考評(píng)制度（鼓勵(lì)競(jìng)爭(zhēng) 、 與培訓(xùn)機(jī)會(huì)、年終考核掛鉤）

定期 code review （2周1次） 優(yōu)先級(jí)： 高

不定期 小分享 （不限次~2周1次） 優(yōu)先級(jí)： 高

定期 大分享 （2個(gè)月1次）

鼓勵(lì)參與翻譯英文技術(shù)文章

整理、維護(hù)、更新前端知識(shí)庫(kù) wiki （涵蓋： 代碼規(guī)范、工具教程、開發(fā)流程、組件 Demo、語(yǔ)言教程等）

前端每周一題 ， 以經(jīng)典案例題形式傳授實(shí)際價(jià)值較高的知識(shí)點(diǎn)

LeetCode 刷題活動(dòng) （算法題為主）

每周周會(huì)只探討各自遇到的難題1~2個(gè)，思考更優(yōu)解

開源項(xiàng)目 【構(gòu)思中】

新技術(shù)交流、研討會(huì) 【構(gòu)思中】

以上各種分享，負(fù)責(zé)人帶頭進(jìn)行

考核制度 DKP

v0.1 版本 考察兩個(gè)維度： 分享貢獻(xiàn)度、業(yè)績(jī)貢獻(xiàn)度； 每個(gè)月設(shè)置合格線，低于合格線進(jìn)入考察期

試行了1個(gè)月，實(shí)際效果一般，參與度不高，僅一人達(dá)成分享貢獻(xiàn)度合格；

不同產(chǎn)品線業(yè)績(jī)難以量化衡量；

較反感懲罰制度

v0.2 版本 僅考察 分享貢獻(xiàn)度。不設(shè)合格線，分值僅作為獎(jiǎng)勵(lì)評(píng)定標(biāo)準(zhǔn)

每周一題

v0.1 版本 原先專門開了個(gè)微信公眾號(hào)，名叫，前端每日一題，維持了一周，結(jié)果因?yàn)樵O(shè)計(jì)題目十分耗時(shí)，所以持續(xù)了一周后擱置

v0.2 版本 改為…… 前端每周一題，鼓勵(lì)隊(duì)員投稿出題

（需加強(qiáng)）

多關(guān)心隊(duì)員真實(shí)訴求，階段性一對(duì)一對(duì)話

設(shè)定階段性目標(biāo)（例如：官網(wǎng)重構(gòu)計(jì)劃），達(dá)成后一同慶祝

定期組織 TeamBuilding

數(shù)據(jù)驅(qū)動(dòng) + 業(yè)務(wù)驅(qū)動(dòng) + 人才驅(qū)動(dòng)

產(chǎn)品需求

穩(wěn)定性

兼容性

性能

開發(fā)效率

技術(shù)價(jià)值 （對(duì)程序員自我提升產(chǎn)生的價(jià)值）

招人難易度

留人難易度

轉(zhuǎn)型成本（時(shí)間成本、學(xué)習(xí)成本）

舍棄用戶成本 （數(shù)據(jù)驅(qū)動(dòng)）

舍棄兼容性帶來(lái)轉(zhuǎn)化率下降的成本： IE8 用戶

舍棄SEO造成訪問(wèn)量下降的成本： SEO 流量

讓優(yōu)秀的人變得更優(yōu)秀 （技術(shù)棧：最前沿的技術(shù)； 老帶新）

讓普通的人加速提升 （技術(shù)棧：最成熟的技術(shù)）

淘汰余下的人

以 PC 官網(wǎng)前端重構(gòu)計(jì)劃為例

現(xiàn)狀

jQuery + 類 require.js 加載機(jī)制 + less + gulp + C# ， 傳統(tǒng)電商網(wǎng)站

目標(biāo)瀏覽器

不低于 5% 訪問(wèn)量的瀏覽器

目標(biāo)流量來(lái)源

SEM + SEO + 市場(chǎng)活動(dòng)推廣

其中， SEO 目前平均占比約 15% 流量

業(yè)務(wù)痛點(diǎn)

設(shè)計(jì)風(fēng)格不統(tǒng)一、特別大量重復(fù)性工作 （各種合作方系統(tǒng)定制化移植官網(wǎng)）、 前后端耦合程度大

人員痛點(diǎn)

技術(shù)棧落后、招人難、留人難

重構(gòu)好處

組件化設(shè)計(jì)： 提高代碼復(fù)用性；有助于快速移植組件、促進(jìn)合作方項(xiàng)目進(jìn)度同步

技術(shù)棧升級(jí)： 有利于招人以及留人

前后端分離： 有利于提升開發(fā)效率

重構(gòu)弊端

時(shí)間成本： 大量

兼容性成本： 只兼容IE9+

白屏?xí)r間： 比起傳統(tǒng)服務(wù)器端渲染，會(huì)存在一定的白屏?xí)r間，而短期內(nèi)不一定會(huì)使用 node.js + vue.js SSR

路線圖

在后臺(tái)管理系統(tǒng)中試點(diǎn) Vue.js 框架，積累 Vue.js 經(jīng)驗(yàn) 【DONE】

在完成 2~3 個(gè)后臺(tái)管理產(chǎn)品后，漸進(jìn)式（幫助中心頁(yè)入手）改造官網(wǎng)前端 【View層 Vue.js框架 ； Action 層 c# .net】 【PLAN】

在確定舍棄 IE8 用戶后，官網(wǎng)全站轉(zhuǎn)型 Vue.js 框架

在確定舍棄 SEO 流量 改用 Vue-Router ， .net 只提供容器

Vue.js + Node.js 服務(wù)器端渲染有一定積累后，官網(wǎng)前后端完全分離

如何做

數(shù)值僅供參考，具體情況具體分析
每周任務(wù)安排 4 天工作量
每天花 0.2 天 ， 約 1.5 ~ 2 小時(shí)，自我提升

目的

為了提升隊(duì)員開發(fā)效率

督促技術(shù)提升

考核方式

一般業(yè)務(wù)需求無(wú)非考驗(yàn)以下兩點(diǎn)

業(yè)務(wù)熟悉度

技術(shù)熟練度

理想情況下，對(duì)于業(yè)務(wù)不熟悉的隊(duì)員，優(yōu)先分配需要熟悉業(yè)務(wù)的需求；反之亦然

知易行難
貴在堅(jiān)持

題外話： XX的前端奇妙歷險(xiǎn)
3年彎路
13 年 4 月實(shí)習(xí)加入一家初創(chuàng)公司，工作不到半年，原先前端 leader 轉(zhuǎn)崗做運(yùn)營(yíng)，只剩下我一個(gè)前端，持續(xù)了半年左右。由于人少，寫前端的同時(shí)還要寫 C# 代碼，偶爾研究 SEO，兼職半個(gè)網(wǎng)管，還負(fù)責(zé)了每天晚上給加班童鞋點(diǎn)晚餐外賣…… 這個(gè)狀態(tài)差不多從進(jìn)入公司開始持續(xù)了 2 年。所以雖然自己工作了也有將近 4 年了，但精力比較分散，走了很多彎路，做了許多重復(fù)性勞動(dòng)；同時(shí)又與外界其他前端的交流很少，唯一和外界的交流機(jī)會(huì)幾乎就是當(dāng)面試官與應(yīng)聘人交流；且當(dāng)時(shí)很長(zhǎng)一段時(shí)間疲于業(yè)務(wù)開發(fā)，經(jīng)常 9、12+、6 ，自己學(xué)習(xí)主動(dòng)性下降了許多，業(yè)余一有休息時(shí)間自己幾乎也是“荒廢”了，也不再如大學(xué)時(shí)自學(xué)前端那陣子折騰自己的博客站點(diǎn)、折騰各種技術(shù)、寫博文做小結(jié)（單反窮三代、游戲毀一生）。前端技術(shù)的沉淀比較欠缺。另一方面，也大約3年左右時(shí)間單相思，受困于情感問(wèn)題耽誤了不少時(shí)間。
簡(jiǎn)單來(lái)說(shuō)，前 3 年走了很多彎路，幾乎是 3 年的工作時(shí)間以及 1 年的加班時(shí)間，換來(lái)了 0.5 年的前端經(jīng)驗(yàn)，原因是： 精力分散、視野狹窄、缺乏實(shí)踐、缺乏學(xué)習(xí)主動(dòng)性、缺少反省、公司缺人。
決定性時(shí)刻
后來(lái)，陸陸續(xù)續(xù)前端團(tuán)隊(duì)一點(diǎn)點(diǎn)擴(kuò)張，但直到去年年中，一共也只有 3 個(gè)前端，應(yīng)付公司 3 個(gè)電商類前端產(chǎn)品（PC + M）。也一直沒(méi)有所謂的前端 leader，都只是各自負(fù)責(zé)各自的產(chǎn)品線，大家也都很年輕，2~3年經(jīng)驗(yàn)。當(dāng)時(shí) CTO 問(wèn)我，要不要招一個(gè)資深的前端來(lái)帶我們，還是讓我們自由競(jìng)爭(zhēng)，我當(dāng)時(shí)也挺迷茫和糾結(jié)，一直以來(lái)，都感覺自己對(duì)于前端職責(zé)的定位以及今后發(fā)展方面，缺乏系統(tǒng)和全面的認(rèn)知，以及也不清楚技術(shù)團(tuán)隊(duì)的 leader 的職責(zé)應(yīng)該是什么，覺得如果招個(gè)老司機(jī)，自己能有更明確的目標(biāo)和規(guī)劃，同時(shí)對(duì)公司來(lái)說(shuō)雖然要負(fù)擔(dān)更多的薪資開銷，但是想必能有更多可能性，會(huì)有更多回報(bào)。而自己這幾年在前端上基本是靠自己摸索以及參考知乎上的解答。
半年來(lái)
結(jié)果是，去年下半年，我受命擔(dān)任前端組負(fù)責(zé)人…… 恰逢自己終于決定放棄 3 年多的單相思。于是打雞血般花了大量時(shí)間接觸外界，開闊技術(shù)視野，（包括參加了許多前端的知乎 live ，從最早圍觀的小爝老師、Hax 老師…到近期 vczero 、呂毅以及 justjavac 大神們的 live，以及 姬光、i5ting、小問(wèn)等大大的 gitchat……以及 vczero 和 前端早讀課情封 的小密圈……  以及加了 豪情大大的前端 js 跳板 QQ 群…… 以及傳說(shuō)中的微信小程序聯(lián)盟論壇，以及相關(guān)的 QQ 群，每天至少回答群里一個(gè)小程序的技術(shù)問(wèn)題 ），研究新技術(shù)，補(bǔ)習(xí)自身基礎(chǔ)，研究如何帶團(tuán)隊(duì)，促進(jìn)團(tuán)隊(duì)提升...  （然后也就有了現(xiàn)在這篇文章） 現(xiàn)在前端團(tuán)隊(duì)一共 6 人…… 還在招…… 歡迎推薦…… 
Anyway， 最好的學(xué)習(xí)時(shí)間是昨天和現(xiàn)在，即使花了 3 年多走了那么多彎路，至少，現(xiàn)在正了一些，也不錯(cuò)啊。
最后，還是想感謝一下，領(lǐng)導(dǎo)對(duì)我的信任 =。= 以及同事們的支持以及各位大神們的指導(dǎo)~