От автора: при проектировании современных сайтов зачастую приходится создавать полезные 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 проста и понятна. Слева расположены элементы управления, справа – информация о них. Для каждого элемента есть скриншот, пример кода и все свойства, методы и события. Мне не хватает лишь живых демо на страницах.
На главной странице демо есть ссылки на демки для всех элементов. Например, демо Panel Control показывает, как могут выглядеть пользовательские элементы, вложенные панели и другие элементы.
С 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, пожалуйста, пишите их в комментариях.
Автор: Simon Codrington
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
