View
2.976
Download
0
Category
Preview:
DESCRIPTION
Presentation of the Ample SDK GUI Framework at the BarCamp in Salzburg / Austria.
Citation preview
UI Develepoment in the browser?
YES! oh, NO!
the browser API ...HTML, CSS, XML, JavaScript and
the browser API
ok we need a framework,but remember
this is only plan b ...
Ext JS
jQuery
dojo dijit
MooTools
YUI
JavaScriptMVC
qooxdoo
prototype
SAJAXXAJAX
ASP.NET Ajax
GWT
Raphaël
Cappuccino
jQuery UI
dojoJSF
Ample SDK Backbase
AJAX.org
script.aculo.us
vapor.js
Standards for UI Development?
XInclude
SVG XUL
HTML5
SMIL
XSLT DOM
XBL
XHTML
CSS3XML Schema
XForms
REX
W3CWHATWG
Mozilla
Web Controls
XPath
XInclude - merge and XML inclusion
SVG - vector graphics (yes in IE5 )
XUL - XML User Interface Language
HTML5 Canvas / Forms
SMIL - Synchronized Multimedia Integration LanguageXSLT - transform XML fragments with XSL-T stylesheets
DOM Level 2 Core / Events & Selector API
CSS2.1 fixes & CSS 3 Namespaces, UI
XPath - expressions to locate XML nodes (in dev.)
Ok Standards, but now? Yes, with Ample SDK:
And what is „declarative“ ?programatic
declarative<div id="slider" />
//YUIYUI().use('slider', function (Y) {! var slider = new Y.Slider({! ! min!! : 20,! ! max!! : 40! });! slider.render('#slider');});
// ExtJSnew Ext.Slider({ renderTo!: 'slider', minValue!: 20, maxValue!: 40});
//jQuery UI$('#slider').slider({ ! min!! : 20,! max!! : 40});
// Ajax.org Platform<a:slider min="20" max="40" />
// Backbase<b:slider min="20" max="40" />
//Ample SDK<xul:scale min="20" max="40" />
plain vanilla HTML and JS <div class="x-slider x-slider-horz" id="ext-comp-1001" style="width: 207px;">! <div class="x-slider-end" id="ext-gen3">! ! <div class="x-slider-inner" id="ext-gen4" style="width: 200px;">! ! ! <div class="x-slider-thumb" id="ext-gen6" style="left: -7px;">! ! ! </div>! ! ! <a hidefocus="on" tabindex="-1" href="#" class="x-slider-focus" id="ext-gen5"></a>! ! </div>! </div></div>
Ok declarative is shorter,but why it is better?
- again, it is standard base (Mozilla XUL) in Ample SDK
- better readable (and readable for non js guys)
- namespacing and own domain specific markup
- building blocks so easier to maintain- separation of concerns (layout, logic and style)
- ui reusable in the future (or after api change)- easier to split responsibilities in teams (ui dude and js coder)
UI DESIGNLOGIC
XUL CSSJavascript
SVG HTML 5DOM Level 3
JAVASCRIPTDEVELOPER
INTERFACEENGINEER
WEB DESIGNER
Ladies and Gentlemen, the code ... <head> <!-- (A) Ample SDK runtime and UI language --> <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"/>
<!-- (1) Style --> <style type="text/ample+css"> @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; xul|button { color: red; } </style>
<!-- (2) Logic --> <script type="text/javascript"> function alertHelloWorld(oEvent) { alert('Element "' + oEvent.target.tagName + '" was clicked'); } </script> </head>
<body>
<!-- (3) Layout --> <script type="application/ample+xml">! <xul:button onclick="alertHelloWorld(event)">Hello, World!</xul:button> </script>!! ! ! ! ! ! !
</body>
Text
The Ample SDK way.
- brings features into the browser- fixes existing features- or does nothing if the feature is well implemented
„ ... coding against Ample SDK is like Yeah, doing it against a cross-browser browser! “
equalize browser APIs without introducing new:
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
Ample SDK DOM Browse DOM (shadow tree)
select
optionoption
div
divdiv
buttoninputdiv div
div div
Ample SDK Node API
firstChild, lastChild
previousSibling
nextSibling
childNodes, parentNodegetElementById
getElementsByTagName (NS)
querySelector, querySelectorAll
setAttribute, getAttribute, removeAttribute (NS)
createElement (NS), createTextNode
appendChild, insertBefore, removeChild, replaceChild
Node
Document Element
XULElement
XULWindowElement
XHTMLElement
XHTMLElement_div
OWNElement
OWNFancyElement
Class Model (ample.classes)
Ample SDK jQuery API
document.getElementById(“slider“).setAttribute(“value“,“30“)
ample.getElementById(“slider“).setAttribute(“value“,“30“)
ample.query(“#slider“).attr(“value“,“30“)
DOM API
AMPLE SDK API
AMPLE SDK jQUERY API
Conclusion
- natural client-side development experience
- standard based API that will stay
- modular and readable UI building
- create own domain specific markup language
- open source and available on github
- good separation of concerns (layout, logic and style)
- API validation and guarding
- ...
More Information
Sergey Ilinsky @ilinsky
Béla Varga @netzzwerg
amplesdk.com
github.com/clientside/amplesdk
THX
Recommended