计划用 react 改造旧项目,求各种可能的坑预警

2016-09-12 22:55:51 +08:00
 jackon

典型的场景,发生到了自己的身上。 创业公司,早期开发者离职,留下一堆迷之代码。

当前 team 经过 2 个月的煎熬, 已经看懂并能够在现在代码之上痛苦的做开发。 只是开发效率特别低下。 bug 失控。

现状:

  1. 手写的原生 javascript / css / html 代码,没有 ES6 等新语法。
  2. 没有使用任何的前端构建工具,没有任何前端模版。
  3. server 使用的 Django ,所以,用的 Django 内置 template 做模版的前端渲染。
  4. 使用了 template 的继承机制,但,代码中有近 10 个 base.html 。真的都是 base
  5. 全站当前总的前端页面数,小于 20.
  6. 有一个迷之 util.js ,封装了一些业务逻辑,也包括一些迷之自定义语法。大多数页面都依赖,代码大量使用 this ,方法之间传参很少,主要靠 this 去获取 attribute 。所以,铁板一块,无法解藕。
  7. 当前浏览器支持非常差,现在对浏览器兼容高了很多。微信内置浏览器等都要很好的支持。
  8. 当前代码在图片上传等方面,稳定性很差。只放了个 input 😊

改造目标:

  1. 业务要稳定,平滑过渡。
  2. 最多可以封闭开发 1 个月。之后必须每周迭代新功能并及时上线。
  3. 前后端彻底分离,后端只提供 API
  4. 技术方案: webpack + react

过渡方案:

  1. 依旧在后端做路由
  2. 将 react 作为 template 渲染的工具,每个 html 文件作为一个入口文件。

---------------------------------

一个高风险的尝试,倾听各位的意见。

感谢!

3700 次点击
所在节点    前端开发
14 条回复
Joan
2016-09-12 23:03:27 +08:00
持续关注,学习学习~~
murmur
2016-09-12 23:04:31 +08:00
react 适合那种单页面 app 如果是传统的多页面其实还是主后端+模板更好
jinwyp
2016-09-12 23:22:29 +08:00
不要用 react, 否则下一个的人感受和你现在一样. 建议不要构建, 直接 jquery + 模版就可以了, 按照页面分以下, 公共的功能放到库里就可以. 然后下一步在用什么框架, 例如 angular2
serco
2016-09-12 23:22:50 +08:00
项目规模不大,而且有一个月的时间可以改造,如果是我,倾向直接改成前后端分离而不要搞过渡方案。
不然, webpack build 与 Django 静态资源打包之前的关系理起来也很费劲。

当然,大前提肯定是你们觉得前后端分离是项目正确的方向。
est
2016-09-12 23:32:28 +08:00
是 SPA → 用 React
不是 SPA → 还是用 django 模板渲染好了
jackon
2016-09-12 23:42:52 +08:00
使用 react 是非常确定的了,前后端彻底分离,也是非常确定的了。
有项目实践支撑,不想再回到前后端耦合的开发模式。

现在的问题,只是如果安全高效的用 react 改造旧项目。
yangxiongguo
2016-09-12 23:57:04 +08:00
redux 不能少,不然数据传来传去烦死
jackon
2016-09-13 00:01:12 +08:00
@yangxiongguo 的确是遇到数据传的想死的情况。看来, redux 要加进来,不能裁掉。
scarlex
2016-09-13 00:32:23 +08:00
https://www.v2ex.com/t/304025
23 楼,上星期回答过类似的问题
jackon
2016-09-13 01:05:31 +08:00
首先,完全没看出两个问题有任何相似之处。
然后,试图在 react 里面直接操作 dom ,这种思维本身是不合适的,建议你先反思下自己的架构和逻辑,而不是喷 react
ericls
2016-09-13 01:44:58 +08:00
是 SPA → 用 React
不是 SPA → 用 nodejs 做前端加 sever side rendering, Django 做后端
BMW
2016-09-13 08:35:37 +08:00
如果是 MPA 项目,还是不要用 React 之类的吧
jackon
2016-09-13 10:26:44 +08:00
最终的目标是 SPA 呀
xuhai951753
2016-09-14 13:01:43 +08:00
react+react-router+react-redux+redux 全家桶。找个靠谱的脚手架应该很快就能启动。前期学习和基础组件构建这个过程会比较慢,但熟悉了整个 flow 后面完全可以进入复制阶段。浏览器兼容开源的方案能兼容到 ie8 ,更低的兼容要自己改库。不过一个月 10+页面感觉有压力。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/305806

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX