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.
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.
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.
|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|
|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 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|
|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
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|
|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 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|
|Flexibility and features||6 of 10|
|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.
That’s all for the moment. In the second part of the review, I will continue reviewing UI frameworks based on jQuery.