Общий взгляд на Dojo Toolkit
Раздел:
Programming /
Ajax
@
21.04.2009 |
Ключевые слова: ajax dojo toolkit
Автор: Александр Лозовюк
Введение
Если “аякс” для вас не пустой звук или отзвук эпохи веб 2.0, но и нечто большее — работа, увлечение или стиль мышления, то кроме инструментов, что у всех на слуху, jQuery или Prototype, вы заинтересованы в более мощных решениях. И, желательно, пригодных как для простого “украшательства” веб-страницы, так и для разработки серьезного корпоративного приложения. Одним из флагманов AJAX-индустрии, без сомнения, является Dojo Toolkit, несмотря на то, что в широкой ИТ-прессе о нем не говорят столько же, как о других решениях. А мы вот поговорим.
И так, Dojo Toolkit — это AJAX фреймворк, развиваемый группой Dojo Fundation (у которой есть еще немало интересных проектов) и нацеленный на нишу серьезных проектов, где вам может потребоваться все — от обычных функций манипуляций с DOM до работы с Jabber-сервером. При этом, Dojo пытается сохранить свою основу, обладая одним из самых компактных и мощных базовых наборов классов (27 Кб в сжатом варианте). Все остальные функциональности доступны опционально, поэтому не стоит пугаться дистрибутива размером больше десятка Мб. Начать использовать Dojo в своем проекте можно очень быстро, просто подключив один единственный файл, или даже не копируя ничего на сервер, ведь Dojo доступен через AOL СDN. В будущем, если где-то понадобится новая функциональность, используя встроенную модульную структуру и динамическую загрузку модулей, вы просто расширяете свое приложение шаг за шагом. Поскольку знание конкретных функций вам особой пользы не принесет, я сосредоточусь далее на описании базовой архитектуры и возможностей фреймворка. Отмечу также, что в большинстве случаев в скобках я буду указывать прямые имена компонент, их можно просто скопировать в вызов функции dojo.require для подключения к вашему проекту.
На плечах гигантов…
Сначала выделим три основные моменты, на которые опирается весь Dojo.
Модульная архитектура и динамический загрузчик модулей, подгружающий указанные компоненты и разрешающий зависимости. Достаточно вызвать одну функцию dojo.require() и необходимые компоненты будут доступны на странице. Однако учитывайте, что такой подход значительно увеличивает количество HTTP-запросов от страницы. Использование загрузчика очень упрощает те проекты, где на разных страницах используются разные возможности, вместе с тем, если у вас монолитное приложение, где загружается только одна страница, или же вы используете AIR-платформу, лучше соберите собственную сборку со всеми модулями в виде одного файла. А вот для веб-сайтов, которые сначала экспериментируют с AJAX, добавляя незначительные возможности, вроде формы авторизации, и только потом постепенно заменяют все на новомодные “штучки”, загрузчик позволит пользователям не чувствовать замедления работы и получать все возможности только там, где они в реальности используются. К слову, в одном из пользовательских расширений для уже описываемой нами библиотеки ExtJS, также реализована очень схожая технология под названием $JIT, однако в Dojo это введено на уровне основы архитектуры, тогда как все другие библиотеки требуют ручной обработки для достижения того же эффекта.
Смешанная модель описания виджетов. Разработчики Dojo явно тяготеют к описанию интерфейса при помощи специальных атрибутов HTML-тегов, а не напрямую в JS-коде. В ранних версиях библиотеки (ветка 0.4, с которой я как раз начинал освоение библиотеки) была доступа именно декларативная модель, когда в HTML-коде разработчик при помощи атрибутов описывал форму, а после загрузки в браузере движок Dojo заменял описания на отрендеренные элементы. Позже, после кардинальной смены архитектуры и перехода на ветку 0.9, а затем и в 1.х оказалось, что программная модель привычнее и, что важнее всего, быстрее, особенно в условиях сложных форм. Да и отладка кажется более простой, а возможности шире.
Но работа с специальной разметкой не исчезла, как и прежде, вы можете использовать специальные конструкции вида dojoType=”dijit.Declaration” widgetClass=”test.TextField” defaults=”{defaultText:”,width:200}. Вообще-то говоря, декларативный подход упрощает работу, если у вас одно-два поля, тогда задержки на обработку ничтожны. Но вот сопровождать проект с сотнями форм, описанными в виде смешанного HTML-кода, Dojo-разметки и разбросанного посреди этого месива JS-скриптов, очень и очень сложно. Сейчас все виджеты реализованы в качестве встроенных классов (подсистема Dijit), однако система декларативного описания присутствует и вынесена в отдельный пакет, dijit.Declaration (не спутайте с dojo.declare, который служит для расширения классов), который можно использовать в любой момент после загрузки страницы.
Ранее я считал, что именно декларативность была самым узким моментом в архитектуре Dojo, ее сложность и скудность компонент для построения интерфейса, сосредоточенность больше на AJAX-замене традиционных форм, позволила другим фреймворкам в визуальном плане опередить его, хотя в последних релизах 1.х веток Dojo активно развивается и совершенствуется, так что конкуренция тому же ExtJS намечается серьезная.
Трёхкомпонентная архитектура — по моему, самое интересное и важное. Начать надо с того, что уже с первых релизов (ветка 0.3 и 0.4, в далеких 2003-2004 годах) команда Dojo пыталась реализовать все, что только возможно было сделать с помощью Ajax и JavаScript. По сути, во многих областях Dojo является первопроходцем, продвинувшим теперь обычные технологии в массы. Это касается идеи реализовать локальное хранилище данных (dojo.Storage с использованием всех доступных вариантов хранения, начиная от cookie и заканчивая Flash-модулем и Google Gears), различные варианты доступа к данным (как кроссбраузерные так и обычные, через XMLHTTPRequest объект, IFrame, ScriptTag и даже Java-апплет), встроенный дебаггер, позже научившийся работать с Firebug-ом, рисование графики, в том числе и 3D, реализация RPC и многое-многое другое.
К сожалению, это сказывалось на производительности, да и не все компоненты были одинаково отлажены, поэтому в одном глобальном объекте dojo.* были сосредоточены как ранние экспериментальные разработки, так и стандартные отлаженные вещи, составляющие основу основ любого фреймворка (работа с DOM-деревом, стилями, ввод/вывод, обработка строк, дат и т.п.). Поэтому после глобального редизайна всего проекта, который произошел одновременно со сменой версий и подходом вплотную к заветной версии 1.0, весь пакет был разделен на три, функционально совершенно разные, но дополняющие друг друга в любом проекте, части.
Dojo/Dijit/Dojox
В пакет Dojo вошли все базовые функции, отлаженные и проверенные, необходимые в подавляющем большинстве приложений. Для работы с данными (вообще) сделан целый унифицированный API чтобы отвлечься от нюансов получения и хранения (dojo.data.api.*), отдельно в утилиты вынесены методы обработки вроде сортировок или фильтров (dojo.data.util.*). Серьезно подошли разработчики к работе с датой и временем, предоставляя все необходимые функции расчета разности и суммы дат, локализации и календарей (dojo.date.*).
Стремясь предоставить веб-приложениям функциональные возможности и поведенческие реакции обычных десктопных приложений, необходимо реализовать функции Drag&Drop, к чему основательно подошли в Dojo, выделив все, связанное в dojo.dnd.*. Контролю со стороны программы поддаются все стадии от выбора элемента, процесса перетаскивания и бросание — все конфигурируется и программируется так, как надо разработчику. От этого модуля сильно зависит, в основном, только графическая подсистема виджетов Dijit (о которой ниже).
Единственное, что меня смущает — почему среди IO пакета, который отвечает за работу с сервером и кроссдоменность, в базовом пакете dojo.io оставлено только, по моему, не самые востребованные Iframe и ScriptTag, остальные транспорты вынесены в dojox (пакет экспериментальных расширений). А стандартные возможности по коммуникации через XMLHTTPRequest (то самое, что часто и подразумевают под словом AJAX) вынесено в самый корень в виде функций объекта dojo (dojo.xhr и другие). Это немного портит впечатление о целостности библиотеки.
Об остальных стандартных уже функциональностях я даже не буду упоминать отдельно — они конечно же есть. И расширения стандартных объектов языка, и реализация наследования и расширения прототипов, работа с DOM-деревом и CSS (доступно два варианта CSS-движков — собственный Acme и Sizzle, который выделен как самостоятельная разработка и, по некоторых тестах, достаточно быстр), базовые визуальные эффекты, определения типа переменной, встроенный механизм конфигурирования (djConfig и dojo.config), определение браузера и платформы — это все есть и по возможностям более-менее аналогично всем остальным фреймворкам.
Все компоненты для построения интерфейсной части веб-приложения были выделены в пакет Dijit, который сосредоточился на виджетах. Конечно, он не самостоятельный — требует для работы основной пакет Dojo, сам же добавляет компоненты, замещающие стандартные элементы форм (dijit.form) и добавляющие расширенные возможности, например, кнопки с встроенным меню и т.п. Глобальную разметку всей страницы можно сделать при помощи ряда компонентов dijit.layout (в принципе, все лейауты стандартные и очень схожие с теми, что мы видели в ExtJS). В дополнение предоставляется собственный WYSIWYG-редактор текстов (dijit.Editor), а также достаточно большой набор других компонентов, которые часто используются для реализации серьезных интерфейсов — тулбары (dijit.Toolbar), динамические всплывающие подсказки (серьезно, очень полезная вещь), индикатор прогресса (да, то, что в ExtJS, как основном конкуренте Dijit, появилось лишь недавно). Конечно, не обошлось без уже почти канонического виджета — дерева (dijit.Tree), расширенного разными моделями хранения и получения данных (здесь пригодится как раз унифицированный слой для работы с данными из dojo.data.api).
И, наконец, самое интересное — пакет экспериментальных решений DojoX, где собраны интересные, специализированные или просто не до конца отлаженные модули. Зачастую здесь можно встретить такие решения, что раньше сложно было мечтать реализовать это при помощи JavaScript. Тем не менее, несмотря на нестабильный статус, некоторые компоненты из DojoX очень пригодятся даже в обычных проектах, другие же могут понадобиться в очень особенных случаях уникальных проектов. Например, в Dojox одним из первых появился собственный порт библиотеки аналитики Google Analytics, а значит вы безо всяких сложностей можете собирать статистику даже в полностью Ajax приложениях.
Сильная привязанность разработчиков к протоколу Atom видна невооруженным взглядом — работе с RSS, Atom и GData отведено большое количество компонент и они обладают широкой функциональностью. Если вспомнить, что Atom это не только трансляция лент обновления блога, то можно реализовать множество различного функционала в приложении, основной которого будет Atom. Обновление каких-либо частей сайта, оповещения и т.п., простой RSS веб-ридер и агрегатор лент можно реализовать сразу буквально парой строк, так как в DojoX есть для этого не только все составные части, но и сразу целый компонент (dojox.atom.widget.FeedViewer). Вам надо вставлять мультимедийные ролики в проект и управлять воспроизведением? Не проблема, не нужно искать сторонние компоненты — dojox.av.FLAudio/Video реализует все основные возможности флеш-плееров с программным управлением, скрывая нюансы JS<>Flash коммуникации. В Todo компонента нас ожидают еще более интересные вещи, вроде глобального регулятора громкости, работы с ID3 тегами, перемотка, кроссдоменность и многое другое.
Сильной стороной DojoX является все, что связанно с рисованием и эффектами — мощнейший компонент двух и трехмерных графиков (dojox.charting.*), а также отдельно компоненты рисования, спецэффектов и 3D (dojox.fx, dojox.gfx, dojox.gfx3d). В зависимости от возможностей среды, используется или рендеринг через SVG, VML или MS Silverlight (что достаточно уникально).
Из интересного отмечу:
- встроенную поддержку CometD (конечно, а как же, если технология создана и поддерживается как раз самим разработчиком),
- унифицированный интерфейс для встраивания любых объектов на страницу (Flash, Quicktime, а также API для работы с тегом Object),
- реализацию различных методов работы с данными (компрессия LZW, Base64, Splay, easy64, криптография и хеширование MD5, SHA1),
- собственный компонент унифицирующий взаимодействие с внедренными Flash-объектами (берет на себя все функции вроде проверки версии, вызов методов и передача параметров).
DojoX расширяет и виджеты, добавляя множество элементов к формам (dojox.form), реализует очень мощный и, вероятно, главный “аяксовый” компонент — таблицу для отображения данных (dojox.grid) и множество встроенного функционала для их обработки, таймеры, дополнительные объекты вроде очереди или связанных списков, офлайн хранилища и еще очень много другого — наверное на две статьи хватит материала только по перечислению оригинальных и интересных компонент.
А что еще?
Рассказ о Dojo был бы не полным, если не упомянуть, хоть бы одной строкой, о дополнительных проектах, еще больше расширяющих возможности Dojo в части интеграции с серверными решениями.
- Zend_Dojo — интегрирует методы работы с формами на стороне сервера, используя Zend Framework и их отображение на клиенте используя Dijit компоненты.
- drails — Rails плагин расширяющий возможности разработки веб-форм на платформе Ruby и также интегрирующий серверную RoR-часть и Dijit-компоненты (кстати, уже доступна первая версия).
- dair — расширение Dojo для работы с платформой Adobe AIR.
- Dojo Toolbox — AIR-приложение для облегчения работы программисту — сборник API и инструментария, например, скрипт-сборщик кастомной версии библиотеки.
Если вы устали немного от чтения, вот несколько ссылок, где на примерах показаны (исходный код для любознательных прилагается) возможности Dojo:
- Dojo Campus — сборник ресурсов и хорошая библиотека примеров.
- Dojo Demos — раздел примеров на официальном веб-сайте
- ProjectZero от IBM, один из серьезных примеров использования Dojo в корпоративных Web 2.0 системах
- Stocker — потрясающий пример работы с данными, их визуализации, а также использование CometD и другой разработки Dojo Fundation — сервера приложений Persevere (кстати, сам по себе очень хороший проект)
P.S. А еще у Dojo отличное и очень большое комьюнити, правда, в основном сосредоточенное в Европе и США. Я бы даже сказал, что это четвертый краеугольный камень всего проекта и источник его силы.
И в заключение, небольшой квест — что это означает — dojo.beer(), dojo.wine(), dojo.sake(), dojo.cast()?
Это интересно:
Распечатать статью
Вернуться в раздел:
Programming /
Ajax
Реклама:
