Front-End development UI Framework selection---help you solve your worries

In recent years, with the development of JQuery, EXT and CSS3, the front-end development framework, represented by Bootstrap, has sprung into view and is overwhelmed. Whether the desktop browser or mobile end of the emergence of a lot of excellent framework, greatly enriched the development of materials, but also facilitate the development of everyone. These frameworks have their own characteristics, this paper gives a preliminary introduction and comparison of these frameworks, hoping to provide a little help for everyone to choose the framework, but also for the follow-up detailed study of these frameworks. JavaScript & CSS

At present, the front-end framework mainly adopts the JAVASCRIPT+CSS mode, let's take a look at the two first. Pre-prepared JavaScript

The current mainstream JavaScript framework rankings, JQuery and EXT can be regarded as a leader, access to the user's wide acclaim. Some of the domestic framework is modeled after jQuery on JavaScript packaging, but the founder of these frameworks YUI still insist on using their own JavaScript class library.

jquery is currently the most used front-end JavaScript class library, according to preliminary statistics, the current share of jquery has more than 46%, it is a relatively lightweight class library, the operation of the DOM is also more convenient in place, the support of the effects and controls are many. At the same time, there are many extension projects based on jquery, including the jquery UI (some of the control and effect frameworks that jquery supports), jquery Mobile (the jquery framework on the move), Qunit (the test framework for JavaScript), Sizzle (CSS Selection engine). These additions make the JQuery framework more complete, and, even more exciting, these extensions are basically compatible with the current framework and can be used in a crossover, making front-end development richer.

Ext is the Sencha company respected JavaScript class library, compared to Jquery,ext JS more heavyweight, often several megabytes of files, making Ext online use of the time will worry about a lot. But, on the other hand, in Ext JS huge file behind is Ext JS powerful function. EXT JS control and function can be said to be powerful and gorgeous to the extent of people heinous. charts, menus, special effects, Ext JS Control Library is very rich, at the same time its interaction is very strong, independent of EXT JS can almost replace the control layer completed in customer interaction. Powerful function, rich control Library, the gorgeous effect also makes EXT JS become the development tool of intranet.

The framework originator YUI also has its own JavaScript class library, DOM operation and effect processing is also relatively convenient, functions and controls are complete, but compared to jQuery and Ext JS more moderate. With the decline of Yahoo!, YUI's voice is gradually under the framework of the new to drown, want to also let people regret.

In addition to the above three JavaScript libraries, as well as Dojo, Prototype, Mootools, and many other classes of libraries, because the framework discussed in this article more use the framework, so the other frameworks are not discussed. Pre-prepared CSS

With the introduction of the CSS3, the browser's support for the style of a more level, more outstanding effect. Frameworks have also developed a CSS3 based style to enrich the framework.

For CSS3, a number of precompiled extension frameworks are introduced, mainly less, Sass, and Compass (Compass is based on Sass extensions). You can easily make variable definitions, format references, function definitions, and so on, and have a lot of built-in effects. Let your CSS development efficiency upgrade a grade. According to Chris Coyier's comparison, Sass+compass almost thumped less. Interested readers can refer to http://css-tricks.com/sass-vs-less/for their own reference. Because Sass is developed in Ruby, it also requires the corresponding Ruby environment to compile files into CSS files.

comparison of front-end development frameworks at home and abroad

First of all, we first to the current domestic and foreign mainstream front-end development framework to do a basic understanding, and then make a direct comparison of them. Bootstrap

Bootstrap (http://www.bootcss.com) is the most popular desktop development framework, once launched by Twitter, unstoppable. Bootstrap mainly for the desktop side of the market, BOOTSTRAP3 proposed mobile priority, but the desktop side is still the main target market Bootstrap. Bootstrap is mainly based on jQuery for JavaScript processing, support less to do CSS extension. If you want to use Sass in the BOOTSTRAP framework, you need to add compatibility through Bootstrap-sass (Https://github.com/thomas-mcdonald/bootstrap-sass) project. Bootstrap framework in the layout, layout, control, special effects are very satisfying, have preset a rich effect, greatly facilitate the user development. In style settings, users also need to manually set up when downloading, configurable granularity is very fine, the corresponding also more cumbersome, not intuitive, need to Bootstrap very familiar with the configuration to be handy.

In browser compatibility, current Firefox, Chrome, Opera, Safari, ie8+ and other mainstream browser Bootstrap support. However, it is not particularly ideal for IE6 and IE7 support to display short boards in IE support. In the BOOTSTRAP3 even gave up the support of IE6, IE7. However, at home, according to CNZZ statistics, the current share of IE still reached 46.98%, while a large number of domestic browsers are also using IE core. This makes us always have scruples when using Bootstrap. On top of the BOOTSTRAP2, you can add support for IE6 through the Bsie project, but you can't support the full effect.

In terms of framework expansion, as Bootstrap is widely used, extensions and components are also rich, involving display components, compatibility, chart galleries, and more. Figure 1. Bootstrap layout and Effects sample jQuery UI

The jquery UI (http://jqueryui.com/) is an extension to the desktop side of the jquery project group, which includes rich controls and effects, and is seamlessly compatible with jquery. At the same time, the JQuery UI is preset in a variety of styles for users to choose from, avoiding sameness. If you are not satisfied with the style of the preset, you can also use the jquery UI visualization interface to configure the jquery UI display, which is convenient enough for high-end atmospheric grade. Figure 2. Example of a jQuery UI effect jQuery Mobile

jquery Mobile (http://jquerymobile.com) is an extension of the jquery project to the mobile end, and currently supports mainstream platforms such as IOS, Android, Windows Phone, Black Berry, and so on. Specific support scenarios can be found in http://jquerymobile.com/gbs/. In addition, JQuery Mobile is generous in terms of layout, controls, and effects. In style, similar to the JQuery UI, the effect of user visual configuration is supported in addition to the out-of-the-way style effects.

What's remarkable is that JQuery Mobile is also seamlessly connected to Codiqa, which allows users to design the interface and generate code directly by dragging and dropping. Figure 3. Example of a jQuery Mobile effect Sencha Ext JS

Sencha Ext JS (Http://www.sencha.com/products/extjs) is a Sencha based on the development of Ext JS Front-End framework, the content is extremely rich, control, special effects and other support is very rich, tables, drawings, reports, layout, Even data connections are all-encompassing. Only you can not imagine, no it can not be done. Based on Sass and Compass, it makes it more convenient for users to modify the format and make special effects. In addition, Sencha has a wealth of product lines, Sencha Desktop Packager allows your application to have desktop applications, Sencha animator based on CSS3 more user-friendly to the production of special effects, not only support the desktop side, mobile end is a cinch. In Sencha's view, playing with animator is easy to win. Sencha space is based on HTML5, providing a tool for making cross-platform applications. At the same time Sencha Ext JS support for the mainstream browser is also very ideal.

Sencha Ext JS has dazzling brilliance, but there is always a shadow behind the light. In addition to the previous mentioned Ext JS too heavyweight, commercialization is the Sencha of another sword. Help Sencha to cut through the road, also put a lot of code farmers Chop under the horse. Sencha stipulates that all commercial applications need to be paid for. In addition, Sencha ancillary products are all charged, otherwise it can only be a trial version. The ancillary products here, in fact, include all the products mentioned above. Figure 4. Sencha Ext JS Effect Example Dojo

At present the only can with Sencha Ext JS a higher frame is only Dojo (http://dojotoolkit.org). With IBM, VMWare and many other thighs, Dojo's smiles are all the more striking. The Dojo project is also very rich in product lines and features. First, Dojo has its own DOM parser Nano, which is the kernel of DOM parsing and processing. In addition, the Dojo WEB Framework has a wealth of layouts, layouts, controls, and effects, as well as extended support for multiple languages and graphs, and supports the operation of maps. You can view its demo (http://demos.dojotoolkit.org/demos/), and the effect of Ext JS comparison. In addition, Dojo also has its own graphical design and development tool Maqetta, which can be designed by dragging and dragging. Dojo's style settings are not specified while downloading, but are implemented by referencing different CSS formats.

Dojo is a bit more lightweight than jQuery, but it's lighter than Ext JS, at least on file size. In addition, Dojo also has its own CDN mechanism, as long as the configuration, you can carry out the Dojo file CDN. With the support of ibm,oracle and other big guys, Dojo has also been very good at supporting existing frameworks such as Spring. Figure 6. Dojo's effects example Dojo Mobile

Dojo Mobile (Http://dojotoolkit.org/features/mobile) is a mobile-end framework launched by Dojo, and it's a very good performance. In the layout, control, special effects have been a lot of effort. and support the style set that matches the platform used, if you do not like also can refer to different CSS files to achieve different effects.

In addition to being able to use on mobile browsers, Dojo Mobile also supports seamless connectivity with PHONEGAP, which enables the development of mobile app applications via dojo Mobile. It also has good responsiveness (different display on widescreen and narrow screen). Figure 7. Examples of Dojo Mobile's effects on the IPhone

YUI

YUI (http://yuilibrary.com) as the originator of the open source front-end framework, the skill is very deep in the framework. Has its own core analytic DOM framework, and in the special effects, animation, graphics and other aspects are rich in the expansion, and through YQL direct access to Yahoo. of data. There is a good performance in the features that users often use.

Compared with the flexible syntax of jQuery, YUI appears more formal, in the code organization, structure and mode are more exquisite, more reflect the rigor of the engineers. At the same time Yui also has a wealth of product lines, with the test framework Yuitest, document generation framework Yuidoc, the automatic construction of the framework YUI build, to meet the needs of all aspects of project development. With the decline of Yahoo!, YUI also feel gradually into twilight, but as a fairly rigorous complete front frame originator, enough seconds to kill other. Figure 9. YUI's effect example

Kissy

Kissy (http://docs.kissyui.com) is the development of Ali Group's front-end framework, at present in Taobao, a Amoy network, such as the Ali Department of the Web site has been a lot of applications. The Kissy framework imitates jQuery to write its own kernel Kissy core, for DOM parsing, Ajax processing, and so on. At the same time, there are rich controls, and achieve a number of animation effects and effects. Similarly, the shadow of a foreign frame such as Bootstrap can be seen in Kissy controls. In addition, the Kissy ABC Project tool can help users automate builds, and there are many extension components that are easy for users to use.

It should be said that Kissy is currently the best front-end framework for domestic development, in the actual use has also been tested, but compared with the mature framework of foreign countries still have a certain gap. Figure 11. Examples of kissy effects kissy Mobile

Kissy Mobile (http://mobile.kissyui.com) is a mobile framework launched by Kissy to develop frameworks that can be used both in mobile browsers and mobile applications, but with less content and fewer controls and special effects, Nor does it have a responsive effect. Figure 12. Kissy Mobile Effects Sample Qwrap

Qwrap (http://www.qwrap.com/), a JavaScript framework launched by the Youa team, is now being paid 360 and is widely used in 360 of products. Qwrap integrated JQuery, Prototype, YUI features, the JavaScript is encapsulated. However, if you want to qwrap into a front-end development framework is still a bit far-fetched, because in addition to the JavaScript class library, Qwrap Basic, is still in the development phase. Tangram

Tangram (http://tangram.baidu.com) is another JavaScript framework launched by Baidu, is widely used in the Baidu Department of Products, and qwrap similar, Tangram can only be regarded as a JavaScript framework, JavaScript has done a lot of expansion, but as a front-end development framework is still relatively thin. Based on this, Baidu company continued to launch two Tangram based projects, Magic and Baidu Template. The Magic project extends control and effects based on Tangram, adding 10 new controls. The Baidu Template is more for the development of the mobile end of the expansion, currently for most mainstream mobile devices and operating systems are supported.

react React is a subversive front-office development framework for Facebook Open source, official station: http://facebook.github.io/react/index.html

React is a new idea of the front-end UI framework that completely takes over the most complex local update in UI development, is good at ensuring high performance in complex scenarios, and introduces component-based development ideas to re-examine the composition of the UI from another perspective. This approach will not only improve development efficiency, but also make code easier to understand, maintain, and test. Facebook in such a way will precipitate years of front-end development experience and technology accumulation completely open source, it is worth all front-end developers to learn from.

The article is quoted separately from: http://www.ibm.com/developerworks/cn/web/1404_wangfx_jsframeworks/

Http://www.infoq.com/cn/articles/subversion-front-end-ui-development-framework-react