Ample SDK: A tour de force

Ample SDK: A tour de force BerlinJS 23 rd September, Berlin, Germany Sergey Ilinsky

1. Do you develop something similar? comScore «Sitestat» application screenshot

2. Web Application Architecture Evolution Previously Now UI&Data Data (Form data) UI Data (JSON/XML) Data (JSON/XML)

3. What do we have on the Client-Side now? HTML4/5 + SVG Problems: 1) Limited amount of [native] UI elements 2) Poor-to-none UI elements styling facilities (e.g. input type=date) 3) Hardly or not implemented in most of modern browsers 4) Zero language extensibility (until XBL lands) 5) Too low-level abstraction for application GUI needs + Severe inconsistencies in DOM implementations

4. Alternatives to HTML5 for App GUIs? JavaScript GUI Frameworks (ExtJS, Dojo, Qooxdoo, jQuery UI..) Drawbacks: 1) Proprietary APIs 2) UI is programmed (in JS+HTML), not declared 3) No way to re-use (to run natively later) App code written in future when browser GUI technologies catch up

5. What if... What if we would extend on browser approach/technologies and preserve the programming model instead? Benefits: 1) Standard technologies and APIs (no learning needed) 2) Very good separation of concerns: layout, logic and style 3) Chance to delegate browser tasks when it becomes capable 4) View logic written today can be re-used tomorrow

6. Ample SDK JavaScript GUI Framework Ample SDK is a JavaScript GUI Framework that smartly re-uses concepts and technologies found in web-browsers but also provides a higher-level abstraction to facilitate the needs of App GUI developers. Programming Model (that of browser!): 1) XML for Layout 2) JavaScript (with DOM and/or jQuery API) for Logic 3) CSS for Styling

7. Sample [primitive] page running Ample SDK <!DOCTYPE html> <html xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <head> <title>Hello, World!</title>  <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"/>  <style type="text/ ample+ css"> @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; xul| button { color: red; } </style>  <script type="text/javascript"> function alertHelloWorld(oEvent) { alert('Element "' + oEvent.target.tagName + '" was clicked'); } </script> </head> <body>  <script type="application/ ample+ xml">  <xul:hbox> <xul:button onclick="alertHelloWorld(event)">Hello, World!</b> </xul:hbox> </script>  </body> </html>

8. Ample SDK maintains its own DOM select option option div div div div div input button div div

9. Ample SDK Technologies Overview 1) Core (single file, 38/112* Kb) - DOM (Core, Events, Selectors API) - JS objects (DOMParser/XMLSerializer/XSLTProcessor/XHR/JSON) - jQuery APIs (The Good Parts only ~95%) - UI Managers (Drag & Drop, Resize, Capture, Touch etc.) - XML Processors (SMIL 3.0, XInclude 1.0, XML Schema 1.1) - CSS Processor (CSS3-UI, CSS3-NS, CSS2.1 fixes, vendor-specific prefixes expansion) - Componentization API 2) UI Languages (separate files) - HTML 5 (13/85 Kb) - SVG 1.1 (15/90 Kb) - XUL (44/273 Kb) - Charts (28/141 Kb) - XForms 1.1 (in development) 3) Plugins (Cookie, Form, Glob, Store, XPath, SOAP, XMPP etc.) * component size (gzipped/unzgipped), numbers refer to Ample SDK 0.9.3 alpha build

10. Ample SDK Extension Points 1) Creating jQuery-like plugins (some existing can be re-used) ample.extend({ ampleMember: function(){} }); ample.extend({ collectionMember: function(){} }, AMLQuery.prototype); 2) Prototyping core objects AMLNode.prototype.on = function(type, callback) { this.addEventListener(type, callback, false); } 3) Creating new UI elements / languages var MyElement = function() {} MyElement.protorype = new AMLElement; MyElement.protorype.localName = "tree"; MyElement.protorype.namespaceURI= "http://...xhtml"; ample.extend(MyElement);

11. Some Interesting Aspects (Demo) 1) Excellent rendering speed 2) APIs validation/guarding 3) DOM Mutation events (insertion/removal, attribute change) 4) Capture phase in propagation of events (modality) 5) Built-in transitions/animations (for pseudo-classes) 6) Styling in proper CSS 7) SVG in IE 5.5-8.0 … and much, much more!

12. Sample Code Compared (elem. instantiation) Plain HTML: <div id="multi-slider-horizontal"> <div class="x-slider x-slider-horz" style="width: 207px;"> <div class="x-slider-end"> <div class="x-slider-inner" style="width: 200px;"> <div class="x-slider-thumb" style="left: 173px;"/> <div class="x-slider-thumb" style="left: 93px;"/> </div> </div> </div> // + kilobytes of cross-browser javascript ExtJS: <div id="multi-slider-horizontal"></div> Ext.onReady(function(){ new Ext.Slider({ renderTo: 'multi-slider-horizontal', width : 150, minValue: 0, maxValue: 100, values : [25,75], plugins : new Ext.slider.Tip() }); }); Ample: <xul:scale value="25,75" style="width:150px" />

13. Back to the App (Highlights: Team, Arch.) comScore «Sitestat» application screenshot

Thank you! Ample SDK Web-Site: http://www.amplesdk.com Source-Code: http://github.com/clientside/amplesdk Discussions: http://groups.google.com/group/amplesdk Reference: http://www.amplesdk.com/reference me, Sergey Ilinsky http://www.ilinsky.com http://twitter.com/ilinsky Thanks Andy Beeching ( @andybeeching ) for slides review and Béla Varga ( @netzzwerg ) for revised design of drawings

Ample SDK: A tour de force

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Ample SDK: A tour de force

Similar to Ample SDK: A tour de force (20)

Recently uploaded

Recently uploaded (20)

Ample SDK: A tour de force