Поединок библиотек Ajax: Dojo против YUI

Применение библиотек для создания дополнительных удобств для пользователя

Asynchronous JavaScript и XML (Ajax) применяется повсюду от местных газет до Web-сайтов, посещаемых руководителями компаний. Вопреки распространенному мнению, это не так уж сложно, особенно при наличии подходящей библиотеки. Мы рассмотрим популярные библиотеки Yahoo! User Interface (YUI) и Dojo и покажем, как они могут упростить типичные методы Ajax и облегчить работу с JavaScript. Вы узнаете, почему библиотеку следует использовать в первую очередь и как выбрать наиболее подходящую. А также познакомитесь с конкретными примерами применения YUI и Dojo.

Натаниэль Шута (Nathaniel T. Schutta) , Разработчик программного обеспечения - Studio B

Натаниэль Шутта, автор Studio B, является разработчиком ПО (в основном – Web-приложений на языке Java) с большим опытом в области финансовых услуг. Проповедуя технологию JUnit, он внес вклад в разработку двух корпоративных Java-платформ и в свое время участвовал в организации нескольких семинаров, работал в качестве руководителя проектов и разрабатывал учебные материалы. Являясь сертифицированным разработчиком Web-компонентов (Sun Certified Web Component Developer) для платформы Java 2 Platform Enterprise Edition 1.4, Натаниэль уделяет основное внимание разработке удобных интуитивно-понятных интерфейсов пользователя.



18.07.2011

Сегодня для создания современного Web-приложения требуется гораздо больше, чем всего несколько лет назад. От разработчиков ждут создания многофункциональных интерактивных интерфейсов, использующих все преимущества инструментария Ajax. Когда этот подход появился впервые, многие утверждали, что нужно быть большим ученым, чтобы его освоить, и хотя сегодня это тоже не тривиально, помогают высококачественные системы разработки. В этой статье говорится о том, как популярные библиотеки, такие как Dojo и Yahoo! UI Library (YUI), упростили жизнь разработчикам JavaScript, почему библиотеку следует использовать в первую очередь и как выбрать подходящую. В ней приводятся также конкретные примеры применения YUI и Dojo.

Почему нужно использовать библиотеку?

В эпоху палеолита Web, которая пришлась на конец 1990-х, те из нас, кто занимался разработкой клиентской части приложений, пользовались довольно грубыми инструментами. Оптическое разрешение мониторов было ниже, чем у сегодняшних смартфонов; войны браузеров, которые были в самом разгаре, вынуждли нас приспосабливаться к их несовместимому поведению; а наш арсенал был лишь немногим лучше, чем у того парня, который настоял на применении перфокарт. И мы поднимались в гору по глубокому снегу в обоих направлениях. Заставить JavaScript правильно работать в разных браузерах было подвигом Геракла, и в одном из ранних проектов я столкнулся с таким количеством проблем, что менеджер сказал: "Используй только самый необходимый минимум JavaScript, чтобы приложение работало". Я не скучаю по тем временам.

Теперь все гораздо лучше. Хотя проблемы браузеров все еще существуют (это камень в огород Windows® Internet Explorer® 6). В дополнение к значительно улучшенному инструментарию бремя разработки кросс-браузерного интерфейса теперь облегчает множество разнообразных библиотек. В попытках выбрать подходящую среду разработки, чтобы упростить себе жизнь, вы сталкиваетесь с парадоксом выбора ― но это, конечно, лучше долгих ночей отладки в попытках преодолеть проблемы браузера X на операционной системе Y! Сегодня нужно искать библиотеку, которая ляжет в основу ваших усилий по программированию – типа виртуальной машины, не зависящей от разных реализаций браузера и от кода, который вы пытаетесь написать.

Кроме сглаживания различий между браузерами, такой инструментарий дает вам дополнительные рычаги в повседневной работе по программированию. Некоторые библиотеки-минималисты решают одну и только одну задачу, другие служат универсальным инструментарием, который стремится исправить все недостатки Web. Но несмотря на различия библиотек, в них много общего. Большинство из них обеспечивает:

  • оболочку для объекта XMLHttpRequest (XHR);
  • не зависящие от браузера селекторы CSS;
  • упрощенную обработку событий;
  • разнообразные анимации, эффекты и виджеты;
  • прочие полезные функции.

Как же выбирать только одну библиотеку? Единственный неправильный ответ ― кодирование вручную, не пользуясь никакими библиотеками. Выбор библиотеки может быть труден, но это ничто по сравнению с попытками сделать все самому. Прежде чем паниковать и размышлять о том, как выбрать единственную библиотеку, знайте, что большинство их прекрасно работает вместе (в разумных пределах), а иногда их сочетание является наилучшим вариантом. Тем не менее, вот некоторые вопросы, на которые необходимо ответить при выборе библиотеки.

  • Что вам от нее нужно? Ищете ли вы полную замену практически всем элементам пользовательского интерфейса на странице или просто что-то для облегчения программирования JavaScript?
  • Насколько легко читать код? Несмотря на огромные успехи последних нескольких лет в области документации, наверняка в какой-то момент вам придется копаться в коде. Прежде чем остановиться на той или иной библиотеке, потратьте некоторое время на изучение исходного кода. Легко ли его понять, или же проблемы с этим возникнут и у самого автора?
  • Насколько хороша документация? Ясный и читабельный код может восполнить не блестящую документацию, но ничто не поможет вам взяться за дело лучше, чем руководства и конкретные примеры. Покопайтесь в вики или на Web-сайте и посмотрите, что там предлагают. Есть ли четкие примеры, которым легко следовать? Приносит ли краткий поиск в Google достаточное количество материалов?
  • Что представляет собой сообщество, окружающее библиотеку? Почитайте списки рассылки. Большой ли трафик? Как относятся к новичкам ― с уважением или с насмешкой? Обновлялся ли код недавно, или же последний релиз вышел несколько лет назад?
  • Можно ли получить помощь? Повторимся, что всегда важно посмотреть на сообщество разработчиков и понять, кто чем пользуется. Почитайте объявления о поиске работы, чтобы получить представление о том, какие библиотеки часто фигурируют в резюме.

До принятия окончательного решения не забудьте некоторое время поиграть с финалистами. У некоторых библиотек есть определенный привкус ― например, Prototype вносит в программирование JavaScript значительную дозу Ruby. Если вам кажется, что Ruby ― вершина всех языков, то это хорошо. Но если чтение Ruby вас раздражает, то Prototype, возможно, не лучший выбор. Чтение кода и следование руководствам ― это хорошо, но пока вы не попытаетесь с помощью данной библиотеки решить на практике какие-то свои проблемы, трудно узнать, подходит ли она вам.


Почему YUI и Dojo?

Что заставляет при таком многообразии смотреть именно в сторону YUI или Dojo? Если ответить одним словом: полнота. В отличие от других решений, в которые входят дополнительные библиотеки или плагины, в Dojo и YUI есть все (и даже больше), что хотелось бы иметь сегодняшнему разработчику интерфейсов. В этом есть и преимущества, и недостатки, но на рынке универсальных решений, удовлетворяющих все потребности в области Ajax, эти два ― самые сильные соперники. В дополнение к богатству разнообразию помощников и утилит JavaScript, обе предлагают первоклассные виджеты и элементы управления ― намного превосходящие ограниченную палитру стандартного браузера.

На самом деле, YUI и Dojo очень схожи. Обе содержат мощное ядро из утилит и вспомогательных функций, и у каждой есть превосходный набор виджетов и компонентов. В дополнение к традиционным элементам, таким как календари, деревья и меню, каждая библиотека предоставляет возможность построения графиков. В обоих лагерях вы найдете активное сообщество, где отвечают на вопросы, исправляют ошибки и добавляют новые функции. У каждой есть отличные Web-сайты с примерами кода, ссылками, руководствами для начинающих и ― если вы предпочитаете бумагу ― книги, полностью охватывающие эти впечатляющие библиотеки.

В языке JavaScript нет пространств имен и пакетов, и Dojo и YUI восполняют этот пробел своим подходом к наименованию и упаковке программ. В YUI имена содержат слово YAHOO, плюс некоторая комбинация из имен "пакетов". Например, утилита для управления событиями YUI будет называться примерно так:

YAHOO.util.Event.addListener

YUI 3

Версия YUI 3 ― это относительно новая, полностью переписанная библиотека Yahoo! Разработанное с целью повышения производительности, это обновление выглядит очень многообещающим. Однако на момент написания статьи библиотека виджетов маловата, хотя в ближайшие месяцы положение должно измениться. Если вы начинаете сегодня, то можете остановиться на YUI версии 2, но на будущее держать в поле зрения YUI 3.

Dojo придерживается аналогичного подхода, хотя его реализация проще. Вы получаете доступ к ядру с использованием dojo в качестве оболочки верхнего уровня, тогда как виджеты находятся на уровне dijit.

Хотя они и похожи, эти библиотеки не являются идентичными копиями друг друга. Dojo позволяет использовать свои виджеты либо декларативно, либо программно. Другими словами, виджеты можно настроить с помощью специальных атрибутов или использовать стандартный код JavaScript ― и всегда есть возможность сочетать эти два подхода. В Dojo есть очень полезный менеджер зависимостей; когда требуется определенный модуль, Dojo предоставляет все необходимое. Он гарантирует также, что зависимости будут загружены только один раз.


Простой способ Ajax-программирования

Хотя сам объект XHR не очень сложен, чтобы сделать все правильно, нужно учесть достаточно много нюансов, так что скоро вы придете к уровню абстракции, характерному практически для всех сегодняшней библиотек Ajax. Dojo и YUI – не исключение, и каждая представляет простую в применении оболочку. Работая с XHR с помощью библиотеки, вы найдете общие темы. Как минимум, эти оболочки:

  • предоставят URL вызываемого ресурса;
  • обеспечат способ передачи параметров;
  • предложат способ указания метода HTTP-вызова (GET, POST);
  • включают механизм обратного вызова для обработки результата.

YUI и Ajax

YUI хранит свою XHR-оболочку в Connection Manager. API очень прост: вы называете единственный метод и получаете объект соединения. Типичный вызов может выглядеть примерно как в листинге 1.

Листинг 1. Пример Ajax-вызова YUI
var url = "/fooApp/validate";
    var msg_div = document.getElementById("messages");

    var callback =
      {
        success: function(o) { msg_div.innerHTML = o.responseText},
        failure: function(o) { console.debug("An error occurred: ", o);}
      };

    function validate() {
      var form = document.getElementById("pim");
      YAHOO.util.Connect.setForm(form);
      var transaction = YAHOO.util.Connect.asyncRequest("GET", url, callback);
    }

Он может показаться несколько многословным по сравнению с другими библиотеками, но я немного расширил код ради его читабельности. Функции обратного вызова и URL можно было вставить прямо в вызов Connect.asyncRequest. Как видите, извлекаются определенные элементы – в данном случае <div>, которые возвращают от сервера сообщения ― а также форму, содержащую данные, которые нужно отправить на сервер. Вызов метода setForm в Connection Manager собирает значения формы и соответствующим образом упаковывает их в зависимости от типа вызова (в данном случае это запрос GET ). Асинхронное обращение к серверу запускается при вызове метода validate.

Dojo и Ajax

Подход Dojo аналогичен подходу YUI, хотя и несколько компактнее его. Оболочка XHR Dojo размещается в Dojo Base и предоставляет методы для основных действий HTTP (post, get, put, delete). Один из способов его вызова приведен в листинге 2.

Листинг 2. Пример Ajax-вызова Dojo
    var xhrParms = {
      url: "/fooApp/validate",
      load: function(response){
        dojo.byId("messages").innerHTML = response;
      },
      error: function(data){
        console.debug("An error occurred: ", data);
      },
      timeout: 2000,
      form: "pim"
    };

    function validate() {
      dojo.xhrGet(xhrParms);
    }

Опять же, я решил немного улучшить читабельность кода, но при желании параметры можно разместить непосредственно в вызове dojo.xhrGet. Как видите, этот пример похож на пример YUI ― с некоторыми интересными особенностями. Во-первых, бросается в глаза отсутствие вызовов document.getElementById. Получение элемента по ID – частая практика и, конечно, если в слове больше 20 букв, в нем легко сделать ошибку! Многие библиотеки допускают сокращения в той или иной форме, и в Dojo это dojo.byId. Пусть это не так коротко, как $ в Prototype, но все же огромный шаг вперед. Опять же, собственно обращение к серверу будет выполнено при вызове метода validate.


Мощь селекторов CSS

Селекторы CSS – мощный инструмент в арсенале Web-разработчика, но, как и в самом JavaScript, универсальная поддержка браузеров отсутствует. К счастью, сегодняшние библиотеки предоставляют нам всю мощь селекторов CSS.

YUI и селекторы CSS

YUI в своей утилите Selector предоставляет все возможности селекторов CSS версии 3. По сути, вы создаете "запрос" к определенному селектору CSS и получаете набор элементов, соответствующих этому критерию. Пример приведен в листинге 3.

Листинг 3. Селекторы CSS в YUI
  YAHOO.util.Event.onDOMReady(bindEvents);

  function bindEvents() {
    var headers = YAHOO.util.Selector.query('.header');
    YAHOO.util.Event.on(headers, 'click', toggleSection);
  }

В данном случае мы ищем элементы в стиле заголовка, а затем применяем приемник событий к каждому возвращаемому элементу (подробнее об этом ― в следующем разделе). Как видите, это компактный и мощный способ извлечения элементов. В этом коде метод toggleSection вызывается всякий раз, когда нажимают на элемент в стиле заголовка.

Dojo и селекторы CSS

В Dojo есть не менее мощный механизм селекторов. Его реализация тоже называется query, и вы опять же передаете ему селектор CSS, а он возвращает коллекцию (см. листинг 4).

Листинг 4. Селекторы CSS в Dojo
  dojo.addOnLoad(bindEvents);

  function bindEvents() {
    dojo.query('.header').forEach(
      function(header) {
        dojo.connect(header, "click", toggleSection);
      });
  }

Каждый элемент имеет стиль заголовка, и коллекция перебирается методом ForEach с применением приемника событий к каждому элементу.


Обработка событий

В эпоху первобытного JavaScript обработкой событий приходилось заниматься особенно часто. Увы, современные браузеры тоже не всегда решают эту задачу, но разработчики библиотек взяли ее на себя, чтобы еще больше облегчить нам жизнь. В предыдущем разделе были показаны два способа привязки к событию click: Event в YUI и connect в Dojo. В обоих случаях, когда происходит событие, нужно получать уведомление, чтобы можно было выполнить то или иное действие: в наших примерах ― переключить раздел (то есть скрыть его, если он видим, или сделать видимым, если он скрыт). Обработчики событий можно ввести прямо в разметку, но с применением абстракции, как здесь, это намного прозрачнее, так как бизнес-логика отделена от логики представления, что делает разметку яснее, а код ― проще для понимания.

Пока элемент не загружен, нельзя привязать к нему событие ― но как узнать, что это произошло? Dojo и YUI предлагают для этого вспомогательные методы! В YUI есть

YAHOO.util.Event.onDOMReady(),

а в Dojo ―

dojo.addOnLoad().

В каждом случае эти помощники можно использовать для того, чтобы событие прикреплялось, когда документ готов. Есть и другие способы решения этой задачи, но немногие из них столь же понятны, как эти.


Виджеты: окна, элементы выбора даты и т.п.

Палитра современного Web-дизайнера довольно ограничена: есть текстовые поля, текстовые области, кнопки... и, конечно, еще кое-что. Опять же, когда браузер что-то не позволяет, на помощь приходит разработчик библиотек. Сегодня в вашем распоряжении есть почти все, что доступно в настольных приложениях. Есть элементы выбора даты, меню, деревья, ползунки, окна и многое другое. Настоящий рог изобилия! Посмотрим, как решен элемент выбора даты в YUI и Dojo.

Выбор даты в YUI

YUI обеспечивает очень богатый набор элементов управления и виджетов, которые можно использовать в своих приложениях. Ввод даты вручную чреват ошибками, и большинство пользователей привыкло к специальному элементу. В YUI есть отличный элемент выбора даты, который находится в компоненте Calendar (см. листинг 5).

Листинг 5. Выбор даты в YUI
    var cal = new YAHOO.widget.Calendar("cal", "cal1Container", {navigator:true});
    var bday = document.getElementById("bday");
    YAHOO.util.Event.addListener(bday, "focus", renderCal);

    function handleSelect(type,args,obj) {
 		var dates = args[0];
		var date = dates[0];
		var year = date[0], month = date[1], day = date[2];

		bday.value = month + "/" + day + "/" + year;
        cal.hide();
    }

    function renderCal() {
        cal.selectEvent.subscribe(handleSelect, cal, true);
        cal.render();
        cal.show();
    }

Здесь много чего происходит, но большая часть вам уже знакома. Вы создаете виджет календаря с помощью вызова YAHOO.widget.Calendar и настраиваете приемник событий на поле birthday, что заставляет появляться календарь, когда оно в фокусе. Метод handleSelect помещает значение, выбранное пользователем, в поле birthday. Но это только верхушка айсберга. В календаре YUI очень много настроек, к тому же он поддерживает интернационализацию.

Выбор даты в Dojo

Dojo также располагает огромным количеством выдающихся виджетов ― доступных и поддерживающих интернационализацию. В данном случае обратите внимание на декларативный стиль программирования Dojo; вместо того, чтобы писать несколько строк кода JavaScript, достаточно просто добавить:

dojoType="dijit.form.DateTextBox"

в поле, для которого нужно выбрать дату. Добавив две строки из листинга 6, вы получаете календарь почти без всяких усилий!

Листинг 6. Выбор даты в Dojo
dojo.require("dojo.parser");
    dojo.require("dijit.form.DateTextBox");

Получение справки

Какую бы библиотеку вы ни предпочли, в какой-то момент вам понадобится помощь. И YUI, и Dojo содержат обширную интерактивную документацию, от полноценных учебников до подробных, пошаговых примеров. По каждой библиотеке написано много книг – для тех, кто предпочитает держать в руках физический артефакт, ― и у обеих есть активные сообщества, где с готовностью отвечают на вопросы. Лучшая отправная точка ― собственные Web-сайты этих библиотек (см. ссылки в разделе Ресурсы).


Заключение

В этой короткой статье говорится о многом, и надо признать, что она дает очень поверхностное представление о возможностях двух выдающихся библиотек. Если вы еще ничего не используете, то надеюсь, что я убедил вас попробовать Dojo или YUI. Каждая из этих библиотек заслуженно имеет страстных последователей, так что поиграйте и посмотрите, как они помогают программисту предоставить пользователям максимальные удобства.

Ресурсы

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура
ArticleID=733531
ArticleTitle=Поединок библиотек Ajax: Dojo против YUI
publish-date=07182011