Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
UI Develepoment in the browser?


 YES!             oh,   NO!
HTML, CSS, XML,
 JavaScript and   the browser API ...
the br...
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 API
HTML5 Canvas / Forms
CSS2....
programatic                          And what is „declarative“ ?
<div id="slider" />

//YUI
YUI().use('slider', function (...
Ok declarative is shorter,
           but why it is better?
- again, it is standard base (Mozilla XUL) in Ample SDK
- name...
LOGIC          UI         DESIGN


JAVASCRIPT    INTERFACE     WEB
DEVELOPER      ENGINEER   DESIGNER


Javascript      XU...
Ladies and Gentlemen, the code ...
<head>
    <!-- (A) Ample SDK runtime and UI language -->
    <script type="text/javasc...
The Ample SDK way.

 equalize browser APIs without introducing new:
 - brings features into the browser
 - fixes existing ...
How it works ...
- Ample SDK is a browser in a browser
- generates the browser DOM (shadow) tree
- Ample SDK Node is the b...
Ample SDK Node API

getElementById                        childNodes, parentNode
getElementsByTagName (NS)                ...
Class Model (ample.classes)
                    Node




Document                         Element




             OWNElem...
Ample SDK jQuery API
 DOM API

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

ample.getEleme...
Conclusion

- natural client-side development experience
- good separation of concerns (layout, logic and style)
- modular...
More Information

amplesdk.com
github.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
×
Upcoming SlideShare
Javascript - Rock and Roll
Next
Download to read offline and view in fullscreen.

2

Share

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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 MooTools GWT 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 W3C XInclude XBL Web Controls SMIL XML Schema CSS3 SVG DOM XUL XSLT REX Mozilla
  5. 5. 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
  6. 6. 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>
  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 DESIGN JAVASCRIPT INTERFACE WEB DEVELOPER ENGINEER DESIGNER Javascript XUL CSS DOM 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 like Yeah, 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 API getElementById childNodes, parentNode getElementsByTagName (NS) firstChild, lastChild querySelector, querySelectorAll previousSibling createElement (NS), createTextNode nextSibling setAttribute, getAttribute, removeAttribute (NS) appendChild, insertBefore, removeChild, replaceChild
  13. 13. Class Model (ample.classes) Node Document Element OWNElement XULElement XHTMLElement OWNFancyElement XULWindowElement XHTMLElement_div
  14. 14. 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“)
  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 Information amplesdk.com github.com/clientside/amplesdk Sergey Ilinsky @ilinsky Béla Varga @netzzwerg
  17. 17. THX
  • ilinsky

    Sep. 8, 2011
  • harisingh

    Jun. 12, 2011

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

Views

Total views

3,746

On Slideshare

0

From embeds

0

Number of embeds

43

Actions

Downloads

22

Shares

0

Comments

0

Likes

2

×