使用 Ant Design Pro 和 dvajs 开发 React 应用

2017-12-28

讲讲最近在做啥,也回顾下我的前端开发历程。

十一月份中到现在都在做前端,算是回到老路子上去了,写前端,做数据可视化,也写 Python API,顺带还给一个 Vue 移动端组件库打了个 Patch ydcss/vue-ydui。当时是同事在用这个东西,跟我说想要实现一个搜索框搜出结果后再取消搜索,重新请求渲染一下页面,发现没提供这个功能,我就迅速翻了一下代码,发现搜索框组件也是一个月前刚加的,功能不是很完善,我就写了下开了个 PR 出来,过了两天也被合并了,特别开心。

实习的时候是做前端,就使用 jQuery,gulp 就能开发一个大型的 Web 应用,那一套脚手架也是挺厉害的,用过一点 React,用的不多,也没上 Redux,当时我才理解了怎么用 jQuery gulp 开发一个大型 Web 应用,这里面是怎样的一个流程,一下就让我用 React,水平不够啊。后来因为不是全职做前端开发了,React 也没有再去看了,16 17 年也是 React/Vue 前端领域发展最迅速的时候,知乎上也各种撕,各种争。这中间我还是会在写一点前端,jQuery 写一个模态框,里面的是一个查询列表,还带勾选,各种操作,当时写的我脑袋都疼了真是,各种封装,才达到了几乎完美的效果。然后 Vue 也看了看,但都没有实践过,一直到最近,开始写 React。

ANT DESIGN PRO 是十一月份蚂蚁金服务发布的一个开箱即用的前端解决方案,是用 Ant Design 框架根据业务封装的一套 UI 框架。当时我在 Vue 和 React 之间选择用那个,因为实习的时候觉得 React 学习曲线陡峭,难度有点大,工具链太复杂,想用 Vue,刚好看到 ant-design-pro,本地跑了一下,非常不错,根据业务封装也是常见的东西,查询列表,详情展示、各种表格,表格的功能要够多满足需求,数据可视化部分是用的 g2,也是蚂蚁金服开源的数据可视化框架,样式、配色看起来比百度的 echarts 要舒服点,就决定用这个了。

慢慢用下来,我发现 dvajs 把 redux/redux-saga/react-router 封装得非常好,不用把数据流的操作分散到不同文件中写,一个 model 都在一个文件里,dispatch -> action -> state -> view,非常容易理解,另外,用的 roadhog 还能够集成 Mock API,方便开发。我是一路跟着 ant-design-pro 更新,它更新什么代码我就去看改了啥,我有没有用到,然后手动更新,最开始路由还不是动态加载的,后来改成了动态加载我也跟着更新了,查询列表的 CRUD 功能,弹出模态框进行新增/编辑,登录功能,封装其他可视化图,折线图漏斗图,如何 promise all 等等,中间还遇到了个版本的坑。后续我还是得继续研究研究 redux frp 函数式编程,现在前端框架都是这样,是挺好,但也有挺多坑,总之是比以前用 jQuery 开发一个大型 Web 应用要写大量的代码,防御性编程搞得写代码啰嗦到不行要好多了,如果应用简单,特别容易理解,如果应用复杂,数据较多,就要考虑考虑如何设计组件和组件间的数据传递了,然后还有些性能上的考虑,比如可视化图表的渲染。

dva0dva1

dva2

dva3
dva4
dva5
dva6
dva7