Top 5 jQuery UI Alternatives

Original author: Simon Codrington
  • Transfer
Calendars, sliders, lists, tools for building graphs and charts - all these and many other components of user interfaces are used in countless web projects. A programmer, when he needs something like this, can go in two ways. The first is to create the necessary interface element yourself, the second way is to take advantage of existing developments in this area.

The main disadvantage of the independent development of UI components is the high cost of time and effort. Investing in such a business is only worth it when it comes to something completely unique. When all you need is simple, standard elements, libraries and frameworks for developing user interfaces are used. They simplify and speed up the work. To integrate controls from such "collections" into a project, you only need to configure them - the procedure is usually much simpler than developing your own components.

One of the most popular and widely used interface development frameworks is jQuery UI. This is an open source project built on the basis of jQuery and is an extensive set of widgets, visual effects and themes. You can use jQuery UI both in the form of a complete set of components, and choosing only what you need. The use of such collections of controls allows you to maintain a uniform appearance of interfaces, makes it possible to quickly and easily work on working solutions.

Although jQuery functions perfectly, and there is no doubt in the reliability of this library, there are other frameworks that can offer high-quality controls to the web solution developer, and, as a rule, some additional features that are not in jQuery UI. We’ll talk about these decisions today.

Kendo ui


The paid
Kendo UI
framework includes more than 70 components, the use of which accelerates the development process. If you characterize these components in a few words, then we can say that they are highly responsive, suitable for adaptive layout, can be fine-tuned and stylized.


An Interface Built Using Kendo UI

Let's look at some of the architecture and uses of Kendo UI.

First, it’s worth saying that Kendo UI was created by Telerik from scratch, with special attention to the speed of components. Unlike some other frameworks that are based on jQuery, Kendo UI is created only using JavaScript. As a result, its components work fine even on mobile devices.

Speaking about mobile versions of web solutions, it is worth noting that in this area Kendo UI is especially good. Since the components are built taking into account the needs of mobile development, the interfaces created on their basis are easily adapted to various devices used to work with them, while neither functionality nor usability is lost. Most widgets, in mobile mode, accordingly change the appearance and built-in controls. This is very useful both for the general perception of interfaces and for the convenience of working with them. For example, the Slider component, which automatically adjusts to the screen size.


Kendo UI Slider Component

Well thought out and practical use of Kendo UI. So, the developer can either configure the components using JavaScript on the client side, or configure them on the server (say, if the web page code is generated using PHP). In addition to using Kendo UI for web development, there are variations of it designed for Android and iOS applications.

Another interesting feature of Kendo UI is its integration with Angular JS. We are talking about the same fast and convenient components written in JavaScript, ready to work with Angular. Therefore, if you use Angular and need high-quality controls, we believe that Kendo UI is one of the options worthy of your attention.


Kendo UI for Angular

It's worth noting that Kendo UI ispaid product. Before us is a commercial library, the cost of a license for which can amount to thousands of dollars. This alone may be enough to scare some developers away. However, other factors influence the decision to choose a suitable framework, in addition to its price. We believe that if the capabilities and high quality of Kendo UI implementation meet the needs of a certain project or projects, and the price is acceptable for the developer, Kendo UI can be considered a good investment.

Webix


Paid framework, there is a free version Webix

framework uses some components from jQuery UI (calendars, Accordion design elements that allow you to arrange data in the form of "harmonica", dialog boxes and others). At the same time, he extends jQuery, giving the developer more options in creating interfaces. Webix is ​​a universal framework focused on the usual needs of interface development, in particular, it is data visualization and editing, creating layouts, and organizing navigation. Webix Webix has impressive documentation. Reference guides for their APIs have been prepared for all controls, containing descriptions of methods, properties, and events. In addition, there are examples of most elements that show how they work.






High-quality documentation, in which the serious forces of the project team are invested, is a very important factor that you should pay attention to when choosing a framework.


Description of the Calendar component

It is worth mentioning that in addition to high-quality documentation, Webix has a regularly updated blog with fresh articles. Among these materials are useful tips, examples of the use of components. Here, for example, is a good post on accessibility of interface components to people with disabilities. There are many frameworks, and those of them, on which sensible materials are constantly published, deserve an additional "plus".

Webix provides both free and paid access to its development. The free version has most of what you need for regular work, including charts , lists , tree lists , calendars .
In the paid version, you can find additional components, for example, a multiple-choice list , and an element for selecting a date range. All this is well documented too.

Another feature of the paid version of Webix is ​​a number of carefully developed complex solutions, such as a scheduler .


Webix Mobile Scheduler

These additional paid tools make it possible to get rid of the need for self-assembly and adjustment of such solutions, allowing you to focus on the functionality required by a specific project and on the appearance of the application.

In general, the free version of Webix is ​​a complete solution with excellent functionality. Paying for some components seems justified. If you are interested in this framework, and you are trying to understand whether it makes sense to pay for additional components and functionality, see their widget documentation .

In summary, you can say that if you are looking for a well-documented interface development solution, most of which is free, Webix may be exactly what you need.

JQWidgets


Paid framework, free for non-commercial use

JQWidgets is based on jQuery and is designed to give developers the opportunity to create fast, responsive and reliable user interface components. JQWidgets components use jQuery in interactive, dynamic, and highly customizable widgets.


JQWidgets

When you select a new framework and begin to study it, it is very useful to have a way to communicate with its developers in order to ask questions and better understand how everything works. The jQWidgets project has a convenient, and, apparently, a forum regularly visited by the administration. In addition to the forum, there is a fairly frequently updated blog . There you can find articles, release notes, and other useful materials.


JQWidgets Forum

Documentation is one of the foundations of any framework, and jQWidgets is no exception. On the documentation pages , among other things, you can find information about how components work, code examples, live demos. Here, for example, is the documentation for a jqxPopover widget that implements a popup.
In addition, it is worth mentioning that jQWidgets supports React , Angular, and even ASP.NET components . If you work with one of these technologies, jQWidgets may very well help save a lot of time.


Angular Components

It's nice to see that jQWidgets supports these common frameworks. You have a choice - either use jQWidgets as a standalone solution, or in one of the alternative forms, say, for Angular. Both that and another - it is equally good what to choose - depends only on the needs of the project.

JQWidgets is free for non-commercial use. It also provides several options for paid licenses, which can not be avoided if it is planned to create commercial projects on its basis. The difference in license costs is based on the level of support provided and the size of the company. For example, if you are an independent developer, the cheapest license will suit you. Web studios have to spend more.

Easyui


Paid framework, free for non-commercial use
EasyUI is a collection of advanced jQuery widgets used to develop modern, interactive, responsive web applications and sites. Using EasyUI, you can create interface elements both based on HTML markup, and programmatically using JavaScript.


EasyUI

Compared to the other frameworks discussed here, the standard EasyUI design may seem strange. Some elements look out of date, as if they were designed the year so in 2010.

Although such a styling may at first glance disappoint, EasyUI is equipped with a wonderful interactive editor.one that allows you to control font sizes, text color, background, layout, and many other widget properties. In addition, it gives direct access to CSS, which allows you to experiment and create themes that fully take into account the needs of a particular project.

Here, for example, is what the Material Design theme looks like.


Stylization of elements in EasyUI.

The project has a simple and clearly organized documentation. On the one hand - a list of elements, on the other - their descriptions, which include screenshots with examples, code samples, descriptions of properties, methods and events. Perhaps the main drawback of this documentation is the lack of working examples on the element description pages.

The aforementioned drawback is somewhat offset by the fact that in the Demo sectionYou can find links to live examples of using controls. For example, the set of examples for the Panel Control element , which is a container element, demonstrates various options for its practical use. Here you can see, for example, panels with custom controls, nested panels, an example of loading data into a panel.


EasyUI, Demo section

For non-commercial projects, EasyUI is free, for everything else you will have to buy a license. You can find the price on the contact details page , it looks quite adequate (compared to some of the expensive options of other frameworks).

The EasyUI library, in general, is a good starting point for developing interfaces. It offers some advanced features that can be expected from higher-end solutions. Among them is a fairly active forum and a set of extensions .

As a result, we have a solid framework in front of us, and, in addition to the fact that the project website and documentation look a bit dated, it can be considered an interesting option for those who are looking for a good replacement for jQuery UI.

Wijmo


The
Wijmo Paid Framework is a set of custom components written in TypeScript designed to create fast, responsive, and extensible controls. Wijmo provides a wide range of components and supports several JS frameworks such as React, Angular, and Vue.


Wijmo

Wijmo allows you to work with many controls, most of which are focused on visualization and data entry. Among them are charts, sensors, data input tools, grids. While other frameworks provide sets of relatively simple elements, such as dialog boxes or container elements, the creators of Wijmo, obviously, were guided by more ambitious goals, focusing on an integrated approach to working with data.


Wijmo controls

Interestingly, the developers support both the latest version of the framework - Wijmo 5, and the obsolete - Wijmo 3. The Wijmo 5 version is built on the basis of more modern standards, and, as a result, does not work in IE8. This is where the older version, which is based on jQuery, comes in handy, which means it will even work on IE6. In general, this is a trifle, but a trifle is pleasant.

It should be noted that the documentation for Wijmo, as well as the project site, seem confusing. So, links to descriptions of controls can be found on the documentation page , however, everything is not very conveniently arranged. For example, if you are interested in details about the charting module, you will find yourself at suchpage. The main disadvantage of the documentation is that it, providing detailed information about classes and interfaces, does not include instructions on the practical implementation of elements with illustrations, code examples, good descriptions of what should happen.

The project site has an Explorer section that shows the controls in action and allows you to experiment with the settings. The tool is interesting, it makes it possible to understand how these or other Wijmo elements look and work.

Here, for example, looks like a line chart created using the FlexСhart component.


FlexChart Component

The other frameworks discussed here have a more convenient presentation of the documentation. Usually there are either separate pages with a detailed description of each element, or a section with subsections devoted to the component itself, code examples and descriptions of its application.

Good documentation is one of the important criteria for choosing a framework. Here, for example, if you want to see the graphing module in action (and look at the code examples), you will have to return to the page with examples and find FlexChart example . It’s worth mentioning that the company’s blog looks quite lively. It publishes useful tips, stories about the features of the system and other materials. In general, the blog left a very favorable impression.


FlexChart Component Materials

If you ignore the flaws in the documentation, the Wijmo controls themselves are quite interesting. Each of them allows you to customize how it will be displayed, provides callback functions to implement its own functionality, and supports styling.

Wijmo provides a trial period for its products (like Kendo), but a license is required for their commercial use. Data on the cost of various options for the framework can be found on the corresponding page . The price depends on which additional components are needed, in addition, you can purchase only the main set of Wijmo controls. However, the controls for .NET / Xamarin are only available with the purchase of an expensive volume license.

Since Wijmo is mainly focused on data visualization, it is difficult to refuse to compare it with other similar libraries, for example, HighCharts , which is probably one of the best solutions for building graphs and charts.

Summary


There are many frameworks that can be a great replacement for jQuery UI, or play the role of add-ons. Most of them, like the ones we reviewed above, are paid. When choosing a freeware solution, you rely on the experience of a certain community. Staying on a commercial product, you pay for the experience of the company, for the opportunity to use its best practices, for technical support.

Is a paid product worth the money that they ask for it, provided that it has features that free analogues do not have? This question can only be solved by a specific developer as applied to specific tasks, comparing the necessary features and controls with the price of a suitable framework, taking into account the time and effort needed to create something of your own or to finalize a free solution.

There are other libraries for developing user interfaces. Some of them can be found on alternativeto.net , in the list of jQuery UI alternatives. It is possible that you, on the way to finding the right tool, decide to experiment with them.

Dear readers! If you know worthy alternatives to jQuery UI that are not in our review, we will be grateful for the story about them.

Also popular now: