Ample SDK: A tour de force
•Download as ODP, PDF•
2 likes•1,648 views
An Introduction to Ample SDK presented at BerlinJS on 23rd September and Fronteers Jam Session on 6th October, 2010
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
- 1. Ample SDK: A tour de force BerlinJS 23 rd September, Berlin, Germany Sergey Ilinsky
- 2. 1. Do you develop something similar? comScore «Sitestat» application screenshot
- 3. 2. Web Application Architecture Evolution Previously Now UI&Data Data (Form data) UI Data (JSON/XML) Data (JSON/XML)
- 4. 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
- 5. 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
- 6. 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
- 7. 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
- 8. 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> <!-- (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"> <!--or: <script>ample.open()</script> --> <xul:hbox> <xul:button onclick="alertHelloWorld(event)">Hello, World!</b> </xul:hbox> </script> <!--or: <script>ample.close()</script> --> </body> </html>
- 9. 8. Ample SDK maintains its own DOM select option option div div div div div input button div div
- 10. 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
- 11. 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);
- 12. 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!
- 13. 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" />
- 14. 13. Back to the App (Highlights: Team, Arch.) comScore «Sitestat» application screenshot
- 15. 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