 |
VOOZH | about |
|
VOOZH | about |
本文簡單明了的告訴你如何建設專業前端隊伍，更多是軟性的東西。本文已獲得小爝授權轉載，原文地址可訪問：https://zhuanlan.zhihu.com/p/21779628
有點標題黨了，因為我確實不是從零開始，而是從一個五人小隊打造了一支目前37人的前端技術團隊。
很久了，一直想寫這麼一篇文章，但是因為種種原因沒有寫的出來，一個原因是我一直覺得這不是我自己一個人的力量可以完成的，二來我覺得沒有做出什麼成績和結果，這些事情不足掛齒。
我在知乎前年開始一直回答前端領域的一些專業問題，收穫了不少贊同和感謝，也收穫了不少好友和同事，從今年開始一直忙碌在團隊組件和人員招聘的事情上，說白了，寫了很多東西最後都會說我這邊呀，急招前端，急缺工程師，但是我從來沒有宣傳過我們在做什麼，我們怎麼做，我們內部是一個什麼樣子的工作氛圍和環境。
當然，現在我們打造的產品也確實體驗一般，用戶不多，仍然在打磨，原因很多很多，但是就目前感覺，已經可以見到曙光了，至少在開發層面，我們的產品可以說是完成了第一步的階段。雖然要做的事情還有很多，業務也在不斷增加，我只是個小前端，我更在乎的是我的團隊對公司的影響和我個人可以做些什麼，為公司和為自己的夥伴。
去年的11月20號來到了美信這個前端團隊，到現在經過了8個月的打磨，我先說說業務線場景我們前端部門所做的一些事情：
1，我們所負責的第一個項目，國美+ H5 手機官網，一句話概括，一個移動端的購物商城，說和淘寶差不多有點過分，但是和自家的國美在線相比應該是比較恰當的了。
其中包含了微信的登錄和支付以及在支付寶支付購物打通，很好的支持了核心app產品的各種店鋪，商品，圈子話題的分享落地頁面的承接功能。
簡單說一下架構，主要前端模塊的劃分還是採用之前我寫的一個https://github.com/litheModule/lithe 加載器完成的模塊劃分，目錄分為了幾個緯度，比如入口，抽象業務模塊，抽象非業務模塊，插件，第三方庫，以及業務中的一些工具輔助函數，測試文檔用例等，這個屬於一個類似用了很多年的一套前端總結下來的項目腳手架設計，萬金油。
主要前端渲染，第一期採用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，幾個月前上線了一個支持購買商品和發布社交話題的功能，地址在這裡：
功能沒有移動端那麼完善，目前只支持微信支付購買，但是近期也會上線個人中心和支付寶等支付渠道，已經優化產品體驗，最主要的是這麼一個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，立即訂閱吧。
言歸正傳我們在微信群中推出了《早讀課》，每日分享一篇我們認真精選的文章（不限於前端開發類），其目的是幫助開發者來學習有價值的東西。想加微信群的朋友，_1988，審核之後會邀請你入群。想加QQ群的朋友，可以直接添加：418898836，答對問題即可入群。
