五种前端开发框架比较

在2013年，一位技术人员Sebastian Porto在他的门户上写过一篇文章比较Ember、Backbone、Angular等几种前端语言，文章写的比较详细，在今年8月份，技术人员Jens Neuhaus在Medium上写了一篇文章，比较React、Angular、Vue，同样写的比较详细，文章被认可度很高，我做了一些整理，针对这5种前端框架，客观的做出比较，然后根据实际谈谈对前端开发框架的选择，文章中的一部分数据将会引用上述两位技术人员的内容。

先贴出比较的最终结果，然后逐项做一些解释「这是在没有权重的情况，根据个人需要可以为每项设置权重，然后选择对应框架，见后面」。

Lifecycle

Lifecycle主要从以下几个方面的比较，

1.历史、团队、背景

在这方面，无疑React和Angular会因为Facebook和Google的背景被另眼看待，而其它三个框架都是团队式开发维护，特别是Vue，开发人员比较少，一些有长久开发打算的项目，还是比较关注要框架背景的，一旦所选用的框架终止了技术支持，那对于项目来说将是灾难性的。

Ember团队被成为是一群很聪明的人，为什么这么说，看Ember的设计理念，约定优于配置，整个框架中处处都体现了这点

2.社区活跃程度

React和Vue都是后起之秀，特别是Vue框架，在2015年之后在Github上的受欢迎程度，几乎呈直线上升趋势，如上图所示。

值得注意的是，截止目前，Backbone最后一次commit是在今年的8月份，而最后一个release是在去年的4月份，Backbone的代码维护目前看不是很活跃了

3.语言

Angular使用了TypeScript，实际上TypeScript已经不是单纯的Javascript语言了，那么就有额外的学习成本，以及后期是否官方会长久维护的问题，这也是一个风险。

5个框架的license都是MIT，也就是说，对绝大多的项目来说，都可以放心去使用。

Features

这一方面是尤其重要的，大致分为以下，

1.Routing

路由，并没有什么好说的，这也是做为框架最基础要考虑的，这5种框架都做的很好。

2.View bindings

模版，对于模版的渲染方式，可能是仁者见仁，智者见智的问题，比如，我比较喜欢代码和设计完全分离的方式，而Component的设计就很难做到代码设计完全分离，Angular是Html中嵌入Javascript，而React是Javascript中嵌入Html，孰优孰劣完全在个人，不同的设计理念都与开发者的密切相关，比如React这种设计就充分体现了Facebook公司是以工程师为驱动的，对于full-stack的工程师来说，是比较喜欢React框架的。

我不但不喜欢代码和设计混在一起，而且也比较反感Angular的设计方式，DOM中加入了太多东西，有悖Web标准

3.Data bindings

数据绑定方面，Angular、Ember采用的是双向数据绑定，React采用的是单向数据绑定，而Vue是可以进行配置的，既可以选择单向数据绑定，也可以选择双向数据绑定，Backbone原生是不支持数据绑定的，这就意味着如果你使用Backbone框架，数据的处理，就需要手动绑定了，有人认为Backbone不是一个框架，而是一个库，很大程度上在Backbone的项目中有太多的数据手动渲染的代码。

数据绑定也是一把双刃剑，不见得双向数据绑定就是好事，有的时候会给你的开发带来额外的麻烦

4.Components

React、Vue、Angular本身就是基于组件形式设计的框架，Ember在这方面做的也比较好。

组件化也是见仁见智的问题，程序的设计很难做到兼顾，可复用会提高开发效率、保持一致性，但同时会降低灵活性

在Feature这方面，总体看Angular、React、Vue优势很明显，这也是为什么这两年来，这三种框架技术大受欢迎的原因。

Flexibility

这方面Backbone是做的最好的，你可以找到很多关于Backbone的扩展应用，还是上面的道理，如果框架已经为开发者做了很多工作，那么就要添加很多约束，自然留给开发者的自由就少了很多。

Learning curve and documentation

总体上看，Angular、React都是比较重的框架，而且比较独立，学习上需要付出一些成本，这5种框架中，我觉得Ember这点做的是最好的，可以通过自带的命令generate工程，Backbone可以通过yoman等工具generate工程，Ember的Guide做的非常详细，新手几乎可以一天之内就能创建应用。

这里说个小故事，某公司一个几千万的客户订单，最终项目出了问题，合同终止，技术方面出现比较严重的问题，就是前端框架的选择，采用了React框架，而实际的开发团队比较年轻，经验不足，没有办法在短期内上手React，要知道React的学习成本很高，不同时精通前端的若干技术是很难做到应用自如的。

Developer productivity

开发效率方面，Ember首屈一指，一旦你熟悉了Ember的一些约定，按照约定做事情就可以了，你想想，连模版的命名都不用你操心了，多省事。

Ecosystem

生态系统方面，Backbone比较好，可以找到很多Backbone开发扩展，其次是Ember，Ember自己建立了扩展的开发规则，而Angular、Vue、React相对比较独立，有雄心的开发框架希望自己搞定一切，会认为自己做的才是最好的。

Performance

性能上，Vue的表现最好，React和Vue都采用了Virtual DOM的设计，这可能是提高性能的一个重要因素，看Benchmark测试结果如下

这里并没有找到Backbone的测试

上面7项是从客观角度做的比较，框架的选择还要根据自身的需要，比如你的项目会更在意那些方面，你喜欢灵活性，喜欢使用生态中现成的扩展，那么你可以在Flexibility、Ecosystem两项中增加权重，然后再进一步比较。

当然还要根据团队的实际情况，比如你的团队中都是full-stack工程师，前端技术样样精通，那么React是个比较好的选择。

对于一个实际项目，如果项目偏大，我更愿意把按照如下设置权重，

如果是一个精小的产品，需要精雕细刻，Ember则是非常好的选择。

本文来源于：五种前端开发框架比较-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。