Comparison of JavaScript frameworks-User Experience (7)

Enhance user experience (UE)

So far, this article has focused entirely on the benefits of using JavaScript frameworks and how to easily build interactive applications. However, on the other hand, each framework has its own attractive prospects, including user interface (UI) components and user experience (UE) enhancement, which requires a lot of effort.

This chapter discusses the user experience of the following frameworks: Prototype, jQuery, YUI, ExtJS, and MooTools.

Prototype

Prototype is a few that do not include ready-made UI components or improve user experience. Instead, it complies with all sister library script. aculo. us (Scripty2, which is the latest known version ). Script. aculo. us adds extensive support for Prototype effects and behaviors. These effects include highlight, deformation, folding, tremor, sliding, and expansion. Script. aculo. us also supports drag and drop, slide, real-time Ajax editing, and automatic prompts. Script. aculo. us delivers the design of controls (such as slider and autocomplete) to developers without providing standard skins.

JQuery

Unlike the Prototype library, jQuery's core includes some basic user experience. This is similar to some simple effects of Script. aculo. us, such as slide and fade. However, for more advanced user experience features, you need to download the jQuery UI library, including more effects, such as drag, scale, and sort. Unlike Script. aculo. us, jQuery UI also includes some small parts or components and provides developers with more attractive excuses, making development easier. Currently, these components include Accordion, Datepicker, Dialog, Progressbar, Slider, and Tabs. These components are completely themed, and jQuery UI has a wide range of themes that can be used to meet the needs of your own websites or network applications. Figure 1 shows the jQuery UI Datepicker component and the Apple topic.

Figure 1: jQuery UI Datepicker part

YUI

Because Prototype and jQuery do not include ready-made UI components, the YUI user interface library contains many. In addition to dragging and scaling, YUI 2 also includes automatic prompts, calendar, carousel, charts, dialog boxes, progress bars, Rich Text Editor (WYSIWYG), slide, tab switching, and tree components. At the time of writing this article, the components mentioned above are already included in YUI 3, and figure 2 is a sample of this series of components.

Figure 2: YUI complex application example

ExtJS

Like YUI, ExtJS includes a large number of ready-made components, the most powerful of which is the grid control. It supports inline editing, filtering, grouping, summarization, buffering, and data binding. ExtJS components have a professional appearance and are completely themed. Other components include tab switch, chart, form (dialog box), tree component, layout manager, enhanced form controls, toolbar, menu, drag and drop, and remote. If you want to find a rich set of RIA components, you must check the ExtJS website. This is just something that touched the surface of ExtJS. Figure 3 shows a desktop developed by ExtJS, which shows how the library is rich and distinctive.

Figure 3: ExtJS desktop application example

Mootools

Mootools is the same as Prototype and jQuery, and does not include user interface controls and ready-made components. Like jQuery, the optional effects are limited. It uses the MooTools. More. js extension to improve user experience. This extension is not a simple UE/UI plug-in. However, it also includes interesting accessories such as Array, Date, Hash, and String. In terms of improving user experience, MooTools. More. js supports drag and drop and some additional effects. These attachments also include Accordion, sorting tables, scrolling, prompts, and Ajax fine-tuning (Ajax spinner overlays ). Like script. aculo. us, You can design your own controls separately.

Reprint address: http://www.denisdeng.com /? P = 732

Address: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html