APS2 UI Developer
0,0
рейтинг
9 августа 2013 в 16:13

Разработка → 10 причин почему ваш проект должен использовать Dojo Toolkit из песочницы

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

1. Модульность и AMD загрузчик


Клиентский JavaScript код, как и любой код, склонен расти в размерах. Модульность является тем ключем, который делает наш код легко поддерживаемым и производительным. Дни использования библиотек использующих единовременную, без асинхронной докачки, загрузку, остались в прошлом. Dojo Toolkit является ярким примером фреймворка использующего модули. Он использует dojo.require для того, чтобы динамически подтягивать только те ресурсы, которые нужны странице в данный момент.

Изначально метод загрузки ресурсов был синхронным, хотя существовал и кросс-доменный вариант с возможностью асинхронной загрузки. Сейчас Dojo использует асинхронный загрузчик, написанный Рэвилдом Гиллом (Rawld Gill), который мастерски загружает все ресурсы асинхронно и намного быстрее чем раньше. Чтобы загрузить несколько JavaScript ресурсов вы можете написать, что-то типа этого:

// Функция require сообщает загрузчику, что необходимы модули из первого массива
// Если модуль из списка уже был загружен, то он будет взят из кэша
require(
	// Массив модулей требующих загрузки
	["dojo/on", "dojo/touch", "dijit/form/Button", "dojo/domReady!"], 
	// Функция, которая будет вызвана после загрузки всех модулей,
	// с объектами модулей переданными ей в качестве аргументов.
	// Модули должны быть перечислены в том же порядке, что и в массиве требований
function(on, touch, Button) {
	// Здесь выполняем нужные нам действия с загруженными модулями.
});


Модуль объявляется очень просто:

// Используем 'define' вместо 'require' потому, что мы хотим объявить модуль
define(
	// Объявляем модули, которые потребуются нашему модулю
	["dojo/aspect", "dojo/_base/declare", "dijit/layout/BorderContainer"], 
	// Функция обратного вызова, которая должна вернуть объект
	function(aspect, declare, BorderContainer) {
		// Указываем имя модуля и модули от которых он унаследован
		// После чего возвращаем модуль (объект или функцию)
		return declare("mynamespace.layout.CustomBorderContainer", [BorderContainer], {
			// Описываем здесь свойства и методы нашего модуля.
	});
});


Этот простой способ объявления модуля, используемый почти всеми AMD загрузчиками, невероятно прост и структурирован.

Модули, перечисленные в зависимостях, загружаются до того, как будет запущена функция обратного вызова. Сама функция обычно возвращает функцию или объект, представляющий модуль. Это простой шаблон, который быстро загружается, поддерживает модульность и позволяет разработчикам загружать только то, что им нужно.

Многофункциональный Dojo загрузчик также предоставляет возможность использования плагинов. Таких, как определения готовности DOM (dojo/domReady!) и функции определения (hasJS). Кроме того, загрузчик достаточно умен, чтобы загружать разные модули в зависимости
от внешних условий:

// Этот код используется в dojo/Deferred модуле
define([
	"./has",
	"./_base/lang",
	"./errors/CancelError",
	"./promise/Promise",
	"./has!config-deferredInstrumentation?./promise/instrumentation"
], function(has, lang, CancelError, Promise, instrumentation){
	// ... 
});


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

2. Классы и рассширяемость с dojo/declare


В то время, как JavaScript не предоставляет настоящей системы классов, Dojo Toolkit предоставляет классоподобный паттерн наследования основанный на использовании dojo/declare. Declare реализован во фреймворке так, что позволяет разработчикам:

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

Система классов Dojo использует прототипное наследование. Использование dojo/declare невероятно просто:

// Конечно, вы должны использовать define для создания модуля
define([
	// Подключим модуль предоставляющий dojo/declare
	"dojo/declare",
	// Также подключим зависимости класса, который мы собираемся использовать
	"dijit/form/Button",
	"dojo/on",
	"mynamespace/_MyButtonMixin" // Имена примесей следует начинать с "_"
], function(declare, Button, on, _MyButtonMixin) {
	// Возвращаем результат метода declare(), который и является нашим классом
	return declare(
		// Первый аргумент это имя виджета. Вы должны использовать объектный синтаксис
		"mynamespace.CustomButton",
		// Вторым аргументом является родительский класс.
		// Для множественного наследования следует использовать массив.
		[ Button, _MyButtonMixin ],
		// Наконец, объект, который содержит новые свойства и методы, или
		// другие значения для унаследованных свойств и методов
		{
			myCustomProperty: true,
			value: "Hello!",
			myCustomMethod: function() {
				// делаем что-то здесь!
			},
			methodThatOverridesParent: function(val) {
				this.myCustomMethod(val);
				// Вызываем "this.inherited(arguments)" для выполнения 
				// родительского метода с теми же параметрами
			return this.inherited(arguments);
		}
	});
});


Приведенный пример не решает никакой практической задачи, но иллюстрирует повторное использование кода через цепочку наследования и примесь, а также показывает, как класс может вызвать метод родительского класса.

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

3. Аспекты и «функция к функции событий»


Аспекты являются одним из самых мощных и важных новых веяний в веб-разработке… и Dojo Toolkit предоставляет их в течении многих лет. Вместо запуска функции после обычного пользовательского события: «click», «mouseover», «keyup» — аспекты позволяют вызвать функцию В до или после того, как функция А выполнится. По сути, вы можете подключать функции к функциям — и это круто!

Запуск одной функции после другой выглядит так:

// after(объект, имя метода, вызывемая функция, ее аргументы);
aspect.after(myObject, "someMethod", function(arg1, arg2) {
	// Код, который будет выполнен после завершения метода myObject.doSomething
}, true);


Запуск функции до выполнения другой тоже абсолютно прост:
aspect.before(myObject, "someMethod", function(arg1, arg2) {
	// Код, который будет выполнен до вызова метода myObject.someMethod
});


Аспекты черезвычайно полезны при создании пользовательского интерфейса с использованием Dijit. Прослушивание событий на одном виджете или классе может вызвать изменения в других виджетах. Это позволяет разработчикам создавать один большой виджет из многих маленьких.

var self = this;
aspect.after(this.submitButton, "onClick", function() {
	// Нажатие кнопки отправки выполняет дополнительный функционал
	self.showAjaxSpinner();
});


4. Deferred и унифицированный AJAX транспорт


Deferreds являются объектно-ориентированными представлениями асинхронных операций, что позволяет легко передавать состояния операций от одного места к другому. Одним из самых последних и важных дополнений JQuery было Deferreds. Так совпало, что мантра команды Dojo является «Dojo это сделал». Dojo Toolkit содежит реализацию Deferreds уже в течении нескольких лет, используя их для простых и сложных операций AJAX, анимации и многого другого.

Наряду с тем, будучи одним из первых, кто реализовал объекты Deferred, Dojo ввел несколько методов обработки ввода-ввывода стандартного XMLHTTPRequest, в том числе window.name обертку, модуль dojo/io/iframe для асинхронной загрузки файлов и многое другое. Так когда в Dojo используются Deferred объекты? Всякий раз, когда происходит асинхронное действие. Deferreds возвращаются из XHR запросов, dojo/io запросов, анимации и многого другого.

// Отправляем XHR запрос, получая в ответ Deferred
var def = xhr.get({
	url: "/getSomePage"
});
// Навесим много функций обратного вызова
def.then(function(result) {
	result.prop = 'Something more';
	return result;
}).then(function(resultObjWithProp) {
	// ....
}).then(function() {
	// ....
});


А как выглядит использование API модуля dojo/io/iframe?

require(["dojo/io/iframe"], function(ioIframe){
	// Посылаем запрос
	ioIframe.send({
		form: 		"myform",
		url: 		"handler.php",
		handleAs: 	"json"
	}).then(function(data){
		// Обработчик успешного результата
	}, function(err){
		// Обработчик ошибки
	}). then(function() {
		// Больше функций обратного вызова!
	})
});


Красота использование Deferred в Dojo заключается в том, что внезависимости от метода, вы знаете, что всегда будете получать в ответ объект Deferred, ускоряя развитие и объединение API. Начиная с версии 1.8 в Dojo доступен модуль dojo/request, добавляющий новые методы консолидации AJAX. Вот пример, как может быть использован dojo/request:

require(["dojo/request"], function(request){
	request("request.html").then(function(response){
		// выполняем какие-то действия с результатом запроса
	}, function(err){
		// обработчик ошибок
	}, function(evt){
		// обработка смены статуса запроса
	});
});


Унифицированный API делает разработку быстрее, а код компактнее.

5. Dijit UI Framework




Без сомнения, самым большим преимуществом Dojo Toolkit перед другими JavaScript фреймворками является его Dijit UI фреймворк.

Это беспрецедентный набор лэйаутов, форм и других инструментов:

  • полная локализация из коробки;
  • расширенный макет виджетов для облегчения 100% высоты элементов, cоздания пользовательских разделителей, изменения лэйаута и т.д.;
  • виджеты формы с улучшенным удобством и встроенной поддержкой валидации;
  • много тем оформления, новейшая называется «Claro»;
  • поддержка LESS в пользовательских темах;
  • модульный код, что позволяет полную пользовательскую настройку любых виджетов, а также расширение их возможностей.


Dijit позволяет объявлять виджеты декларативно и программно. Декларативное объявление выглядит так:

<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Click Me!'"></div>


Традиционный способ объявления виджетов выглядит следующим образом:

require(["dijit/form/Button"], function(Button) {
	// Создаем кнопку программно
	var button = new Button({
		label: 'Click Me!'
	}, "myNodeId");
});


Существует несколько десятков виджетов предоставляемых пакетом Dijit и еще несколько десятков предоставляемых в пакете Dojox. Фреймворк Dojo UI это не просто несколько полезных виджетов пользовательского элемента, как, например, JQuery UI, это полноценный протестированный фреймворк для создания пользовательских интерфейсов.

6. Dojo Mobile




Как и почти на все проблемы Интернета, Dojo имеет решение для мобильной веб-разработки — модули пространства имен dojox/mobile.

Мобильное решение от Dojo предоставляет:

  • определение устройств;
  • темы для iOS, Android, Blackberry, а также базовую;
  • мобильные виджеты для формы;
  • панели и макеты для виджетов;
  • поддержка десктопа для облегчения разработки и отладки.


Мобильные виджеты могут быть созданы декларативно или программно, аналогично Dijit виджетам. Мобильные экраны поддерживают ленивый рендеринг и могут легко обмениватся данными. HTML каркас для dojox/mobile очень прост:

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<title>Название вашего приложения</title>
	<!-- место для пользовательский стилей -->
	<!-- место для dojo/javascript -->
</head>
<body>
	<!-- приложение будет здесь -->
</body>
</html>


С помощью модуля dojox/mobile/deviceTheme мы можем определять устройство пользователя и применять соответствующие стили.

После задания темы подключим модули необходимые нашему приложению:

require([
	"dojox/mobile/ScrollableView",
	"dojox/mobile/Heading",
	"dojox/mobile/RoundRectList",
	"dojox/mobile/TabBar",
	"dojox/parser"
]);


После того как все подключили опишем декларативно наши виджеты и экраны:

<!-- пример взят с Dojo's TweetView: http://dojotoolkit.org/documentation/tutorials/1.7/mobile/tweetview/app/ -->

<!-- экраны твитов -->
<div id="tweets" data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props="selected: true">
   <h1 data-dojo-type="dojox.mobile.Heading">
	  <!-- кнопки обновления -->
	  <div 
		data-dojo-type="dojox.mobile.ToolBarButton" 
		data-dojo-props="icon: 'images/refresh.png'" 
		class="mblDomButton tweetviewRefresh" 
		style="float:right;">
	  </div>
	  Tweets
   </h1>
   <ul data-dojo-type="dojox.mobile.RoundRectList">
	  <li data-dojo-type="dojox.mobile.ListItem">
		 Tweet
	  </li>
   </ul>
</div>
	 
<!-- экраны упоминаний -->
<div id="mentions" data-dojo-type="dojox.mobile.ScrollableView">
	<h1 data-dojo-type="dojox.mobile.Heading">
		<!-- кнопки обновления -->
		<div 
			data-dojo-type="dojox.mobile.ToolBarButton" 
			data-dojo-props="icon: 'images/refresh.png'" 
			class="mblDomButton tweetviewRefresh" 
			style="float:right;">
		</div>
		Упоминания
	</h1>
	<ul data-dojo-type="dojox.mobile.RoundRectList">
		<li data-dojo-type="dojox.mobile.ListItem">
			Mention tweet
		</li>
        </ul>
</div>
 
<!-- настройки экранов -->
<div id="settings" data-dojo-type="dojox.mobile.ScrollableView">
	<h1 data-dojo-type="dojox.mobile.Heading">Settings</h1>
	<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Show</h2>
	<ul data-dojo-type="dojox.mobile.RoundRectList">
		<li data-dojo-type="dojox.mobile.ListItem">
			Здесь настройки элемента.
		</li>
	</ul>
</div>


Принципы использования виджетов dojox/mobile абсолютно идентичны принципам использования виджетов Dijit. Это позволяет быстро освоится тем, кто уже имеет опыт работы с Dijit, а новичкам обеспечивает легкое освоение предлагаемых виджетов.

7. GFX и диаграммы


CSS анимация является отличным инструментом визуализации, как анимированные изображения, но уступает в гибкости и мощи векторной графике. Самым популярным инструментом для создания векторной графики на стороне клиента всегда был Raphael JS, но GFX библиотека Dojo, несомненно, мощнее. GFX может быть настроен для отображения векторной графики в SVG, VML, Silverlight, Canvas и WebGL. GFX обеспечивает удобную обертку для создания всех форм векторной графики (эллипс, линия и т.д.), что ускоряет создание графики.

Dojo GFX поддерживает:

  • наклон, поворот и изменение размера графики;
  • анимация заполнения, строкер и другие графические свойства;
  • линейный и круговой градиент;
  • события мыши;
  • группирование форм для упрощения управления и анимации.


Создание простого набора фигур может выглядеть так:

require(["dojox/gfx", "dojo/domReady"], function(gfx) {
	gfx.renderer = "canvas";
	// Создаем GFX поверхность
	// Аргументы:  узел, ширина, высота
	surface = gfx.createSurface("surfaceElement", 400, 400);
	// Создаем круг и задаем ему цвет текстом
	curface.createCircle({ cx: 50, cy: 50, rx: 50, r: 25 }).setFill("blue");
	// Создаем круг и задаем ему цвет в hex формате
	surface.createCircle({ cx: 300, cy: 300, rx: 50, r: 25 }).setFill("#f00");
	// Создаем круг с линейным градиентом
	surface.createRect({x: 180, y: 40, width: 200, height: 100 }).
	setFill({ type:"linear",
		x1: 0,                          
		y1: 0,   //x: 0=>0, градиент постоянен по горизонтали
		x2: 0,   //y: 0=>420, и меняется по вертикали
		y2: 420,                        
		colors: [
			{ offset: 0,   color: "#003b80" },
			{ offset: 0.5, color: "#0072e5" },
			{ offset: 1,   color: "#4ea1fc" }
		]
	});
	// Создаем круг с радиальным градиентом
	surface.createEllipse({
		cx: 120,
		cy: 260,
		rx: 100,
		ry: 100
	}).setFill({
		type: "radial",
		cx: 150,
		cy: 200,
		colors: [
			{ offset: 0,   color: "#4ea1fc" },
			{ offset: 0.5, color: "#0072e5" },
			{ offset: 1,   color: "#003b80" }
		]
	});
});


Dojo содержит библиотеку dojox/charting использующую API Dojo GFX. Визуализация информации с помощью графиков пользуется популярностью и не зря — сложно получить полную картину просто просматривая числа.

Библиотека dojox/charting позволяет:

  • множественные графики;
  • анимированные графики;
  • плагины, в том числе MoveSlice (анимирует части круговой диаграммы), подсказка, масштабирование и подсветка;
  • самообновляющиеся диаграммы (используют Dojo хранилища данных).

Базовую круговую диаграмму можно создать с помощью следующего кода:

<script>
	// x и y координаты используются для облегчения понимания места расположения
	// Данные представляют посетителей сайта за недельный период
	chartData = [
		{ x: 1, y: 19021 },
		{ x: 1, y: 12837 },
		{ x: 1, y: 12378 },
		{ x: 1, y: 21882 },
		{ x: 1, y: 17654 },
		{ x: 1, y: 15833 },
		{ x: 1, y: 16122 }
	];
	require([
		"dojo/parser",
		"dojox/charting/widget/Chart",
		"dojox/charting/themes/Claro",
		"dojox/charting/plot2d/Pie"
	]);
</script>
<!-- создание места для диаграммы -->
<div
	data-dojo-type="dojox.charting.widget.Chart"
	data-dojo-props="theme:dojox.charting.themes.Claro" id="viewsChart" style="width: 550px; height: 550px;">
		<!-- добавим круговую диаграмму -->
		<div class="plot" name="default" type="Pie" radius="200" fontColor="#000" labelOffset="-20"></div>
		<!-- укажем источник данных -->
		<div class="series" name="Last Week's Visits" array="chartData"></div>
</div>




Хотя приведенный выше код создает только простую круговую диаграмму, dojox/charting способен на много, много большее.

8. Dgrid от команды SitePen




SitePen, компанию специализирующуюся на консультациях по Dojo, создал сооснователь Dojo Дилан Шиман (Dylan Schiemann). Ее сотрудники пытались найти замену чрезмерно раздутому и неуклюжему dojo/Grid и в итоге создали dgrid.

Основные особенности получившегося пакета:

  • многочисленные темы и легкое создание своих тем;
  • полная совместимость с мобильными браузерами;
  • сортировка строк;
  • возможность отложенной загрузки данных;
  • поддержка древовидной структуры;
  • возможность редактирования ячеек таблицы используя виджеты dijit;
  • различные расширения: изменение размеров столбцов, drag'n'drop, постраничная навигация и многое другое.


SitePen проделал выдающуюся работу по документированию каждого компонента dgrid, поэтому начать создание собственных многофункциональных таблиц будет невероятно просто.

9. Тестировочный фреймворк DOH


Тестирование на клиентской стороне очень важно. Едва ли не более важно, чем на стороне сервера. С учетом количества браузеров и разнообразия функционала различных версий браузеров интерактивное тестирование становится обязательным. Фреймворк DOH созданный для тестирования Dojo доступен вместе с Dojo. Написание тестов невероятно легко, а сами тесты могут быть представлены в нескольких форматах:

// Зададим имя тестового модуля для того, чтобы сделать загрузчик немного счастливее
dojo.provide("my.test.module");
// Зарегистрируем тест
doh.register("MyTests", [
	// Тесты могут быть простыми функциями
	function assertTrueTest(){
		doh.assertTrue(true);
		doh.assertTrue(1);
		doh.assertTrue(!false);
	},
	// ... или объектами со свойствами: name, setUp, tearDown, and runTest
	{
		name: "thingerTest",
		setUp: function(){
			this.thingerToTest = new Thinger();
			this.thingerToTest.doStuffToInit();
		},
		runTest: function(){
			doh.assertEqual("blah", this.thingerToTest.blahProp);
			doh.assertFalse(this.thingerToTest.falseProp);
			// ...
		},
		tearDown: function(){
		}
	},
	// ...
]);


Приведенный выше пример теста очень простой. Но как насчет более сложной ситуации, т.е. асинхронных действий? Наиболее очевидные примеры асинхронных действий это AJAX, анимация и другие отложенные действия. DOH предоставляет невероятно простой способ для тестирования асинхронных действий с использованием объектов doh.Deffered:

{
	name: "Testing deferred interaction",
	timeout: 5000,
	runTest: function() {
		var deferred = new doh.Deferred();
		myWidget.doAjaxAction().then(deferred.getTestCallback(function(){
			doh.assertTrue(true);
		});
		return deferred;
	}
}


В приведенном выше примере функция «getTestCallback» будет запущена после окончания работы метода «doAjaxAction» и вернет результат теста.

Последующие тесты не будут запущены, пока не разрешит doh.Deferred, таким образом не нужно засекать время и нет проблемы пересекающихся тестов. DOH предоставляет возможности для тестов значительно превосходящие другие другие фреймворки. DOH также предоставляет Java-робота, который полностью эмулирует действия мыши и клавиатуры, для более точного и реалистичного тестирования. Если вы слышите крик Гомер Симпсона «Woohoo!», то все тесты пройдены. Но если вы слышите страшное «DOH!», то значит вам нужно пересмотреть свой код с целью исправления ошибок.

10. Процесс сборки Dojo


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

Система сборки Dojo анализирует объявленные классы и автоматически определяет зависимости при сборке. Чтобы использовать систему сборки Dojo вы создаете то, что называется профилем сборки. Построенный профиль может содержать многочисленные слои и быть довольно сложным. На привиденном ниже примере представлен простейший профиль сборки:

var profile = {
	releaseDir: 	"/path/to/releaseDir",
	basePath: 		"..",
	action: 		"release",
	cssOptimize: 	"comments",
	mini: 		true,
	optimize: 		"closure",
	layerOptimize: 	"closure",
	stripConsole: 	"all",
	selectorEngine: "acme",
	layers: {
		"dojo/dojo": {
			include: [ "dojo/dojo", "app/main" ],
			customBase: true,
			boot: true
		}
	},
	resourceTags: {
		amd: function (filename, mid) {
			return /\.js$/.test(filename);
		}
	}
};


Профиль сборки Dojo позволяет разработчику настраивать:

  • минификатор (ShrinkSafe от Dojo или Closure от Google)
  • уровень минификации;
  • директория сборки;
  • механизм селекторов;
  • и многое другое.


Построенный профиль запускается с помощью командной строки (недавно переписан на Node.js) и может дополняться или корректироваться с помощью различных аргументов. Небольшой пример запуска профиля сборки:

./build.sh --profile /path/to/app/app.profile.js --require /path/to/app/boot.js


Процесс сборки Dojo обеспечивает невероятное количество контроля над генерацией файлов сборки и завершает процесс оптимизации веб-приложения. С минифицированными и разбитыми на слои JavaScript и CSS файлами ваше веб-приложение готово к показу!

11. Bonus! Сундук сокровищ Dojo. Больше Dojox


Две очень важные библиотеки Dojox уже упоминались выше: Dojox Mobile и GFX, но это только два из множества скрытых сокровищ представленных в Dojo. Эти сокровища включаются в себя:

  • дополнительные макеты и виджеты;
  • передовые и локализованные процедуры валидации форм;
  • WebSocket и long-polling обертки;
  • виджеты представлений, такие как лайтбокс, слайдшоу, галерея и прочее;
  • расширенные IO помощники;
  • расширенная библиотека Drag'n'Drop;
  • расширения модуля NodeList.


И это тоже только часть из множества достоинств Dojo.

Dojo Toolkit представляет собой всеобъемлющий инструментарий JavaScript:
  • основные JavaScript и вспомогательные утилиты;
  • расширенный JavaScript и AJAX утилиты;
  • асинхронные сценарии загрузки;
  • полный UI фреймворк;
  • полный тестировочный фреймворк;
  • средства сборки;
  • и многое другое!


Не начинайте свой следующий проект без проверки всех возможностей, которые может предложить вам Dojo. Даже если вам не нужные некоторые дополнительные функции перечисленные выше, базовые возможности Dojo (селекторы, анимация, XHR запросы) помогут вам создавать быстрые и многофункциональные веб-приложения.
Евгений @BuranLcme
карма
38,0
рейтинг 0,0
APS2 UI Developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (21)

  • +2
    Сразу говорю — не для холивара, а чтоб собрать мнения
    Dojo vs ExtJS / Sencha Touch — преимущества и недостатки в сравнении.
    Вопрос платности ExtJs рассматривать не хотелось бы, ибо тривиально

    С Dojo я знаком слабо, но приведу парочку аргументов за и против для затравки:
    — AMD вместо своего механизма загрузки в Sencha — как следствие — проще интегрировать сторонние библиотеки
    — у Sencha очень вкусная инфраструктура сборки проекта (Sencha CMD) которая умеет и кофе варить :)
    • +3
      Из Ext.js хорошо делать приложения для интранета, уж больно дикие слоны получаются. Хотелось бы услышать как обстоят дела с животноводством в Dojo.
    • +3
      Я видел изнутри большой проект на dojo. Что-то вроде 100 метров JS, это без самого dojo.

      Так вот — у dojo вроде относительно неплохо с модулями, по крайней мере они одни из первых вроде начали заморачиваться дальше чем просто весь JS на проекте склеить и сжать. Какая-никакая там система UI компонент есть. Какое-никакое разделение на шаблоны и код компонент, с удобной привязкой по свойствам. Есть декларативная привязка этих компонент к DOM. Есть библиотека с кнопками и слайдерами (dijit), есть куча библиотек под названием dojox, где есть крутые контролы типа гридов и календарей. Правда 90% того что есть в dojox — сырое как понос, т.е. по факту ни гридов, ни календарей в dojo нет.

      Правда жизни в том, что это всё уже сгнило лет 5 как. Там sitepen этот на саппорте по-инерции бабло рубит, но ни про какое развитие технологии речи не идет уже давно.

      Короче dojo представляет лишь археологический интерес.
      • +1
        А вот ExtJS бурно развивается, постоянно добавляются новые фичи, фиксятся старые баги, регулярно в целях оптимизации с нуля переделываются компоненты…
        В итоге ветка 4.х зарелизилась с опозданием на несколько месяцев, и потом где-то год после релиза содержала кучу багов, и собственно релизом можно было назвать только с версий 4.1.х.
        Некоторые баги разработчики отказываются фиксить в community-версии предлагая покупать лицензию. Приходится писать свои патчи, которые отваливаются с выходном новой версии — чего только стоил баг со скроллингом в гриде, когда до семи первых и последних строк в таблице были не видны и недоступны для скроллинга, это даже в примерах видно. Вот снова передалали Grid в 4.2.
        Некоторые вещи в dojo есть, что называется из коробки (по заявлениям нашего программиста, который имеет большой опыт работы с dojo), а в extjs приходится их программировать вручную. Местами непродуманный API — иногда приходится лезть в приватные методы, чтобы добиться нужной функциональности.
        События в некоторых местах срабатывают по таймеру, а значит вдруг могут появиться трудно объяснимые баги на слабых машинах. Приходится делать свои обработчики опять же по таймеру — напрягает. Пример: изменённое значение в cell-editor-е записывалось в store не в момент потери фокуса, а через какой-то небольшой промежуток времени, и в итоге ручное сохранение датастора на сервер по клику на кнопку пришлось делать тоже с небольшой задержкой. Может быть в последних версиях уже исправили.
        В общем, ExtJS фрэймворк хороший, но не без проблем.
  • +4
    С ExtJS вплотную работал только с третьей версией, про четвертую сейчас бегло посмотрел, мог что-то упустить. Буду рад уточнениям в чем не прав.

    — кастомизация
    AMD это не только легкость интеграции сторонних библиотек. Это еще и широкие возможности для кастомизации с помощью наследования, в том числе множественного. Насколько понимаю, ExtJS такого не позволяет. Поэтому Dojo это скорее фундамент для создания своего фреймворка, а ExtJS — конечный инструмент. Многие виденные мною сайты, что сделаны на ExtJS, даже стандартную CSS тему не сильно меняют или вообще не меняют. В Dojo можно создавать свои виджеты на базе основных добавляя им новый функционал и\или меняя разметку.

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

    — deferred
    правда очень удобная вещь в асинхронном мире JavaScript. Об их существовании в ExtJS не слышал.

    — тесты
    Java-робот, конечно, уступает силениуму, но в остальном как минимум не хуже QUnit-ов. В комбинации с phantom.js получается отличный инструмент для авто-тестов. У ExtJS есть какие-то инструменты для тестирования?

    — touch и мобильные версии
    не работал с ними ни в Sencha, ни в ExtJS, но судя по описанию и отзывам Sencha тут вне конкуренции.

    — дизайн
    у Sencha все модно и красиво. Dojo, такое ощущение, каким был 5 лет назад, таким в дефолтной теме и остался. Но это сделано специально, т.к. Dojo это в первую очередь фундамент.

    Таким образом если нужно быстро сделать интерфейс, то ExtJS подходит лучше. Если же есть большое количество собственных виджетов и планы на будущее развитие, то лучше подходит Dojo.

    Про животноводство: минифицированный, обфусцированный и склееный в один файл полный Dojo весит примерно 500кб, но как уже писал можно разбивать это все на слои или грузить каждый модуль отдельно. Или вопрос был про объем кода, который нужно написать для создания своего интерфейса?
    • 0
      Разработкой на ExtJS уже около 6 лет занимаюсь, хочу по пунктам вам ответить.

      — Кастомизация. В принципе возможно все, но да, в этом фреймворке это будет непросто…

      — Ленивая подгрузка. Есть. В последних версиях подключаем ext-dev.js и грузим только необходимое. Соответственно и само боевое приложение грузится также. Компилятор SenchaCMD умеет собирать проект используя только те файлы, которые необходимы приложению. Лишние модули фреймворка можно убирать

      — deferred. Тут во первых в эксте все на событиях, посему итак все асинхронно вроде как. Для асинхронных задач есть Ext.util.TaskRunner

      — Тесты. С этим в sencha есть Selenium, CasperJS, Siesta. Можно почитать тут. Плюс я тестирую отдельно код, без визуалки посредством js-test-driver + Jasmine

      — touch реально хорош. это нужно смотреть.

      — дизайн в эксте очень кастомизируется просто. Но, начинать смотреть стоит с версии 4.2.1 и последней версии SenchaCMD. Появились пакеты (package) с темой/кодом. Все на SASS+Compass

      Обфусцированный, минимизированный ExtJS может занимать от 700-800Кб, по крайней мере это то, что делал я. Текущий большой intranet проект полностью скомпилированный с фреймворком одним файлом весит 1.2 мб
      • +1
        Как к специалисту вопрос: для всяких внутренних бизнес-ориентированных приложений (1С-стайл — гриды, да формы) — extJS покатит? Насколько трудоемко, когда уже рука набита, делать новые формы/странички с гридами? Насколько тяжело оно поддерживатся?

        Короче — насколько дороже/дешевле делать веб-морду таким 1С-стайл приложениям на ExtJS, относительно любого другого известного тебе подходящего для этого фреймворка?
        • +1
          Для ExtJS накидывать стандартные формочки и гриды очень просто и достаточно быстро. Если есть опыт, то простейшая форма с гридом/полями займет не больше часу сделать, вместе с примитивной логикой проверки вводимых значений. Плюс, если писал опытный человек, поддерживать будет достаточно просто. Особенно, если код будет комментироваться и будет постоянно компилироваться документация (JsDuck ориентирован на экст).

          Я думаю дорого/дешево зависит от того, есть ли специалист. Порог входа в экст все таки как мне кажется выше. Многие фронтендеры подходят к таким приложениям как к обычному вебу и верстке. Такой код превращается в ад. Если спеца нет, наверное все таки лучше посмотреть на dojo или может yui. хотя тут выбор велик и нужно отталкиваться от того, какой дизайн приложения и насколько сложна структура форм.
  • +11
    Ничего мой проект не должен. С чего вы взяли?
  • 0
    Чем оно лучше YUI3?
    • 0
      YUI3 ещё не доделан — там даже не все базовые компоненты из YUI2 портировали.
  • +6
    прошлый пост про доджо был в 2009

    неплохо для маст хэв фундамента.

    • +1
      сортировку поправьте — прошлый пост был год назад: habrahabr.ru/search/?target_type=posts&q=[dojo%20toolkit]%20&order_by=date
      • 0
        прошлый пост был год назад.
        это все меняет.
  • +2
    Использую на работе dojo. Библиотека приятна, но есть один большой недостаток: не всегда актуальная и очень поверхностная документация, мало примеров для начинающих. Некоторые вещи приходится в исходниках выискивать.
    У dojo нет готового каркаса для одностраничных приложений «для чайников», может, dojox.app и подходит для таких целей, но недружелюбен и непонятен. Нет нормального сообщества, где могут ответить на не самые примитивные вопросы.
    Думаю, из-за проблем с документацией dojo и непопулярен.

    Наследование, deferred и promise очень понравились, после того, как удалось разобраться в этих компонентах.

    P.S. Подскажите пошаговый мануал по сборке dojo в один файл.
    • +1
      У Dojo были большие проблемы с документацией на начальных этапах. Авторы сами это признают (в частности в интервью, которое проскакивало на хабре: habrahabr.ru/post/149594/) и в районе версии 1.8 проделали большую работу по написанию и актуализации документации. Теперь она состоит из tutorials, reference guide с живыми демо и интерактивного API, которое автоматически генерируется из комментариев в коде. Но в силу большого объема (В Dojo 1.8 — 175 суб-пакетов и более 1 400 модулей) все возможности фреймворка описать сложно. Вопросы можно задать на офсайте в разделе коммьюнити, также на stackoverflow много знающих Dojo.

      В русскоязычной среде с Dojo совсем капут, несмотря на то, что в создании ранних версий участвовало несколько русских разработчиков, в том числе Илья Кантор. Есть гугл-группа — там могут помочь, но особой активности не заметил. Сам по мере сил пытаюсь отвечать на вопросы по Dojo на форуме javascript,ru. Если знающие Dojo хабражители присоединятся ко мне там, то может быть мы сможем организовать место, где смогут ответить на не самые примитивные вопросы.

      Мне, правда, очень понравился Dojo и очень жаль, что в России он почти не используется. Я планирую продолжать освещать его на хабре. Пишите про какие его возможности хотите прочитать в первую очередь. Если есть интерес могу попробовать написать туториал одностраничного приложения «для чайников».

      По сборке dojo есть статья в reference guide: dojotoolkit.org/reference-guide/1.9/build/buildSystem.html. Есть статья на хабре, но она уже устарела.
  • +3
    Довольно подробная статья. С фреймворком не знаком, поэтому почитать было очень интересно. Приведу несколько заметок, если вы не против:

    1) Я считаю, что аспекты — это прекрасно, пока они контекстно зависимы. В общем же случае это уродство крайней степени, которое просто уничтожает целостность приложения.
    2) Вам пример с SVG я бы дополнил иерархией.

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

    Последнее, что я освоил был AngularJS. Его подход ничего кроме негодования не вызывает. Однако, сложно спорить с эффективностью такого подхода в большинстве сценариев. Это то самое готовое решение, которое можно взять использовать, потому что оно уже знает, что тебе нужно и знает как тебе это нужно сделать (опять таки в большинстве сценариев). И мне кажется такой подход притягивает новых разработчиков, несмотря на весь абсурд и «негибкость» оставшиеся на втором плане.

    извиняюсь если слегка сумбурно.
    и да, это просто имхо, не принимайте близко к сердцу.
    • –1
      Ваше описание AngularJS напоминает MacOS и iOS %)
      Всё правда.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Грустно что это перевод статьи возрастом в год, хотя учитывая русское сообщество кому-то да полезно будет.
    Сам пользую его. Из явных плюсов по сравнению с многими другими — не навязывает какой-то архитектуры, предлагая огромный вагон разнокалиберных кирпичей для построения всего.
    Что касается тестирования… лучше использовать что-нибудь более общепринятое типа Mocha, Jasmine, Sinonjs
  • +2
    Полезная статья. Спасибо! Для построения приложений с web-интерфейсом использую qooxdoo. А выбор js-библиотеки для обычных сайтов был проблемой. Захотелось попробовать что-то альтернативное jQuery и qooxdoo (к сожалению, у qooxdoo совершенно разные подходы к созданию web-приложений и сайтов). Решил поискать чего-нибудь про dojo. Попалась Ваша статья. В результате, после нескольких экспериментов и краткого изучения документации выбор был сделан.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.