本文簡單明瞭的告訴你如何建設專業前端隊伍，更可能是軟性的東西。本文已得到小爝受權轉載，原文地址可訪問：https://zhuanlan.zhihu.com/p/21779628css
有點標題黨了，由於我確實不是從零開始，而是從一個五人小隊打造了一支目前37人的前端技術團隊。前端
好久了，一直想寫這麼一篇文章，可是由於種種緣由沒有寫的出來，一個緣由是我一直以爲這不是我本身一我的的力量能夠完成的，二來我以爲沒有作出什麼成績和結果，這些事情不足掛齒。vue
我在知乎前年開始一直回答前端領域的一些專業問題，收穫了很多贊同和感謝，也收穫了很多好友和同事，從今年開始一直忙碌在團隊組件和人員招聘的事情上，說白了，寫了不少東西最後都會說我這邊呀，急招前端，急缺工程師，可是我歷來沒有宣傳過咱們在作什麼，咱們怎麼作，咱們內部是一個什麼樣子的工做氛圍和環境。node
固然，如今咱們打造的產品也確實體驗通常，用戶很少，仍然在打磨，緣由不少不少，可是就目前感受，已經能夠見到曙光了，至少在開發層面，咱們的產品能夠說是完成了第一步的階段。雖然要作的事情還有不少，業務也在不斷增長，我只是個小前端，我更在意的是個人團隊對公司的影響和我我的能夠作些什麼，爲公司和爲本身的夥伴。mysql
去年的11月20號來到了美信這個前端團隊，到如今通過了8個月的打磨，我先說說業務線場景咱們前端部門所作的一些事情：react
1，咱們所負責的第一個項目，國美+ H5 手機官網，一句話歸納，一個移動端的購物商城，說和淘寶差很少有點過度，可是和自家的國美在線相比應該是比較恰當的了。jquery
https://m.gomeplus.comandroid
其中包含了微信的登陸和支付以及在支付寶支付購物打通，很好的支持了核心app產品的各類店鋪，商品，圈子話題的分享落地頁面的承接功能。webpack
簡單說一下架構，主要前端模塊的劃分仍是採用以前我寫的一個https://github.com/litheModule/lithe 加載器完成的模塊劃分，目錄分爲了幾個緯度，好比入口，抽象業務模塊，抽象非業務模塊，插件，第三方庫，以及業務中的一些工具輔助函數，測試文檔用例等，這個屬於一個相似用了不少年的一套前端總結下來的項目腳手架設計，萬金油。ios
主要前端渲染，第一期採用jq+jq插件，後來進行過一次大改版，view層拆開使用vue.js進行前端渲染，後端負責接口的提供，在進行http到https升級時作了這個方面的技術大改版，後期又針對這部分業務作了一次模塊的本地js緩存存儲的性能優化，還有一次圖片打散優化和縮略圖圖片優化，首屏以外懶加載等，在css方面收攏業務把共用和特有的樣式作了統一調整，公共方面的css按照功能組件和經常使用控件作了區分，使用sass統一維護，前端工程化方面從最開始的grunt升級成gulp對應開發了lithe的gulp插件和幾個時間版本號的插件，還有一個本地緩存生成依賴的gulp插件，上線開發流程幾個項目一致，我放到最後再說。
本地存儲的實現，以及對cdn的nginx combine的支持，也是都由前端團隊推動的運維團隊。
2，內嵌H5業務，主要是負責國美+ APP中的一些內嵌頁面的開發製做，其中包含了大首頁，我的中心的部分頁面，APP中的活動運營頁面，還有一個相似微店同樣的分銷返利功能（從開店到分銷），先來個直觀的感覺：
中間部分的webview是h5前端部門承接開發的，技術架構和h5手機站相似，只不過對應多了一套jsbridge的框架，以前個人專欄特別介紹過實現原理，可是後來由於公司拿去申請專利，就刪除了，包括github的項目介紹，主要實現對ios和android兩套不一樣協議的實現封裝以及呼起的功能接口的封裝，好比複製功能，呼起原生頁面，點擊統計等原生功能的協議調用以及返回值獲取。其餘幾個h5作的內嵌業務：
固然咱們APP的功能仍是比較強大的，除了入駐分銷，直接賣東西，還能聊天創建話題圈子，包括內置的IM功能，聊天，位置，羣聊等，包括本身發佈文章，最近一次上線還將支持發短視頻了。APP開發的功能我就不截圖了，主要說說前端部門的一些業務場景和方案。固然技術的迭代和h5相似，只不事後端單獨對幾個頁面進行了優化，作了去vue的處理（渲染邏輯少，直接原生來作）等升級包括http-https的升級，以及反劫持等對應改動，最近一次上線會出一個內置的小遊戲，都是依託於h5開發。
哦對了，android版本能夠去各打應用市場搜索國美+，ios版本能夠從這裏下載：
https://itunes.apple.com/us/app/guo-mei+/id1017591173?mt=8
3，PC官網商城，我最開始來的時候是作了一個靜態版本，只支持看看app規則以及後來加了一個招聘cms，幾個月前上線了一個支持購買商品和發佈社交話題的功能，地址在這裏：
https://www.gomeplus.com/
功能沒有移動端那麼完善，目前只支持微信支付購買，可是近期也會上線我的中心和支付寶等支付渠道，已經優化產品體驗，最主要的是這麼一個pc商城，咱們團隊在1個半月不到的時間開發完成並經過測試上線了。
前端的開發技術棧也比移動端更升一級，直接webpack+npm，原本前期想用react開發，可是由於要支持ie8，因此只作了webpack的模塊劃分，底層仍是牛逼的jquery，後期若是ie8份額少，可能會升級成es6的語法糖。
總的來講pc站的開發中規中矩，只是在工程和工具鏈上進行了升級。
4，統計代碼，廣告代碼，已經數據開放平臺，客服平臺等前端開發工做。
外部產品打造的同時，咱們內部的系統開發工做也是我這邊前端進行支持，包括數據埋點的js sdk開發，js的腳本錯誤監控，廣告代碼的組件式設計，還有數據收集回來包括業務指標的可視化部分，都是前端團隊承接的，包括數據平臺的後端開發使用的nodejs+vue，代碼就很少說了，說說幾個基本的思路吧。
統計代碼包含對用戶客戶端的數據收集，前端性能指標收集，error監控，對接到後端的日誌服務，廣告代碼一樣，都是原生直接編寫，支持不一樣廣告組件和交互形式的分小文件加載，以及對客戶端環境的檢測，數據開放平臺相似作了一個web版本的mysql客戶端（能夠可視化操做數據集和sql組，而且自定義導出形式），數據可視化平臺拿nodejs完成2期開發，其中有用戶的權限以及用echart作的一套可視化組件，前端vue作成單頁應用，新增接口數據使用配置大量自動完成報表等設計。
看幾個截圖吧，數據開放平臺的還在開發中，由於數據敏感，我作了處理：
界面設計都是前端本身搞的，沒有任何ued和設計資源支持，項目推進也是大數據部門和前端部門一塊兒協做完成。
對於客服平臺來講前端部分的開發也是比較重的，設計到一個聊天IM的開發，對應的技術文章我記得以前也發過了，包括vue全家桶的使用，具體參考這裏：https://zhuanlan.zhihu.com/p/21596136?refer=xiaojue
以上爲須要支持的業務線，固然後續還會有視頻直播的業務介入，其餘部門也會有企業辦公的前端開發加入。
最後，除了業務支撐，前端團隊還作了什麼？我以爲這纔是重點：
1，自主開發的mock server服務：
從項目開始啓動，到需求設計，到推廣使用所有由前端部門開發人員自主業務時間完成，能夠經過這個平臺快速完成api的mock服務以及項目接口文檔管理和維護。
2，本身的打包備份運維平臺：
你們都知道，以上的項目所有都是並行在短短的5-6個月內開發完畢的，尤爲pc，h5，內嵌等對外項目，基本天天都有上線，每週都有迭代，一直在開發新功能需求。並行開發的管理就涉及到分支管理，代碼回滾，運維上線。
我剛來這個公司的時候，你們用的仍是ftp推到測試機再由運維推送到cdn上，當時我都驚呆了。後來升級成jenkins可是依然不能知足咱們的一些特殊要求，因此基於這個緣由，前端部門也本身開發並設計一套工做流和工做流自動化平臺：
固然咱們支持2種工做流管理，一開始用svn，咱們寫了一個svn版本，使用svn賬號登陸操做svn，另一個版本是近期推出的，咱們打算使用gitlab加這個平臺來管理回滾上線操做以及分支開發，測試環境，預生產環境的部署更新與上線。
登陸進去是這個樣子的：
咱們能夠根據不一樣的svn項目讀取版本信息，選擇回滾和上線，而且能夠經過svn或者git分支快速在服務器上建立測試環境，更新部署代碼，最後根據tag去jenkins裏作上線操做。
git部分就不截圖了，咱們目前公共依賴部門的模塊已經切換到gitlab私有庫管理。
後續咱們要作的事情：
1，統一全部開發人員的開發環境，並引入模塊，私有包，構建工具等腳手架。
2，前端性能監控服務。
這2部分已經開始在調研和預熱開發階段了。目標q4結束以前會研發出來。
固然，沒作出來的東西我就不在這裏秀肌肉了，之前老是不提咱們本身內部在作什麼，下面開始爆照時間：
固然了，最後那個蹲着的是我，當時太忙被小夥伴們偷拍了，這是上週騰訊的前端來公司作前端技術分享。
評審代碼，code review，vue全家桶，圖太多，隨便選一張吧，每週都有小組例會分享技術。
團隊tb，一半都是前端開發的人，圖小，顏值高~
很少說了，我知道大家喜歡。
固然，咱們也會去在線，騰訊，樂視後期外出進行技術分享，原本騰訊有拍照，可是實在看不出來是騰訊了。。就不發了，他們會議室並無咱們的高大上……
----------------------------
強哥的團隊目前招人，有興趣的朋友能夠直接飛簡歷到 designsor#http://gmail.com
後記
夜已深，未休眠。《課多週刊》纔剛剛起步，不少事情還須要堅持下去，相信這對於前端開發者來講會是一份收穫，對於本身也是一份收穫，輸入地址：https://w3crange.com，當即訂閱吧。
言歸正傳咱們在微信羣中推出了《早讀課》，每日分享一篇咱們認真精選的文章（不限於前端開發類），其目的是幫助開發者來學習有價值的東西。想加微信羣的朋友，直接添加個人微信號：icepy_1988，審覈以後會邀請你入羣。想加QQ羣的朋友，能夠直接添加：418898836，答對問題便可入羣。
更多精彩內容可關注微信公衆號：搜索 fed-talk ，來關注咱們吧，也歡迎你將它分享給本身的朋友。