SlideShare ist ein Scribd-Unternehmen logo
1 von 15
Downloaden Sie, um offline zu lesen
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=&quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot; > <head> <title>Hello, World!</title> <!-- (A) Ample SDK runtime and UI language --> <script type=&quot;text/javascript&quot; src=&quot;ample/runtime.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;ample/languages/xul/xul.js&quot;></script> <link type=&quot;text/css&quot; src=&quot;ample/languages/xul/themes/default/style.css&quot;/> <!-- (1) Style --> <style type=&quot;text/ ample+ css&quot;> @namespace xul &quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot;; xul| button { color: red; } </style> <!-- (2) Logic --> <script type=&quot;text/javascript&quot;> function alertHelloWorld(oEvent) { alert('Element &quot;' + oEvent.target.tagName + '&quot; was clicked'); } </script> </head> <body> <!-- (3) Layout --> <script type=&quot;application/ ample+ xml&quot;> <!--or: <script>ample.open()</script> --> <xul:hbox> <xul:button onclick=&quot;alertHelloWorld(event)&quot;>Hello, World!</b> </xul:hbox> </script> <!--or: <script>ample.close()</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 = &quot;tree&quot;; MyElement.protorype.namespaceURI= &quot;http://...xhtml&quot;; 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=&quot;multi-slider-horizontal&quot;> <div class=&quot;x-slider x-slider-horz&quot; style=&quot;width: 207px;&quot;> <div class=&quot;x-slider-end&quot;> <div class=&quot;x-slider-inner&quot; style=&quot;width: 200px;&quot;> <div class=&quot;x-slider-thumb&quot; style=&quot;left: 173px;&quot;/> <div class=&quot;x-slider-thumb&quot; style=&quot;left: 93px;&quot;/> </div> </div> </div> // + kilobytes of cross-browser javascript ExtJS: <div id=&quot;multi-slider-horizontal&quot;></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=&quot;25,75&quot; style=&quot;width:150px&quot; />
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

Weitere ähnliche Inhalte

Was ist angesagt?

Intro to DooPHP
Intro to DooPHPIntro to DooPHP
Intro to DooPHPLeng Hong
 
TypeScript: coding JavaScript without the pain
TypeScript: coding JavaScript without the painTypeScript: coding JavaScript without the pain
TypeScript: coding JavaScript without the painSander Mak (@Sander_Mak)
 
Debugging an Angular App
Debugging an Angular AppDebugging an Angular App
Debugging an Angular AppLaurent Duveau
 
Exploring Ruby on Rails and PostgreSQL
Exploring Ruby on Rails and PostgreSQLExploring Ruby on Rails and PostgreSQL
Exploring Ruby on Rails and PostgreSQLBarry Jones
 
What’s New and Hot in .NET 4.0
What’s New and Hot in .NET 4.0What’s New and Hot in .NET 4.0
What’s New and Hot in .NET 4.0Jess Chadwick
 
Basic overview of Angular
Basic overview of AngularBasic overview of Angular
Basic overview of AngularAleksei Bulgak
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponLaurent Duveau
 
An Introduction to Ruby on Rails 20100506
An Introduction to Ruby on Rails 20100506An Introduction to Ruby on Rails 20100506
An Introduction to Ruby on Rails 20100506Vu Hung Nguyen
 
An introduction-to-ruby-on-rails
An introduction-to-ruby-on-railsAn introduction-to-ruby-on-rails
An introduction-to-ruby-on-railsvinicorp
 
Paris Web - Javascript as a programming language
Paris Web - Javascript as a programming languageParis Web - Javascript as a programming language
Paris Web - Javascript as a programming languageMarco Cedaro
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersLaurent Duveau
 
Introduction about type script
Introduction about type scriptIntroduction about type script
Introduction about type scriptBinh Quan Duc
 
Wire It Presentation
Wire It PresentationWire It Presentation
Wire It PresentationEric Abouaf
 
TypeScript introduction to scalable javascript application
TypeScript introduction to scalable javascript applicationTypeScript introduction to scalable javascript application
TypeScript introduction to scalable javascript applicationAndrea Paciolla
 
All You Need to Know About Type Script
All You Need to Know About Type ScriptAll You Need to Know About Type Script
All You Need to Know About Type ScriptFolio3 Software
 
Typescript in 30mins
Typescript in 30mins Typescript in 30mins
Typescript in 30mins Udaya Kumar
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersLaurent Duveau
 
Xamarin.Android Introduction
Xamarin.Android IntroductionXamarin.Android Introduction
Xamarin.Android IntroductionGuido Magrin
 

Was ist angesagt? (20)

TypeScript and Angular workshop
TypeScript and Angular workshopTypeScript and Angular workshop
TypeScript and Angular workshop
 
AngularConf2015
AngularConf2015AngularConf2015
AngularConf2015
 
Intro to DooPHP
Intro to DooPHPIntro to DooPHP
Intro to DooPHP
 
TypeScript: coding JavaScript without the pain
TypeScript: coding JavaScript without the painTypeScript: coding JavaScript without the pain
TypeScript: coding JavaScript without the pain
 
Debugging an Angular App
Debugging an Angular AppDebugging an Angular App
Debugging an Angular App
 
Exploring Ruby on Rails and PostgreSQL
Exploring Ruby on Rails and PostgreSQLExploring Ruby on Rails and PostgreSQL
Exploring Ruby on Rails and PostgreSQL
 
What’s New and Hot in .NET 4.0
What’s New and Hot in .NET 4.0What’s New and Hot in .NET 4.0
What’s New and Hot in .NET 4.0
 
Basic overview of Angular
Basic overview of AngularBasic overview of Angular
Basic overview of Angular
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
 
An Introduction to Ruby on Rails 20100506
An Introduction to Ruby on Rails 20100506An Introduction to Ruby on Rails 20100506
An Introduction to Ruby on Rails 20100506
 
An introduction-to-ruby-on-rails
An introduction-to-ruby-on-railsAn introduction-to-ruby-on-rails
An introduction-to-ruby-on-rails
 
Paris Web - Javascript as a programming language
Paris Web - Javascript as a programming languageParis Web - Javascript as a programming language
Paris Web - Javascript as a programming language
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Introduction about type script
Introduction about type scriptIntroduction about type script
Introduction about type script
 
Wire It Presentation
Wire It PresentationWire It Presentation
Wire It Presentation
 
TypeScript introduction to scalable javascript application
TypeScript introduction to scalable javascript applicationTypeScript introduction to scalable javascript application
TypeScript introduction to scalable javascript application
 
All You Need to Know About Type Script
All You Need to Know About Type ScriptAll You Need to Know About Type Script
All You Need to Know About Type Script
 
Typescript in 30mins
Typescript in 30mins Typescript in 30mins
Typescript in 30mins
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Xamarin.Android Introduction
Xamarin.Android IntroductionXamarin.Android Introduction
Xamarin.Android Introduction
 

Ähnlich wie Ample SDK: A tour de force

Sergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample SdkSergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample SdkAjax Experience 2009
 
Ajaxworld March 2008 - Jeff Haynie Keynote - Appcelerator
Ajaxworld March 2008 - Jeff Haynie Keynote - AppceleratorAjaxworld March 2008 - Jeff Haynie Keynote - Appcelerator
Ajaxworld March 2008 - Jeff Haynie Keynote - AppceleratorJeff Haynie
 
IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009Christopher Judd
 
jQuery and_drupal
jQuery and_drupaljQuery and_drupal
jQuery and_drupalBlackCatWeb
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshellLennart Schoors
 
Building Smart Workflows - Dan Diebolt
Building Smart Workflows - Dan DieboltBuilding Smart Workflows - Dan Diebolt
Building Smart Workflows - Dan DieboltQuickBase, Inc.
 
JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4alexsaves
 
The Gist of React Native
The Gist of React NativeThe Gist of React Native
The Gist of React NativeDarren Cruse
 
Developing For The Web
Developing For The WebDeveloping For The Web
Developing For The Webaleemb
 
GWT is Smarter Than You
GWT is Smarter Than YouGWT is Smarter Than You
GWT is Smarter Than YouRobert Cooper
 
RomaFramework Tutorial Basics
RomaFramework Tutorial BasicsRomaFramework Tutorial Basics
RomaFramework Tutorial BasicsLuca Garulli
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingHoat Le
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Webmasuland
 
Zepto and the rise of the JavaScript Micro-Frameworks
Zepto and the rise of the JavaScript Micro-FrameworksZepto and the rise of the JavaScript Micro-Frameworks
Zepto and the rise of the JavaScript Micro-FrameworksThomas Fuchs
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersTodd Anglin
 
Client-side JavaScript Vulnerabilities
Client-side JavaScript VulnerabilitiesClient-side JavaScript Vulnerabilities
Client-side JavaScript VulnerabilitiesOry Segal
 
Beyond HTML: Tools for Building Web 2.0 Apps
Beyond HTML: Tools for Building Web 2.0 AppsBeyond HTML: Tools for Building Web 2.0 Apps
Beyond HTML: Tools for Building Web 2.0 AppsMarcos Caceres
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5Ravi Raj
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Techvincent_scheib
 

Ähnlich wie Ample SDK: A tour de force (20)

Sergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample SdkSergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample Sdk
 
Ajaxworld March 2008 - Jeff Haynie Keynote - Appcelerator
Ajaxworld March 2008 - Jeff Haynie Keynote - AppceleratorAjaxworld March 2008 - Jeff Haynie Keynote - Appcelerator
Ajaxworld March 2008 - Jeff Haynie Keynote - Appcelerator
 
Ajax World 2008
Ajax World 2008Ajax World 2008
Ajax World 2008
 
IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009
 
jQuery and_drupal
jQuery and_drupaljQuery and_drupal
jQuery and_drupal
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
Building Smart Workflows - Dan Diebolt
Building Smart Workflows - Dan DieboltBuilding Smart Workflows - Dan Diebolt
Building Smart Workflows - Dan Diebolt
 
JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4
 
The Gist of React Native
The Gist of React NativeThe Gist of React Native
The Gist of React Native
 
Developing For The Web
Developing For The WebDeveloping For The Web
Developing For The Web
 
GWT is Smarter Than You
GWT is Smarter Than YouGWT is Smarter Than You
GWT is Smarter Than You
 
RomaFramework Tutorial Basics
RomaFramework Tutorial BasicsRomaFramework Tutorial Basics
RomaFramework Tutorial Basics
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
 
Zepto and the rise of the JavaScript Micro-Frameworks
Zepto and the rise of the JavaScript Micro-FrameworksZepto and the rise of the JavaScript Micro-Frameworks
Zepto and the rise of the JavaScript Micro-Frameworks
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
 
Client-side JavaScript Vulnerabilities
Client-side JavaScript VulnerabilitiesClient-side JavaScript Vulnerabilities
Client-side JavaScript Vulnerabilities
 
Beyond HTML: Tools for Building Web 2.0 Apps
Beyond HTML: Tools for Building Web 2.0 AppsBeyond HTML: Tools for Building Web 2.0 Apps
Beyond HTML: Tools for Building Web 2.0 Apps
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Tech
 

Kürzlich hochgeladen

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementNuwan Dias
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimizationarrow10202532yuvraj
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Juan Carlos Gonzalez
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdfPaige Cruz
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 

Kürzlich hochgeladen (20)

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API Management
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 

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=&quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot; > <head> <title>Hello, World!</title> <!-- (A) Ample SDK runtime and UI language --> <script type=&quot;text/javascript&quot; src=&quot;ample/runtime.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;ample/languages/xul/xul.js&quot;></script> <link type=&quot;text/css&quot; src=&quot;ample/languages/xul/themes/default/style.css&quot;/> <!-- (1) Style --> <style type=&quot;text/ ample+ css&quot;> @namespace xul &quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot;; xul| button { color: red; } </style> <!-- (2) Logic --> <script type=&quot;text/javascript&quot;> function alertHelloWorld(oEvent) { alert('Element &quot;' + oEvent.target.tagName + '&quot; was clicked'); } </script> </head> <body> <!-- (3) Layout --> <script type=&quot;application/ ample+ xml&quot;> <!--or: <script>ample.open()</script> --> <xul:hbox> <xul:button onclick=&quot;alertHelloWorld(event)&quot;>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 = &quot;tree&quot;; MyElement.protorype.namespaceURI= &quot;http://...xhtml&quot;; 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=&quot;multi-slider-horizontal&quot;> <div class=&quot;x-slider x-slider-horz&quot; style=&quot;width: 207px;&quot;> <div class=&quot;x-slider-end&quot;> <div class=&quot;x-slider-inner&quot; style=&quot;width: 200px;&quot;> <div class=&quot;x-slider-thumb&quot; style=&quot;left: 173px;&quot;/> <div class=&quot;x-slider-thumb&quot; style=&quot;left: 93px;&quot;/> </div> </div> </div> // + kilobytes of cross-browser javascript ExtJS: <div id=&quot;multi-slider-horizontal&quot;></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=&quot;25,75&quot; style=&quot;width:150px&quot; />
  • 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