From Jquery UI to Ext.js: an overview of the widget libraries for building an interface on JS. Part 2
While the web is developing and grabbing more and more of the cake that the desktop once got, enterprise-class software makers cannot remain idle. If you once drove applications using Windows Forms, now more and more offices are thinking whether to use Windows at all.
Naturally, the developers of such software are trying to adapt to the new conditions and release their UI libraries, only for the Web.
')
True, there is some strange tendency: instead of competing with the outside world, manufacturers compete as if among themselves. Most products have the same set of widgets that look both structurally and similarly to each other, come with an installer for Windows and have extensive .NET support.
In general, they live in the Enterprise world with their own atmosphere. And yet I will try to figure out and find some unique outlines for a particular library. And they lie a little outside the web interface, so I will try to climb a little further than the banal html + js.
Simple and non-pathetic library with a set of html widgets. They can be written in pure html + js, or in ASP.NET, ASP.NET MVC (4), and Java (using Apache Wicket). It looks good, but in some places this library is very wooden.
Partially supports Angular. There is a component for working with data that allows you to write your own data acquisition algorithms. Able to build 35 types of graphs. Works smartly, undemanding to resources. Despite scant opportunities, the library still attracts attention with something.
IgniteUI is a library, primarily focused on the visualization of statistics and graphs. In addition, has in stock a number of widgets that allow you to organize the admin panel. Unfortunately, some widgets are missing, and I had to supplement part of them from the jquery UI. However, this situation seemed to me conceived. Why reinvent the wheel?
Among other things, the library is friends with Angular, Angular2, React. Partially supports Knokout. Good friends with mobile interfaces.
Data can be chased through REST protocols (including Odata) and WCF. Understands OLAP. If you download the full version, it puts a few gigabytes of garbage from which a couple of examples embedded in Visual Studio can be useful. This is a mobile application for PhoneGap and a universal example of an ASP.NET MVC application.
Everything else can be found on the official website, including a WYSIWYG editor for quickly building an interface.
A significant drawback of the library can be called a very high resource intensity. Rendering a test page can safely eat up to 55 MB of RAM, and the page is rendered for more than 4 seconds. And this is a simple page, not an advanced admin panel.
Wijmo is a library from Component One. There is some confusion on the site, there are 2 versions (3 and 5). Wijmo 5 has a completely different approach to development. According to the developers, it works much faster than 3. But the controllers are not enough. The developers decided to throw out support for all old browsers and in version 5 focus only on a couple of inputs, a table and graphs. Instead of the old components, they propose using alternatives from bootstrap, native html 5 elements or reinventing their bike. Honestly, I did not like this approach. Why do I need this library of widgets then?
Therefore, the choice fell on wijmo 3, in stock which has 50 widgets for the desktop and 28 widgets for mobile phones. In general, everything so that you can make a full admin panel.
Version 3 understands MVVM, but Knokout is used for databinding. The library also has support for Angular. It is worth noting that she knows how to work with the REST API and loves the oData standard.
Among the shortcomings can be called a kind of buggy in terms of styling and a large resource-intensive library. The rendering time of the demo page is 3 seconds, while the memory consumption is up to 40 MB. You can, of course, stop at wijmo 5, it seems to be not resource-intensive, and has support for Angular, Angular 2, Knokout, Vue.js, React, but it’s rather not a widget library, but a Chart / Grid widget with a couple of gadgets.
The price tag for using the library is not at all comic - $ 1,495.
For those who write on ASP.NET, I recommend downloading the library not from the Wijmo site, but from the official site of Component One. The distribution will be ready-made examples, sewn into Visual Studio.
DevExtreme is a widget UI library from DevExpress. No matter how professional these guys were, I didn’t like their web framework. He came out as some very wooden, uncomfortable, inflexible, retarding and very far from real tasks.
To do something normal, you must first carefully read the most confusing documentation, understand that it is impossible to do this with normal means of the framework and start writing your crutches. For example, the data warehouse used in the tables understands only the data received via OData or as local JS variables. But OData is never a standard that is used everywhere and everything. Most of the data is chased as self-signed REST. In this case, you have to take and write your store. Fortunately, at least this opportunity was given. If you hang up a handler intended for the input (actually, the input itself), it will not work. He must be a diva. In general, it is not clear how to attach a tabs / accordion tabs or accordion tabs to a specific data container.
The documentation contains examples of the largest sheets of code. And the size of the application code itself is huge. In general, I had no desire to deal with all this business.
As I understand it, the guys made a web framework just for a tick and use its components for their product “eXpressApp”, a smart CRUD generator that allows you to quickly create applications for Windows, browser and mobile phone. Moreover, the web interface and the dekstop application will have completely different interfaces. For this I put a big plus.
Kendo UI is quite popular on the Internet framework from the company Telerik. He bribes with his simple demo examples with a variety of code writing variations: js + html, php, ASP.NET, ASP MVC, jsp. There is integration with angular, angular2.
By the way, if we talk about databing, then KendoUI boasts an MVVM solution out of the box. For easy debugging, the site has a special add-on for google Chrome.
If you register, you can get examples, templates for Vistual Studio and a bunch of additional tools (ORM for backend, tracer, report generator, etc.).
One of these tools is the Telerik Platform, a software development application for mobile phones that allows you to literally make them “mouse”. Without getting into the code, you can build not only a web interface (based on Kendo UI), but also work with data. By the way, the tool itself is created on Kendo UI, it works in the browser and it is hard to slow down.
In my opinion, Kendo UI is no better and no worse than others. Among his strengths, I note many supported platforms, and among the weak ones - gluttony and high price tag. However, in today's review, almost all frameworks are very voracious.
Syncfusion, like Telerik, in fact, does not develop its own widgets. Naturally, such a fat piece as the web can not be circumvented. The result is about 80 different controls for creating everything.
Like Kendo, it has mobile widgets, supports AngularJS, AngluarJS 2, and Aurelia, ReactJS. The code can be written in a bundle: html + js, typescript, PHP, ASP.NET, ASP Web Forms. To create a desktop application there are examples of integration with Electron.
There are examples of integration with Ionic for mobile phones. In addition to the html + js bundle, mobile applications can be written on the Xamarin framework.
From the additional, downloaded software, I really liked the DashBoard package. There is a Whisywig report editor that allows you to construct tables and graphs, link them with real data (be it json, xml, CVS, Xls, xlsx, SQL-based RDBMS, etc.).
Then this data can be exported and viewed in the form of graphs and tables on the server. All this does not require much knowledge, so even a secretary can create such an application.
In general, I liked the framework, and among all the others in today's review it caused great sympathy.
That's all for today. Soon you will find an overview of such libraries as the Dojo Toolkit, OpenUI5, Webix, dxhml, Qooxdoo, Smartclient, ExtJs.
But before doing the final part of the review, I will try to make a review of such exotic as CrossUI, Rialto, Bindows, RedUI and other little-known libraries. Some of them are unusual (using SVG instead of html, canvas instead of DOM), some are just amazing!
See you soon!
PS: Demo examples can be downloaded from the link
PPS: Part 1
Naturally, the developers of such software are trying to adapt to the new conditions and release their UI libraries, only for the Web.
')
True, there is some strange tendency: instead of competing with the outside world, manufacturers compete as if among themselves. Most products have the same set of widgets that look both structurally and similarly to each other, come with an installer for Windows and have extensive .NET support.
In general, they live in the Enterprise world with their own atmosphere. And yet I will try to figure out and find some unique outlines for a particular library. And they lie a little outside the web interface, so I will try to climb a little further than the banal html + js.
Small explanation
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.
Shield UI
Simple and non-pathetic library with a set of html widgets. They can be written in pure html + js, or in ASP.NET, ASP.NET MVC (4), and Java (using Apache Wicket). It looks good, but in some places this library is very wooden.
Partially supports Angular. There is a component for working with data that allows you to write your own data acquisition algorithms. Able to build 35 types of graphs. Works smartly, undemanding to resources. Despite scant opportunities, the library still attracts attention with something.
| License: | Commercial, $ 399, for non-commercials - on request | Demo |
|---|---|---|
| Number of widgets: | 35 |  |
| Demo code size | 5.70 kb | |
| Difficulty mastering | Easy | |
| Development speed | Average | |
| Mobile Widgets | 35 | |
| Features and flexibility | 4/10 | |
| Code | html + JS, ASP.NET, ASP.NET MVC (4), Java | |
| Consumed memory | 4-10 mb | |
| Load time | 1.3 - 1.8 seconds | |
| Demo time | 1.5 hours |
Igniteui
IgniteUI is a library, primarily focused on the visualization of statistics and graphs. In addition, has in stock a number of widgets that allow you to organize the admin panel. Unfortunately, some widgets are missing, and I had to supplement part of them from the jquery UI. However, this situation seemed to me conceived. Why reinvent the wheel?
Among other things, the library is friends with Angular, Angular2, React. Partially supports Knokout. Good friends with mobile interfaces.
Data can be chased through REST protocols (including Odata) and WCF. Understands OLAP. If you download the full version, it puts a few gigabytes of garbage from which a couple of examples embedded in Visual Studio can be useful. This is a mobile application for PhoneGap and a universal example of an ASP.NET MVC application.
Everything else can be found on the official website, including a WYSIWYG editor for quickly building an interface.
A significant drawback of the library can be called a very high resource intensity. Rendering a test page can safely eat up to 55 MB of RAM, and the page is rendered for more than 4 seconds. And this is a simple page, not an advanced admin panel.
| License: | Commercial, $ 495, | Demo |
|---|---|---|
| Number of widgets: | 44 |  |
| Demo code size | 9.52 kb | |
| Difficulty mastering | Average | |
| Development speed | Average | |
| Mobile Widgets | 44 | |
| Features and flexibility | 4/10 | |
| Code | html + JS, ASP.NET MVC | |
| Consumed memory | 20-59 mb | |
| Load time | 4 - 4.9 seconds | |
| Demo time | 1.5 hours |
Wijmo
Wijmo is a library from Component One. There is some confusion on the site, there are 2 versions (3 and 5). Wijmo 5 has a completely different approach to development. According to the developers, it works much faster than 3. But the controllers are not enough. The developers decided to throw out support for all old browsers and in version 5 focus only on a couple of inputs, a table and graphs. Instead of the old components, they propose using alternatives from bootstrap, native html 5 elements or reinventing their bike. Honestly, I did not like this approach. Why do I need this library of widgets then?
Therefore, the choice fell on wijmo 3, in stock which has 50 widgets for the desktop and 28 widgets for mobile phones. In general, everything so that you can make a full admin panel.
Version 3 understands MVVM, but Knokout is used for databinding. The library also has support for Angular. It is worth noting that she knows how to work with the REST API and loves the oData standard.
Among the shortcomings can be called a kind of buggy in terms of styling and a large resource-intensive library. The rendering time of the demo page is 3 seconds, while the memory consumption is up to 40 MB. You can, of course, stop at wijmo 5, it seems to be not resource-intensive, and has support for Angular, Angular 2, Knokout, Vue.js, React, but it’s rather not a widget library, but a Chart / Grid widget with a couple of gadgets.
The price tag for using the library is not at all comic - $ 1,495.
For those who write on ASP.NET, I recommend downloading the library not from the Wijmo site, but from the official site of Component One. The distribution will be ready-made examples, sewn into Visual Studio.
| License: | Commercial, $ 1,495, for open source projects - GPL | Demo |
|---|---|---|
| Number of widgets: | 51 |  |
| Demo code size | 7.49 kb | |
| Difficulty mastering | Average | |
| Development speed | Average | |
| Mobile Widgets | 51 | |
| Features and flexibility | 4/10 | |
| Code | html + JS, ASP.NET MVC | |
| Consumed memory | 11-40 mb | |
| Load time | 3–3,9 sec | |
| Demo time | 1.2 hours |
Devextreme
DevExtreme is a widget UI library from DevExpress. No matter how professional these guys were, I didn’t like their web framework. He came out as some very wooden, uncomfortable, inflexible, retarding and very far from real tasks.
To do something normal, you must first carefully read the most confusing documentation, understand that it is impossible to do this with normal means of the framework and start writing your crutches. For example, the data warehouse used in the tables understands only the data received via OData or as local JS variables. But OData is never a standard that is used everywhere and everything. Most of the data is chased as self-signed REST. In this case, you have to take and write your store. Fortunately, at least this opportunity was given. If you hang up a handler intended for the input (actually, the input itself), it will not work. He must be a diva. In general, it is not clear how to attach a tabs / accordion tabs or accordion tabs to a specific data container.
The documentation contains examples of the largest sheets of code. And the size of the application code itself is huge. In general, I had no desire to deal with all this business.
As I understand it, the guys made a web framework just for a tick and use its components for their product “eXpressApp”, a smart CRUD generator that allows you to quickly create applications for Windows, browser and mobile phone. Moreover, the web interface and the dekstop application will have completely different interfaces. For this I put a big plus.
| License: | Commercial, $ 499 | Demo |
|---|---|---|
| Number of widgets: | 61 |  |
| Demo code size | 7.73 kb | |
| Difficulty mastering | Complicated | |
| Development speed | Long | |
| Mobile Widgets | 61 | |
| Features and flexibility | 2/10 | |
| Code | html + JS, ASP.NET, ASP.NET MVC | |
| Consumed memory | 15-39 mb | |
| Load time | 3–3,8 seconds | |
| Demo time | 3.5 hours |
Kendo ui
Kendo UI is quite popular on the Internet framework from the company Telerik. He bribes with his simple demo examples with a variety of code writing variations: js + html, php, ASP.NET, ASP MVC, jsp. There is integration with angular, angular2.
By the way, if we talk about databing, then KendoUI boasts an MVVM solution out of the box. For easy debugging, the site has a special add-on for google Chrome.
If you register, you can get examples, templates for Vistual Studio and a bunch of additional tools (ORM for backend, tracer, report generator, etc.).
One of these tools is the Telerik Platform, a software development application for mobile phones that allows you to literally make them “mouse”. Without getting into the code, you can build not only a web interface (based on Kendo UI), but also work with data. By the way, the tool itself is created on Kendo UI, it works in the browser and it is hard to slow down.
In my opinion, Kendo UI is no better and no worse than others. Among his strengths, I note many supported platforms, and among the weak ones - gluttony and high price tag. However, in today's review, almost all frameworks are very voracious.
| License: | Commercial, $ 999, for open source projects - free | Demo |
|---|---|---|
| Number of widgets: | 50 |  |
| Demo code size | 6.9 kb | |
| Difficulty mastering | Easy | |
| Development speed | Average | |
| Mobile Widgets | 50 | |
| Features and flexibility | 6/10 | |
| Code | html + js, php, ASP.NET, ASP MVC, jsp. | |
| Consumed memory | 16-36 mb | |
| Load time | 3–4,2 sec | |
| Demo time | 1 hour |
Syncfusion essensial js
Syncfusion, like Telerik, in fact, does not develop its own widgets. Naturally, such a fat piece as the web can not be circumvented. The result is about 80 different controls for creating everything.
Like Kendo, it has mobile widgets, supports AngularJS, AngluarJS 2, and Aurelia, ReactJS. The code can be written in a bundle: html + js, typescript, PHP, ASP.NET, ASP Web Forms. To create a desktop application there are examples of integration with Electron.
There are examples of integration with Ionic for mobile phones. In addition to the html + js bundle, mobile applications can be written on the Xamarin framework.
From the additional, downloaded software, I really liked the DashBoard package. There is a Whisywig report editor that allows you to construct tables and graphs, link them with real data (be it json, xml, CVS, Xls, xlsx, SQL-based RDBMS, etc.).
Then this data can be exported and viewed in the form of graphs and tables on the server. All this does not require much knowledge, so even a secretary can create such an application.
In general, I liked the framework, and among all the others in today's review it caused great sympathy.
| License: | Commercial, $ 995, Community License , for open projects - free of charge, on request | Demo |
|---|---|---|
| Number of widgets: | 50 |  |
| Demo code size | 6.9 kb | |
| Difficulty mastering | Average | |
| Development speed | Average | |
| Mobile Widgets | 80 | |
| Features and flexibility | 6/10 | |
| Code | html + js, ASP.NET, ASP MVC. | |
| Consumed memory | 14-30 mb | |
| Load time | 3.5–4,6 seconds | |
| Demo time | 2 hours |
That's all for today. Soon you will find an overview of such libraries as the Dojo Toolkit, OpenUI5, Webix, dxhml, Qooxdoo, Smartclient, ExtJs.
But before doing the final part of the review, I will try to make a review of such exotic as CrossUI, Rialto, Bindows, RedUI and other little-known libraries. Some of them are unusual (using SVG instead of html, canvas instead of DOM), some are just amazing!
See you soon!
PS: Demo examples can be downloaded from the link
PPS: Part 1
PPPS. List of libraries that will be / have been described
Part 1:
Part 2:
Part 3 (Preliminary):
Part 4:
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
Part 3 (Preliminary):
- Redui
- Backbase
- Crossui
- Sproutcore
- Pergola
- Rialto
- Bindows
- Enyojs
- Zebkit
- Alloyui
Part 4:
- Dojo
- Extjs
- Qooxdoo
- Smartclient
- Webix
- dhtmlx
- Openui5
Will not be described:
- YUI (deprecated)
- Mochaui (deprecated)
- Openrico (deprecated)
- Lidorsystems (not yet decided, looks wretched)
- Rightjs (not yet decided, few widgets)
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.
Source: https://habr.com/ru/post/315882/
All Articles