Pull to refresh

Ample SDK — Javascript GUI библиотека. Обзор

Reading time 5 min
Views 6K
Ample SDK logo Доброго времени суток, %username%.
Представляю твоему вниманию анонс Ample SDK, новой кросс-браузерной библиотеки интерфейса пользователя.

Познакомиться с проектом Ample SDK тебе будет интересно по следующим причинам:
  • упрощает создание клиентских веб-приложений
  • реализует стандартные веб технологии и API кросс-браузерно
  • повторяет архитектуру веб-браузера (ничего нового учить не надо!)
  • позволяет использовать SVG в HTML (также в Internet Explorer, хм!?)
  • позволяет использовать XUL в любом современном браузере
  • позволяет легко определять новые доменно-зависимые UI технологии
  • проект с открытым (MIT/GPL) исходным кодом (на GitHub)

Для затравки, один и тот-же SVG Tiger документ отображенный в Internet Explorer 6 и Google Chrome 3:

SVG Tiger в Internet Explorer SVG Tiger в Google Chrome

Интересно?

Предыстория


История данного проекта начинается в 2004 году, когда, работая в компании Falk AG (петербуржском офисе разработок) в отделе front-end, мне и паре людей еще пришла мысль написать библиотеку на JavaScript для создания и управления интерфейсом пользователя в браузере. Целью данного проекта было упрощение написания приложений, весь жизненный цикл которых происходит в веб браузере, и, которые должны были общаться с сервером только на предмет передачи данных. Прототип библиотеки, в которой за основу была взят язык XUL, был создан мной достаточно быстро, но, как часто бывает, проект оказался закрыт, я переехал работать в Нидерланды в компанию Backbase (где мне впоследствии удалось реализовать множество идей оригинального проекта), а Falk AG был полощен Doubleclick Inc. Спустя 3 года я решил попробовать вдохнуть в начинание вторую жизнь и выпустил его как Open-Source. Встречайте Ample SDK.

Еще одна GUI библиотека?


Именно такой вопрос сразу возникает в голове разработчика. Да, Ample SDK это еще одна библиотека для создания интерфейса пользователя, тем не менее она не похожа ни на одну другую вам известную JavaScript GUI библиотеку (Dojo, ExtJS, YUI, Qooxdoo, Adobe Spry, Google Closure или jQuery UI). Основные отличия заключаются в следующем:
  • Модель программирования
  • Отсутствие проприетарных API
  • Скорость рендеринга

Модель программирования


Модель программирования ничем не отличается от той, которая предлагается пограммисту браузером, потому что, как заметил Бен Галбрейт (Ben Galbraith), Ample SDK есть browser-within-a-browser. Пара отличий — c Ample SDK код пишется под один-единственный кросс-браузерный браузер, Ample SDK патчит API браузера и добавляет технологии и API в нем отсутствующие. Итак, подход:
  • Разметка интерфейса — XML (XHTML, XUL, SVG, HTML5)
  • Стилизация — CSS (СSS2, CSS3-UI, CSS3 namespaces)
  • Логика — JavaScript (DOM3 Core, Events, Selectors API)

Ample SDK approach
Я не буду описывать все технологии, реализованные в Ample SDK и то, где и как они могут быть полезны, затрону лишь несколько аспектов их использования.

Разметка интерфейса

В приложениях, написанных на Ample SDK, разметка интерфейса осуществляется на XML. Этот подход имеет несколько преимуществ: полное отделение представления от логики приложения, более легкая читаемость исходного кода, а также более простое создание документов интерфейсов в IDE благодаря возможности использования схем.
Среди XML технологий, поддерживаемых в Ample SDK сейчас — XUL, SVG, XHTML, в разработке — HTML5 и язык определения графиков. Пример простейшего фрагмента XUL приложения размещенного на HTML странице:

<!DOCTYPE html>
<html>
    <head>
        <!-- -->
        <title>Example</title>
        <script type="text/javascript" src="ample/runtime.js"></script>
        <script type="text/javascript" src="ample/languages/xul/xul.js"></script>
        <link type="text/ample+css" href="ample/languages/xul/themes/default/xul.css" rel="stylesheet"/>
        <!-- -->
    </head>
    <body>
    <!-- -->
    <script type="application/ample+xml">
        <xul:menulist xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
            <xul:menupopup id="items-popup">
                <xul:menuitem label="Item 0" value="0"/>
                <xul:menuitem label="Item 1" value="1"/>
                <xul:menuitem label="Item 2" value="2"/>
            </xul:menupopup>
        </xul:menulist>
    </script>
    <!-- -->
    </body>
</html>

И небольшой пример XUL с схемой по умолчанию (онлайн)

XUL tree

Стилизация

Для стилизации компонентов используется CSS. Поскольку элемент с одним именем может присутствовать в нескольких словарях (например, элемент A присутствует и в SVG и в HTML, или элемент button — имеется и в XUL и в HTML), то при определении его селектора в CSS используются пространства имен. В ниже приведенном примере показано, как определить стиль XUL menuitem компонента в состоянии select.

<style type="text/ample+css">
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
xul|menuitem:selected {
    background-color: green;
    font-weight: bold;
}
</style>

В Ample SDK существует понятие «теневого контента», которое есть представление компонента в HTML или SVG/VML, непосредственно недоступного для логики приложения. Такой «теневой контент» можно также стилизовать с помощью селектора псевдо-элементов, например:

<style type="text/ample+css">
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
xul|colorpicker::input {
    padding:5px;
}
</style>

Логика

Логика приложения пишется на JavaScript с использованием стандартного базового DOM API (Level 2/3). Помимо DOM API многие элементы часто содержат собственные члены. В примере ниже мы динамически добавляем новый пункт меню в список (обратите внимание, что роль обьекта document в Ample SDK играет обьект ample):

<script type="text/javascript">
function addItem() {
    var sXulNS  = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
    var oPopup  = ample.querySelector('#items-popup'),
         oItem   = ample.createElementNS(sXulNS, "xul:menuitem");
    oPopup.appendChild(oItem);
    oItem.setAttribute("label", "New item");
}
</script>

Скорость рендеринга


Скорость рендеринга интерфейсов в Ample SDK выше чем у других библиотек из-за одной принципиальной особенности — весь интерфейс отрисовывается из компонентов с помощью вызова только одной DOM операции браузера. Ample SDK также не ассоциирует обработчиков событий с элементами HTML документа, вместо этого он «слушает» все события только на уровне обьекта документа и перенаправляет их в свою модель [также нормализованными].

Расширение базы компонентов


В Ample SDK можно доопределять (прототипировать) любые обьекты DOM, так например, можно добавить listenOnce метод для всех узлов дерева, о чем однажды мечтал Алекс Рассел (Alex Russel), создатель Dojo. Также можно создавать свои компоненты или даже целые языки разметки (именно так и реализованы XUL, SVG и др. в Ample SDK)

Статус и планы


Ядро Ample SDK (Runtime) стабильно и используется в нескольких проектах (также коммерческих). Языки разметки интерфейса XUL, SVG сейчас активно разрабатываются. HTML5 и Charting запланированы, разработка скоро начнется. Детальный план на ближайщее будущее: Development Ideas.

Полезные ссылки


Статьи на английском


Пожелайте проекту удачи и/или присоединяйтесь!
Tags:
Hubs:
+89
Comments 45
Comments Comments 45

Articles