前端换框架,你们都是什么流程? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的容
firhome
V2EX    程序员

前端换框架,你们都是什么流程?

  •  
  •   firhome 2019-06-04 20:34:53 +08:00 4711 次点击
    这是一个创建于 2326 天前的主题,其中的信息可能已经有所发展或是发生改变。
    公司现在用 vue,代码一坨一坨的(修改状态更新 要 1 分钟,编译要 30 分钟)

    不想改了,现在有机会改版(一个频道 /单页 的改下去)。

    打算用 ng (没啥别的原因,就是技痒,学习,顺便优化一下)

    估计很长一段时间都会 vue 和 ng 并存的状态, 一些组件估计要重新写 (反正也要重构)

    除了这个风险,还有什么要注意的吗?
    第 1 条附言    2019-06-05 09:28:10 +08:00
    哈哈,一早起来发现这么多回复。怪我,昨晚发帖太匆忙,其中缘由没说清楚。

    我当然知道这不是框架问题,其实只要优化下代码和 webpack 就行了。

    我们的项目为什么巨慢无比?

    我们的项目结构大概如下,下面是简单的例子。

    |-components
    |-pages
    |--channel_a
    |----components
    |----index.html
    |--channel_b
    |----components
    |----index.html
    |--channel_c
    |----components
    |----index.html
    |--channel_d
    |----components
    |----index.html

    按频道划分多页的应用,components 里放的全站公用,供每个频道使用。
    每个频道里有自己抽离的组件。

    这项目运行了 3~4 年了,随着东西(组件)的增多,经常会 a 引 b 的组件,b 引 c 的组件,然后组件内又引全局的组件 巴拉巴拉的。

    而且某些组件的编写也是奇葩。比如

    list.vue
    <div>
    <div :type="channel-a">显示频道 a 的列表特性</div>
    <div :type="channel-b">显示频道 b 的列表特性</div>
    <div :type="channel-c">显示频道 c 的列表特性</div>
    <div :type="!channel-c && !channel-b">显示非 c 和 b 的列表特性</div>
    </div>

    看到这种都要吐血。。。。。。也没有注释什么的。改一个地方 可能牵扯更多地方。

    业务逻辑一直变,以前的代码又不敢删,哪天又要找回来 之类的。(写代码的和产品 都有问题)

    好了,先不扯代码,我为什么说想换 angular , 其实跟框架没有任何关系。主要在以下。

    1. 天天无所谓的 996。
    我们公司现在天天 996,你们以为我们的 996 和你们的一样吗?我们的 996 就是没事干做给老板看,老板喜欢这样。
    其实一周的工作压缩到 1~2 个工作日,全身心投入就能完成。你们能想象改个接口,改个文案,要花一周时间吗?
    为了应付所谓的日报,周报,必须得这么干。团队成员上班就是在薅羊毛。摸鱼。。。

    2. 学习学习知识。
    这个没啥说的,天天混,都没啥激情了。在项目中成长呗。

    3. 提高公司前端门槛。
    老板嫌前端门槛低,找 10k 左右的人就能干完我们现在的活,这话说的不假,我们现在的活没什么难度,就是堆代码,
    写写页面,发发请求,改改文案,有什么难度吗? 没难度。 但是老板瞧不起人的姿态很让人恶心。天天想着把人开了又不想给钱。
    有点想报复的小心态。

    4. 为啥不辞职?
    想辞职,都 996 了 哪有时间去准备面试? 又不给批假。 那只要利用这宝贵的 996 时间,折腾点东西咯。


    总结,就是薅着资本主义的羊毛闲着没事干。当然不排除最后还是老老实实去优化 webpack 继续摸鱼好了。
    35 条回复    2019-06-06 22:45:08 +08:00
    shintendo
        1
    shintendo  
       2019-06-04 20:55:17 +08:00   1
    编译 30 分钟是什么神项目……
    mooncakejs
        2
    mooncakejs  
       2019-06-04 20:55:22 +08:00 via iPhone   1
    挖了个大坑,vue 都搞不定不见得 NG 能搞定
    andregeng
        3
    andregeng  
       2019-06-04 20:58:51 +08:00   1
    编译 30min 也太长了吧,这也能忍?
    Bijiabo
        4
    Bijiabo  
       2019-06-04 21:02:52 +08:00   1
    先找到核心痛点,是现在的项目开发效率变低、难维护还是其他原因。
    还要考虑人员招聘、项目交接的成本,似乎国内还是首选 React 和 Vue.js 技术栈用的多一些。
    然后再向上汇报说明原因、解决方案、风险点、人力投入之类的吧。
    Yifelse
        5
    Yifelse  
       2019-06-04 21:04:17 +08:00   1
    如果 vue 都要编译 30 分钟你确定换 angular 能解决问题吗,这种不正常的编译时长肯定是有大问题了。
    hahahasnoopy
        6
    hahahasnoopy  
       2019-06-04 21:14:51 +08:00 via Android   1
    编译三十分钟跟 vue 本身没关系唉,是你 webpack 配置的问题~,webpack 都搞不清用 ng 能用的好吗
    setSweetChild
        7
    setSweetChild  
       2019-06-04 21:38:12 +08:00 via Android   2
    前端代码不需要编译的,编译是浏览器引擎的工作(高级语言->低级语言),webpack babel 只是把松散的代码变得紧凑,或者替换一些语法
    luob
        8
    luob  
       2019-06-04 21:45:27 +08:00   1
    你们可能需要一个高级 webpack 工程师,而不是 angular (认真的
    jorneyr
        9
    jorneyr  
       2019-06-04 21:49:38 +08:00   1
    我们 5 万行的 vue 项目,编译 38 秒,修改的话 3 秒左右即可
    lijsh
        10
    lijsh  
       2019-06-04 21:49:59 +08:00   1
    vue cli 本来就可以定制的,你照着文档优化一下 webpack 相关的配置再说。

    vue 都搞不掂,ng 绝对坑。
    jingyulong
        11
    jingyulong  
       2019-06-04 21:52:35 +08:00 via iPhone   1
    vue 这种进式的框架已经很友好了,换其他的岂不是更坑
    zhwithsweet
        12
    zhwithsweet  
       2019-06-04 21:55:12 +08:00 via iPhone   1
    打包 30 分钟吗?这么真实吗。
    laogui
        13
    laogui  
       2019-06-04 21:55:30 +08:00 via Android   1
    不想着优化现有项目老想着换框架。做这个决定人是竞争对手吧。
    rupert
        14
    rupert  
       2019-06-04 22:31:52 +08:00 via Android   1
    你们需要个 webpack 配置工程师
    newmoyupoi
        15
    newmoyupoi  
       2019-06-04 23:22:29 +08:00   1
    刚入职一个新公司,也算业界小有名气的大公司了,进去接手几个大项目,第一次知道代码要多烂就能有多烂,react 全程用 document 操作 dom 元素,一个 mvvm 的项目愣是给写成了 mvc,300 多行一整页的 if 判断,全是些死死的判断,1 == 2 是什么 3 == 4 是什么,哪怕您用 switch 都比 if 性能高,还用了 eslint,全程报警告,该用===的地方不用,空格也不按照规范来,以前维护的人在我入职几个月前就离职了,现在项目一堆一堆的 bug,我的天,已经申请 2 次离职了被拒,想走,不想接着烂摊子...我就想知道当初写这项目没人管吗?连 review 的都没有?项目经理干嘛吃的,公司也算有名气,连最近蹭热度最高的华为都在用现在这个公司的项目,我就纳闷了,这种项目也能上线!!!!
    kingsleydon
        16
    kingsleydon  
       2019-06-04 23:43:52 +08:00   1
    @newmoyupoi #15 爆下名字让大家避雷呀
    zpaopao
        17
    zpaopao  
       2019-06-04 23:51:35 +08:00
    @newmoyupoi
    刚刚入职,才在试用期吧?
    《劳动合同法》规定:“劳动者提前 30 日以书面形式通知用人单位,可以解除劳动合同。劳动者在试用期内提前 3 日通知用人单位,可以解除劳动合同。”
    可以直接走人啊。
    tinycold
        18
    tinycold  
       2019-06-04 23:54:32 +08:00 via Android   2
    你可能不知道,『 Vue 和 NG 共存』这么简单一句话,后边儿是天这么大个坑。

    一般真正对技术有追求的人,都是想办法解决现有问题,一看到不满意就想重写,是逃避型思维,我敢打个赌,就你现在这样,换到 NG/React 一样会有现在这些问题,代码设计宏观上看觉得毫无问题,一深入到细节就发现破绽百出,实际也是经验不足带来的问题。
    HaiYu
        19
    HaiYu  
       2019-06-05 00:58:42 +08:00 via Android   1
    其实 angular 支持 Web component 所以把 vue 组件封装一下,然后 angular 中开启自定义元素模式,理论上就能用了,但要是搞一半踩到坑,解决不了咋办…
    lonelygo
        20
    lonelygo  
       2019-06-05 01:29:06 +08:00   1
    Vue 这条路的资源狗好用了,非要换要换还是考虑 React 把,angular 国内用的不多啊,面 10 个前端能有一个接触过 TS 的不错了,除非你们都技痒,准备进一个新坑,而且有可能共存的结果是坑越来越大,过几年再换一把。

    最合理方案:定位问题,能解决就解决,不好解决该重构重构,是在不行部分重写,再不行就从设计下手看看架子是不是就有问题
    这一波猛如虎的操作下来,绝对能解决技痒的学习欲望,而且极大可能学到更多。
    ericgui
        21
    ericgui  
       2019-06-05 02:02:54 +08:00
    @jorneyr 我写了一个 2 万行的 vue,yarn build 大概在 25s 左右,这个啥水平?
    ericgui
        22
    ericgui  
       2019-06-05 02:11:01 +08:00   1
    首先,你说编译 30 分钟,什么意思? yarn serve 还是 yarn build ?

    其次,vue 和 ng 共存是什么意思?实在理解不上去,求指教
    ericgui
        23
    ericgui  
       2019-06-05 02:19:56 +08:00
    @lonelygo 是的,Vue 足够用了。如果 vue 写成了一坨屎,用其他的也同样不行的
    jorneyr
        24
    jorneyr  
       2019-06-05 07:31:09 +08:00
    @ericgui 应该不错
    liuxey
        25
    liuxey  
       2019-06-05 08:33:43 +08:00   1
    人的问题,而不是框架
    cnanyi
        26
    cnanyi  
       2019-06-05 09:11:43 +08:00   1
    上一个项目: angluar 5.0 webpack2, 打包 10 分钟左右, 修改状态 2 分钟, 明显 webpack 配置有问题, 项目移交了没再关注。
    现在的项目:vue 2.5,webpack4, 打包 5 分钟, 修改状态 5 秒左右, 直接用的 panjiachen 大侠的 element-ui-admin 框架配置。
    个人觉得,vue 对新手更友好一点, 从 jquery 类的项目切过来没太大压力。
    hyy1995
        27
    hyy1995  
       2019-06-05 09:21:16 +08:00   1
    个人觉得 vue 比 angular 好用。。。另外你这个编译速度不是框架原因吧
    firhome
        28
    firhome  
    OP
       2019-06-05 09:29:05 +08:00
    感谢大家回复,补充了。
    lixiangzaizheli
        29
    lixiangzaizheli  
       2019-06-05 09:39:59 +08:00
    angular 用自带的 build 和 serve 不是很快吗
    lixiangzaizheli
        30
    lixiangzaizheli  
       2019-06-05 09:41:07 +08:00
    @lixiangzaizheli serve 10s hmr 2s build 2min
    jingyulong
        31
    jingyulong  
       2019-06-05 10:06:05 +08:00
    看到 Append 的了,其实 996 真的可以避免的,现在很多公司摸鱼的太多了,自己平时又不愿意看书,就知道累代码,做重复性的劳动,还真把程序员当成体力活了。

    平时自己多学学,早日出坑
    maichael
        32
    maichael  
       2019-06-05 10:11:55 +08:00
    代码写的烂,你用什么框架都一样。
    vultr
        33
    vultr  
       2019-06-05 10:13:08 +08:00
    资本家的钱是可以赚回来的,你浪费掉的自己的时间却是回不来的。
    learnshare
        34
    learnshare  
       2019-06-05 10:18:41 +08:00
    跟框架无关,只是你不想收拾这个烂摊子,重写更清爽而已
    其实不光是代码烂,可能其他的也烂,就更加难受了
    uxstone
        35
    uxstone  
       2019-06-06 22:45:08 +08:00
    缺少一个 Leader
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     1563 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 30ms UTC 16:22 PVG 00:22 LAX 09:22 JFK 12:22
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86