5. Standards for UI Development?
XHTML XForms
XPath HTML5
WHATWG
W3C
XInclude XBL Web Controls
SMIL
XML Schema CSS3
SVG DOM XUL
XSLT REX Mozilla
6. 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
8. 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)
9. LOGIC UI DESIGN
JAVASCRIPT INTERFACE WEB
DEVELOPER ENGINEER DESIGNER
Javascript XUL CSS
DOM Level 3 SVG HTML 5
11. 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! “
12. 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)
14. Class Model (ample.classes)
Node
Document Element
OWNElement XULElement XHTMLElement
OWNFancyElement XULWindowElement XHTMLElement_div
15. 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“)
16. 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
- ...