Often using UI widget library for our projects is a better choice instead of collecting random jQuery plugins from all over the Web. In fact, most jQuery widgets don’t integrate well with each other. They can lack features, contain bugs and require a lot of time to properly fit into a real project.
On the other hand, UI libraries provide professionally developed and feature-rich widgets that seamlessly integrate with each other, delivering a consistent, high quality look and feel. In addition, all widgets are tested on multiple devices and browsers to ensure maximum compatibility.
Today, the most popular jQuery-based widget library is the official jQuery UI project. It’s free to use and has nice set of useful components. But there is one problem though – it evolves too slow and still has many “missing” widgets and features required in the modern web development. You can see the most notable ones listed below:
- Data Grid
- Tree View
- Combo widgets
- Color Picker
- Forms widgets
- File Uploader
- RTL Support
It seems that jQuery UI falls far behind the ever growing user’s needs. Actually, it can be suitable only for quite basic stuff. If we need something more advanced and feature-rich for our projects we have to find better alternatives. And this is exactly what we’re going to do in this article. We’re going to explore the most popular and powerful jQuery-based UI libraries/frameworks. But before we move on, let’s see the pros and cons of using such alternatives.
- Open Source license
- Professional support (commercial license only)
- Combination of widgets and some kind of MV* framework (built-in or external)
- Integration with technologies like PHP and ASP.NET
- Same look and feel across all widgets and components
- Theme support
- Common code base
- Feature-rich widgets
- New features added regularly
- Compatibility across different browsers, platforms and devices
- License – you need to obtain commercial license if you plan to use a particular library for profits
- Using such feature-rich libraries can be overwhelming for simple projects
As you can see, if your project require complex functionality, then it’s much better to use some of the following widgets libraries instead of trying to unify inconsistent plugins collected from here and there.
Important note: In this article I’m not going against jQuery UI. It’s a great library and it definitely has its fans and followers. Please, don’t get me wrong. I’m just saying that it’s not feature-rich enough for more complex and ambitious projects. That’s all. And also, don’t pay too much attention to the order in this list. There is some kind of gradation in terms of complexity, but this is how I feel it has to be. Your opinion can differs from mine. If so, no problem. In fact, any of these libraries can be on first place depending on the requirements of your project. By saying “Top 5″ I mean that all of them, as a whole, are the best and which one you will choose for your project is all about your requirements.
Some of the interesting components and features include:
- SVG Graph Tool – a micro-library for drawing two-dimensional vector graphics.
- Canvas micro-library – an utility for working with HTML5 Canvas element. Create 2D shapes, text and bitmap images on-the-fly.
- DataTable, TreeView, Slideshow, upload functionality, and more.
ZinoUI adopts various W3C recommendations such as WAI-ARIA, SVG and HTML5 Canvas. It is supported by all major browsers and utilize HTML5 features with graceful fallback if they are not supported. ZinoUI web site provides complete API documentation plus examples for each component.
Some of the weaknesses of this library include missing RTL support, validation and globalization features. Also lack of theme support – there are only four themes provided and no theme builder.
Here are some components and features:
- Panel, Layout, Window – widgets for UI design
- DataGrid, PropertyGrid
- Tree, TreeGrid
- ComboGrid, ComboTree – advanced combo widgets
- Form, SearchBox – widgets for working with forms
- Messager – notifications widget
- ValidateBox – widget with validation functionality
- RTL support (via extension)
jQuery EasyUI has also nice set of ready-to-use themes and a theme builder.
As disadvantages we can mention the missing charting and upload functionality
On jQuery EasyUI web site you can find many tutorials and demos along with the complete API documentation. Also there are some nice extensions you may find useful such as Editable DataGrid, Editable TreeView, RTL support, and more.
Components and features:
- jqxScrollView – a widget for content sliding.
- jqxDocking – widget which allows you to manage multiple windows.
- jqxTreeMap – an unique widget for displaying hierarchical data as a set of nested rectangles.
- jqxListMenu – a widget for making nested list.
- jqxScrollBar – a scroll bar widget, which can turn any boring/ugly scroll bar into a beautiful one.
- jqxValidator – a validation utility.
- jqxDataAdapter – a jQuery plug-in which simplifies data binding, data formatting and data operations.
- jqxResponse – a plug-in which provides information about the OS, Browser, View Port, Device Type and common features of the Device like Touch Support, Size, SVG, Canvas and VML support.
- and more…
- RTL Support
- Search-engine friendly
- Easy PHP & ASP .NET integration
- MVVM support (integration with KnockoutJS)
- Web Standards Compliant
- Optimized for Performance. jQWidgets is small in size, highly modular and extensible. Individual widgets and themes can be loaded on demand to optimize the download time and save memory.
- jQWidgets is evolving quickly. New widgets and features are added regularly
- Platform, browser and device independency and compatibility. No need to spend time testing on different devices and browsers. The jQWidgets framework automatically detects the device type, capabilities and browser version, and adjusts the internal behavior for optimal rendering and best user experience.
jQWidgets comes with multiple built-in ready to use and cross-browser compatible themes. The Theme Builder is a powerful online tool that helps you to quickly create themes for the user interface of your application based on jQWidgets. Moreover you can import colors from existing theme, tweak them and save the result as a new theme.
Multiple code samples are provided to accelerate your learning. All demos come with full source code and are presented in multiple different themes. There is also complete documentation and API reference for each widgets.
Kendo UI is a modern, feature-rich framework for web and mobile app development. It consist of three powerful sets of widgets and interactions which can be used separately or combined into one single package.
Kendo UI Web
This set contains everything you need to build modern web site. It’s a combination from high-end widgets and powerful framework.
Some components and features:
- ListView – different views for your lists.
- Calendar – inline calendar widget.
- Editor – edit HTML on-the-fly.
- Scheduler – time and tasks organizing widget.
- Effects – a set of basic effects.
- RTL Support
Kendo UI Mobile
Kendo UI Mobile is an advanced mobile framework for building native-like mobile apps and sites. It’s packed with easy-to-use jQuery-based widgets and built-in rich components and features like kinetic scrolling and automatic layout system. It supports iOS, Android, Blackbery and WP8.
Kendo UI DataViz
With Kendo UI DataViz you can create interactive data visualization in no time. It uses SVG, and brings you a whole collection of beautiful UI widgets, including jQuery charts, gauges, barcodes and QR codes. Kendo UI DataViz uses automatic hardware acceleration for all animations and rendering, maximizing performance and minimizing the impact on CPU resources.
Kendo UI offers not only many, ready-to-use themes but also advanced theme builders for each individual set.
Kendo UI has comprehensive documentation including API reference, Getting Started section, How Do I? recipes, tutorials and demos. You can also use Kendo UI Dojo – an interactive environment designed to help you get up and running with Kendo UI quickly through guided tutorials and live, executable samples.
Wijmo is a kit of highly advanced widgets based on jQuery UI and jQuery Mobile. Wijmo widgets are optimized for client-side web development and utilize the power of jQuery for superior performance and ease of use. All Wijmo widgets come equipped with over 30 themes and support ThemeRoller.
Some features and components:
- Integration with KnockoutJS, AngularJS, Breeze.js
- RTL Support
- Charts and gauges
- Video widget
- Localization and Globalization
Wijmo provide one set of widgets, for both mobile and web. It leverage on the so-called Adaptive Widget framework. This means that all widgets you use will automatically adapt to jQuery UI or jQuery Mobile environments. Simply by swapping out jQuery UI for jQuery Mobile, you can easily convert your widgets to be mobile without changing a single line of code!
Wijmo has a comprehensive User Guide and API reference for each widget. There are also many demos and examples.