Declarative and standards-based web application development with the Ample SDK

UI Develepoment in the browser?

YES! oh, NO!
HTML, CSS, XML,
JavaScript and the browser API ...
the browser API

ok we need a framework,
but remember
this is only plan b ...

YUI
Ext JS qooxdoo
Ample SDK Backbase
jQuery UI
dojo dijit AJAX.org
JavaScriptMVC
MooTools
GWT jQuery prototype
Cappuccino
JSF dojo
ASP.NET Ajax Raphaël
SAJAX
XAJAX script.aculo.us

vapor.js

Standards for UI Development?

XHTML XForms

XPath HTML5
WHATWG
W3C
XInclude XBL Web Controls
SMIL
XML Schema CSS3
SVG DOM XUL
XSLT REX Mozilla

Ok Standards, but now?
Yes, with Ample SDK:
DOM Level 2 Core / Events & Selector API
HTML5 Canvas / Forms
CSS2.1 fixes & CSS 3 Namespaces, UI
SVG - vector graphics (yes in IE5 )
SMIL - Synchronized Multimedia Integration Language
XSLT - transform XML fragments with XSL-T stylesheets
XPath - expressions to locate XML nodes (in dev.)
XInclude - merge and XML inclusion
XUL - XML User Interface Language

programatic And what is „declarative“ ?
<div id="slider" />

//YUI
YUI().use('slider', function (Y) {
declarative
! var slider = new Y.Slider({ // Ajax.org Platform
! ! min! ! : 20, <a:slider min="20" max="40" />
! ! max! ! : 40
! }); // Backbase
! slider.render('#slider'); <b:slider min="20" max="40" />
});
//Ample SDK
// ExtJS <xul:scale min="20" max="40" />
new Ext.Slider({
renderTo!: 'slider',
minValue!: 20,
maxValue!: 40
});

//jQuery UI
plain vanilla HTML and JS
$('#slider').slider({
<div class="x-slider x-slider-horz" id="ext-comp-1001" s
! min! ! : 20,
! <div class="x-slider-end" id="ext-gen3">
! max! ! : 40
! ! <div class="x-slider-inner" id="ext-gen4" style=
});
! ! ! <div class="x-slider-thumb" id="ext-gen6" st
! ! ! </div>
! ! ! <a hidefocus="on" tabindex="-1" href="#" cla
! ! </div>
! </div>

Ok declarative is shorter,
but why it is better?
- again, it is standard base (Mozilla XUL) in Ample SDK
- namespacing and own domain specific markup
- separation of concerns (layout, logic and style)
- building blocks so easier to maintain
- better readable (and readable for non js guys)
- ui reusable in the future (or after api change)
- easier to split responsibilities in teams
(ui dude and js coder)

LOGIC UI DESIGN

JAVASCRIPT INTERFACE WEB
DEVELOPER ENGINEER DESIGNER

Javascript XUL CSS
DOM Level 3 SVG HTML 5

Ladies and Gentlemen, the code ...
<head>

<script type="text/javascript" src="ample/runtime.js"></script>
<script type="text/javascript" src="ample/languages/xul/xul.js"></script>
<link type="text/css" src="ample/languages/xul/themes/default/style.css"/>


<style type="text/ample+css">
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
xul|button {
color: red;
}
</style>


<script type="text/javascript">
function alertHelloWorld(oEvent) {
alert('Element "' + oEvent.target.tagName + '" was clicked');
}
</script>
</head>
<body>


<script type="application/ample+xml">!
<xul:button onclick="alertHelloWorld(event)">Hello, World!</xul:button>
</script>!
! ! ! ! ! ! !
</body>

The Ample SDK way.

equalize browser APIs without introducing new:
- brings features into the browser
- fixes existing features
- or does nothing if the feature is well implemented
Text

„ ... coding against Ample SDK is like
Yeah, doing it against a cross-browser browser! “

How it works ...
- Ample SDK is a browser in a browser
- generates the browser DOM (shadow) tree
- Ample SDK Node is the brave brother of the DOM Node
div
div div
select
div div input button
option option
div div

Ample SDK DOM Browse DOM (shadow tree)

Ample SDK Node API

getElementById childNodes, parentNode
getElementsByTagName (NS) firstChild, lastChild
querySelector, querySelectorAll previousSibling
createElement (NS), createTextNode nextSibling
setAttribute, getAttribute, removeAttribute (NS)
appendChild, insertBefore, removeChild, replaceChild

Class Model (ample.classes)
Node

Document Element

OWNElement XULElement XHTMLElement

OWNFancyElement XULWindowElement XHTMLElement_div

Ample SDK jQuery API
DOM API

document.getElementById(“slider“).setAttribute(“value“,“30“)
AMPLE SDK API

ample.getElementById(“slider“).setAttribute(“value“,“30“)
AMPLE SDK jQUERY API

ample.query(“#slider“).attr(“value“,“30“)

Conclusion

- natural client-side development experience
- good separation of concerns (layout, logic and style)
- modular and readable UI building
- standard based API that will stay
- create own domain specific markup language
- API validation and guarding
- open source and available on github
- ...

More Information

amplesdk.com
github.com/clientside/amplesdk

Sergey Ilinsky @ilinsky
Béla Varga @netzzwerg

Declarative and standards-based web application development with the Ample SDK

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Declarative and standards-based web application development with the Ample SDK

Similaire à Declarative and standards-based web application development with the Ample SDK (20)

Dernier

Dernier (20)

Declarative and standards-based web application development with the Ample SDK