Ample SDK - Javascript GUI library. Overview

Good day,% username%.
I present to your attention the announcement of Ample SDK , a new cross-browser library of the user interface.

You will be interested in getting acquainted with the Ample SDK project for the following reasons:

simplifies the creation of client web applications
implements standard web technologies and APIs cross-browser
repeats the architecture of a web browser (you don’t need to learn anything new!)
allows you to use SVG in HTML (also in Internet Explorer, hmm !?)
allows you to use XUL in any modern browser
makes it easy to define new domain-specific UI technologies
open source project (MIT / GPL) source code (on GitHub)

For starters, one and the same SVG Tiger document displayed in Internet Explorer 6 and Google Chrome 3:

SVG Tiger in Internet Explorer

')
Interesting?

Prehistory

The history of this project begins in 2004, when, working at Falk AG (St. Petersburg development office) in the front-end department, I and a couple of people still had the idea to write a JavaScript library to create and manage the user interface in the browser. The goal of this project was to simplify the writing of applications, the entire life cycle of which occurs in a web browser, and which should communicate with the server only for data transfer. The prototype of the library, in which the XUL language was taken as a basis, was created quite quickly by me, but, as often happens, the project was closed, I moved to the Netherlands to Backbase (where I later managed to implement many ideas of the original project), and Falk AG was padded with Doubleclick Inc. After 3 years I decided to try to breathe a second life into the undertaking and released it as Open-Source. Meet the Ample SDK.

Another GUI library?

This question immediately arises in the head of the developer. Yes, Ample SDK is another library for creating a user interface, however, it is not similar to any other known JavaScript GUI library (Dojo, ExtJS, YUI, Qooxdoo, Adobe Spry, Google Closure, or jQuery UI). The main differences are as follows:

Programming model
Lack of proprietary APIs
Rendering speed

Programming model

The programming model is no different from the one offered to the programmer by the browser, because, as Ben Galbraith noted, the Ample SDK is browser-within-a-browser . A couple of differences - with the Ample SDK code written under a single cross-browser browser, the Ample SDK patches the browser's API and adds technologies and APIs that are missing. So, the approach:

Interface markup - XML (XHTML, XUL, SVG, HTML5)
Styling - CSS (CSS2, CSS3-UI, CSS3 namespaces)
Logic - JavaScript (DOM3 Core, Events, Selectors API)

I will not describe all the technologies implemented in the Ample SDK and where and how they can be useful, I will touch upon only a few aspects of their use.

Interface markup

In applications written in the Ample SDK, the interface markup is done in XML. This approach has several advantages: complete separation of the presentation from the application logic, easier readability of the source code, as well as easier creation of interface documents in the IDE due to the possibility of using schemas.
Among the XML technologies currently supported in the Ample SDK are XUL, SVG, XHTML, and HTML5 and the chart definition language are in development. An example of the simplest XUL fragment of an application hosted on an HTML page:

 <! 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>

And a small example XUL with a default schema ( online )

XUL tree

Stylization

For styling components using CSS. Since an element with the same name can be present in several dictionaries (for example, the element A is present in both SVG and HTML, or the button element is present in both XUL and HTML), when defining its selector in CSS, namespaces are used. The following example shows how to determine the XUL style of the menuitem component in the select state.

 <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>

In the Ample SDK, there is the concept of “shadow content”, which is the representation of a component in HTML or SVG / VML that is not directly accessible to application logic. Such “shadow content” can also be styled using the pseudo-element selector, for example:

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

Logics

The application logic is written in JavaScript using the standard basic DOM API (Level 2/3). In addition to the DOM API, many elements often contain their own members. In the example below, we dynamically add a new menu item to the list (note that the ample object plays the role of the document object in the Ample SDK):

 <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>

Rendering speed

The rendering speed of interfaces in the Ample SDK is higher than that of other libraries due to one fundamental peculiarity - the entire interface is drawn from the components by calling only one DOM browser operation. Ample SDK also does not associate event handlers with HTML document elements, instead, it “listens” to all events only at the level of the document object and forwards them to its model [also normalized].

Expansion of the component base

In the Ample SDK, you can add (prototype) any DOM objects, for example, you can add a listenOnce method to all tree nodes, as Alex Russel once dreamed of, the creator of Dojo. You can also create your own components or even whole markup languages (this is how XUL, SVG, etc. are implemented in the Ample SDK)

Status and Plans

The Ample SDK (Runtime) core is stable and is used in several projects (also commercial). The XUL, SVG markup languages are now being actively developed. HTML5 and Charting are scheduled, development will start soon. Detailed plan for the near future: Development Ideas .

useful links

Articles in English

Ample SDK Goes Open Source! , Ajaxian.com
Yes, you can use it in the Internet Explorer too. With Ample SDK. , InsideRIA.com
Ample SDK: Browser-in-a-Browser , Ajaxian.com
Ample SDK gets set for cross-browser apps development , InfoWorld.com

Wish the project good luck and / or join!

Source: https://habr.com/ru/post/72705/

All Articles