项目前端框架选择的疑惑 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ne6rd
V2EX    前端开发

项目前端框架选择的疑惑

  •  
  •   ne6rd 2015-12-23 12:26:18 +08:00 10600 次点击
    这是一个创建于 3583 天前的主题,其中的信息可能已经有所发展或是发生改变。

    3 个人的小团队,一个负责 java 后台,一个实习,我负责前台。
    之前的一个后台管理类项目,用的是 angular ,开发起来挺顺畅。但是也有一点小问题:
    1.IE8 里在部分交互场景响应比较卡。
    2.单页面应用访问首页的时候要把所有资源都加载好。
    这两点在面对几十个用户使用的后台管理项目中还算可以接受。

    现在一个新的项目,内部 OA ,用户数大概 3000-5000 左右。要参考以前的系统来做。
    以前是多页面,以 iframe 的形式镶嵌在另一个网站中。界面交互也有很多弹出窗口(涉及到在线 office 文件的浏览编辑),感觉并不太适合用 angular 。

    这两天也在看 react ,但是好像常用的组件好像没有 angular 丰富(比如 angular-ui )提供的那些。
    而且还涉及到前端的数据绑定问题,好像还要使用 redux 之类的框架。

    因为对 react 了解不深,请问我这样的需求应该如何选择前端框架呢?有没有其他的方案?
    要不要考虑 java 后台的模板技术?谢谢

    第 1 条附言    2015-12-23 15:14:21 +08:00
    关于 IE8 的支持,我们也尝试过一些方法。比如考虑让用户安装 chrome 或者火狐。
    但是碰到了一个更加无法逾越的坎,用户这边的登录不是通过账户密码,而是识别上海 ca 证书中心的数字证书密钥。然而这个密钥只提供了一个 activex 控件来识别。试过非 ie 内核的 activex 插件,对这个无效。
    所以限制了用户的使用环境必须是 IE 。
    然而还有很大一批用户使用的 XP 系统,最高只支持 ie8 。
    所以如果要淘汰 ie8 ,不仅仅是淘汰浏览器,更要淘汰操作系统了。这个我们作为软件开发方是做不到的。
    47 条回复    2015-12-25 03:16:58 +08:00
    ixiaohei
        1
    ixiaohei  
       2015-12-23 12:52:24 +08:00
    建议不兼容 ie8 ,然后随便怎么选
    clino
        2
    clino  
       2015-12-23 12:53:46 +08:00 via Android
    avalonjs 对 ie 支持较好
    甚至之前说 ie6 都行
    learnshare
        3
    learnshare  
       2015-12-23 12:56:20 +08:00
    放弃 IE 9 及以下,基本上什么都能用了
    answeryou
        4
    answeryou  
       2015-12-23 13:14:35 +08:00
    针对交互性比较强的应用用 Angular 很合适,对于资源加载的问题你可以使用懒加载,你所说的问题并不是框架问题,还有针对你目前的团队资源, React 这一块也应该不是很熟,如果项目时间比较紧还是用原来熟悉的框架吧
    ne6rd
        5
    ne6rd  
    OP
       2015-12-23 14:26:31 +08:00
    @ixiaohei
    @learnshare
    我们当然非常想放弃 IE8 ,然而很遗憾,起码 3 年内还是做不到的。内部使用环境,不是互联网可以挑用户。

    @clino
    avalonjs 看了下,不知道性能怎么样。 angular 并不是不支持 ie8 ,只是部分交互上有卡顿感。


    @answeryou
    时间倒不是很急,大约有 1-3 个月可以用来准备。只是想用一个比较合适的工具来解决问题。

    谢谢各位回复
    crazyxin1988
        6
    crazyxin1988  
       2015-12-23 14:27:16 +08:00
    用 jquery 不挺好的吗
    ne6rd
        7
    ne6rd  
    OP
       2015-12-23 14:43:53 +08:00
    @crazyxin1988 jquery 的话需要大量的 dom 操作吧。我们在使用 angular 之前就是只用 jquery 。
    代码写出来逻辑太混乱了。控制界面样式的和业务数据逻辑的都混在一起。
    chairuosen
        8
    chairuosen  
       2015-12-23 14:53:15 +08:00
    vue 大法好,搭积木一样想怎么用怎么用。
    想跟 angular 一样用,就上 vue-router ,跟 angular 不同的地方是支持异步的组件。
    还可以只把 vue 当库用, DOM 交互多的地方就套上 vue ,其他地方不用。
    chairuosen
        9
    chairuosen  
       2015-12-23 14:54:25 +08:00
    @chairuosen 刚看到必须 IE8 ,当我没说~~~
    learnshare
        10
    learnshare  
       2015-12-23 14:56:15 +08:00
    @ne6rd 内部系统当然更有能力要求抛弃 IE 了
    ne6rd
        11
    ne6rd  
    OP
       2015-12-23 15:01:42 +08:00
    @learnshare 我们只是外包方。。。大哥这一点您就不要纠结了
    ne6rd
        12
    ne6rd  
    OP
       2015-12-23 15:04:38 +08:00
    @chairuosen vue 了解过,应该是很不错的。无奈 ie8 不支持 Object.defineProperty ,模拟的办法都没有
    ne6rd
        13
    ne6rd  
    OP
       2015-12-23 15:14:48 +08:00
    @learnshare 增加了附言,我们也是有无奈的 [
    hanai
        14
    hanai  
       2015-12-23 15:20:52 +08:00   1
    react IE 8 没有问题,组件的话 ant.design 不错
    chairuosen
        15
    chairuosen  
       2015-12-23 15:28:09 +08:00
    "所以如果要淘汰 ie8 ,不仅仅是淘汰浏览器,更要淘汰操作系统了"
    这句话不对啊,强制安装 chrome 就完事了
    ne6rd
        16
    ne6rd  
    OP
       2015-12-23 15:30:21 +08:00
    @chairuosen 前面有说了,因为密钥控件只支持 IE 系列。我们又没有能力去开发一个非 IE 内核的控件出来。
    所以即使淘汰 IE8 ,也只能往 IE9-11 的方向发展。
    然而 XP 最高只支持 IE8 。。。。。。
    chairuosen
        17
    chairuosen  
       2015-12-23 15:33:32 +08:00
    @ne6rd soga ,变态的甲方
    taoche
        18
    taoche  
       2015-12-23 15:34:42 +08:00
    1 :你们的情况并不适合用 react ,不说 reat 开发效率不高,且选择 react 就面临被迫选择 react 的生态圈,对你们这个团队来说还是影响很大的。

    2 :继续 Angular , Angular 1.5 版本之后 除了 dirty-checking 以外,已经没什么特别大的硬伤了。


    至于你们的问题:
    问题 1 : 响应比较卡,我不清楚是「渲染」比较卡,还是 「交互」比较卡,这些虽然不能彻底解决,但都可以缓解。比如 惰性渲染 html 片段,不使用 操作 DOM 方式的动画,以及可以用 immutable 减少内存开支

    问题 2 : 其实 SPA 并不用 在首页把所有资源都准备好,还是可以以 page 为颗粒去加载,无论你用 什么模块加载器都可以解决这个问题。配合好 过度动画,其实很好解决。


    注:虽然 Angular 性能不高,但更多时候是开发者自身使用不当。 虽然可以提高 IE8 的性能,但是想做到 足够流畅 是非常困难的
    ne6rd
        19
    ne6rd  
    OP
       2015-12-23 15:44:53 +08:00
    @hanai 感谢,看了感觉挺不错的。而且风格偏紧凑,适合一些国人的习惯。
    不像 bootstarp 那样大行距,大留白了。
    clino
        20
    clino  
       2015-12-23 15:48:45 +08:00
    @ne6rd avalonjs 的作者很注意性能 很多选择是在注重性能的前提下做出的 avalonjs 的性能相当不错的
    chemzqm
        21
    chemzqm 
       2015-12-23 15:52:20 +08:00
    最好不用框架,维护起来比浏览器 bug 还要坑。。
    learnshare
        22
    learnshare  
       2015-12-23 15:57:04 +08:00
    @taoche IE8 的卡可能并不是优化代码就能解决的,毕竟许多年前的前端没有那么复杂的代码,那个时候的浏览器没有支撑现代前端代码的性能
    ne6rd
        23
    ne6rd  
    OP
       2015-12-23 16:00:29 +08:00
    @taoche 谢谢指教。
    1.如果一个团队对 react 和 angular 熟悉程度相近的情况下, react 开发效率没有 angular 高?

    2.angular 优化我们确实做的很不够。主要是有这个担心:
    ie8 在仅仅使用 jquery 做交互的时候还是可以达到丝般顺滑的。用了 angular 虽然开发方便了,但是使用体验却打了折扣,而且即使花了一些手段去优化了,也仅仅是打到一个可用的水平,感觉投入和回报也有点不成比例。所以在想 react 这种机制完全不同的,能不能从根本上解决 ie8 的问题。
    taoche
        24
    taoche  
       2015-12-23 16:02:13 +08:00
    @learnshare 想做到 十分流畅 我上面已经说了 非常困难(因为不敢保证所有人都做不到,所以保留的说非常困难)

    但是想把非常卡顿 优化成 可以接受。。 还是可以的。
    ezreal
        25
    ezreal  
       2015-12-23 16:03:54 +08:00
    其实我想说 @hanai 的 react IE 8 没有问题,组件的话 ant.design 不错

    我们的系统好多都从 angular 都迁到 react 了, anyway 个人喜欢也比较重要
    ne6rd
        26
    ne6rd  
    OP
       2015-12-23 16:04:14 +08:00
    @learnshare
    理解。那个年代的交互其实并不比现在简单,只是那时候更倾向用后台模板技术。
    现在前台这部分拿出来到客户端运行了,对浏览器的要求就高了。
    taoche
        27
    taoche  
       2015-12-23 16:06:10 +08:00   1
    @ne6rd 熟悉 react 不难,难的是在它那套生态下都掌握的很好。
    这么说吧,我们现在在用 react + nw.js 以及 react 周边的那些东西 开发一个 IM 系统。 我同事都说 如果用 Angular 开发的话 估计只要用到现在 1/2 甚至 1/3 的时间。(业务场景可能不能拿来类比,仅从参考。 可能也是我们比较水)
    ne6rd
        28
    ne6rd  
    OP
       2015-12-23 16:09:14 +08:00
    @taoche
    嗯,明白您的意思。 主要这个 OA 项目,是对历史项目的重构+更新功能。
    历史项目并不是我们开发的,前端是 jsp 页面混杂着 java 代码。虽然非常难维护,但是性能还是非常不错的(丝般顺滑)。
    如果我们重构之后,使用体验反而变差了,就有点本末倒置了。
    gouflv
        29
    gouflv  
       2015-12-23 16:24:00 +08:00
    如果 ng 不适合的话, react vue 这些类似方案也不太需要考虑了

    只剩 Backbone + Marionette
    baby4free
        30
    baby4free  
       2015-12-23 16:24:26 +08:00
    jQuery+template 吧。。。。
    ne6rd
        31
    ne6rd  
    OP
       2015-12-23 16:24:56 +08:00
    @taoche
    其实考虑 react 也是有一点自己的私心。不满足于只会使用 angular 。
    现在 react 这么火,也想实际尝试一下。如果真的应用到生产环境的话,学习到的东西肯定是很多的。(当然会有一定风险)
    gouflv
        32
    gouflv  
       2015-12-23 16:37:05 +08:00
    @ne6rd 小团队不要轻易尝试 react, 另外 vue 在灵活度上肯定是好于 react 的
    taoche
        33
    taoche  
       2015-12-23 16:54:45 +08:00
    @ne6rd 你可以尝试 把你们业务的某一个模块 用 react 开发一下。 对比一下体验
    hienchu
        34
    hienchu  
       2015-12-23 17:08:45 +08:00
    最近刚撸了一个 React 的小项目,前期熟悉需要一些时间,但是开发效率个人觉得比 Angular 要高。 React 虽然没有 jQuery 那么快上手,但是性能上绝对是秒杀的。还有就是, React 的模块化对于后期的改动真的是很方便。
    xAI
        35
    xAI  
       2015-12-23 18:45:19 +08:00
    前段时间一直在尝试各种前端框架,有个必要条件是支持 IE8 ,不支持 IE8 的都略过。
    主要尝试了 angular, avalonjs, react, mithril 这几个。
    最终选择的是 angular 做后台管理系统, mithril 做前台用户系统。

    angular 在 github 上面有一个第三方的对 IE 8 的支持,选用的是 1.4 和 ui-bootstrap 0.12.1 支持 IE8 的版本。 angular 的资源太多了,有什么问题都能快速的找到,还有良好的 UI 测试 protractor 。后台也不需要太高的性能要求。

    avalonjs 这个我写 demo 的时候就遇到坑了。没有好的项目结构生成方案。还有现在是 1.4 和 1.5 两个版本存在,如果选 1.5 的话相关的 mmRoute 都没发很好的配合使用,官方也没文档。

    react 和 mithril 模板 mithril 真心比 react 简单多了,官方的性能测试也比较好,也可以对 IE 8 支持,也是我们需要的,
    react 过于庞大很多都不是我们需要的, mithril 简单,需要的基本功能都有了,只是第三方插件不多,还问题多,最近天天在加班改。


    要是公司项目最好选资源多的,遇到问题可以马上解决。
    hbkdsm
        36
    hbkdsm  
       2015-12-23 19:24:59 +08:00
    @taoche 然而从 Angular 1.3 开始就不支持 IE 8 了。。。
    banricho
        37
    banricho  
       2015-12-23 20:26:21 +08:00
    这种有 IE 的需求那就 Avalon.js 吧
    之前这里有个项目也是这么做的…非 IE 需求的话就不用它了
    taoche
        38
    taoche  
       2015-12-23 22:56:20 +08:00
    @hbkdsm 是有一些兼容性的方案的。这个没啥问题
    mgcnrx11
        39
    mgcnrx11  
       2015-12-23 23:22:20 +08:00
    我倒觉得,从密钥控件上着手会更好,研究改造成支持 Chrome ,其实应该就是做一下桥接的就行了吧,我猜。因为目前的某局级项目,就正是通过此方法全面支持 Chrome ,抛弃 IE 了
    narukow
        40
    narukow  
       2015-12-24 00:23:50 +08:00
    这种后台 OA 类系统的开发,最重要还是在于有没靠谱的 UI 库吧。我为新项目找前端框架也把几个主流框架看了遍, avalon 有 oniUI (但看介绍感觉太月厨中二爆表放弃了=_=); vue 看起来很棒,但没 UI 库放弃了;最后选了 ant.design 来尝试,组件数量和成熟度都挺高了,更新也活跃,但目前好像还是小范围内试用,一想到前面好多坑没被人趟过就好忐忑。。。
    chairuosen
        41
    chairuosen  
       2015-12-24 01:05:17 +08:00
    zluyuer
        42
    zluyuer  
       2015-12-24 02:21:21 +08:00
    可以使用 ui-router 替代原生路由,并配合 ocLazyLoad 按需加载资源,解决问题 2
    https://github.com/angular-ui/ui-router
    https://oclazyload.readme.io/docs/getting-started
    arzusyume
        43
    arzusyume  
       2015-12-24 09:36:15 +08:00
    1.比较卡没有啥通用解决的方法只能针对具体业务去一点点优化少做 watch
    2.angular 也可以基于模块做异步加载, 多个 js,css 需要合并啥的可以丢给 web-server 去做热打包
    ne6rd
        44
    ne6rd  
    OP
       2015-12-24 15:46:15 +08:00
    @mgcnrx11
    没弄过客户端的东西,无从下手啊。有详细的思路能分享一下吗
    ne6rd
        45
    ne6rd  
    OP
       2015-12-24 15:47:46 +08:00
    @narukow

    对啊,企业开发 UI 库很重要。基本都是类似的交互,只不过业务逻辑不一样。
    ant.design 看了非常心动,你们已经用在产品中了吗
    ne6rd
        46
    ne6rd  
    OP
       2015-12-24 15:53:17 +08:00
    @zluyuer
    谢谢。 ui-router 那是早就已经用上了。
    ocLazyLoad 看起来挺简单的,我去试试看。
    zonghua
        47
    zonghua  
       2015-12-25 03:16:58 +08:00 via iPhone
    干嘛不用 Easy UI
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     3299 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 27ms UTC 11:52/a> PVG 19:52 LAX 04:52 JFK 07:52
    Do have faith in what you're doing.
    ubao 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