3. 1.2 JavaScript Библиотеки и Фреймворки Библиотеки (для веб-сайтов) prototype.js, Mootools, Scriptaculous, jQuery... Пост-библиотеки / Пре-фреймворки dojo, Qooxdoo, ExtJS, jQuery-UI, YUI, Google Closure... Фреймворки (для приложений) Ample SDK, Backbase 4, Bindows, Cappuccino, Ajax.org...
4. 1.3 Проблемы нефреймворков Проприетарный API Интерфейс «программируется» на JS+HTML Слабая поддержка цветовых схем компонентов Код приложения с ростом сложности быстро становится трудносопровождаемым
5. 1.4 Когда нужен фреймворк? Интерфейс приложения содержит много типовых элементов взаимодействия Разрабатывается несколько приложений Требуется кросс-браузерность (IE до 9, FF etc.) Уровень абстракции браузера (HTML) недостаточен
6. 2. Эксперимент «Ample SDK» Ample SDK - это кросс-браузерный фреймворк для создания интерфейса пользователя в веб-браузере с использованием стандартных технологий и API. Архитектура: Ядро (DOM, менеджеры UI, Extensibility API) Языки разметки интерфейса пользователя (SVG...)
7. 2.1 Модель программирования В сущности, Ample SDK есть веб-браузер написанный на JavaScript, поэтому модель программирования приложений идентична: Разметка интерфейса на XML (SVG, XUL, XHTML..) Стилизация интерфейса на CSS (CSS3-UI, CSS3-NS...) Логика интерфейса на JavaScript (DOM Level 3 APIs...)
8. 3. Разметка интерфейса на XML Преимущества: Стандартная технология разметки Четкое отделение разметки интерфейса от стилизации и логики XML легко читается Подсказки кода в любом IDE
9. 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>
10. 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 (запланировано) ваша собственная?
11. 4. Стилизация интерфейса на CSS Преимущества: Стандартная технология стилизации Отделение стиля от разметки интерфейса и логики Стилизация интерфейса как на уровне компонентов так и на уровне всего приложения
13. 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}
14. 5. Логика приложения на JS, DOM API Преимущества: Стандартные технологии и API (W3C) Минимальный порог начала использования Возможность пере-использования написанного кода в браузерах нативно в будущем Разделение логики приложения и логики компонентов
15. 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
16. 5.2 JavaScript технологии Ample SDK DOM Core (Level 2/3) Для создания и модификации документа DOM Events (Level 3) Для подписки и реагирования на события в документе Selectors API Для навигации по документу (поиска элементов)
18. 5.4 Другие API и технологии JavaScript APIs (обьекты): XMLHttpRequest, JSON, DOMParser, XMLSerializer, XSLTProcessor XML APIs (mark-up): SMIL 3.0 (избранные модули), XInclude 1.0, XML Schema 1.1 (модуль типов данных)
19. 6. Возможности расширения платформы Создание своих компонентов (XML языков и диалектов) Примеры: Язык определения графиков, библиотека компонентов интерфейса мобильного приложения Создание менеджеров интерфейса Примеры: Менеджер жестов мыши, менеджер окон
20. 7. Почему стоит посмотреть Ample SDK? Знакомая модель программирования (W3C) Стандартные API (как в современном веб-браузере) Удобные «строительные элементы» Быстрый рендеринг Позволяет использовать SVG в Internet Explorer с 5.5 Позволяет использовать XUL во всех браузерах Позволяет определять свои языки разметки
