Сергей Ильинский, Clientside OY

Эффективная разработка веб-интерфейсовс Ample SDK

1.1 О каких веб-интерфейсах идет речь?

1.2 JavaScript Библиотеки и Фреймворки● Библиотеки (для веб-сайтов)

prototype.js, Mootools, Scriptaculous, jQuery...

● Пост-библиотеки / Пре-фреймворки

dojo, Qooxdoo, ExtJS, jQuery-UI, YUI, Google Closure...

● Фреймворки (для приложений)

Ample SDK, Backbase 4, Bindows, Cappuccino, Ajax.org...

1.3 Проблемы нефреймворков● Проприетарный API● Интерфейс «программируется» на JS+HTML● Слабая поддержка цветовых схем компонентов● Код приложения с ростом сложности быстро становится трудносопровождаемым

1.4 Когда нужен фреймворк?● Интерфейс приложения содержит много типовых элементов взаимодействия● Разрабатывается несколько приложений● Требуется кросс-браузерность (IE до 9, FF etc.)● Уровень абстракции браузера (HTML) недостаточен

2. Эксперимент «Ample SDK»Ample SDK - это кросс-браузерный фреймворк для создания интерфейса пользователя в веб-браузере с использованием стандартных технологий и API.

Архитектура:

Ядро (DOM, менеджеры UI, Extensibility API)

Языки разметки интерфейса пользователя (SVG...)

2.1 Модель программированияВ сущности, Ample SDK есть веб-браузер написанный на JavaScript, поэтому модель программирования приложений идентична:

● Разметка интерфейса на XML (SVG, XUL, XHTML..)● Стилизация интерфейса на CSS (CSS3-UI, CSS3-NS...)● Логика интерфейса на JavaScript (DOM Level 3 APIs...)

3. Разметка интерфейса на XML Преимущества:● Стандартная технология разметки● Четкое отделение разметки интерфейса от стилизации и логики● XML легко читается● Подсказки кода в любом IDE

3.1 XML островки в HTML (Ample SDK)<script type="application/ample+xml">

<xul:menubar xmlns:xul="http://...only.xul">

<xul:menu label="Файл"/>

<xul:menu label="Правка"/>

<xul:menu label="Вид"/>

</xul:menubar>

</script>

3.2 XML UI Технологии● XHTML (eXtensible Hyper Text Markup Language, W3C)● XUL (XML User interface Language, Mozilla)● SVG 1.1 (Scalable Vector Graphics, W3C)● XHTML 5 (в разработке)● Charts (в разработке)● XForms 1.1 (запланировано)● ваша собственная?

4. Стилизация интерфейса на CSS Преимущества:● Стандартная технология стилизации● Отделение стиля от разметки интерфейса и логики● Стилизация интерфейса как на уровне компонентов так и на уровне всего приложения

4.1 CSS островки в HTML (Ample SDK)<style type="text/ample+css">

@namespace xul url(http://...only.xul);

xul|menu:hover {

font-variant: italic;

}

xul|datepicker::value {

background-color: red;

}

</style>

4.2 CSS Технологии● CSS3 Namespaces

@namespace xul url(http://...only.xul);

xul|menuitem {font: normal 1em Verdana}

● CSS3 UI● xul|datepicker::input {background-color:pink}

● Дополнительные псевдо-классы (:drag, :resize..)● .mytarget:drop {border: dashed 1px red}

5. Логика приложения на JS, DOM API Преимущества:● Стандартные технологии и API (W3C)● Минимальный порог начала использования● Возможность пере-использования написанного кода в браузерах нативно в будущем● Разделение логики приложения и логики компонентов

5.1 JavaScript островки в HTML<script type="text/javascript">

ample.addEventListener("load", function(oEvent) {

var oNode = this.querySelector("svg|circle");

oNode.setAttribute("r", 10);

}, false);

</script>

"ample" — обьект, похожий на объект "document" веб-браузера, предоставляющий доступ к объектной модели документа Ample SDK, составленной из островков XML

5.2 JavaScript технологии Ample SDK● DOM Core (Level 2/3)●Для создания и модификации документа

● DOM Events (Level 3)●Для подписки и реагирования на события в документе

● Selectors API●Для навигации по документу (поиска элементов)

5.3 Менеджеры UI● Drag&Drop (e:dragstart, e:dragenter, e:dragleave, e:drag, e:drop s:dragend, p:$draggable, p:$droppable)● Resize (e:resizestart, e:resize, e:resizeend, p:$resizeable)● History (e:hashchange, m:$bookmark())● Selection (p:$selectable)● Capture (e:capture, e:losecapture, m:setCapture, m:releaseCapture)

5.4 Другие API и технологииJavaScript APIs (обьекты):

XMLHttpRequest, JSON,

DOMParser, XMLSerializer, XSLTProcessor

XML APIs (mark-up):

SMIL 3.0 (избранные модули), XInclude 1.0,

XML Schema 1.1 (модуль типов данных)

6. Возможности расширения платформы● Создание своих компонентов (XML языков и диалектов)●Примеры: Язык определения графиков, библиотека компонентов интерфейса мобильного приложения

● Создание менеджеров интерфейса●Примеры: Менеджер жестов мыши, менеджер окон

7. Почему стоит посмотреть Ample SDK?● Знакомая модель программирования (W3C)● Стандартные API (как в современном веб-браузере)● Удобные «строительные элементы»● Быстрый рендеринг● Позволяет использовать SVG в Internet Explorer с 5.5● Позволяет использовать XUL во всех браузерах● Позволяет определять свои языки разметки

8. СсылкиAmple SDK● Сайт проекта: http://www.amplesdk.com● Исходники: http://github.com/clientside/amplesdk● Обсуждения: http://groups.google.com/amplesdk

Контакты докладчика● E-mail: sergey@ilinsky.com● Twitter: http://twitter.com/ilinsky