Сегодня для создания современного 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

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.

	
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.

	
    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.

	
  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).

	
  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).

	
    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, вы получаете календарь почти без всяких усилий!

	
dojo.require("dojo.parser");
    dojo.require("dijit.form.DateTextBox");

В начало

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

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

В начало

Заключение

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

Ресурсы

• Оригинал статьи.(EN)
  
  
• Ajax: рабочие инструменты: познакомьтесь с инструментами для разработчиков JavaScript. (EN)
  
  
• Разработка виджетов с помощью Dojo 1.x (DeveloperWorks, апрель 2009 г.): основы разработки HTML-виджетов с использованием инструментария Dojo JavaScript (EN). (EN)
  
  
• Создание многократно используемых и распространяемых компонентов с помощью Dojo и Ajax (developerWorks, июнь 2008 г.): применение Dojo и Ajax для разработки многократно используемых компонентов, легко интегрируемых с основным приложением (EN).
  
  
• Как лучше сплести Web-страницу (DeveloperWorks, июнь 2009 г.): о двух средах разработки Web-страниц ― Blueprint и Yahoo! User Interface (YUI) Grid (EN).
  
  
• XMLHttpRequest: подробнее об объекте XHR. (EN)
  
  
• Разделение по поведению: о преимуществах разделения содержания, стиля и поведения в Web-дизайне и программировании. (EN)
  
  
• Библиотека YUI: о библиотеке Yahoo! UI. (EN)
  
  
• Dojo: подробнее о Dojo Toolkit. (EN)
  
  

Об авторе

Оценить эту статью

Комментарии

В начало

Содержание

• Почему нужно использовать библиотеку?
• Почему YUI и Dojo?
• Простой способ Ajax-программирования
• Мощь селекторов CSS
• Обработка событий
• Виджеты: окна, элементы выбора даты и т.п.
• Получение справки
• Заключение
• Ресурсы
• Об авторе
• Комментарии