react前端架构图_做“传统行业外包”的前端工程师的2018

从2.5人到8人，从JSP到前后端分离，从JQuery到React，从没有自动化构建到有自己的覆盖全流程的开发工具，从没有工程化到有自己的架构等等。
我是一名前端工程师，跟大家分享一下我们2018年走过的一些路。

从JQuery到React

都已经8012年了，我们才从从JQuery到React，对不起是我来迟了！

为什么选React

​ IE8！！！对的，就是为了兼容IE8，找了一堆的react-like的框架的，改写了一大堆的代码，在项目的压力下，做了简单的测试就开始投入使用了，当时我只写过Vue，和几行React，写了简单的demo，嗯，ie8能跑，开始撸业务代码去了。

​ 然而，这么长时间过去了，我们慢慢的抛弃了IE8，我们找了其他办法去做兼容。

开发工具

​ 第一个前后端分离的项目中，我们把webpack+babel等等的配置写在了工程里面，为了方便各个项目使用，我们把他抽离开来，然后丰富了功能，勉强成为了一个可用的工具，发展到现在，已经是全家桶一样的工具，那么他有什么功能呢：

• 常规的webpack提供搞得hmr/proxy/打包/代码优化等等肯定是有的，插件咔咔就往上怼。
• 模板：通过命令生成文件。
• quality模块，其实就是把mocha/eslint等工具集成进去。

ps: 为了兼容其他工具的使用，现在我们又重新把eslint/babel/mocha(现在改成了jest)的相关配置注进了工程里面，不过，这些当然是一键注入的，我们所有的升级都会提供一键升级的功能。

架构

先放一张前端业务架构图。

更简洁的redux

看起来，他跟一般的react全家桶架构没什么不一样对吧。嗯是的，但是我们把redux + redux-saga + xhr + 界面反馈 耦合到一块去了。

这样做使得我们不用定义一堆的type + action + reducer + saga，不用去梳理每一次数据操作，不用去处理错误，不用去设置界面反馈（多种反馈可选），不用去操心怎么存数据，只管dispatch，这些东西只需要来自一个最少一个选项的配置即可。

当然这样耦合当然也有不好的地方，例如单元测试显得没那么透明清晰。

权限控制

我们基于react-router做了权限控制组件，配合一份权限配置以及我们的开发工具，能够很方便的做数据模拟，做开发，部署。由于我们是基于context的，任何元素的权限控制自然不在话下啦。

真正的架构

再放一张整前端架构图：

没错，组件市场我们有了，配套的私服和贡献工具肯定是有的。然而，应用市场是我自己虚构的东西，希望把服务或者应用细分，然后项目有这些简单组装。

探索

虽然生活很苟且，但是还是得不断的探索，对吗？

• GraphQL：其实我已经在内部分享过一次了，带着像极了spring的nestjs的demo，可是大家都这么忙对吧（你懂得）。
• 最佳的web开发方式：我个人觉得，web开发就不应该分前后端，前后端分离搞得前后端的隔阂与矛盾越来越多，反而，我觉得前后端统一语言（如typescript）会好一些，毕竟可以共用接口，共用校验，共用枚举，方便理解等等。

规范

• eslint-config-airbnb
• commitizen/cz-cli
• 样式规范
• 其他

其他

兼容IE

我们有其他的几套方案做兼容

• Sanjs：看起来san.js真的不错，可惜资源太少，就连esnext的样例都不能在ie8及以下跑，配置一下babel，加加补丁就能解决的事情，别人一看不兼容马上跑了。san-store没有connect使用派生也是一个大隐患，解决了这些，搞个san-saga，再搞个最佳实践，用户多了，UI组件库自然会有累积吧。
• 控件：这个别人做的，我就不详细说了。
• React-like：社区了大把方案了啊