From Jquery UI to Ext.js: a review of javascript UI libraries for the SPA. Part 1
Hello! It's 2016, and the web has long been turned into something more than simple websites. The lion's share of companies has long forgotten about desktop programs, and for ubiquitous tasks they use web applications, be it CRM, a warehouse management system, an analytics system or a simple administration panel from the site (hereinafter referred to as admin panel).
And they can be understood, because the work does not need a specific configuration, special installed software, its update. Just open the browser and the program works. Therefore, in my opinion, the future of web applications!
')
To do from scratch a full-fledged, no less inferior desktop program is a titanic work.
First, you need to somehow react to certain events in real time, periodically load data.
Secondly, those controls (widgets) that are available in dextup applications are usually needed. But they are not. In html there is no tree, no tabs, no context menu, and much more.
Thirdly, the performance of desktop applications is much better, because they do not need to load libraries and resources from the Internet, and they are written in a compiled language. And, although browsers embed all sorts of modern engines that allow you to achieve incredible performance, compiled languages ​​are still far away. But it is quite possible that the situation will change soon.
Fourthly, there is a small problem in the face of a wide variety of various browsers, each of which has its own characteristics, supports one or another standard.
As a result, on html all this, of course, can be written, then animated with the help of js, and styled with the help of css. After this, one should test its operation in the whole zoo of browsers. Then the graphic elements must somehow be connected with real data, and if this data is not permanent ... well, the whole thing will take a lot of time.
Although, of course, this problem can be solved in different ways. For design, take a Bootstrap, Uikit, Semantic UI or another CSS framework. For data binding and not only you can use Angular, Backbone, React, Knockout. Then connect another ten different libraries, try to make friends and get your own, correct, finely tuned and modern application.
Maybe I will not seem fashionable or modern, but for me, then, the ideal solution is to use a library or framework with a large number of ready-made widgets. Most of them have gone far enough, they can do a lot and do not require the invention of their bicycle. Although they come across those that are just a set of widgets and are a good addition to the libraries described above.
As it is not surprising, there are several dozens of JS UI libraries, and only 5-6 are known to users. Such an alignment of things is unjust and I decided to write a review of everything more or less presentable of what I could find.
Jquery UI is perhaps the most famous and simple UI library. Very convenient for the site, but creating an admin panel on it is still a perversion, since Jquery UI contains only 14 widgets. However, due to its popularity, missing UI elements can be found on the Internet and get an admin panel on pure Jquery UI a la “Frankenstein” with a bunch of crutches. It is not strange, but in my practice this happened.
Conclusion: Convenient for the site, but for the advanced admin is no good. But free.
Zino UI is another library based on jQuery. If you worked with jQuery UI, then it’s not a problem to understand it, the method names are almost identical, only with the zino prefix. In principle, with its help, it is really possible to write an admin panel, since it contains all the missing components. In addition, the library can work with SVG, build charts (about 30 types of charts). If you do not want to mess with html / js, then in the box with the library is a PHP class that allows you to create a graphical interface in PHP. At the time of this writing, this library is the quickest of all, which are mentioned and will be mentioned in the second part. If you use it in a commercial project, then pay attention to the ridiculous price.
Conclusion: Nimble, able to work with graphs. Excellent replacement jQuery UI.
Jquery Easy UI is a very good, but for some reason, little-known project. It is perfect for beginners. In theory, the admin panel can be written without a single line of js code. All properties of the widgets can be passed through the data-options attribute, or you can write them in javascript code.
Personally, I worked with it for a long time, and I can say for sure: it is easy to learn and convenient, for large projects you need to write a lot of “bicycle” code, while in older brothers this is all done by prescribing 2-3 options.
The library has 52 widgets in stock. There is a separate row of widgets for mobile applications. The official site has a style designer. For Java coders, it is possible to write to Java using the DWR Loader. For PHP developers who don't like messing around with html and javascript, there are unofficial components for integrating the library in Yii.
Among the shortcomings: there are a number of functions that are not documented at all. You can also note some glitchiness of the library. Sometimes, in attempts to fix one or another glitch, one had to go into the source code of the library and swear, since the lion's share of the code was obfuscated for some reason.
Conclusion: Small, but very powerful library. Ideal for beginners.
jQWidgets is probably the most sophisticated tool for creating ui, based on jQuery. The site has a huge number of examples of integration with libraries such as Angular, Angular 2, Knockout. The ability to write client code on Typescript is demonstrated. There are demos of integration with server languages: PHP, Java, ASP.net. The library itself contains about 60 widgets. Only one type of Layout - 3 pieces. Able to build graphics (about 30 types). All widgets are relatively flexible, have a large number of methods, properties, events. Of course, all these features strongly affected the performance of the library itself. Among all the above, she is the most voracious. In addition, the banal lack of a normal search for documentation on the site, multiplied by the complexity and clutter of the code, leads to the fact that the development of the admin becomes overwhelming.
Conclusion: The most powerful of the current review, but at the same time quite a complex and resource-intensive library.
W2ui is a microscopic library for building an interface based on jquery. Contains only 8 components (layout, table, form, toolbar, tab, form, menu, tree). It looks great, does not slow down. Recommended for small projects.
primeUI is a more advanced version of jQuery UI with a tree and tables. It has more than 40 different widgets and more than 30 themes. The code can be written in a bunch of html + js, or in pure html, using non-standard tags designed for this. The library itself is a gadget for a larger project PrimeFaces, which allows you to write this whole thing in Java.
That's all for now. This is the first article, I am interested in feedback and reaction. If you don’t throw tomatoes, then in the second part I’ll continue the review of libraries based on Jquery, but already from the companies dealing with the interface professionally. Waiting for you review and demo examples of such libraries as: Kendo UI , Wijmo , IgniteUI , Essensial Js , DevExtreme , ShieldUI .
PS: The examples from the first can be downloaded from the link . There are also screenshots and performance measurement dumps.
Part 2
And they can be understood, because the work does not need a specific configuration, special installed software, its update. Just open the browser and the program works. Therefore, in my opinion, the future of web applications!
')
To do from scratch a full-fledged, no less inferior desktop program is a titanic work.
First, you need to somehow react to certain events in real time, periodically load data.
Secondly, those controls (widgets) that are available in dextup applications are usually needed. But they are not. In html there is no tree, no tabs, no context menu, and much more.
Thirdly, the performance of desktop applications is much better, because they do not need to load libraries and resources from the Internet, and they are written in a compiled language. And, although browsers embed all sorts of modern engines that allow you to achieve incredible performance, compiled languages ​​are still far away. But it is quite possible that the situation will change soon.
Fourthly, there is a small problem in the face of a wide variety of various browsers, each of which has its own characteristics, supports one or another standard.
As a result, on html all this, of course, can be written, then animated with the help of js, and styled with the help of css. After this, one should test its operation in the whole zoo of browsers. Then the graphic elements must somehow be connected with real data, and if this data is not permanent ... well, the whole thing will take a lot of time.
Although, of course, this problem can be solved in different ways. For design, take a Bootstrap, Uikit, Semantic UI or another CSS framework. For data binding and not only you can use Angular, Backbone, React, Knockout. Then connect another ten different libraries, try to make friends and get your own, correct, finely tuned and modern application.
Maybe I will not seem fashionable or modern, but for me, then, the ideal solution is to use a library or framework with a large number of ready-made widgets. Most of them have gone far enough, they can do a lot and do not require the invention of their bicycle. Although they come across those that are just a set of widgets and are a good addition to the libraries described above.
As it is not surprising, there are several dozens of JS UI libraries, and only 5-6 are known to users. Such an alignment of things is unjust and I decided to write a review of everything more or less presentable of what I could find.
Small explanation
My goal is to build a full-fledged admin working on the SPA principle. The library may be good, but it will be more suitable for the site. The exception is jquery UI (well, it was necessary to start somewhere). The review will have a small description, demo application and rating. I will evaluate the complexity, size, demo code, flexibility. I will mention the memory consumption and page rendering time. It is also worth mentioning the possibility of working with mobile devices, since at the moment there is a tendency to write mobile applications in pure html / js.
The complexity implies how difficult it is to write the admin panel: this is a total estimate of the time for studying the code, the inaccessibility of certain controls, my time of writing the demo code, searching the documentation, where a glitch was encountered, which in any case should be corrected, where stuck, etc. Therefore, do not be surprised at the great complexity of JqueryUI, since it does not have half the elements necessary for writing a full-fledged admin panel.
I do not pretend to the purity of the code, so the demo examples go "as is", written in a very fluent hand and, possibly, containing glitches. Dear gurus, treat this with understanding, as the search for a specific crutch for a particular library is a big time and requires more detailed study.
The complexity implies how difficult it is to write the admin panel: this is a total estimate of the time for studying the code, the inaccessibility of certain controls, my time of writing the demo code, searching the documentation, where a glitch was encountered, which in any case should be corrected, where stuck, etc. Therefore, do not be surprised at the great complexity of JqueryUI, since it does not have half the elements necessary for writing a full-fledged admin panel.
I do not pretend to the purity of the code, so the demo examples go "as is", written in a very fluent hand and, possibly, containing glitches. Dear gurus, treat this with understanding, as the search for a specific crutch for a particular library is a big time and requires more detailed study.
Jquery based libraries
Jquery ui
Jquery UI is perhaps the most famous and simple UI library. Very convenient for the site, but creating an admin panel on it is still a perversion, since Jquery UI contains only 14 widgets. However, due to its popularity, missing UI elements can be found on the Internet and get an admin panel on pure Jquery UI a la “Frankenstein” with a bunch of crutches. It is not strange, but in my practice this happened.
| License: | Mit best result | Demo |
|---|---|---|
| Number of widgets: | 14 |  |
| Demo code size | 5.00 kb | |
| Difficulty mastering | Very easy | |
| Development speed | A very long time | |
| Mobile Widgets | use jquery mobile | |
| Features and flexibility | 1/10 | |
| Code | html + js | |
| Consumed memory | 4-9 mb | |
| Load time | 1.08 - 1.49 sec | |
| Demo time | 2.5 hours |
Conclusion: Convenient for the site, but for the advanced admin is no good. But free.
Zino UI
Zino UI is another library based on jQuery. If you worked with jQuery UI, then it’s not a problem to understand it, the method names are almost identical, only with the zino prefix. In principle, with its help, it is really possible to write an admin panel, since it contains all the missing components. In addition, the library can work with SVG, build charts (about 30 types of charts). If you do not want to mess with html / js, then in the box with the library is a PHP class that allows you to create a graphical interface in PHP. At the time of this writing, this library is the quickest of all, which are mentioned and will be mentioned in the second part. If you use it in a commercial project, then pay attention to the ridiculous price.
| License: | Commercial, $ 19, for open source projects - GPL | Demo |
|---|---|---|
| Number of widgets: | 25 |  |
| Demo code size | 7.83 kb | |
| Difficulty mastering | Very easy. | |
| Development speed | Quickly | |
| Mobile Widgets | not | |
| Features and flexibility | 3/10 | |
| Code | html + js php | |
| Consumed memory | 3-5 mb best result | |
| Load time | 0.73 - 0.83 high score | |
| Demo time | 1.2 hours |
Conclusion: Nimble, able to work with graphs. Excellent replacement jQuery UI.
JQuery Easy UI
Jquery Easy UI is a very good, but for some reason, little-known project. It is perfect for beginners. In theory, the admin panel can be written without a single line of js code. All properties of the widgets can be passed through the data-options attribute, or you can write them in javascript code.
Personally, I worked with it for a long time, and I can say for sure: it is easy to learn and convenient, for large projects you need to write a lot of “bicycle” code, while in older brothers this is all done by prescribing 2-3 options.
The library has 52 widgets in stock. There is a separate row of widgets for mobile applications. The official site has a style designer. For Java coders, it is possible to write to Java using the DWR Loader. For PHP developers who don't like messing around with html and javascript, there are unofficial components for integrating the library in Yii.
Among the shortcomings: there are a number of functions that are not documented at all. You can also note some glitchiness of the library. Sometimes, in attempts to fix one or another glitch, one had to go into the source code of the library and swear, since the lion's share of the code was obfuscated for some reason.
| License: | Commercial, $ 499, for open source projects - GPL | Demo |
|---|---|---|
| Number of widgets: | 52 |  |
| Mobile Widgets | sixteen | |
| Demo code size | 4.58 kb | |
| Difficulty mastering | Very easy. | |
| Development speed | In medium projects - very quickly, in complex projects - medium | |
| Features and flexibility | 4/10 | |
| Code | html, html + JS, Java, PHP (Yii) best result | |
| Consumed memory | 4.4-9 mb | |
| Load time | 1.4 - 1.8 seconds | |
| Demo time | 25 minutes best result |
Conclusion: Small, but very powerful library. Ideal for beginners.
jQWidgets
jQWidgets is probably the most sophisticated tool for creating ui, based on jQuery. The site has a huge number of examples of integration with libraries such as Angular, Angular 2, Knockout. The ability to write client code on Typescript is demonstrated. There are demos of integration with server languages: PHP, Java, ASP.net. The library itself contains about 60 widgets. Only one type of Layout - 3 pieces. Able to build graphics (about 30 types). All widgets are relatively flexible, have a large number of methods, properties, events. Of course, all these features strongly affected the performance of the library itself. Among all the above, she is the most voracious. In addition, the banal lack of a normal search for documentation on the site, multiplied by the complexity and clutter of the code, leads to the fact that the development of the admin becomes overwhelming.
| License: | Commercial, $ 199, for open source projects - GPL | Demo |
|---|---|---|
| Number of widgets: | 60 |  |
| Mobile Widgets | 60 | |
| Demo code size | 10.3 kb | |
| Difficulty mastering | complicated | |
| Development speed | average | |
| Features and flexibility | 6/10 | |
| Code | html + js | |
| Consumed memory | 8 -20 mb | |
| Load time | 2 - 2.6 seconds | |
| Demo time | 4.5 hours |
Conclusion: The most powerful of the current review, but at the same time quite a complex and resource-intensive library.
Also worthy of attention
W2ui is a microscopic library for building an interface based on jquery. Contains only 8 components (layout, table, form, toolbar, tab, form, menu, tree). It looks great, does not slow down. Recommended for small projects.
primeUI is a more advanced version of jQuery UI with a tree and tables. It has more than 40 different widgets and more than 30 themes. The code can be written in a bunch of html + js, or in pure html, using non-standard tags designed for this. The library itself is a gadget for a larger project PrimeFaces, which allows you to write this whole thing in Java.
That's all for now. This is the first article, I am interested in feedback and reaction. If you don’t throw tomatoes, then in the second part I’ll continue the review of libraries based on Jquery, but already from the companies dealing with the interface professionally. Waiting for you review and demo examples of such libraries as: Kendo UI , Wijmo , IgniteUI , Essensial Js , DevExtreme , ShieldUI .
PS: The examples from the first can be downloaded from the link . There are also screenshots and performance measurement dumps.
Pps. List of libraries that will be / have been described
Part 1:
Part 2:
Not sorted:
Will not be described:
Also, angularUI, elemental-ui, react-bootstrap, etc. will not be described. Otherwise, the article will drag on indefinitely ...
Perhaps I did not mention something, please add in the comments.
- JqueryUI
- Zino UI
- EasyUI
- jQWidgets
- W2ui
- primeUI
Part 2:
- Igniteui
- Wijmo
- Kendo ui
- Syncfusion essensial js
- ShieldUI
- devExtreme
Not sorted:
- Alloyui
- Dojo
- Extjs
- Qooxdoo
- Smartclient
- Webix
- dhtmlx
- Openui5
- Redui
- Backbase
- Crossui
- Sproutcore
- Rialto
- Bindows
Will not be described:
- YUI (deprecated)
- Mochaui (deprecated)
- Openrico (deprecated)
- Lidorsystems (not yet decided, looks wretched)
- Rightjs (not yet decided, few widgets)
- EnyoJS (WTF? For TV?)
Also, angularUI, elemental-ui, react-bootstrap, etc. will not be described. Otherwise, the article will drag on indefinitely ...
Perhaps I did not mention something, please add in the comments.
Part 2
Source: https://habr.com/ru/post/313128/
All Articles