Advantages and disadvantages of various front-end frame

Currently available Web front end UI frameworks: the Element, on Bootstrap, jqueryUI, Foundation, the Semantic UI, Pure, UIKit
Web front end of the frame currently available JS: JQuery, Zepto, VueJS, AngularJS , ReactJS, backbone, ember

A, JQuery

advantage:

1、轻量级：大小只有18KB。
             2、强大的选择器：JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及JQuery独创的高级而且复杂的选择器，另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。
             3、出色的DOM操作的封装：JQuery封装了大量常用的DOM操作
             4、可靠的事件处理机制：JQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华，是的JQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进以及非入侵式编程思想方面，JQuery也做得非常不错。
             5、完善的Ajax：JQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。
             6、不污染顶级变量：JQuery只建立一个名为JQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交流控制权，绝对不会污染其他的对象。该特性是JQuery可以与其他JavaScript库共存，在项目中放心地引用而不需要考虑到后期的冲突。
             7、出色的浏览器兼容性：JQuery能够在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常运行。JQuery同时修复了一些浏览器之间的的差异，使开发者不必在开展项目前建立浏览器兼容库。
             8、链式操作方式：JQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个JQuery对象上的一组动作，可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅。
             9、隐式迭代：当用JQuery找到带有“.myClass”类的全部元素，然后隐藏他们时。无需循环遍历每一个返回的元素。相反，JQuery里的方法都被设计成自动操作的对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅度地减少代码量。
             10、行为层与结构层的分离：开发者可以使用选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思想，可以使JQuery开发人员和HTML或其他页面开发人员各司其职，摆脱过去开发冲突或个人单干的开发模式。同时，后期维护也非常方便，不需要在HTML代码中寻找某些函数和重复修改HTML代码。
             11、丰富的插件支持：JQuery的易扩展性，吸引了来自全球开发者来编写JQuery的扩展插件。目前已经有超过几百种官方插件支持，而且还不断有新插件面试。
             12、完善的文档：JQuery的文档非常丰富，例如JQuery的中文API。
             13、开源：JQuery是一个开源的产品，任何人都可以自由地使用并提出修改意见。

Disadvantages:

         1、不能向后兼容：每一个新版本不能兼容早期的版本。举例来说，有些新版本不再支持某些selector，新版jQuery却没有保留对它们的支持，而只是简单的将其移除。这可能会影响到开发者已经编写好的代码或插件。
         2、插件兼容性：与上一点类似，当新版jQuery推出后，如果开发者想升级的话，要看插件作者是否支持。通常情况下，在最新版jQuery版本下，现有插件可能无法正常使用。开发者使用的插件越多，这种情况发生的几率也越高。我有一次为了升级到jQuery 1.3，不得不自己动手修改了一个第三方插件。
         3、多个插件冲突：在同一页面上使用多个插件时，很容易碰到冲突现象，尤其是这些插件依赖相同事件或selector时最为明显。这虽然不是jQuery自身的问题，但却又确实是一个难于调试和解决的问题。
         4、jQuery的稳定性：jQuery没有让浏览器崩溃，这里指的是其版本发布策略。jQuery 1.3版发布后仅过数天，就发布了一个漏洞修正版1.3.1。他们还移除了对某些功能的支持，可能会影响许多代码的正常运行。
         5、对动画和特效的支持差：在大型框架中，jQuery核心代码库对动画和特效的支持相对较差。但是实际上这不是一个问题。目前在这方面有一个单独的jQuery UI项目和众多插件来弥补此点。

Two, Zepto

Zepto was originally developed for mobile end library, jQuery is a lightweight alternative because of its API and jQuery similar, but smaller file size. Zepto's greatest strength is its file size, only 8k and more, is fully functional library smallest one, albeit modest, tool Zepto provided is sufficient to meet the needs of the development process. Simply put, jquery for computer-side development, Zepto end development for mobile phones.
Pros: Lightweight, suitable for the development of mobile end
drawback: Zepto does not support older versions of Internet Explorer browser (<10).

Three, VueJS

In fact, not a Vue.js framework, because it views the focusing layer is a data-driven Web interface library construct.
Vue.js provide efficient and flexible data binding components of the system through a simple API (Application Programming Interface).
Vue.js the following features:

　　    1.轻量级的框架
　　    2.双向数据绑定
　　    3.指令
　　    4.插件化

advantage:

1. Simple: the official documentation is very clear, easy to learn than Angular.

2. Fast: asynchronous batch update DOM.

3. Combinations: with decoupled components can be combined in your application reuse.

4. Compact: ~ 18kb min + gzip, and no dependence.

5. Powerful: Expression & no need to declare dependencies can be derived attributes (computed properties).

6. Modules friendly: through NPM, Bower or Duo installation, without forcing all your code follows the various provisions of Angular, more flexible usage scenarios.

Disadvantages:

1. Neonatal: Vue.js is a new project, there is no angular so mature.
2. The degree of influence is not very big: google a bit, about Vue.js diversity or abundance of a number of other less well-known libraries.
3. It does not support IE8:

Four, AngularJS

angularJS is an excellent front-end JS framework that has been used for a variety of Google's products are.
　　angularJS the following features:

	   1.良好的应用程序结构
　　　　2.双向数据绑定
　　　　3.指令
　　　　4.HTML模板
　　　　5.可嵌入、注入和测试

Advantages:　
1 template rich and powerful, it comes with a wealth of angular instructions.
2 is a more complete front-end frame, comprising a service template, two-way data binding, modular, route, filter, all functions dependency injection and the like;
3. custom instruction, multiple custom instructions may be in the project use.
4.ng modular bolder introducing something of Java (dependency injection), can easily write reusable code, for the agile development team is very helpful.
5.angularjs Internet giant Google to develop, which means he has a solid foundation and community support.
　　
Drawback:
1.angular entry concept is easy, but after a lot of depth, learning is more difficult to understand.
2. Documentation is very small example, official documents written only basic api, not an example, are often specifically how to use google to or directly ask misko, angular author.
3. IE6 / 7 compatible not particularly good, is that you can use jQuery to address some of their own hand-written code.
little tutorial application of best practices 4. instructions, angular actually very flexible, If you do not see the use of the principle of some authors, it is easy to write code like nothing on earth, for example, still have a lot of ideas like jQuery js dom in operation.
5.DI dependency injection compression if the code needs to be displayed declare
routing mechanism 6.AngularJS, it is easy problems
7. verification error message is displayed relatively weak, a lot needs to write a template tag
8.ngView can only have one, you can not nest multiple views, although there are angular-ui / ui-router resolved, but ui-router for the URL control is not very flexible, it must be nested
9. The upgrade from 1.0.X to 1.2.X, looks like a relatively large adjustment, not perfectly compatible with earlier versions may cause compatibility after upgrading a BUG

Five, ReactJS

React mainly used to build the UI. You can pass in React in various types of parameters, such as the declaration code to help you render the UI, can be static HTML DOM elements, you can also pass variables dynamically, and even interactive application components.

React characteristics are as follows:　
　　　　1. The design statement: React declarative paradigm, the application can easily be described.

2. Efficient: React the DOM by simulation, to minimize interaction with the DOM.

3. Flexible: React can work well with known library or framework.

Advantages: speed: in the UI rendering process, React actual update DOM implemented by local micro-operations in a virtual DOM.

2. Cross-browser compatible: DOM virtual help us solve the problem of cross-browser, it provides a standardized API for us, even in IE8 are not the problem.

3. Modular: The modular write a separate UI components for your program, so that when a problem occurs or some components can be easily isolated.

4. way data flow: Flux schema is used to create a unidirectional data layer is a JavaScript application, depending on which React with the development of the library was conceptualized Facebook.

5. homogeneous, pure javascript: because search engine crawlers rely on that server response instead of executing JavaScript, and pre-rendering your application helps search engine optimization.

6. Compatibility: for example, using RequireJS to load and packaging, while Browserify and Webpack suitable for building large applications. They no longer make those difficult task daunting.

Disadvantages: 1. React itself is just a V only, not a complete framework, so if you want a large-scale project is complete framework, then, the basic need to add ReactRouter and Flux to write large applications.

Six, BackboneJS

Backbone.js providing a model (models), a set of (collections), views (views) the structure of complex WEB application. Wherein the model data and key value used to bind custom events; with a rich set of API functions may be enumerated; View event handler can be declared, and is connected to the application via interfaces RESRful JSON.

Backbone is the only heavily dependent Underscore.js (> = 1.5.0) (Note: Underscore.js Chinese documents, please see http://www.html.cn/doc/underscore/). A RESTful constraint-based (a frame pattern network system), histroy support depends on Backbone.Router , the DOM processing depends on Backbone.View, including jQuery (> = 1.11.0), and json2.js IE browser old support. (Underscore and jQuery imitation of APIs, for example, Lo-Dash and Zepto, the same can be run at different compatibility)

七, EmberJS

Ember.js is an open source JavaScript client framework for developing Web applications using MVC (Model - View - Controller) architectural pattern. In Ember.js, the routing used as a model, a view template handle, process model controller.

Vue and React:

• Vue
  simple API on the design, grammar simple, low-cost learning
  faster rendering speed and smaller size
• React
  React rendering system can be configured stronger, and includes such characteristics as shallow rendering, may be used in conjunction with testing tools React, thereby greatly improve code maintainability and testability.
  More suitable for large-scale applications and better testability
  apply to both Web and Native App end
  more support and tools to bring greater ecosystem
• Common:

 React和Vue都会构建一个虚拟DOM并同步到真实DOM中，实现快速渲染
    轻量级
    响应式组件
    服务器端渲染
    易于集成路由工具，打包工具以及状态管理工具
    优秀的支持和社区

• the difference

name	View	React
Render	Rendering is the process of tracking dependent on each component of that change which component which rendered	Will re-render all subcomponents
the way	Use two-way data binding, template-driven development. (Template to better the function and layout split off)	React application is in contrast without using a template, but requires developers to create DOM in JavaScript With JSX.
status	Vue data is variable (mutated), change data, the page will be updated re-rendering. (Vue change in operating state is not only more compact, but it's actually a re-rendering system faster and more efficient than React.)	React in the state (state) is immutable (immutable), so you can not directly change it, but to use setState