In 2016 the web has long transformed into something way more than just websites. Many companies have long moved from desktop software to web applications for everyday work – be it a CRM, an ERP, analytics or just an administration panel for some sort of content.
The benefits for companies are obvious: there are few restrictions on the client hardware and there is no software to manage, install or update on every client. The user just opens his browser and the application is ready to use. This is why the future belongs to web applications from my point of view.
However, building a full-size web application that could compete with traditional desktop software is a lot of work. Here are the main challenges:
- These kinds of applications will generally need to react on different types of events in real time and load data in background
- The users expect rich user interface controls (widgets) – just like the ones they are accustomed to on desktop applications, or even better ones
- The performance of desktop applications is often higher, because they do not need to load libraries and other resources from the internet for every action. Additionally, they are mostly written in a compilable programming language, while web apps are mostly based on script, which need to get interpreted first. Despite of the fact, that modern browsers include a lot of different engines, that theoretically allow them to reach fantastic performance, there’s still a long way to go to the level of precompiled programs. However, this situations is likely to change in the future.
- The large number of different browsers makes up another problem. Each browser has its own features and peculiarities and a different set of supported standards.
In theory, you could build a desktop-like application in HTML from scratch, make it come alive with JavaScript and style it with CSS. But then you would need to test and fine tune your GUI in an entire zoo of browsers, inspect the performance on real data, test it on different data constellations, etc. It will take a lot of time.
There is a much more modern and efficient approach: You could use Bootstrap, Uikit, Semantic UI or another CSS framework to quickly build the UI. The interaction with data can be implemented with Angular, Backbone, React or Knockout. But then you would probably need another 5-10 domain specific libraries, which would need to be persuaded to play well with each other. And at the end you would get your own state-of-the-art, fine-tuned modern web application. That is, if you can handle all this zoo of cutting-edge technology, of course.
Thankfully, there is a compromise: you can use an all-included library or framework with a large set of ready-to-use widgets and prebuilt data integration. In my opinion, it is the ideal approach to building mid-scale web applications. Most of those frameworks are pretty well developed and do not require you to reinvent the wheel. They come in many different technological flavors: some are completely self-sufficient, others are simply sets of useful widgets and are meant to be used “on top” of the base frameworks mentioned in the above abstract.
Astonishingly, only 5-6 JavaScript UI frameworks are really well known, although there are a lot more options to choose from. I think, this is not fair, which is why I came up with the Idea of writing a big review of all those frameworks, which I find well presentable.
Disclaimer
My aim was building a full-featured administration panel, working as a single page application (SPA). Many UI libraries are built for websites, but in my review I will focus on their suitability for rich web applications. For each UI framework there will be a brief description, a demo-application and a rating of flexibility, speed of development, the size and the resource consumption of the demo, etc. The framework’s possibilities to build mobile applications will be part of the rating too, because of the current trend towards building mobile apps with HTML and JavaScript.
The speed of development relates here to the difficulty of creating a single page application from scratch: it is a blend of soft facts like the time to study the code structure, the availability (or absence) of typical widgets, the time I needed to write the demo code, convenience of the docs, the time spent on fixing bugs or unexpected behavior, and so on. Thus, don’t be irritated by the low dev-speed score of jQuery UI – it simply lacks many widgets and features that are important to me, so I had to find a lot of substitutes and workarounds.
I did not aim to write clean stable code, so the demos are supplied “as-is”. They have been written very quickly and are probably pretty buggy. Dear gurus, do not take this to heart, because the search for a suitable solution in the context of a certain framework needs a lot of time and mostly deep understanding of the respective libraries.
jQuery UI
Demo single page app with jQuery UI
jQuery UI is, perhaps, the most well-known and one of the most simple JavaScript UI libraries. It is very good for websites, but building an admin panel with it is a pain – mainly because it only contains 14 widgets. However, thanks to its popularity, many missing UI elements can be found on the internet. So it’s quite possible to create a “Frankenstein”-type rich jQuery UI application with a lot of add-ons. And it’s not only theory - I’ve seen a couple of those Frankenstein’s in my carrier.
| License | MIT |
| Number of widgets | 14 |
| Size of demo app | 5.00 KB |
| Getting started | Very easy |
| Development speed | Very slow |
| Mobile widgets | Use jQuery mobile |
| Flexibility and features | 1 of 10 |
| Programming languages | HTML+JS |
| Memory consumption (demo) | 4 - 9 MB |
| Time to load (demo) | 1.08 - 1.49 s. |
| Time to develop demo | 2.5 h |
Conclusion: jQuery UI is a very convenient way to build a website, but it is simply not enough for a full-size single page application. On the other hand it’s really free.
Zino UI
Demo single page app with Zino UI
Zino UI is another UI library based on jQuery. If you have worked with jQuery UI, learning it will not be a problem: most methods are named identically with the prefix “zino”. In principle, it is possible to create a rich web application or admin panel with pure Zino UI – it contains all components needed. Additionally, the library has built-in support for SVG and can create charts (about 30 types of charts). If you don’t want to mess around with HTML and JS, the library offers a PHP class right out of the box, which makes it easy to create the UI with PHP. At the time of writing this library showed best performance of all frameworks in this review and in the upcoming second part. If you are looking for a framework for a commercial project, pay attention to the extremely low price.
| License | Commercial (19$), GPL |
| Number of widgets | 25 |
| Size of demo app | 7.83 KB |
| Getting started | Very easy |
| Development speed | Fast |
| Mobile widgets | No |
| Flexibility and features | 3 of 10 |
| Programming languages | HTML+JS, PHP |
| Memory consumption (demo) | 3 - 5 MB |
| Time to load (demo) | 0.73 - 0.83 s. |
| Time to develop demo | 1.2 h |
Conclusion: Zino UI is very fast and has built-in support for charting. It is a good replacement for jQuery UI because of syntax similarities.
jQuery Easy UI
Demo single page app with jQuery Easy UI
jQuery Easy UI is a very good, but, somehow, not really well known project. It will be especially easy to start with for novice users. In theory, you can build a working single page application without writing a single line of actual JavaScript code. The entire configuration of widgets can be done through data-attributes of HTML elements alternatively to instantiating widgets via JavaScript.
After having worked with jEasyUI for quite a long time, my personal opinion is that it is easy to learn and comfortable to use. However, for large projects you have to write quite a lot of additional code to achieve the desired behavior, which larger frameworks might support out of the box by setting two or three options.
jEasyUI comes with 52 widgets. There is a separate set of widgets for mobile web applications. There is a theme builder on their official website. For Java-developers there is a possibility to use a DWR Loader. For PHP fans there is a community-driven integration component for the Yii framework.
On the downside, I have to mention, that some methods are completely undocumented. In general, the library appears to be a little buggy to me. Sometimes I had to take a deep dive into the source code to fix odd behavior and that is really no fun because large parts of the code are obfuscated for some reason.
| License | Commercial (499$), proprietary free license |
| Number of widgets | 52 |
| Size of demo app | 5.00 KB |
| Getting started | Very easy |
| Development speed | Very fast in small projects, middle for larger apps |
| Mobile widgets | 16 |
| Flexibility and features | 4 of 10 |
| Programming languages | HTML, HTML+JS, Java, PHP (Yii) |
| Memory consumption (demo) | 4.4 - 9 MB |
| Time to load (demo) | 1.4 - 1.8 s. |
| Time to develop demo | 0.5 h |
Conclusion: jQuery EasyUI is a small but very powerful library. It is well suitable for beginners.
jQWidgets
Demo single page app with jQWidgets
jQWidgets is, perhaps, the most complex and complete instrument for building rich UIs based on jQuery. There are a lot of examples on their website concerning integration with different libraries like Angular, Angular 2 or Knockout. There is also a demo on writing client-side code with Typescript. Integration with server-side programming languages like PHP, Java and ASP.net is possible too. jQWidgets itself contains about 60 widgets. Among them 3 (!) different types of layout widgets. The library can draw about 30 types of charts. All widgets are quite flexible: they include a large number of methods, properties and events. Of course, all these features have strongly affected the performance. Among all the above libraries, jQWidgets consumes the most resources. Apart from that, the mere lack of a search function in the docs multiplied by the complexity of the code make the development process really tough.
| License | Commercial (199$), GPL |
| Number of widgets | 60 |
| Size of demo app | 10.3 KB |
| Getting started | Difficult |
| Development speed | Middle |
| Mobile widgets | 60 |
| Flexibility and features | 6 of 10 |
| Programming languages | HTML+JS |
| Memory consumption (demo) | 8 - 20 MB |
| Time to load (demo) | 2 - 2.6 s. |
| Time to develop demo | 4.5 h |
Conclusion: jQWidgets is the most powerful UI library of this part of the review, but it is also the most resource consuming one.
Other UI frameworks worth mentioning
W2ui – a micro library for building user interfaces with jQuery. There are only 7 widgets: layouts, grids, toolbars, sidebars, tabs, forms and popups. It looks very good though and works fluently. It’s worth a look for small projects.
primeUI – an extended version of jQuery UI with trees and tables. It includes more than 40 different widgets and more than 30 themes. You can either use it via a combination of HTML and JavaScript or with pure HTML using custom properties of HTML elements. This library is actually part of a larger project called PrimeFaces, which aims for creating rich web UIs with Java.
Outlook
That’s all for the moment. In the second part of the review, I will continue reviewing UI frameworks based on jQuery.
