Від Jquery UI до Ext.js: огляд бібліотек віджетів для побудови інтерфейсу на JS. Частина 2

У той час як веб розвивається і отхватывает все більшу частину пирога, коли-то дісталася десктопа, виробники програмного забезпечення, орієнтованого на корпоративний сегмент, не можуть залишатися без діла. Якщо коли-то рулили додатки з використанням Windows Forms, то зараз все більше контор замислюються, чи варто взагалі використовувати Windows.

image

Природно, розробники подібного ЗА намагаються адаптуватися під нові умови і випускають свої UI бібліотеки, тільки вже для Web.

Правда, є якась дивна тенденція: замість конкуренції з зовнішнім світом виробники конкурують як би між собою. Більшість продуктів мають однаковий набір віджетів, які зовні і структурно виглядають схожими один на одного, випускаються з інсталятором для Windows і мають широку підтримку .NET.

Загалом, живуть в Enterprise світі зі своєю атмосферою. І все ж я спробую розібратися і знайти якісь унікальні обриси у тієї чи іншої бібліотеки. А криються вони трохи за межами веб інтерфейсу, тому я спробую залізти трохи далі банального html + js.

Невеликі поясненняЯ не претендую на чистоту коду, тому демо приклади йдуть «як є», написані на дуже швидку руку і, можливо, містять глюки. Шановні гуру, поставтеся до цього з розумінням, так як пошук конкретного милиці для тієї чи іншої бібліотеки – це справа великого часу і вимагає більш детального вивчення.

Shield UI
Shield UI

Проста і не пафосна бібліотека з набором html віджетів. Їх можна писати як на чистому html+js, так і на ASP.NET, ASP.NET MVC (4) і Java (з використанням Apache Wicket). Виглядає непогано, однак в деяких місцях ця бібліотека вельми дерев'яна.

Частково підтримує Angular. Для роботи з даними є компонент, що дозволяє писати власні алгоритми отримання даних. Вміє будувати 35 видів графіків. Працює шустро, невимоглива до ресурсів. Незважаючи на обмежені можливості, бібліотека все одно чимось приваблює увагу.
Ліцензія: Commercial, 399$, Демо
Кількість віджетів: 35 Shield UI
Розмір демо коду 5,70 кб
Складність освоєння Легко
Швидкість розробки Середньо
Мобільні віджети 35
Можливості і гнучкість 4/10
Код html +JS, ASP.NET, ASP.NET MVC (4), Java
Споживана пам'ять 4-10 мб
Час завантаження 1.3 – 1.8 сек
Час написання демо 1.5 години
IgniteUI
ignite ui

IgniteUI – бібліотека, в першу чергу орієнтована на візуалізацію статистики і графіків. Крім цього, має в запасі ряд віджетів, що дозволяють організувати адмінку. На жаль, деяких віджетів не вистачає, і частина їх мені довелося доповнювати з jquery UI. Втім, такий розклад здався мені задуманого. Навіщо винаходити велосипед?

Крім усього іншого, бібліотека дружить з Angular, Angular2, React. Частково підтримує Knokout. Добре дружить з бездротовими інтерфейсами.

Дані вміють женуться за протоколами REST (у тому числі Odata) і WCF. Розуміє OLAP. Якщо завантажувати повну версію, ставить кілька гігабайт всякого сміття, з якого пара прикладів ушитих в Visual Studio можуть бути корисними. Це мобільний додаток під PhoneGap і універсальний приклад ASP.NET MVC програми.

Все інше можна знайти на офіційному сайті, в тому числі WYSIWYG редактор для швидкої побудови інтерфейсу.

Істотним недоліком бібліотеки можна назвати дуже високу ресурсомісткість. Рендеринг тестової сторінки може спокійно з'їсти до 55 мб оперативної пам'яті, а сторінка рендерится більше 4 секунд. І це проста сторінка, а не просунута адмінка.
Ліцензія: Commercial, 495$, Демо
Кількість віджетів: 44 IgniteUI
Розмір демо коду 9,52 кб
Складність освоєння Середньо
Швидкість розробки Середньо
Мобільні віджети 44
Можливості і гнучкість 4/10
Код html +JS, ASP.NET MVC
Споживана пам'ять 20-59 мб
Час завантаження 4 – 4,9 сек
Час написання демо 1.5 години
Wijmo


Wijmo – бібліотека від компанії Component One. На сайті якась плутанина, існує 2 версії (3 і 5). У Wijmo 5 зовсім інший підхід до розробки. За твердженнями розробників працює набагато швидше, ніж 3. Але ось контроллов зовсім обмаль. Розробники вирішили викинути підтримку всіх старих браузерів і в 5 версії зосередитися тільки на парочці инпутов, таблиці та графіки. Замість старих компонентів вони пропонують використовувати альтернативи з bootstrap, нативні html 5 елементи або винаходити свій велосипед. Чесно кажучи, мені такий підхід не сподобався. Навіщо мені тоді взагалі ця бібліотека віджетів потрібна?

Тому вибір припав на wijmo 3, в запасі у якої є 50 віджетів для десктопа і 28 віджетів для мобільників. Загалом, все, щоб можна було зробити повноцінну адмінку.

3 версія розуміє MVVM, правда для датабиндинга використовується Knokout. Також бібліотека має підтримку Angular. Варто відзначити, що вона вміє працювати з REST API і любить стандарт oData.

З недоліків можна назвати якусь глючноватость в плані стилізації й більшу ресурсомісткість бібліотеки. Час рендеринга демо сторінки 3 секунди, при цьому споживання пам'яті складає до 40 мб. Можна, звичайно, зупиниться на wijmo 5, вона ніби як і не дешева, і має підтримку Angular, Angular 2, Knokout, Vue.js, React, але це скоріше не бібліотека віджетів, а Chart / Grid віджет з парочкою прибамбасів.

Цінник за використання бібліотеки зовсім не жартівливий — 1,495$.

Для тих, хто пише на ASP.NET я рекомендую завантажити бібліотеку не з сайту Wijmo, а з офіційного сайту Component One. У дистрибутиві будуть готові приклади, вшиті в Visual Studio.
Ліцензія: Commercial, 1,495$, Демо
Кількість віджетів: 51 Wijmo3
Розмір демо коду 7,49 кб
Складність освоєння Середньо
Швидкість розробки Середньо
Мобільні віджети 51
Можливості і гнучкість 4/10
Код html +JS, ASP.NET MVC
Споживана пам'ять 11-40 мб
Час завантаження 3– 3,9 сек
Час написання демо 1.2 години
DevExtreme


DevExtreme – бібліотека UI віджетів від компанії DevExpress. Якими б професіоналами своєї справи не були ці хлопці, їх веб фреймворк мені не сподобався. Вийшов він якимось дуже дерев'яним, незручним, негнучким, гальмує і дуже далеким від реальних завдань.

Щоб зробити щось нормальне потрібно спочатку ретельно прочитати найзаплутанішу документацію, зрозуміти, що нормальними засобами фреймворку це зробити неможливо і починати писати свої милиці. Наприклад, сховище даних, яке використовується в таблицях, розуміє тільки дані, одержувані по OData або у вигляді локальних JS змінних. Але OData жодного разу не стандарт, який використовується скрізь і вся. Більшість даних ганяється у вигляді самописних REST. У такому випадку доводиться брати і писати своє сховище. Благо, хоч цю можливість дали. Якщо повісити обробник, призначений для инпута (власне на сам инпут), це працювати не буде. Він повинен бути обов'язково дивом. Взагалі незрозуміло, як прив'язати тій чи іншій вкладці віджета tabs/accordion певний контейнер з даними.

В документації знаходяться приклади з величезними простирадлами коду. Та й сам розмір коду програми виходить величезним. Загалом, розбиратися з усім цим у мене не було ніякого бажання.

Як я розумію, хлопці зробили веб фреймворк просто для галочки і використовують його компоненти для свого продукту «eXpressApp», розумного CRUD генератора, що дозволяє швидко створювати додатки для Windows, браузера і мобільного телефону. Притому у веб інтерфейсу і декстоп додатки будуть абсолютно різні інтерфейси. За це ставлю великий плюс.
Ліцензія: Commercial, 499$, Демо
Кількість віджетів: 61 DevExtreme
Розмір демо коду 7,73 кб
Складність освоєння Складно
Швидкість розробки Довго
Мобільні віджети 61
Можливості і гнучкість 2/10
Код html +JS, ASP.NET, ASP.NET MVC
Споживана пам'ять 15-39 мб
Час завантаження 3– 3,8 сек
Час написання демо 3.5 години
Kendo UI

Kendo UI – досить популярний в інтернеті фреймворк від компанії Telerik. Підкуповує він, своїми простими демо-прикладами, безліччю варіацій написання коду: js+html, php, ASP.NET, ASP MVC, jsp. Є інтеграція з angular, angular2.

До речі, якщо говорити щодо датабиндинга, то тут KendoUI може похвалитися MVVM рішенням з коробки. Для зручності відладки на сайті є спеціальний додаток для google Chrome.

Якщо зареєструватися, то можна отримати приклади, шаблони для Vistual Studio і ще купу додаткового інструментарію (ORM для бек-ендом, трасувальник, генератор звітів тощо).
Один з таких інструментів, це Telerik Platform – софт розробки додатків для мобільників, що дозволяє робити їх буквально «мишкою». Не втручаючись у код, можна побудувати не тільки веб інтерфейс (на основі Kendo UI), але і роботу з даними. До речі, сам інструмент створений на Kendo UI, працює в браузері і жорстко гальмує.

На мій погляд, Kendo UI нічим не краще і не гірше інших. Серед його сильних сторін зазначу безліч підтримуваних платформ, а серед слабких – ненажерливість і високий цінник. Втім, у сьогоднішньому огляді майже всі фреймворки дуже ненажерливі.
Ліцензія: Commercial, 999$, Демо
Кількість віджетів: 50 Kendo UI
Розмір демо коду 6.9 кб
Складність освоєння Легко
Швидкість розробки Середньо
Мобільні віджети 50
Можливості і гнучкість 6/10
Код html+js, php, ASP.NET, ASP MVC, jsp.
Споживана пам'ять 16-36 мб
Час завантаження 3– 4,2 сек
Час написання демо 1 год
Syncfusion Essensial Js


Компанія Syncfusion, як і Telerik насправді під що тільки не розробляє власні віджети. Природно, такий жирний шматок, як web обійти не можна. У підсумку виходить близько 80 різноманітних контролів для створення всього і вся.

Як і Kendo має мобільні віджети, підтримує AngularJS, AngluarJS 2, а ще Aurelia, ReactJS. Код можна писати в зв'язці: html +js, typescript, PHP, ASP.NET, ASP Web Forms. Для створення десктопного програми є приклади інтеграції з Electron.

Під мобільники є приклади інтеграції з Ionic. Крім зв'язки html+js, мобільні програми можна писати на фреймворку Xamarin.

З додаткового, завантаженого софта дуже сподобався пакет DashBoard. Є Whisywig редактор звітів, що дозволяє сконструювати таблиці і графіки, пов'язати їх з реальними даними (будь це json, xml, CVS, Xls, xlsx, РСУБД на основі SQL тощо).

Потім ці дані можна експортувати і переглядати у вигляді графіків і таблиць на сервері. Все це не потребує великих знань, тому створити таке доповнення може навіть секретарка.
Загалом, мені фреймворк сподобався, і серед усіх інших у сьогоднішньому огляді викликав великі симпатії.
Ліцензія: Commercial, 995$, Демо
Кількість віджетів: 50 Essential JS
Розмір демо коду 6.9 кб
Складність освоєння Середньо
Швидкість розробки Середньо
Мобільні віджети 80
Можливості і гнучкість 6/10
Код html+js, ASP.NET, ASP MVC.
Споживана пам'ять 14-30 мб
Час завантаження 3.5– 4,6 сек
Час написання демо 2 часf
На цьому сьогодні все. Незабаром вас чекає огляд таких бібліотек як Dojo Tookit, OpenUI5, Webix, dxhml, Qooxdoo, Smartclient, ExtJs.

Але перш ніж робити заключну частину огляду, я спробую зробити огляд такої екзотики як CrossUI, Rialto, Bindows, RedUI та інших мало кому відомих бібліотек. Деякі з них незвичайні (використання SVG замість html, canvas замість DOM), деякі просто просто дивують!

До швидкої зустрічі!

PS: Демо приклади можна скачати по посилання

PPS: Частина 1

PPPS. Список бібліотек, які будуть були описаніЧастина 1:

  • JqueryUI
  • Zino UI

  • EasyUI
  • jQWidgets
  • W2ui
  • primeUI
Частина 2:

  • IgniteUI
  • Wijmo
  • Kendo UI
  • Syncfusion Essensial Js
  • ShieldUI
  • devExtreme
Частина 3 (попередньо):
  • RedUI
  • Backbase
  • CrossUI
  • SproutCore
  • Pergola
  • Rialto
  • Bindows
  • EnyoJS
  • Zebkit
  • AlloYUI
Частина 4:
  • Dojo
  • ExtJs
  • Qooxdoo
  • Smartclient
  • Webix
  • dhtmlx
  • Openui5
Не буде описано:

  • YUI (застаріла)
  • Mochaui (застаріла)
  • Openrico (застаріла)
  • Lidorsystems (поки не вирішив, убого виглядає)
  • Rightjs (поки не вирішив, мало віджетів)
Також не буде описано angularUI, elemental-ui, react-bootstrap та ін. Інакше стаття затягнеться до нескінченності…

Можливо, я щось не згадав, прошу доповнити в коментарях.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.