Top 5 jQuery UI Alternatives

Ivaylo Gerchev
Tweet

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
  • Charts
  • Splitter/Layout/Panel
  • File Uploader
  • RTL Support
  • Validation
  • Globalization/Localization

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.

Pros

  • 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

Cons

  • 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.

ZinoUI

ZinoUI is a compact, jQuery-based, UI library. It consist of about 30 WAI-ARIA accessible widgets and interactions. It’s a great set of cross-platform, themable components leveraging on best practices and advanced JavaScript technics.

Some of the interesting components and features include:

  • JS Charting widget – a JavaScript chart and graph library for creating interactive and accessible data visualizations.
  • 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.
  • DataSource – work easily with live data sets, including XML, JSON and local JavaScript array.
  • PHP Server Wrappers – if you prefer using PHP rather than JavaScript then these helpers will come in handy. They allow you to use ZinoUI widgets in any PHP framework, application or document.
  • 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.

jQuery EasyUI

jQuery EasyUI provides easy to use components for building modern, interactive, cross-browser JavaScript applications. It’s a full collection of feature-rich widgets and interactions, built on top of popular jQuery core and HTML5. Users can use them all together, or just use the components they want.

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)
  • Localization

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.

jQWidgets

jQWidgets is a comprehensive framework based on jQuery for building professional web applications and mobile apps. It’s built entirely on open standards and technologies like jQuery, HTML5, CSS, JavaScript, and SVG. jQWidgets includes more than 30 WAI-ARIA accessible UI components built from scratch based on the jQWidgets Framework. It’s not a modified version of the jQuery UI toolkit and doesn’t have any dependencies on it.

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.
  • jqxColorPicker
  • 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…

Highlights:

  • RTL Support
  • Search-engine friendly
  • Easy PHP & ASP .NET integration
  • Internationalization
  • 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

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.
  • MultiSelect
  • Calendar – inline calendar widget.
  • Editor – edit HTML on-the-fly.
  • Scheduler – time and tasks organizing widget.
  • DataSource
  • Templates
  • MVVM support – Kendo UI provides a high-performance Model-View-ViewModel (MVVM) framework, which allows you to manage complex HTML and JavaScript UIs. It’s not required, and you can always use your favorite libraries – like BackboneJS – with Kendo UI, but Kendo UI MVVM provides a high-performance, supported binding option right out-of-the-box.
  • Effects – a set of basic effects.
  • RTL Support
  • Validation
  • Globalization

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 provide a wide range of server-side helpers. ASP.NET, PHP and JSP developers can build modern HTML5 apps without need to mess with JavaScript. They simply code in their preferred server-side language, and Kendo UI renders the JavaScript needed to power its widgets and framework features.

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

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
  • Editor
  • DatePager
  • EventsCalendar
  • Gallery
  • Lightbox
  • Ribbon
  • SuperPanel
  • Video widget
  • Wizard
  • Animation
  • 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.

Style your own forms from the ground up with HTML5 and CSS3 – Learnable’s CSS forms course is here, and it’s free to enroll with a trial!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Kalpesh Panchal

    Hi ivaylo,

    Thanks for sharing but I feel there are many alternatives out there that can solve your purpose for the same.
    I’ve also tried TweenLite, which is amazingly fast.
    http://www.kalpeshpanchal.co.nf

  • Anonymous

    Other alternative: http://www.primefaces.org/primeui/ based in jquery UI, theme roller , 35 Widgets and Apache License

    • Ivaylo Gerchev

      Thanks

  • Jack Oliver

    All of these look horrible.

    • Ivaylo Gerchev

      Hi Jack,

      What a strong judgement!
      Can you give some arguments about your opinion?
      And also, I’m just curious, what you consider as a good jQuery UI alternatives?
      Please, give us some examples.

      Thanks

  • Jack Oliver

    I mean in functionality terms, they’re all great. But from a UI basis, I feel they’re all have a very 2000-something corporate feel. With things such as Bootstrap and Foundation cutting such ground in terms of a front-end framework, I can’t help but feel independent UI libraries that don’t exist on that level of complexity and design will just fade out.

    I guess I’d just love to see a UI library that looks great, rather than corporate and outdated (reminiscent of the original TinyMCE)

  • alex.barylski

    No mention of Sench extJS? It’s quite incredible, or were requirements to be a drop-in replacement for jQUI?

    • Ivaylo Gerchev

      By saying “jQuery UI Alternatives” in the title I mean only widgets libraries which are based on jQuery.
      Ext JS is pure JavaScript application framework with no dependencies of external libraries.

  • Anonymous

    Awesome collection , searching for some lightweight options and found this.
    Thanks for the kits