前端框架

https://www.awesomes.cn/repos/Applications/frameworks

bootstrap的响应式不适合纯移动端开发，因为太重了，对移动端载入速度影响很大，纯移动端还是小快灵比较好。

服务器渲染，不用想太多老老实实写好jQuery插件。

可以根据产品类型做个基本判断：对于页面型产品，处理交互更多，jquery也够用；但如果是应用软件类产品，需要关注处理复杂模型，很有必要引入MV*框架。如今的互联网公司的产品基本都是web app，越来越像传统应用软件开发靠拢，使用个框架就还是很有必要的。

Sencha Ext JS 有着耀眼的光辉，但是光芒背后总归有点阴影。除了之前提到的 Ext JS 太过重量级之外，商业化是 Sencha 的另一把利剑。帮助 Sencha 披荆斩棘之时，也把大把的码农砍在马下。Sencha 规定，凡是商业化的应用，都需要付费。另外，Sencha 的辅助产品也全部收费，否则只能是试用版。这里的辅助产品，其实包括了上面提到的所有产品。开发企业管理系统那种的web页面可以考虑extjs，现在改名叫sencha，组件多。相反，个人感觉react就不是很适合用来开发企业管理系统。

 

轻量化和细化，能解决问题的应用就是好应用。而在移动互联网时代大的背景下，个人开发者的机遇在门槛低，成本低，跨设备和多平台四个方面

那么在项目实施中，我们一般会关注哪些方面呢？

有过前端开发经验的同僚们可能会想到：要有可复用的组件，要控制质量做测试和静态检查，要有组件隔离的样式方便实现Responsive，要打包部署方便，最好学起来不要太复杂，方便能力建设、节省招聘成本等等。

接下来，我们将从组件复用、测试和学习曲线这三个主要的方面对Angular4,Ember.js，Vue.js和React这四个当前最流行的框架来做更深入的分析，提供更具体的参考。

1. 可复用的组件

组件复用是每个项目都会重点关注的一个维度。合适的、职责单一的组件会大大提升新特性的开发效率和工程的可维护性，也能方便地进行测试。那么他们的表现都如何呢：

概括起来，就是Vue、Component的组件相对灵活、轻量，添加依赖就可以无缝集成到遗留系统中。对于从0到1的系统，也可以使用新的实践来构建工程，例如ES6、Webpack等技术。Angular4官方推荐使用TypeScript，这需要单独构建和打包，不方便与遗留系统集成。Ember.js自定义了一整套生态，基于CoC理念的设计，采用了前端工程中比较前沿的实践和标准，很难与遗留系统集成，更适合在新项目中使用。至于数据绑定，各有优势。双向绑定在表单交互多的场景中更便捷，单向绑定在管理跟踪记录组件状态时更高效。组件状态更新，各有不同的实现:

• Vue2.js通过定义setter来监听状态变化，特殊场景需要特殊的API支持, 基于virtual DOM的视图更新。
• React在组件的状态或属性的变化后，也是基于virtual DOM的视图更新。
• Angular4在引起状态变化的时刻，框架自动触发脏检查，也可以手动执行脏检查，直接操作HTML DOM更新视图。
• Ember.js提供数据模型，所有数据的操作通过API执行，使用Glimmer引擎进行HTML渲染和更新。

其中，主要的区别是Angular4是通过事件监听，对比数据更新，直接操作DOM来更新视图，而其它都通过Virtual DOM的思路来更新视图。

2. 组件测试

测试是提高软件质量的有效手段，易于编写测试的框架，能降低编写测试的成本，充足的测试也能提高我们交付软件的信心。它们在组件测试方面的比较如下：

 

可见，Vue, React测试灵活，可以根据项目具体情况来定制，但是没有统一的测试实践规范，对开发人员的能力有较大依赖。Angular4和Ember概念多，有官方推荐的实践，要完全掌握难度大，优势是实现起来更规范。

3. 学习曲线

在技术选型过程中，保证项目按时交付，控制风险，团队能力建设提升，都是需要考虑的因素。作为一个软件服务公司，如何快速的提升人员能力，选用学习曲线合适的框架，控制项目成本也是一门技术活。下面，对使用这些框架的难度进行了一些简要分析：

 

总结

通过上面三个维度的分析，我们发现Vue.js和React的重点更侧重于创建可复用、易于测试、能灵活集成的组件。当然，通过其它扩展组件，以及一些脚手架插件的支持，也可以方便的搭建一个采用最新实践的前端应用的构建框架。它们最大的优点是按需定制，学习曲线平滑，构建出来的应用小而精。

相对来说，Angular4和Ember是大而全的框架，它们更侧重于大型前端工程的构建，为开发人员屏蔽项目构建底层的细节，提出了自己的一套解决方案。使用它们的难点是要度过前期曲线陡峭的学习期，优点是由于使用了标准化的开发方式，后期能极大的提高开发生产力，提升开发效率。

最后，说了这么多，大家在具体选型时还是要首先分析自己的需求和现状，然后再做选择。不求最酷炫，只求最合适！

Vue.js与AngularJS

Vue虽然是一个比较轻量级的框架，简单轻量的同时还非常的人性化，其提供的API也是非常的容易理解，同时也提供了一些很便捷的指令和属性。Vue的成产版本（即min版）源码仅为72.9kb，官网称gzip压缩后只有25.11kb，相比Angular的144kb缩小了一半。

Vue.js本身提供的API都比较简单、直观，最大的优点是按需定制，学习曲线平滑，构建出来的应用小而精。AngularJS是大而全的框架，学习成本高，它们更侧重于大型前端工程的构建，为开发人员屏蔽项目构建底层的细节，提出了自己的一套解决方案。

灵活性

Vue 相比于 Angular 更加灵活，小巧的一种好处就是可以让用户更自由的选择相应的解决方案，在配合其他库方面它给了用户更大的空间，Vue 官方提供了构建工具来协助你构建项目，但它并不限制你去如何组织你的应用代码。有人可能喜欢有严格的代码组织规范，但也有开发者喜欢更灵活自由的方式。

如Vue的核心默认是不包含路由和 Ajax 功能，但是如果项目中需要路由和AJAX，可以直接使用Vue提供的官方库Vue-router及第三方插件vue-resource，同时你也可以使用其他你想要使用的库或插件，如jQuery的AJAX等。

学习曲线

要学习 Vue，你只需要有良好的 HTML 和 JavaScript 基础。有了这些基本的技能，你就可以非常快速地通过阅读 指南 投入开发。

Angular 的学习曲线是非常陡峭的——作为一个框架，它的 API 面积比起 Vue 要大得多，你也因此需要理解更多的概念才能开始有效率地工作。当然，Angular 本身的复杂度是因为它的设计目标就是只针对大型的复杂应用；但不可否认的是，这也使得它对于经验不甚丰富的开发者相当的不友好。

运行时性能

Vue 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。

在 AngularJS 中，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环 (digest cycle) 可能要运行多次。AngularJS 用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。

Vue 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步队列更新，所有的数据变化都是独立触发，除非它们之间有明确的依赖关系。

有意思的是，Angular(原本的 Angular 2) 和 Vue 用相似的设计解决了一些 AngularJS 中存在的问题。

Animate.css- css3动画库