Від автора: при проектуванні сучасних сайтів часто доводиться створювати корисні UI компоненти. Створюєте ви календар, слайдер, графік або що-небудь ще корисне, що поліпшить і зробить простіше взаємодія, у вас є два варіанти: створити самому або покластися на існуючий функціонал.
Розробляти компоненти самому – складно і довго. Якщо це не щось унікальне, краще витратити час на щось інше. Ось тут нам і допоможуть UI бібліотеки і фреймворки. Ці бібліотеки спрощують процес створення спільних UI компонентів. Це фреймворки можна налаштувати під свої потреби.
Один з найбільш великих і широко використовуваних фреймворків — jQuery UI. Це розширений набір віджетів, ефектів і тим на основі jQuery, розбитий на поднаборы компонентів. Всі jQuery UI компоненти можна завантажити разом або вибрати тільки ті, які вам необхідні. Така колекція дозволяє проектувати послідовний зовнішній вигляд компонентів, а також без зайвої метушні запустити проект.
JQueri UI добре працює, це відмінний варіант, але є й інші фреймворки, які можуть похвалитися дивовижними елементами керування високої якості. У цій статті я розгляну кілька, щоб зрозуміти, які з них краще.
Kendo UI
Платний фреймворк
Фреймворк Kendo UI – це набір з більш ніж 70 компонентів, які прискорюють розробку. Компоненти адаптивні, налаштовуються під теми, швидкі і високо настроюються.
У Kendo UI є кілька плюсів, які допоможуть створити дивовижні інтерактивні елементи.
По-перше, компоненти створені з нуля (Telerik) для швидкої роботи. На відміну від деяких інших фреймворків ці віджети створені з нуля на чистому JS без залучення jQuery. Самі компоненти швидкі, плавні і надійні навіть на мобільних пристроях.
Ми заговорили про мобільних пристроях. Тут Kendo UI теж є чим похвалитися. Компоненти заточені під мобільні пристрої та використовують адаптивні макети. Велика частина віджетів налаштовується, а елементи управління змінюються в залежності від того, чи переглядаєте ви їх на мобільному пристрої чи ні. Це відмінна функція. Нижче представлений компонент слайдер, він автоматично підлаштовується під розмір екрану.
З точки зору реалізації компоненти добре продумані. Розробники можуть встановлювати їх в JS або на сервера (наприклад, вивід на екран через PHP). Крім веб-версії Kendo UI є відгалуження для Android і iOS.
Інша цікава функція – інтеграція з Angular JS. Це повна система з UI елементами, створеними з нуля для ідеальної стикування з проектом на Angular. Якщо будете використовувати Angular, вам потрібно знати, що Kendo інтегрований з цим фреймворком, і в майбутньому у вас буде підтримка.
Єдиний недолік — Kendo UI платний фреймворк. Це повністю платна бібліотека, яка може обійтися вам в пару тисяч в залежності від потреб. Цього достатньо, щоб налякати деяких розробників. Однак за ці гроші ви отримуєте відмінну якість і підтримку.
Webix
Безкоштовний/платний фреймворк
Webix – легкий і швидкий спосіб для розробників почати збирати загальні UI елементи. В комплекті іде набір візуалізації даних, елементи управління макетом, навігацією і редагуванням. Фреймворк ділить частину компонентів з jQuery UI (календар, акордеон, діалогові вікна і т. д.). Webix розширює і виходить за рамки того, що можна зробити в jQuery UI.
Документація, яку ви отримаєте, вражає. У всіх елементів управління є посилання на API, де прописані всі методи, властивості та події елемента. Більш того, у більшості елементів є посилання на приклади, де можна подивитися, як що функціонує. Дружелюбна документація дуже важлива. Приємно бачити, що вони приділили їй час.
Ще один плюс – розробники часто оновлюють свій блог. Там є пара постів з корисними порадами та практичними прикладами. Наприклад, цей пост по доступності для UI компонентів. У мережі купа фреймворків, і завжди добре знайти щось свіже.
Webix пропонує безкоштовну і платну версію фреймворка. Безкоштовна версія покриває більшу частину того, що може знадобитися на ранніх етапах. Ви отримуєте доступ до таких спільних елементів, як графіки, списки, дерева та календарі.
У платній версії сервісу є додаткові елементи управління (множинний вибір, вибір діапазону дат), а також підтримка і допомога.
Ще один плюс платній версії – доступ до продуманим рішенням типу планувальника.
Додаткові рішення – це добре продумані віджети, які позбавляють вас від складності створення цих компонентів самому. Вони дозволяють зосередитися на функціоналі і стилі.
В цілому, безкоштовні віджети надійні і пропонують хороший функціонал. Платні компоненти виглядають нормально, так як є досить хороші безкоштовні. Хочете прицінитися до додаткових елементів і функціоналу, подивіться їх документацію по віджетів.
Шукайте добре документована і здебільшого безкоштовне рішення для вашого UI, тоді Webix вам підійде.
JQwidgets
Полубесплатный/платний фреймворк
JQWidgets – фреймворк під управлінням jQuery, створений для того, щоб розробники могли створювати адаптивні, швидкі і надійні UI компоненти для сайтів. Компоненти JQWidget були створені для того, щоб в jQuery були інтерактивні, динамічні і високо настроюються віджети.
Коли ви вивчаєте новий фреймворк, необхідно мати можливість зв’язатися з розробниками і задати їм питання, а також зрозуміти принцип роботи фреймворка. JQWidgets дуже простий, а також у них часто відвідуваний форум. Крім форуму є часто оновлюваний блозі розробників (зі статтями, звітами по релізів і загальними думками).
В основі будь-якого фреймворку лежить документація, і JQwidgets не виняток. В документації описаний принцип роботи всіх віджетів, а також є приклади коду і хороші демо в кінці. Документація для віджета Popover. Для кожного елемента є легка в розумінні керівництво по API з прикладами виконання властивостей і методів.
Ще один плюс, про який варто розповісти – JQwidget підтримує React, Angular і навіть ASP .NET компоненти. Якщо ви робите наголос на один з компонентів, то цей фреймворк може заощадити вам купу часу.
Приємно бачити, що в JQwidgets є ці поширені фреймворки. Ви можете використовувати сам JQwidget або ж одну із замін типу Angular. Безпрограшний варіант.
JQwidget йде в двох варіантах – полубесплатный і платний. Дозволено некомерційне використання колекції. Однак для комерційного використання (варіант для більшості) необхідно придбати ліцензію.
Ціна залежить від підтримки та розміру компанії. Якщо ви хочете купити фреймворк для себе, можете придбати саму дешеву версію. Якщо ж ви є цифровим агентством, вам знадобиться ліцензія на один з найдорожчих варіантів. Чим більше заплатите, тим більш високий рівень підтримки отримаєте. Ви самі вирішуєте, що потрібно.
EasyUI
Полубесплатный/платний фреймворк
EasyUI – колекція розширених jQuery віджетів, з допомогою яких можна створювати інтерактивні елементи для сучасних, адаптивних сайтів і додатків. У EasyUI можна створювати загальні UI елементи як безпосередньо через HTML розмітку, так і в JS.
Вас може збентежити дизайн EasyUI, так як він відрізняється від інших UI фреймворків, які ми розглядали. Окремі елементи дизайну, виконані не дуже добре. Ніби на дворі 2010.
Стилі за замовчуванням можуть не вразити вас, але в EasyUI є дивовижний живий редактор тим, в якому можна міняти розмір шрифту, колір тексту, колір фону, положення і більшу частину інших загальних властивостей. Крім усього іншого ви отримуєте прямий доступ до CSS, а це означає, що ви можете самі створити тему під свої потреби.
Тема «Material Design».
Документація для EasyUI проста і зрозуміла. Зліва розташовані елементи управління, праворуч – інформація про них. Для кожного елемента є скріншот, приклад коду і всі властивості, методи і події. Мені не вистачає лише живих демо на сторінках.
На головній сторінці демо є посилання на демки для всіх елементів. Наприклад, демо Control Panel показує, як можуть виглядати користувальницькі елементи, вкладені панелі та інші елементи.
З jQuery EasyUI можна працювати безкоштовно в некомерційних цілях. Якщо ж ви розробник, вам знадобиться ліцензія. Ціну можна дізнатися на сторінці контактів, вона досить прийнятна (порівняно з деякими дорогими фреймворками). Ця бібліотека – відмінна відправна точка, пропонує додаткові можливості, які зазвичай очікуєш побачити в більш просунутих сервісах. Наприклад, активний форум і ряд розширень.
Це надійний фреймворк, і незважаючи на те, що він виглядає старо (сайт та документація), це хороша опора, якщо вам потрібно перейти з jQuery UI.
Wijmo
Платний фреймворк
Wijmo – ряд користувача елементів управління на JS, написаних у TypeScript і розроблених для створення швидких, адаптивних і розширюваних UI елементів. Wijmo пропонує широкий набір елементів і підтримку декількох JS-фреймворків типу React, Angular і Vue.
Wijmo підтримує ряд елементів управління, велика частина яких зосереджена на візуалізації даних і введення. Наприклад, графіки, датчики, инпуты і сітки. Поки інші фреймворки пропонують ряд базових елементів типу діалогових вікон і макетів, Wijimo заточений під дані.
Цікаво, що розробники пропонують підтримку як для Wijimo 5, так і для старої версії Wijimo 3. Wijmo 5 побудований на сучасних стандартах і не працює в IE8. Тут нам допоможе стара версія. Wijimo 3 заснований на jQuery, а значить, підтримує IE аж до версії 6. Приємно знати, що завжди є вибір, і що розробники підтримують старі фреймворки просто тому, що вони вам можуть стати в нагоді.
Документація і сайт Wijimo заплутані. Всі елементи управління подані на сторінці документації. Однак вони не дуже доброзичливі. Наприклад, якщо вам потрібно вивчити модуль графіків, то потрібно дійти до цієї сторінки. В документації є детальна інформація про класи та інтерфейси, але нічого немає про специфічні елементи управління з зображеннями, прикладами коду, гарним описом і демо.
На сайті є розділ «Explorer», де можна подивитися, як відображаються ці елементи. Там же можна їх налаштувати. Цікавий інструмент, за допомогою якого можна отримати уявлення про елементи.
Приклад лінійного графіка з компонента Flexchart.
В інших фреймворків документація краще, для кожного компонента є окрема сторінка або підсторінки з описом технічних компонентів, прикладів та описів.
Коли вкладається в новий фреймворк, добре мати надійну документацію. Якщо ви захочете побачити модуль графіків в дії (і приклади коду), вам доведеться повернутися до демо сторінці і знайти демо Flexchart. Ще один плюс – часто оновлюваний блог. Там можна знайти корисні поради, основні плюси системи і різні думки. Гарне доповнення.
Опустимо недоліки сайту, цікаві самі елементи управління. Для кожного елемента можна налаштувати відображення, додати колбэки для функціоналу, а також є можливість стилізувати елементи.
Wijimo пропонує пробний період на свої продукти (як і Kendo), однак якщо ви хочете використовувати їх комерційно, знадобиться ліцензія. Ціни можна переглянути на сторінці покупки. Ціна варіюється в залежності від потрібних елементів. Якщо потрібен просто Wijimo 5, можна купити тільки його. Однак якщо вам потрібні елементи .NET / Xamarin, вам знадобиться дорога версія.
Wijimo зосереджений на візуалізації даних. Цей фреймворк не складно порівнювати з бібліотеками типу HighCharts, в якій одні з найкращих графіків і діаграм.
Альтернативи jQuery UI
У загальному і цілому, в мережі повно хороших фреймворків, які ідеально замінять або доповнять jQuery UI. Велика частина фреймворків, як розглянуті нами, платні, що можна зрозуміти.
Зрештою, якщо ви шукайте рішення, вам доведеться або підтримати хороший проект з відкритим вихідним кодом, наприклад, jQuery UI, який використовує напрацювання спільноти, або придбати підписку на компанію і використовувати їх продукт.
Якщо ви використовуєте фреймворк і не пишіть сайт з нуля, ви вже виграли. Вам потрібно буде зважити функції і елементи з ціною на фреймворк, а також часом і енергією, які знадобилися б на створення чогось подібного якості.
В мережі є кілька якісних бібліотек. Парочку рішень можна знайти на сайті Alternative To. Бути може, ви захочете з ними експериментувати. Якщо знаєте інші хороші заміни jQuery UI, будь ласка, пишіть їх в коментарях.
