如何成為一名好前端？

　　1什么是優(yōu)秀的前端團(tuán)隊(duì)? 　　團(tuán)隊(duì)初期缺什么
　　在公司中，層級(jí)越高對(duì)業(yè)務(wù)關(guān)注比例越高，反而不太關(guān)注個(gè)人成長(zhǎng)，所以評(píng)價(jià)一個(gè)leader是以團(tuán)隊(duì)為單位，團(tuán)隊(duì)成員比他強(qiáng)是應(yīng)該的;對(duì)于個(gè)人來(lái)說(shuō)的話，要多關(guān)注自身能力成長(zhǎng)，然后能力匹配自己的職位，甚至超出自己的職位，這樣的團(tuán)隊(duì)的話，戰(zhàn)斗力是比較強(qiáng)的。
　　主管(包括前端主管)設(shè)定目標(biāo)必須可量化 ，比如你做一個(gè)業(yè)務(wù)，kpi是多少，那么技術(shù)就需要考慮如何才能達(dá)成，細(xì)化到研發(fā)甚至前端層級(jí)，就是所謂技術(shù)kpi了。
　　比如，今年H5站想達(dá)到單日平均出票量10000，那么這個(gè)就是業(yè)務(wù)目標(biāo)，需要消化分到各個(gè)業(yè)務(wù)團(tuán)隊(duì)，可以是：
　?、?SEO優(yōu)化
　?、?SEM優(yōu)化
　　③ 營(yíng)銷廣告
　?、?微信&支付寶&手機(jī)百度流量接入(微信錢包是十分優(yōu)秀的流量入口，可以極大程度的增加流量)
　?、?實(shí)地推廣
　　……
　　以上當(dāng)然只能解決部分問(wèn)題，具體到前端，可能我們就要從頁(yè)面轉(zhuǎn)換率入手，建立訂單漏斗模型，做性能優(yōu)化，做交互優(yōu)化，每一個(gè)具體的層面都需要轉(zhuǎn)化目標(biāo)。
　　這些都是直接可量化的東西，因?yàn)楫?dāng)前業(yè)務(wù)已經(jīng)到了一個(gè)瓶頸，或者公司已經(jīng)到了一個(gè)瓶頸，業(yè)務(wù)上就需要做不停的嘗試，對(duì)應(yīng)到技術(shù)就是需要你快速迭代，低成本迭代，不斷的容錯(cuò)試錯(cuò)。
　　這個(gè)時(shí)候就會(huì)提出很多問(wèn)題：
　　第一是你的團(tuán)隊(duì)在類似高壓下會(huì)不會(huì)主動(dòng)加班去實(shí)現(xiàn)公司的目標(biāo)、個(gè)人的kpi。
　　第二是你的團(tuán)隊(duì)在這輪高壓拼搏后有沒(méi)有留下什么東西?
　　根據(jù)之前經(jīng)驗(yàn)，沒(méi)有團(tuán)隊(duì)可以無(wú)休止的承受高壓加班的壓力
　　以之前攜程無(wú)線高壓迭代的經(jīng)歷來(lái)說(shuō)，就算是那么優(yōu)秀的團(tuán)隊(duì)事實(shí)上到后期也是疲憊不堪，疲憊的時(shí)候容易犯錯(cuò)，亢龍有悔，盈不可久。
　　第三是如何幫助新人快速的融入團(tuán)隊(duì)，如何讓1+1=2。
　　我們都清楚，好的項(xiàng)目絕不是堆人可以堆出來(lái)的，如何讓一個(gè)項(xiàng)目可以分解到各個(gè)人手中，如何讓良莠不齊的同事可以更好的協(xié)作，這個(gè)是我們需要考慮的。
　　要解決這些問(wèn)題是要靠平時(shí)的積累，具體體現(xiàn)到前端是：
　　1 在不停的迭代中，你的業(yè)務(wù)流程是不是最優(yōu)(產(chǎn)品到設(shè)計(jì)到前端到最終上線流程)
　　2 在不停的迭代中，是否沉淀出來(lái)了公共服務(wù)與工具化服務(wù)
　　2好的前端是什么樣的?
　　首先，好的前端是一定愿意加班的，同時(shí)，好的前端是會(huì)找辦法讓團(tuán)隊(duì)少加班的。
　　和一些朋友做過(guò)交流，很多好的點(diǎn)子，改善工作效率的點(diǎn)子都是幾個(gè)人討論后私下晚上搞出來(lái)，然后反復(fù)實(shí)踐用于生產(chǎn)的。
　　一般來(lái)說(shuō)業(yè)務(wù)kpi對(duì)于能力強(qiáng)的朋友來(lái)說(shuō)不會(huì)太難，所以對(duì)他們的期待也會(huì)更多：
　　有強(qiáng)烈的意識(shí)，能深刻了解到當(dāng)前項(xiàng)目性能的缺陷，開發(fā)效率低下的原因，并會(huì)找尋處理辦法
　　很多團(tuán)隊(duì)在快速迭代中會(huì)開始“欠賬”，時(shí)間久了就不愿意還，問(wèn)題的存在擱置需要想辦法去解決，團(tuán)隊(duì)成員是看得到問(wèn)題的，沒(méi)人說(shuō)，沒(méi)人做是因?yàn)橹滥鞘强樱闳绻芙鉀Q的話，一到二次便能提升自己在團(tuán)隊(duì)中的位置。
　　好的前端應(yīng)該有良好的架構(gòu)設(shè)計(jì)能力
　　首先，好的前端能向人清晰有條理的描述自己的技術(shù)方案，并且讓人聽得懂!
　　然后架構(gòu)設(shè)計(jì)能滿足長(zhǎng)久的需求發(fā)展，就算業(yè)務(wù)頻道擴(kuò)大了10倍，用戶量增加了100倍，也不會(huì)有根本的變動(dòng)。
　　好的前端應(yīng)該具有良好的交流能力
　　對(duì)內(nèi)，好的前端需要了解團(tuán)隊(duì)成員的性格與能力，做出適當(dāng)?shù)娜蝿?wù)分配分解;對(duì)外，需要搶占業(yè)務(wù)還不能產(chǎn)生利益沖突，這類人是項(xiàng)目推進(jìn)的主力。
　　3小公司的前端應(yīng)該怎么做?
　　不是所有的小公司都這樣，但是我見過(guò)的小公司的前端都在撲業(yè)務(wù)，并且疲于奔命，這個(gè)是個(gè)惡性循環(huán)，第一次做業(yè)務(wù)：
　　加班趕業(yè)務(wù)-業(yè)務(wù)結(jié)束輕松一周-加班趕迭代-業(yè)務(wù)結(jié)束輕松一周-加班新業(yè)務(wù)-業(yè)務(wù)結(jié)束輕松下……
　　偶爾你會(huì)問(wèn)這些朋友為什么沒(méi)有什么積累，得到的答案基本是一致的，忙啊!他們忙起來(lái)的時(shí)候是真的很忙，但是第二次如果依舊這么忙的話就有問(wèn)題，第三次還這樣就是團(tuán)隊(duì)不健康了，一個(gè)好的做法是：
　?、?完成前后分離，這步做不到，后面也不用做了
　　② 形成幾套UI庫(kù)
　?、?根據(jù)業(yè)務(wù)形態(tài)，形成公共業(yè)務(wù)
　　④ 前端重復(fù)工作工具化
　?、?形成優(yōu)化體系
　?、?形成統(tǒng)計(jì)體系
　?、?建立頁(yè)面轉(zhuǎn)化漏斗模型
　?、?做ABTesting方案
　　......
　　首先，無(wú)論出于什么考慮，前后一定要做分離，如果有SEO需求，那么再后續(xù)推進(jìn)nodeJS方案，畢竟現(xiàn)在不給錢想排前面還是很難，SEO基本沒(méi)意義。
　　其實(shí)，小公司有很多坑可以占住，這個(gè)會(huì)幫助你建立團(tuán)隊(duì)威望，下面我舉幾個(gè)細(xì)節(jié)點(diǎn)說(shuō)一說(shuō)。
　　UI庫(kù)
　　UI庫(kù)的形成與UI庫(kù)的多少將決定你后續(xù)項(xiàng)目重復(fù)工作量的多少，這個(gè)UI庫(kù)需要注意幾點(diǎn)：
　?、?UI是否可重用
　?、?UI是否可定制
　　比如讓很多朋友去做這個(gè)時(shí)間選擇器，做出來(lái)就真的是時(shí)間選擇器，如果讓他換成城市選擇器，就全傻眼了：
　　③ UI是否可拆分，可聚合
　　還是以上面UI為例，這個(gè)組件事實(shí)上是一個(gè)聚合組件，由一個(gè)select組件與一個(gè)彈出層組件組成，你的UI是不是可拆分是評(píng)價(jià)他質(zhì)量的一個(gè)很大考慮點(diǎn)。
　　……
　　公共服務(wù)
　　公共服務(wù)可以說(shuō)成一個(gè)大一點(diǎn)的“UI組件”，但是他是與業(yè)務(wù)相關(guān)的，UI來(lái)說(shuō)一般不會(huì)與業(yè)務(wù)產(chǎn)生耦合，以上面的日期選擇器來(lái)說(shuō)，無(wú)論他裝的是日期還是區(qū)域都是可以的，并且不應(yīng)該請(qǐng)求服務(wù)，他是純凈的UI組件。
　　而公共服務(wù)是不純凈的是一定與業(yè)務(wù)相關(guān)的，移動(dòng)端比較常見的公共服務(wù)是：
　　passport
　　包含登錄注冊(cè)、個(gè)人資料管理，甚至包含一些認(rèn)證相關(guān)的，與公司賬號(hào)相關(guān)的操作，登錄注冊(cè)是各種活動(dòng)，各種業(yè)務(wù)頻道都可能會(huì)使用的業(yè)務(wù)，這種東西是必須服務(wù)化的，但是很多小公司都沒(méi)做。
　　因?yàn)楣驳奶攸c(diǎn)，頁(yè)面設(shè)計(jì)最好中性一點(diǎn)，其中幾個(gè)常用的頁(yè)面，比如登錄需要包含以下設(shè)計(jì)：
　?、?樣式可定制化(彈出層、獨(dú)立頁(yè)面什么的都是常事)
　?、?回退可定制，其實(shí)所有的公共服務(wù)回退按鈕都是需要定制的，登錄成功去哪個(gè)URL登錄失敗去哪個(gè)URL，點(diǎn)擊瀏覽器回退去哪個(gè)URL都得約定，少一個(gè)都不是公共服務(wù)
　　③ 單點(diǎn)登錄，事實(shí)上初期根本用不到什么單點(diǎn)登錄，甚至大家都不是跨域的，所以后續(xù)需要再支持即可
　　還有很多與passport一樣的公共業(yè)務(wù)，比如：
　?、?錢包服務(wù)，包括用戶支付訂單相關(guān)管理
　?、?城市列表，這個(gè)要考慮參數(shù)如何傳遞
　?、?反饋系統(tǒng)
　?、?公司介紹
　　除了面向C端的公共頁(yè)面服務(wù)，還會(huì)有面向B端的統(tǒng)計(jì)平臺(tái)相關(guān)。
　　前端工具化
　　靜態(tài)資源處理
　　評(píng)價(jià)一個(gè)前端團(tuán)隊(duì)是否優(yōu)秀成熟的評(píng)判多以團(tuán)隊(duì)工具化的程度，一個(gè)簡(jiǎn)單的例子是：
　?、?你們前端靜態(tài)資源是如何組織的、如何打包的
　　② 你們前端靜態(tài)資源是如何解決緩存的(比較好的方案是MD5)
　　上面兩點(diǎn)可以使用grunt/gulp一類的構(gòu)建工具輕松做到，如果有公共框架文件還會(huì)需要引入種子文件的概念
　　跨域問(wèn)題
　　另外，所有前端團(tuán)隊(duì)都會(huì)遇到跨域問(wèn)題，特別是前后分離后，服務(wù)器端只提供API接口，前端代碼隨便在哪都能運(yùn)行，那么這個(gè)時(shí)候你是怎么做呢?
　?、?使用fiddler&charles做代理
　　② 提供測(cè)試服務(wù)器
　?、?支持jsonp跨域
　?、?支持cors跨域
　　那么這些方案，哪種最適合團(tuán)隊(duì)，哪種成本最低(一般來(lái)說(shuō)是代理)，是我們需要考慮的
　　tips：我之前使用fiddler，現(xiàn)在換mac了使用charles，兩款工具十分優(yōu)秀，正則一塊的處理很好，推薦使用
　　移動(dòng)端適配
　　從后端轉(zhuǎn)到前端的同學(xué)一般在業(yè)務(wù)邏輯上有一些天生的優(yōu)勢(shì)，但是往往在CSS一塊比較弱，如何在開發(fā)人員無(wú)感的情況下引入rem，如何與現(xiàn)有機(jī)制無(wú)縫的使用less，如何處理單頁(yè)應(yīng)用中css的污染，這個(gè)是框架底層需要考慮的。
　　模塊化&組件化開發(fā)
　　團(tuán)隊(duì)上規(guī)模后，如何使用模塊化開發(fā)處理協(xié)作問(wèn)題;業(yè)務(wù)代碼復(fù)雜度上升后，如何使用組件化編程思維簡(jiǎn)單開發(fā)復(fù)雜度，這些需要應(yīng)用到項(xiàng)目實(shí)踐中，并且路徑是可復(fù)制的;
　　一些優(yōu)化手段，也需要工具化，框架化，讓開發(fā)人員無(wú)感。
　　前后端協(xié)作
　　前端與服務(wù)器端，開發(fā)速度未必同步，事實(shí)上很多時(shí)候都不是同步的，在已經(jīng)約定了接口格式的情況下，接口還沒(méi)有寫好，但是前端依然能寫交互，團(tuán)隊(duì)是如何寫這種假數(shù)據(jù)，這個(gè)方面實(shí)現(xiàn)會(huì)大大的提升工作效率。
　　訂單下降分析
　　如果在某一個(gè)時(shí)間段，全站的流量或者全站的訂單量下降了，你如何跟蹤這次下降的原因，如何最大程度上避免下次出現(xiàn)類似的現(xiàn)象，這個(gè)時(shí)候數(shù)據(jù)統(tǒng)計(jì)會(huì)避免我們成為瞎子，所以得盡快建立統(tǒng)計(jì)平臺(tái)，轉(zhuǎn)換率模型。
　　快速迭代，通過(guò)迭代來(lái)優(yōu)化產(chǎn)品，但是如果每一個(gè)迭代都完全顛覆了之前的設(shè)計(jì)，很多時(shí)候公司就是原地踏步，每邁出一步你要清晰的知道前一個(gè)版本哪里出了問(wèn)題，針對(duì)問(wèn)題做優(yōu)化，而不是頻繁改版。
　　這次改版后，你如何知道這次優(yōu)化就比上一次的好，而不是其它因素造成，ABTesting方案應(yīng)該是每一個(gè)成熟團(tuán)隊(duì)必須的，持續(xù)優(yōu)化這些都是建立在有效的數(shù)據(jù)監(jiān)控與意見反饋機(jī)制上的，我們不能做完網(wǎng)站變成瞎子。