Интерфейсы без «велосипедов»

Не так давно пришел к нам клиент за сайтом. Мы провели переговоры, дали почитать коммерческое предложение, рассказали о преимуществах, показали портфолио, в общем, впечатляли, как могли. Клиенту все понравилось: и опыт подобных проектов у нас есть, и специалистов много – объем работ осилим. А вот прежде чем подумать и принять решение попросил, клиент, показать интерфейс админки нашей CMS, и сказал что интерфейс бэкенда – один из ключевых факторов, влияющих на его выбор.

Интерфейс нашей системы его вполне устроил, а вот мы, в процессе демонстрации, взглянули на него более критично, и поняли, что можем сделать лучше, удобнее и функциональнее. Только вот как сделать со всех сторон правильный интерфейс, чтобы и разработка с поддержкой не подорожали, и чтобы функциональность и удобство использования были ожидаемые? На этот вопрос я постараюсь ответить в данной статье.

Что к чему?

Разработчиков сайтов можно условно поделить на две группы: те, кто делает сайты на готовой «коробочной» системе управления и те, кто делает сайты на CMS собственного производства.  С «коробками» все понятно – целая компания делает CMS и «вылизывает» все, в том числе и интерфейс бекенда. Для них важно чтобы их система была уникальной во всем – свое оформление, архитектура и пр.

Мы же делаем сайты, и именно на них, а не на продаже лицензий на CMS мы концентрируем свое внимание, и нам важнее, чтобы клиент получил нужный ему функционал, удобный инструмент управления и красивый дизайн его сайта. Кто-то сейчас понял, что я клоню к нерентабельности разработки CMS и думают – «Почему не использовать коробку?». Все просто – сайты, которые мы делаем обычно слишком специфичны, и реализовать «специфичность» в своей CMS гораздо быстрее и дешевле чем в чужой.

Резюмировать все выше сказанное можно так: разрабатывая систему управления сайтом перед нами стоит задача – сделать функциональную масштабируемую систему, сохранив при этом стоимость разработки конечного продукта (сайта) или снизить ее. Самым привлекательным решением этой задачи мне видится использование готовых программных продуктов и библиотек функций, чтобы избавить разработчика от изобретения «велосипедов». Речь в данной статье идет об интерфейсах бекенда, поэтому дальше мы будем рассматривать соответствующие варианты этих самых «велосипедов».

Готовые решения для разработки интерфейсов

Я не буду рассматривать CSS фреймворки (например – bootstrap), они замечательные, но все же требуют огромных трудозатрат для реализации нужной функциональности. Посмотрим на JavaScript решения, такие как Sencha ExtJS, Kendo UI, qooxdoo и jQueryUI.

Самым богатым функционалом, интересующим нас, обладают первые три. Идея jQueryUI лично меня когда-то очень даже впечатлила, но скорость разработки этой библиотеки оставляет желать лучшего – например, виджеты Grid, TreeView и Combobox были заявлены еще в начале разработки, но так и не реализованы. Интересный вариант qooxdoo, но он распространяется под некоммерческими лицензиями, и не очень популярен, так что ему сложно доверять (это мое мнение, если считаете, что я не прав – пишите в комментарии доводы, с удовольствием почитаю). Остаются две коммерческие разработки: Sencha ExtJS и Kendo UI. Обе очень интересные, их и рассмотрим подробнее.

Стоимость «входа»

Прежде чем в полной мере использовать ту или иную библиотеку разработчикам необходимо ее изучить, на это естественно тратится драгоценное время, рассмотрим факторы, влияющие на временнЫе затраты при переходе на Sencha ExtJS и KendoUI.

Привычка

KendoUI – по сути набор плагинов для jQuery, который в настоящее время стал чуть ли не стандартом веб-разработки, что дает программисту мнимое облегчение. Почему мнимое? Дело в том, что разрабатывая интерфейс на KendoUI доля использования функциональности jQuery программистом будет ничтожно мала, остальное – работа, по сути, с новыми объектами Kondo.

Sencha ExtJS – на первый взгляд это взрыв мозга. Фреймфорк в котором все непонятно, у него свои инструменты для работы с DOM, своя архитектура, все свое. Но после нескольких часов работы с ним понимаешь – он организован очень логично, особенно последняя (четвертая) версия. Все разложено по полочкам, и упомянутый выше взрыв мозга происходит только от того что все привыкли к другой архитектуре – обычно это архитектура jQuery, которая на мой взгляд не приспособлена быть больше чем набор хелперов для работы с DOM, событиями и ajax-запросами, которым jQuery и является.

Какая бы не была логичная структура у Sencha ExtJS, первое впечатление все же важно, зачислим один балл в пользу Kendo.

Документация

Нужно оговориться, что Kendo UI поставляется в виде трех пакетов: Web, Mobile и Dataviz. Это три разных, но совместимых продукта, которые продаются отдельно друг от друга (оптом, конечно, купить тоже можно). В документации намешано все, то есть если не «вкурить», что именно нужно, то можно запутаться. Хотя все, что нужно в документации есть: getting started, различные  пошаговые инструкции (tutorials), рецепты (how-do) и конечно API reference. Есть еще форумы: свой – на официальном сайте и на stackoverflow.com, но на официальном сайте, форум какой-то скудный, а на stackoverflow.com, уж извините, помойка, в которой сложно что-то найти если не знаешь что именно ищешь (а новички все этим страдают).

С документацией по Sencha ExtJS дело обстоит куда лучше, не смотря на то, что это тоже не единственный продукт в семействе Sencha. Есть те же get started, tutorials и API reference, так же есть очень развитый форум, который, за годы существования, накопил огромное количество знаний, методов и рецептов.

Так что Sencha ExtJS явно заслужил свой балл за документацию. Итого 1:1 🙂

Архитектура приложения

Напомню: мы говорим о экономически выгодном фреймворке, который обладая необходимой функциональностью, позволяет реализовать интерфейс пользователя с минимальными трудозатратами. И в этом Sencha ExtJS явно преуспел – он позволяет быстро собрать интерфейс на чистом JavaScript (без HTML верстки), используя мощный инструмент – Layouts (хороший пример стандартных лэйаутов можно посмотреть здесь). Интерфейс Sencha ExtJS представляет собой набор разного рода панелей, которые вписываются в ее специально определенные области. Например, если нам необходимо разделить страницу админки сайта на три зоны: меню, левая колонка со структурой сайта, и формой редактирования выбранного в структуре раздела, Sencha ExtJS позволяет сделать такую разметку буквально в несколько строк кода, при этом нет необходимости продумывать верстку станицы – ExtJS сделает все сам:

1

Код:

html

<html>

<head>

<title>Hello Ext</title>

<link rel=»stylesheet» type=»text/css» href=»js/ext/resources/css/ext-all.css»>

<script type=»text/javascript» src=»js/ext/ext-debug.js»></script>

<script src=»js/main.js»></script>

</head>

<body></body>

</html>

Как видно он почти пустой.

JavaScript

Ext.application({

name: ‘HelloExt’,

launch: function () {

Ext.create(‘Ext.container.Viewport’, {

layout: ‘border’,

items: [

Ext.create(‘Ext.panel.Panel’, {

region: ‘west’,

width: 200,

title: ‘west panel’

}),

Ext.create(‘Ext.panel.Panel’, {

region: ‘center’,

title: ‘center panel’

}),

Ext.create(‘Ext.toolbar.Toolbar’, {

region: ‘north’,

defaults: {

scale: ‘medium’

},

items: [

{

text: ‘Button 1’

},

{

text: ‘Button 2’

},

{

text: ‘Button 3’

},

{

text: ‘Button 4’

}

]

})

]

});

}

});

Kendo напротив – встраивается в существующую верстку. Это не плохо, но мы говорим о максимальном упрощении разработки интерфейса.

Еще один балл в пользу Sencha ExtJS.

Функциональность

Что мы ждем от JS фреймворка для быстрой разработки пользовательского интерфейса? Конечно же, широкого набора всевозможных виджетов, и возможности расширения, как самого набора, так и функциональности отдельных виджетов. Sencha ExtJS преуспел и в этом, несмотря на то, что последняя ветка 4х в корне отличается от всех предыдущих, разработчики умудрились реализовать все что имелось в ранних версиях, кроме того компоненты фреймворка пишутся членами огромного сообщества, ссылки на них регулярно публикуются на официальном форуме. Так же совсем недавно Sencha запустила свой market, с которого можно скачать (я пока не нашел ничего платного) готовые компоненты и темы.

Kendo UI так же имеет в своем арсенале внушительный список реализованных виджетов, но он явно уступает тому что есть у Sencha ExtJS. Думаю, со временем это исправится, в конце концов, проект молодой и очень перспективный.

И снова балл в пользу ExtJS.

Производительность и ресурсы

Сравнивая производительность обоих фреймворков я был поражен: Kendo UI больше «весит» —  более 600 кб. скриптов + css и всякие картинки почти на 300 кб, аналогичный пример на ExtJS загрузил всего этого примерно на 150 кб меньше, а ведь принято считать что ExtJS тяжелый и не поворотливый.

Особой разницы в скорости работы самого интерфейса я не заметил, оба фреймворка справились на ура. Хотя хочу оговориться – я не производил замеров скорости, меня интересовал комфорт использования, да и замерить скорость, с которой рендерится какой-нибудь грид довольно сложно – слишком много работы ложится на плечи внутренних механизмов браузера.

В общем, опять балл в пользу ExtJS за компактность.

Цены

Оба фреймворка платные для коммерческого использования, и с ценами явный перевес (не в лучшую сторону) у Kendo – лицензия на web редакцию (для честности включим еще dataviz – в ExtJS подобные компоненты идут по умолчанию) с поддержкой на год почти 800 USD, тогда как лицензия на ExtJS достанется вам за 595 американских денег.

Опять балл Ext’у.

Итого

5:1 в пользу Sencha ExtJS, хотя ругать Kendo не буду – мне он понравился, и я его «поковыряю» поглубже, и, конечно же, посмотрим, как он будет развиваться. А пока если и делать интерфейсы без «велосипедов» то на Sencha ExtJS.

P.S.

Рассмотрел, конечно, не все интересности обоих фреймворков, «за кадром» остались темы оформления, эстетические впечатления и прочее, но тут, опять же по моему мнению, оба фреймворка одинаково интересны, так что писать об этом нет никакого смысла.

Upt. #1

Только что обнаружил песочницу Sencha ExtJS и Touch — http://try.sencha.com/

2 комментария to “Интерфейсы без «велосипедов»”

  1. strlock:

    Все равно qooxdoo буду использовать, не смотря на рекламу.

    • Евгений Бурмицкий:

      Qooxdoo — отличный фреймворк! Но бесплатный, соответственно за него никто не отвечает, что для использования в коммерческих проектах не очень хорошо. Рекламы же в посте не было, я просто похвалил понравившийся программный продукт, сравнив его с другим. Вывод конечно субъективный, но я честно предупредил об этом.

Коментарии