Всем привет! На дворе 2016 год, и Интернет уже давно превратился в нечто большее, чем простые сайты.
Львиная доля компаний давно забыла о десктопных программах и использует веб-приложения для обычных задач, будь то CRM, система управления складом, система аналитики или простая панель администрирования сайта (далее админпанель).
И их можно понять, ведь работа не требует определенной настройки, специального установленного программного обеспечения или его обновления.
Просто откройте браузер и программа работает. Поэтому, на мой взгляд, за веб-приложениями будущее! Сделать с нуля полноценную программу, ничем не уступающую десктопной – задача Геркулеса.
Во-первых, вам нужно как-то реагировать на те или иные события в реальном времени, и периодически подгружать данные.
Во-вторых, Обычно вам нужны те элементы управления (виджеты), которые доступны в настольных приложениях.
Но их нет. В 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 пользовательский интерфейс
JQuery пользовательский интерфейс — пожалуй, самая известная и простая UI-библиотека.
Для сайта это очень удобно, но создавать на нем админку — это все равно извращение, так как Jquery UI содержит всего 14 виджетов.
Однако из-за его популярности недостающие элементы пользовательского интерфейса можно найти в Интернете и получить админку на чистом Jquery UI а-ля «Франкенштейн» с кучей костылей.
Как ни странно, такое произошло в моей практике.
| Лицензия: | Мит лучший результат | Демо |
|---|---|---|
| Количество виджетов: | 14 |  |
| Размер демо-кода | 5,00 КБ | |
| Сложность освоения | Очень просто | |
| Скорость разработки | Очень долгое время | |
| Мобильные виджеты | используйте Jquery Mobile | |
| Возможности и гибкость | 1/10 | |
| Код | HTML +JS | |
| Потребление памяти | 4-9 мб | |
| Время загрузки | 1,08 – 1,49 сек.
|
|
| Время написания демо | 2,5 часа |
Но это бесплатно.
Зино Пользовательский интерфейс
Зино Пользовательский интерфейс — еще одна библиотека на основе Jquery. Если вы работали с Jquery UI, то разобраться в нем не проблема; Названия методов практически идентичны, только с префиксом zino. В принципе, с ее помощью можно написать админку, так как она содержит все недостающие компоненты.
Кроме того, библиотека умеет работать с SVG и строить графики (около 30 типов графиков).
Если не хотите возиться с html/js, то в коробке с библиотекой есть PHP-класс, позволяющий создать графический интерфейс на PHP. На момент написания эта библиотека пока самая быстрая из всех упомянутых и будет упомянута во второй части.
Если вы используете его в коммерческом проекте, то обратите внимание на смешную цену.
| Лицензия: | Коммерческая, 19 долларов США, для проектов с открытым исходным кодом – GPL. | Демо |
|---|---|---|
| Количество виджетов: | 25 |  |
| Размер демо-кода | 7,83 КБ | |
| Сложность освоения | Очень просто.
|
|
| Скорость разработки | Быстрый | |
| Мобильные виджеты | Нет | |
| Возможности и гибкость | 3/10 | |
| Код | HTML +JS, PHP | |
| Потребление памяти | 3-5 МБ лучший результат | |
| Время загрузки | 0.73 – 0.83 лучший результат | |
| Время написания демо | 1,2 часа |
Отличная замена Jquery UI.
Простой пользовательский интерфейс Jquery
Простой пользовательский интерфейс Jquery — очень хороший, но почему-то малоизвестный проект. Он идеально подходит для новичков.
Теоретически админку можно написать без единой строчки js-кода.
Все свойства виджета можно передать через атрибут data-options или записать их в коде JavaScript. Лично я работал с ним довольно долгое время и могу сказать точно: он прост в освоении и удобен; для больших проектов нужно писать много «велосипедного» кода, а у его старших собратьев это все решается написанием 2-3 вариантов.
В библиотеке имеется 52 виджета.
Есть отдельная серия виджетов для мобильных приложений.
На официальном сайте есть конструктор стилей.
Программисты Java могут писать на Java с помощью DWR Loader. Для разработчиков PHP, которые не любят возиться с html и javascript, существуют неофициальные компоненты для интеграции библиотеки в Yii. Из недостатков: есть ряд функций, которые вообще не документированы.
Также можно отметить, что библиотека несколько глючная.
Иногда в попытке исправить тот или иной глюк мне приходилось лезть в исходный код библиотеки и ругаться, так как по каким-то причинам львиная доля кода была запутана.
| Лицензия: | Коммерческая, $499, для проектов с открытым исходным кодом – GPL. | Демо |
|---|---|---|
| Количество виджетов: | 52 |  |
| Мобильные виджеты | 16 | |
| Размер демо-кода | 4,58 КБ | |
| Сложность освоения | Очень просто.
|
|
| Скорость разработки | В средних проектах – очень быстро, в сложных – умеренно.
|
|
| Возможности и гибкость | 4/10 | |
| Код | HTML, HTML+JS, Java, PHP (Yii) лучший результат | |
| Потребление памяти | 4,4-9 мб | |
| Время загрузки | 1,4 – 1,8 сек.
|
|
| Время написания демо | 25 минут лучший результат |
Идеально подходит для новичков.
jQВиджеты
jQВиджеты — пожалуй, самый сложный инструмент для создания ui, основанный на JQuery. На сайте огромное количество примеров интеграции с такими библиотеками, как Angular, Angular 2, Knockout. Продемонстрировал умение писать клиентский код на Typescript. Есть демо-версии интеграции с серверными языками: PHP, Java, ASP.net. Сама библиотека содержит около 60 виджетов.
Только существует 3 типа макета.
Умеет строить графики (около 30 видов).
Все виджеты относительно гибки и имеют большое количество методов, свойств и событий.
Разумеется, все эти возможности сильно повлияли на производительность самой библиотеки.
Среди всех описанных выше она самая прожорливая.
Кроме того, банальное отсутствие нормального поиска документации на сайте, помноженное на сложность и загроможденность кода, приводит к тому, что разработка админки становится непосильной задачей.
| Лицензия: | Коммерческая, 199 долларов США, для проектов с открытым исходным кодом – GPL. | Демо |
|---|---|---|
| Количество виджетов: | 60 |  |
| Мобильные виджеты | 60 | |
| Размер демо-кода | 10,3 КБ | |
| Сложность освоения | трудный | |
| Скорость разработки | средний | |
| Возможности и гибкость | 6/10 | |
| Код | HTML+JS | |
| Потребление памяти | 8 -20 мб | |
| Время загрузки | 2 – 2,6 сек.
|
|
| Время написания демо | 4,5 часа |
Также заслуживают внимания
W2ui — микроскопическая библиотека для построения интерфейса на базе jquery. Содержит всего 8 компонентов (макет, таблица, формы, панель инструментов, вкладки, формы, меню, дерево).Выглядит отлично, не тормозит. Рекомендуется для небольших проектов.
PrimeUI — более продвинутая версия JQuery UI с деревом и таблицами.
Он имеет более 40 различных виджетов и более 30 тем.
Код можно писать в комбинации html+js, либо на чистом html, используя предназначенные для этого нестандартные теги.
Сама библиотека представляет собой плагин для более крупного проекта PrimeFaces, который позволяет написать всё это дело на Java. Это все на данный момент. Это первая статья, мне интересны отзывы и реакции.
Если вы не закидываете меня помидорами, то во второй части я продолжу обзор библиотек на базе Jquery, но от компаний, которые занимаются профессиональными интерфейсами.
Вы найдете обзор и демонстрационные примеры таких библиотек, как: Кендо пользовательский интерфейс , Веймо , IgniteUI , Эссенциальный Джс , DevExtreme , Щитовый интерфейс .
ПС: Примеры из первого можно скачать по адресу связь .
Также есть скриншоты и дампы замеров производительности.
П.
П.
С.
Список библиотек, которые будут/были описаны Часть 1:
- JqueryUI
- Зино Пользовательский интерфейс
- EasyUI
- jQВиджеты
- W2ui
- PrimeUI
- IgniteUI
- Веймо
- Кендо пользовательский интерфейс
- Syncfusion Essential Js
- Щитовый интерфейс
- devExtreme
- АллоYUI
- Додзё
- ExtJs
- Куоксду
- Смартклиент
- Вебикс
- dhtmlx
- Опенуи5
- RedUI
- Бэкбаза
- КроссUI
- SproutCore
- Риальто
- Окна
- ЮИ (устарело)
- Мочауи (устарело)
- Опенрико (устарело)
- Лидорсистемс (пока не решено, выглядит плохо)
- Rightjs (пока не решено, виджетов недостаточно)
- EnyoJS (WTF? для телевидения?)
Возможно я что-то не упомянул, дополните пожалуйста в комментариях.
Часть 2 Теги: #JavaScript #ui #spa #Ajax #jQuery #jQuery UI #easy ui #zino ui #jQWidgets #w2ui #primeUI #JavaScript #jQuery
-
Что Такое Планшетный Цветной Сканер?
19 Oct, 24 -
Google Обогнал Microsoft По Посещаемости
19 Oct, 24 -
Действительно
19 Oct, 24 -
Php-Дайджест № 129 (8–22 Апреля 2018 Г.)
19 Oct, 24
