×Закрыть

Общий взгляд на Dojo Toolkit

dojo_logoВведение

Если «аякс» для вас не пустой звук или отзвук эпохи веб 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

coreВ пакет 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Все компоненты для построения интерфейсной части веб-приложения были выделены в пакет Dijit, который сосредоточился на виджетах. Конечно, он не самостоятельный — требует для работы основной пакет Dojo, сам же добавляет компоненты, замещающие стандартные элементы форм (dijit.form) и добавляющие расширенные возможности, например, кнопки с встроенным меню и т.п. Глобальную разметку всей страницы можно сделать при помощи ряда компонентов dijit.layout (в принципе, все лейауты стандартные и очень схожие с теми, что мы видели в ExtJS). В дополнение предоставляется собственный WYSIWYG-редактор текстов (dijit.Editor), а также достаточно большой набор других компонентов, которые часто используются для реализации серьезных интерфейсов — тулбары (dijit.Toolbar), динамические всплывающие подсказки (серьезно, очень полезная вещь), индикатор прогресса (да, то, что в ExtJS, как основном конкуренте Dijit, появилось лишь недавно). Конечно, не обошлось без уже почти канонического виджета — дерева (dijit.Tree), расширенного разными моделями хранения и получения данных (здесь пригодится как раз унифицированный слой для работы с данными из dojo.data.api).

dojoxИ, наконец, самое интересное — пакет экспериментальных решений 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()?

LinkedIn

24 комментария

Подписаться на комментарииОтписаться от комментариев Комментарии могут оставлять только пользователи с подтвержденными аккаунтами.

Не используйте виджеты, сила дожо не в них, это не является его сильной стороной. Хотя есть проекты, которые их используют на полную и умело используют.

Используем Dojo в проекте 2 года — без особого восторга. В примерах всё красиво и быстро, начинаешь плотно работать с теми же виджетами, так складывается впечатление что их писали под красивые примеры, а не под реальные задачи. Пришлось делать custom widget, при тестирование виджета всё работало отлично, как только вставил его в нужную страницу — перестал отображаться контент размещённый ниже этого виджета в коде. Короче есть некоторые вопросы.

Александр, спасибо, но теперь слегка поразбиравшись задам более конкретный вопрос: у меня jsp с использованием struts2. В struts2-core-2.0.11.jar тоже есть скрипты Dojo.Как мне заставить приложение работать со скриптами, распакованными в javascript/dojotoolkit/если сейчас как я ни прописываю путь к нужному dojo.js оно обращается к dojo.js из стратсовского джара? Писал и так: < script type= «text/javascript» src= «http://o.aolcdn.com/dojo/1.3/d...»...и так: < script type= «text/javascript» src= «/javascript/dojotoolkit/dojo/dojo.js»...Заранее спасибо, надеюсь на помощь

thatsmealex — чтобы Dojo воспринимал? там есть опция включающая создание виджетов по разметке.

Начальство обязало прикрутить Dojo к jsp страницам написанным на Struts 2.Ни в одной доке не могу найти где что прописать, чтобы воспринимался атрибутdojoType в коде html страницы типа< div dojoType= «dojox.widget.FisheyeList»...Люди, подскажите, плз.

Очень интересная статья, у фреймворка Dojo великолепные надо сказать возможности

Dojo еще не пинал, а если и буду, то скорее Zend_Dojo, пока с головой хватает ExtJs — покрывает почти все запросы на клиентскую часть...

года два это была совсем другая версия, подозреваю, что 0.4.x возможно. к тому же НИ ОДИН из существующих фреймворков не покрывает хоть 1/10 возможностей Dojo, в части особенно DojoX и частично dojo core

Когда был проект на dojo (года два назад). Вспоминаю с ужасом. Очень был доволен, что смогли убедить заказчика пересесть на ASP.NET AJAX + Ajax Control Toolkit.

судя по тому, что ест dAir — наверное нет никаких проблем. Если это слухи типа «один кореш корешу за пивом рассказал», иначе есть конкретные тесты и описание проблем, обычно это решается оперативно, у dojo хорошее комьюнити

По слухам, у него раньше были проблемы в работе с WebKit движком. А как сейчас?

Пишите еще. Как раз присматриваюсь к этому фреймворку

если б еще Opera нормально с dijit работала — цены б ему не было.

2 aleks_raidenа. ну я понял это как «у ДОУ куча тем на выбор, поэтому надо лоббировать дожо». если выбор не у ДОУ, а у тебя, то конечн... тока тогда лоббировать опять же не у ДОУ надо:)

aleks_raiden — самое, лично для меня, интересное будет принцип создания больших веб приложений на dojo, и даже идея не в dojo, а в проектировании этих самых приложений.

да ну. «других тем» (если иметь в виду статьи, а не просто темы) несколько штук от силы:)

Гм..., а Вы то откуда знаете сколько у меня тем?;) за спиной стоите? тем очень много и постоянно меняются, писать физически можно не так и много, максимум пару в неделю. вот и выбор.

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

да ну. «других тем» (если иметь в виду статьи, а не просто темы) несколько штук от силы:)

:) ну просто иначе оно в конкуренции с сотнями других тем:)

зачем лоббировать? просто пиши. интересно: -)

ignar — если будет, так сказать, общественный запрос, я могу продолжить освещение тем о Dojo и его некоторых особенно интересных компонентах (большей мерой из dojo core и dojox) — лоббируйте продолжение темы у администрации DOU;)

Я тоже не согласен с IgorN, прошло время когда невозможно было найти документации по dojo, примеров простой уйма, чего стоит один dojo campusВот на русском, конечно, не так много про него написано, но ведь это не преграда для нас с вами;) Dojo Toolkit определенно мой, любимчик:)

Да нет, как же, как раз документация у Dojo, по моему, лучше всех остальных фреймворков — API, Dojo Book, достаточно примеров, в дистрибутиве и тесты и часть примеров прямо в мануале + Dojo Planet и большое комьюнити. Dojo покрывает только некоторую часть ExtJS, это никак не схожие вещи, кроме слова фреймворк в названии.

Еще в статье забыли упамянуть, о скудном мануале и API и мизере примеров, именно это мешает мне слесть с ExtJs на Dojo

Подписаться на комментарии