前端开发技术栈推荐

本文以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/微前端/) 在这方面若是大家有好的资料或想法，我们能够一起研究，这个是最有利于统一产品线的技术框架。