V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
jackon
V2EX  ›  前端开发

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

  •  
  •   jackon ·
    JackonYang · 2016-09-12 22:55:51 +08:00 · 3707 次点击
    这是一个创建于 3000 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    当前 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 文件作为一个入口文件。

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

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

    感谢!

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

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

    现在的问题,只是如果安全高效的用 react 改造旧项目。
    yangxiongguo
        7
    yangxiongguo  
       2016-09-12 23:57:04 +08:00
    redux 不能少,不然数据传来传去烦死
    jackon
        8
    jackon  
    OP
       2016-09-13 00:01:12 +08:00
    @yangxiongguo 的确是遇到数据传的想死的情况。看来, redux 要加进来,不能裁掉。
    scarlex
        9
    scarlex  
       2016-09-13 00:32:23 +08:00
    https://www.v2ex.com/t/304025
    23 楼,上星期回答过类似的问题
    jackon
        10
    jackon  
    OP
       2016-09-13 01:05:31 +08:00 via iPhone
    首先,完全没看出两个问题有任何相似之处。
    然后,试图在 react 里面直接操作 dom ,这种思维本身是不合适的,建议你先反思下自己的架构和逻辑,而不是喷 react
    ericls
        11
    ericls  
       2016-09-13 01:44:58 +08:00
    是 SPA → 用 React
    不是 SPA → 用 nodejs 做前端加 sever side rendering, Django 做后端
    BMW
        12
    BMW  
       2016-09-13 08:35:37 +08:00
    如果是 MPA 项目,还是不要用 React 之类的吧
    jackon
        13
    jackon  
    OP
       2016-09-13 10:26:44 +08:00
    最终的目标是 SPA 呀
    xuhai951753
        14
    xuhai951753  
       2016-09-14 13:01:43 +08:00
    react+react-router+react-redux+redux 全家桶。找个靠谱的脚手架应该很快就能启动。前期学习和基础组件构建这个过程会比较慢,但熟悉了整个 flow 后面完全可以进入复制阶段。浏览器兼容开源的方案能兼容到 ie8 ,更低的兼容要自己改库。不过一个月 10+页面感觉有压力。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2764 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 12:40 · PVG 20:40 · LAX 04:40 · JFK 07:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.