Від Jquery до Ext.js: огляд javascript UI бібліотек для SPA. Частина 1

Всім привіт! На дворі 2016 рік, web давно перетворився на щось більше, ніж прості сайти. Левова частка компаній вже давно забула про десктопні програми, і для широкомасштабних завдань використовують веб-додатки, будь це CRM, система управління складом, система аналітики або проста панель адміністрування від сайту (надалі – адмінка).

image

І їх можна зрозуміти, адже для роботи не потрібна специфічна конфігурація, спеціальне встановлене ПЗ, його оновлення. Досить відкрити браузер і програма працює. Тому, на мій погляд, за веб-додатками – майбутнє!

Робити з нуля повноцінну, нітрохи не поступається десктопної програму — це титанічна праця.

По-перше, потрібно якось реагувати на ті чи інші події в реальному часі, періодично завантажувати дані.

По-друге, зазвичай потрібні ті контроли (віджети), які є в десктопних додатках. Але їх немає. В html ні дерева, ні вкладок, немає контекстного меню і багато чого ще.

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

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

У підсумку, на html все це, звичайно, можна написати, потім оживити за допомогою js, і стилізувати за допомогою css. Після цього слід відтестувати його роботу в цілому зоопарку браузерів. Потім графічні елементи треба якось пов'язати з реальними даними, а в разі, якщо ці дані не постійні… загалом, на все це піде багато часу.

Хоча, звичайно, вирішити дану задачу можна по-різному. Для оформлення взяти Bootstrap, Uikit, Semantic UI або інший CSS фреймворк. Для зв'язки з даними і не тільки можна використовувати Angular, Backbone, React, Knockout. Потім підключати ще десяток різних бібліотек, намагатися їх подружити і отримати своє, правильне, тонко налаштована і сучасне додаток.

Може бути, я здамся не модним і не сучасним, але для мене в такому випадку ідеальне рішення — використовувати бібліотеку або фреймворк з великою кількістю готових віджетів. Більшість з них пішли досить далеко, багато вміють і не вимагають свого винаходу велосипеда. Хоча й трапляються ті, які представляють із себе просто набір віджетів і є непоганим доповненням до вищеописаних бібліотек.

Як це не дивно, JS UI бібліотек налічується кілька десятків, і лише 5-6 на слуху у користувачів. Такий розклад речей несправедливий і я вирішив написати огляд усього більш-менш презентабельного з того, що вдалося знайти.

Невеликі поясненняМоя мета — побудова повноцінної адмінки, що працює за принципом SPA. Бібліотека може бути хороша, але буде підходити більше для сайту. Виняток становить jquery UI (ну треба було з чогось почати). В огляді буде невеликий опис, демо-додаток і рейтинг. Я буду оцінювати складність, розмір демо-коду, гнучкість. Згадаю про споживання пам'яті і часу рендеринга сторінок. Також варто згадати можливість роботи з мобільними пристроями, так як на даний момент існує тенденція писати мобільні додатки на чистому html/js.

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

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

Бібліотеки на основі Jquery
Jquery UI
Jquery UI

Jquery UI – мабуть, найвідоміша і проста UI бібліотека. Дуже зручна для сайту, але створення адмінки на ній ще збочення, так як Jquery UI містить всього 14 віджетів. Однак за рахунок її популярності відсутні UI елементи можна знайти в інтернеті і отримати адмінку на чистому Jquery UI а-ля «Франкенштейн» з купою милиць. Як не дивно, але на моїй практиці таке траплялося.
Ліцензія: Mit кращий результат Демо
Кількість віджетів: 14 Jquery UI
Розмір демо коду 5.00 кб
Складність освоєння Дуже легко
Швидкість розробки Дуже довго
Мобільні віджети використовуйте Jquery Mobile
Можливості і гнучкість 1/10
Код html +JS
Споживана пам'ять 4-9 мб
Час завантаження 1.08 – 1.49 сек
Час написання демо 2.5 години
Висновок: Зручна для сайту, але для просунутої адмінки нікуди не годиться. Зате безкоштовна.

Zino UI
ZIno UI
Zino UI — ще одна бібліотека, що базується на Jquery. Якщо ви працювали з Jquery UI, то розібратися в ній не проблема, назви методів майже ідентичні, тільки з приставкою zino. В принципі, з її допомогою реально написати адмінку, так як вона містить всі необхідні компоненти. Крім цього, бібліотека вміє працювати з SVG, будувати графіки (близько 30 видів графіків). Якщо ви не хочете возитися з html/js, то в коробці з бібліотекою йде PHP клас, який дозволяє створювати графічний інтерфейс на PHP. На момент написання статті ця бібліотека – поки спритна з усіх, які згадані і будуть згадані у другій частині. Якщо будете використовувати її в комерційному проекті, то зверніть увагу на смішну ціну.
Ліцензія: Commercial, 19$, для відкритих проектів – GPL Демо
Кількість віджетів: 25 zino UI
Розмір демо коду 7.83 кб
Складність освоєння Дуже легко.
Швидкість розробки Швидко
Мобільні віджети немає
Можливості і гнучкість 3/10
Код html +JS, PHP
Споживана пам'ять 3-5 мбкращий результат
Час завантаження 0.73 – 0.83кращий результат
Час написання демо 1.2 години
Висновок: Спритна, вміє працювати з графіками. Відмінна заміна Jquery UI.

Jquery Easy UI
Jquery Easy UI

Jquery Easy UI — дуже хороший, але чомусь мало кому відомий проект. Він ідеально підійде для новачків. В теорії адмінку можна написати без єдиної рядки js коду. Всі властивості віджетів можна передати через атрибут data-options, а можна прописувати їх у javascript коді.

Особисто я працював з нею досить довго, і можу точно сказати: вона легка в освоєнні і зручна, для великих проектів потрібно писати багато «велосипедного» коду, у той час як у старших братів це все вирішується прописуванням 2-3 опцій.

В запасі у бібліотеки 52 віджета. Є окремий ряд віджетів для мобільних додатків. На офіційному сайті є конструктор стилів. Для Java-кодерів є можливість писати на Java, використовуючи DWR Loader. Для PHP розробників, які не люблять возитися з html і javascript, є неофіційні компоненти для інтеграції бібліотеки в Yii.

З недоліків: є і ряд функцій, які не задокументовані взагалі. Також можна відзначити якусь глючность бібліотеки. Деколи в спробах виправити той чи інший глюк доводилося лізти у вихідний код бібліотеки і лаятися, так як левова частка коду навіщо-то обфускацирована.
Ліцензія: Commercial, 499$, для відкритих проектів – GPL Демо
Кількість віджетів: 52 Easy UI
Мобільні віджети 16
Розмір демо коду 4.58 кб
Складність освоєння Дуже легко.
Швидкість розробки В середніх проектах – дуже швидко, у складних — середньо
Можливості і гнучкість 4/10
Код html, html+PHP, Java, PHP (Yii) кращий результат
Споживана пам'ять 4.4-9 мб
Час завантаження 1.4 – 1.8 сек
Час написання демо 25 хвилин кращий результат
Висновок: Мала, та дуже потужна бібліотека. Ідеально підійде для новачків.

jQWidgets
jQWidgets

jQWidgets — мабуть, самий складний інструмент для створення ui, який базується на JQuery. На сайті величезна кількість прикладів інтеграції з такими бібліотеками, як Angular, Angular 2, Knockout. Продемонстрована можливість писати клієнтський код на Typescript. Є демки інтеграції з серверними мовами: PHP, Java, ASP.net. Сама бібліотека містить близько 60 віджетів. Одних тільки видів Layout — 3 штуки. Вміє будувати графіки (близько 30 видів). Всі віджети щодо гнучкі, володіють великою кількістю методів, властивостей, подій. Звичайно, всі ці фічі сильно позначилися на продуктивності самої бібліотеки. Серед всіх вищеописаних вона дуже ненажерлива. Крім цього, банальна відсутність нормального пошуку по документації на сайті, помножене на складність і нагроможденность коду, призводить до того, що розробка адмінки стає непосильною справою.
Ліцензія: Commercial, 199$, для відкритих проектів – GPL Демо
Кількість віджетів: 60 jqwidgets
Мобільні віджети 60
Розмір демо коду 10.3 кб
Складність освоєння складно
Швидкість розробки середньо
Можливості і гнучкість 6/10
Код html+JS
Споживана пам'ять 8 -20 мб
Час завантаження 2 – 2.6 сек
Час написання демо 4.5 години
Висновок: найпотужніша з поточного огляду, але в теж час досить складна і дешева бібліотека.

Також варті уваги
W2ui– мікроскопічна бібліотека для побудови інтерфейсу, заснована на jquery. Містить 8 компонентів (layout, таблиці, форми, панель інструментів, вкладки, форми, меню, дерево). Виглядає відмінно, не гальмує. Рекомендується для невеликих проектів.

primeUI — більш розширена версія JQuery UI з деревом і таблицями. Має більше 40 різних віджетів і більше 30 тем оформлення. Код можна писати в зв'язці html + js, або на чистому html, використовуючи призначені для цього нестандартні теги. Сама бібліотека є примочкою для більш великого проекту PrimeFaces, який дозволяє писати все це справа на Java.

На цьому поки що все. Це перша стаття, мені цікава зворотний зв'язок і реакція. Якщо не закидаете помідорами, то в другій частині я продовжу огляд бібліотек, що базуються на Jquery, але вже від компаній, що займаються інтерфейсом професійно. Вас чекає огляд демо приклади таких бібліотек, як: Kendo UI, Wijmo, IgniteUI, Essensial Js, DevExtreme, ShieldUI.

PS: Приклади з першої можна скачати по посилання. Там же скріншоти і дампи вимірів продуктивності.

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

  • JqueryUI

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

  • IgniteUI
  • Wijmo
  • Kendo UI
  • Syncfusion Essensial Js
  • ShieldUI
  • devExtreme
Не відсортовано:

  • AlloYUI
  • Dojo
  • ExtJs
  • Qooxdoo
  • Smartclient
  • Webix
  • dhtmlx
  • Openui5
  • RedUI
  • Backbase
  • CrossUI
  • SproutCore
  • Rialto
  • Bindows
Не буде описано:

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

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

0 коментарів

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