前端開發技術棧推薦

本文以React爲核心，至於Vue和Angular暫時不考慮，因此不作過多評論，若是你們發現它們也有特別的優點，歡迎補充，互通有無。

1. 工具

1.1. 基礎

1.1.1. yarn/npm

推薦yarn，速度更快，使用更簡便，支持workspace等高級特性。 兩者都要設置使用淘寶鏡像（npm.taobao.org/），不然很慢。

1.1.2. npm-check-update(ncu)

github.com/tjunnone/np… 用於檢查依賴庫升級的，前端發展速度太快，須要常常跟進重要的第三方依賴版本，一是解決隱藏的BUG，二是防止長期不跟蹤形成API不兼容，升級困難。

1.1.3. lerna/yarn workspace

lernajs.io/ yarnpkg.com/en/docs/wor… 備選。大型項目或類庫項目組織架構，lerna目前有很多知名項目都在用。 與咱們目前正在考察的微前端架構思路不太一致，可能會在小範圍使用。

1.1.4. create-react-app

github.com/facebook/cr… create-react-app愈來愈成爲業界主流了，畢竟是facebook官方的東西。

1.2. 開發

1.2.1. IDE – webStrom/vscode

VSCode，免費開源，插件豐富，定製能力強，發展勢頭良好。比較經常使用的插件有EditorConfig,Prettier,TODO Highlight,Trailing Spaces,ESlint,Jest,Node.js ExtensionPack,Debugger for Chrome,Git Extension Pack,等等，可參考這裏： www.tuicool.com/articles/FV… WebStorm智能，開發效率高，插件也相對較多質量高 另外，VSCode用來作Java開發也是不錯的，還有Flutter的支持。

1.2.2. 編譯打包 -webpack

選擇webpack是無疑的，社區活躍，更新快。Vue、angular、react腳手架都是採用的webpack

1.2.3. 代碼檢查 - eslint/editorconfig/prettier/husky/tslint

使用eslint並配合VSCode的插件作實時檢查，在編碼風格方面，使用editorconfig和prettier配合及其VSCode插件作標準化。 以前eslint的規則庫主要使用airbnb公司的，google的也用過，後來以爲不少規則限制得過死，不得已要寫大量的忽略規則，最終仍是直接用create-react-app自帶的或prettier的推薦規則更簡便。 另外，使用husky（github.com/typicode/hu… commit以前的lint檢查，避免不良代碼提交到代碼庫。 使用ts的能夠將使用tslint

1.3 調試

使用webpack提供的hot-reload開發服務和source-map，利用chrome瀏覽器自帶的調試能力，同時結合相關開發工具插件： (github.com/facebook/re…) (github.com/reduxjs/red…) (github.com/mobxjs/mobx…) 如需與後臺api服務聯調，能夠經過react-app-rewired配置webpack的devServer作反向代理實現。 webpack.js.org/configurati…

1.4 測試

TODO: 缺乏集成測試、e2e測試等相關工具

1.4.1. 單元測試

前端測試框架不少，目前的主流應該是jest和jest-dom，主要是它是create-react-app自帶的，也是facebook的，以及配套的react-testing-library。 其它常見的還有mocha,jasmine,ava等，以及chai/sinon等斷言庫，基本大同小異。

1.4.2. 組件測試

值得一提的是針對React組件開發的兩個高層次的測試框架： airbnb.io/enzyme/ storybook.js.org/ 目前咱們尚未用到，主要是單元測試寫的原本就少，工程化還沒跟上。

1.4.3. 數據工具

還有就是各種Mock庫，用的也很少，jest自帶的基本夠用，再有就是ajax的mock庫： github.com/ctimmerm/ax… 這個是結合axios庫測試使用的。 還有數據相關測試輔助生成工具，例如： github.com/marak/Faker…

1.5. 部署

目前全部產品部署都已經docker化，前端跑在nginx容器裏，經過gitlab的CI功能把webpack生成的build版本自動打包進nginx鏡像。 早期使用過node作web服務器，用pm2作進程管理，如今都淘汰了。

2. 組件

2.1. 核心

2.1.1. 基礎框架

react不解釋

2.1.2. 狀態管理

MobX (mobx.js.org/)。

2.1.3. 前端路由

目前react-router(reacttraining.com/react-route…)幾乎是事實上的標準，不過它的版本4比3的改進方向不是很合理，由於前端路由本質上也屬於狀態管理的範疇，但它把onEnter和onLeave等事件改成使用組件生命週期的做法帶來了耦合，這是一種倒退。 其實像https://github.com/nareshbhatia/mobx-state-router這樣的路由的思路是對的，只是功能上不如react-router強大，最主要是缺乏嵌套。 所以，暫時確定仍是要用react-router，可是未來若是有更好的出現能夠考慮替換。

2.2. 界面

2.2.1. 基礎套件

在咱們有足夠的人力開發本身的組件庫以前，使用一些大型的第三方套件有助於產品的快速上線和界面維護。 目前，antd(ant.design/index-cn)是咱們的主UI庫，其自帶的組件能夠解決80%到90%多的原型實現問題，還能夠經過修改less變量實現必定程度的界面風格定製。 在antd以前也驗證過一些其它的套件，其中有一套也是阿里系的（具體名字和地址忘了，兩年前antd的table不支持多級表頭的時候考慮過它），還有http://amazeui.org/等，最終從組件的完整性和易用性方面看，仍是antd勝出。 這裏有一些參考資料： mp.weixin.qq.com/s/JFn64E1wR…

還能夠採用fusion(fusion.design/)這一套ui框架主要和antd的區別是可以自定化組件，好比對每個ui組件的文字、邊框、尺寸、圓角、陰影等進行自定義，而後輸入樣式文件共開發使用，開發無需對組件樣式作修改，視覺交互設計師完成就能夠直接開發。

2.2.2. CSS in JS

除了webpack自身直接引入css/less文件以外，還有一些能夠提升css編寫效率的工具： typestyle和csstips typestyle.github.io/)，特別是對於flex佈局控制很是有用。 推薦使用jss,但不建議直接使用jss。推薦使用優秀開源UI框架對jss的封裝， @material-ui/styles和@material-ui/system，可以減小不少css的編寫

2.2.3. 圖表庫

百度的ECharts及其React封裝 (echarts.baidu.com/) (github.com/hustcc/echa…) 推薦採用antV，畢竟是大公司出品的可視化解決方案，推薦用react封裝版本的bizCharts (bizcharts.net/products/bi…)還有一些參考資料： mp.weixin.qq.com/s/jdPgWwSEV…

2.2.4. 圖標庫

antd自帶少許圖標，大部分仍是用的阿里圖標庫(www.iconfont.cn/)不過用起來仍是稍微有點麻煩大多數狀況下用react-icons(react-icons.netlify.com/)就夠了，它裏面包含了 Font Awesome(fontawesome.com/)和Material Design icons（google.github.io/material-de… 開源圖標庫。

2.3. 周邊

2.3.1. 數據訪問

目前咱們使用的是fetch(github.github.io/fetch/)，準備換成axios(github.com/axios/axios)，後者的易用性方面較好，而且有更簡單的mock方案，方便測試。

2.3.2. 國際化

國際化方案也有很多選擇，antd用的是react-intl github.com/yahoo/react… 也是creatre-react-app默認推薦的，不過感受不是特別靈活。 準備採用i18next相關的方案： (github.com/i18next/i18…) (github.com/dmtrKovalen…) 這個方案還能夠同時用於node端，使得先後臺統一使用同一套locale映射文件。

2.3.3. 經常使用工具

• 整個前端包括node代碼裏用的最多的小工具就是lodash了，取代了更早的underscore，不過如今要被ramda取代了。 ramda的知名度不如lodash，但起點高，至關於lodash/fp。在前端函數式編程中使得代碼很是簡潔，也能夠在命令式下直接使用，只須要多寫一個參數而已，完勝lodash。 (lodash.com/) (ramdajs.com/)

• 另一個比較重要的經常使用工具庫就是moment了，不過間接使用的多些（日期控件），直接用主要是作日期格式化和計算等。 (momentjs.com/)

• 還有一類工具是數據校驗工具，目前直接用的也很少，主要用了antd封裝的form校驗，不過其內部庫的校驗規則仍是值得了解一下： (github.com/yiminghe/as…) (github.com/skaterdav85…) 最後這個是mobx下另外一套form驗證機制使用的校驗工具，可能用來替換antd的。

3. 其它

3.1. WebSocket

(socket.io/)、 (github.com/socketio/so…) 目前用的最多的仍是socket.io

3.2. JWT

(jwt.io/)、 (github.com/auth0/jwt-d…) 前端的身份認證使用的是JWT方案，結合通信庫（fetch/axios）把認證信息經過HTTP協議頭傳輸，並在客戶端進行payload解析。

3.3. Service Worker

這個目前是經過create-react-app框架被動的在用，屬於性能優化的東西，尚未仔細研究。

3.4. GraphQL

(facebook.github.io/relay/)、 (www.apollographql.com/) 針對這兩家方案作過技術驗證，感受還不到投入生產的時候，不清楚如今怎麼樣了。

3.5. NodeJS

NodeJS在前端開發的角色主要是API中轉和數據格式轉換處理等，真正的後臺服務仍是在Java那邊。 以前這邊的NodeJS使用比較重，包括數據庫訪問、定時任務、消息推送、音視頻接口等大量的功能，後來發現效果不是太好，主要緣由是人力資源不足，代碼質量很差保證。 後續若是還有少許node代碼的話，準備使用阿里的egg框架： eggjs.org/

3.6. 微前端架構

就是前端的微服務化，這是目前重點研究的領域，還處於原型驗證階段，準備以single-spa爲基礎開始搞，這是目前能找到的最貼近咱們實際的方案： (single-spa.js.org/)、 (alili.tech/tags/微前端/) 在這方面若是大家有好的資料或想法，我們能夠一起研究，這個是最有利於統一產品線的技術框架。