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

on

  • 3,152 views

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

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

Statistics

Views

Total Views
3,152
Views on SlideShare
3,126
Embed Views
26

Actions

Likes
2
Downloads
19
Comments
0

1 Embed 26

http://lanyrd.com 26

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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 MooToolsGWT 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 W3CXInclude XBL Web Controls SMIL XML Schema CSS3 SVG DOM XULXSLT REX Mozilla
  • 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
  • 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>
  • 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 DESIGNJAVASCRIPT INTERFACE WEBDEVELOPER ENGINEER DESIGNERJavascript XUL CSSDOM Level 3 SVG HTML 5
  • 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>
  • 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! “
  • 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 APIgetElementById childNodes, parentNodegetElementsByTagName (NS) firstChild, lastChildquerySelector, querySelectorAll previousSiblingcreateElement (NS), createTextNode nextSiblingsetAttribute, getAttribute, removeAttribute (NS)appendChild, insertBefore, removeChild, replaceChild
  • Class Model (ample.classes) NodeDocument Element OWNElement XULElement XHTMLElement OWNFancyElement XULWindowElement XHTMLElement_div
  • 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“)
  • 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 Informationamplesdk.comgithub.com/clientside/amplesdk Sergey Ilinsky @ilinsky Béla Varga @netzzwerg
  • THX