UI Develepoment in the browser? YES!             oh,   NO!HTML, CSS, XML, JavaScript and   the browser API ...the browser ...
ok we need a framework,     but remember  this is only plan b ...
YUI              Ext JS               qooxdoo                       Ample SDK                Backbase      jQuery UI      ...
Standards for UI Development?    XHTML XForms  XPath                HTML5                                  WHATWG         ...
Ok Standards, but now?           Yes, with Ample SDK:DOM Level 2 Core / Events & Selector APIHTML5 Canvas / FormsCSS2.1 fi...
programatic                          And what is „declarative“ ?<div id="slider" />//YUIYUI().use(slider, function (Y) {  ...
Ok declarative is shorter,           but why it is better?- again, it is standard base (Mozilla XUL) in Ample SDK- namespa...
LOGIC          UI         DESIGNJAVASCRIPT    INTERFACE     WEBDEVELOPER      ENGINEER   DESIGNERJavascript      XUL      ...
Ladies and Gentlemen, the code ...<head>    <!-- (A) Ample SDK runtime and UI language -->    <script type="text/javascrip...
The Ample SDK way. equalize browser APIs without introducing new: - brings features into the browser - fixes existing feat...
How it works ...- Ample SDK is a browser in a browser- generates the browser DOM (shadow) tree- Ample SDK Node is the brav...
Ample SDK Node APIgetElementById                        childNodes, parentNodegetElementsByTagName (NS)                  f...
Class Model (ample.classes)                    NodeDocument                         Element             OWNElement        ...
Ample SDK jQuery API DOM APIdocument.getElementById(“slider“).setAttribute(“value“,“30“) AMPLE SDK APIample.getElementById...
Conclusion- natural client-side development experience- good separation of concerns (layout, logic and style)- modular and...
More Informationamplesdk.comgithub.com/clientside/amplesdk Sergey Ilinsky   @ilinsky Béla Varga       @netzzwerg
THX
Declarative and standards-based web application development with the Ample SDK
Upcoming SlideShare
Loading in …5
×

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

3,325 views
3,225 views

Published on

Presentation of the Ample SDK GUI Framework at the BarCamp in Salzburg / Austria.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,325
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. UI Develepoment in the browser? YES! oh, NO!HTML, CSS, XML, JavaScript and the browser API ...the browser API
  2. 2. ok we need a framework, but remember this is only plan b ...
  3. 3. YUI Ext JS qooxdoo Ample SDK Backbase jQuery UI dojo dijit AJAX.org JavaScriptMVC MooToolsGWT jQuery prototype Cappuccino JSF dojo ASP.NET Ajax Raphaël SAJAX XAJAX script.aculo.us vapor.js
  4. 4. Standards for UI Development? XHTML XForms XPath HTML5 WHATWG W3CXInclude XBL Web Controls SMIL XML Schema CSS3 SVG DOM XULXSLT REX Mozilla
  5. 5. Ok Standards, but now? Yes, with Ample SDK:DOM Level 2 Core / Events & Selector APIHTML5 Canvas / FormsCSS2.1 fixes & CSS 3 Namespaces, UISVG - vector graphics (yes in IE5 )SMIL - Synchronized Multimedia Integration LanguageXSLT - transform XML fragments with XSL-T stylesheetsXPath - expressions to locate XML nodes (in dev.)XInclude - merge and XML inclusionXUL - XML User Interface Language
  6. 6. programatic And what is „declarative“ ?<div id="slider" />//YUIYUI().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>
  7. 7. 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)
  8. 8. LOGIC UI DESIGNJAVASCRIPT INTERFACE WEBDEVELOPER ENGINEER DESIGNERJavascript XUL CSSDOM Level 3 SVG HTML 5
  9. 9. 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>
  10. 10. 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 likeYeah, doing it against a cross-browser browser! “
  11. 11. 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)
  12. 12. Ample SDK Node APIgetElementById childNodes, parentNodegetElementsByTagName (NS) firstChild, lastChildquerySelector, querySelectorAll previousSiblingcreateElement (NS), createTextNode nextSiblingsetAttribute, getAttribute, removeAttribute (NS)appendChild, insertBefore, removeChild, replaceChild
  13. 13. Class Model (ample.classes) NodeDocument Element OWNElement XULElement XHTMLElement OWNFancyElement XULWindowElement XHTMLElement_div
  14. 14. Ample SDK jQuery API DOM APIdocument.getElementById(“slider“).setAttribute(“value“,“30“) AMPLE SDK APIample.getElementById(“slider“).setAttribute(“value“,“30“) AMPLE SDK jQUERY APIample.query(“#slider“).attr(“value“,“30“)
  15. 15. 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- ...
  16. 16. More Informationamplesdk.comgithub.com/clientside/amplesdk Sergey Ilinsky @ilinsky Béla Varga @netzzwerg
  17. 17. THX

×