HoperBank项目为P2P对外wap端,提供用户注册到投资理财、充值提现等一系列操作功能,与IOS与安卓app端的UI与功能保持一致,wap端与app端UI有细微的差别,不过功能保持一致。
重构原因
实际上我们项目是已经有一个线上的了,不过这个项目没有使用SPA,单纯的使用Jquery、Ajax构成,然而随着功能增加,页面逻辑也开始越写越多,到后面维护起来已经是相当的蛋疼...由于我们这个wap主要运行在微信端,且使用的数据、UI与ios及安卓端一模一样,我决定使用SPA来重构这个项目。
使用React
使用React是我早已打算好的,除了个人喜欢React外,更加是为了用React Native开发手机App端做铺垫,wap端app的代码和手机App端的代码共用率相当高,在编写web端的时候就考虑到的话可以在开发RN应用的时候节省大量时间。
wap与手机端的逻辑及数据层面都是一样的,区别主要在View以及样式。
数据
我们后端是java,这里我这里是直接使用的app的接口,由于接口已经是现成的,可以直接通过连接测试环境接口开发。
开发技术栈
React是主要应用框架,redux为数据层,使用react-router作为路由,使用webpack编译打包。
简要概括为:react + redux + react-router + webpack + es6-7
除了上述这些还包含了一些小工具
实际上这次的重构计划也是我个人的决定而已,重构跟着现有项目更新同步进行,一有空就继续重构,前前后后一个多月才终于赶上现有项目,最终替换掉了原版本。
线上项目部分截图: