Interoperable Ajax Tools and Mashups
Upcoming SlideShare
Loading in...5
×
 

Interoperable Ajax Tools and Mashups

on

  • 1,821 views

 

Statistics

Views

Total Views
1,821
Views on SlideShare
1,820
Embed Views
1

Actions

Likes
0
Downloads
23
Comments
0

1 Embed 1

http://www.slideshare.net 1

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

Interoperable Ajax Tools and Mashups Interoperable Ajax Tools and Mashups Presentation Transcript

  • Interoperable Ajax Tools and Mashups Jon Ferraiolo IBM and OpenAjax Alliance September 30, 2008
  • Agenda Introducing OpenAjax Alliance Ajax IDEs OpenAjax Metadata (for Ajax Libraries) Mashups OpenAjax Hub 1.1 OpenAjax Metadata (for Widgets) Summary Interoperable Ajax Tools and Mashups 2
  • The Ajax explosion (2005-2007) Huge amount of hype ~200 Ajax toolkits appear almost instantly Microsoft Atlas (now called ASP.NET AJAX) • Helps contribute to legitimacy Several other major “proprietary” Ajax frameworks • Adobe/Spry, Backbase, ICEsoft, Nexaweb, Sun/jMaki, TIBCO, … Several major open source projects • Prototype/Scriptaculous, Dojo, Yahoo, DWR, Google GWT, jQuery,… Why so many so quickly? Simply rebrand DHTML to Ajax Interoperable Ajax Tools and Mashups 3
  • Why OpenAjax Alliance? A rich but fragile ecosystem Interoperability shortcomings Educational/marketing shortcomings Dependence on browsers companies for technical advances Ajax vendors motivated to work together (united we stand, divided we fall) Ajax technology layer not addressed by other industry groups HTML app Ajax app Ajax toolkit(s) Browser Interoperable Ajax Tools and Mashups 4
  • OpenAjax Alliance Formation Kick-off meeting May 2006 30 companies Objectives, process, scope, and initial tasks Scope of activities Interoperability Educational Help shape the future of the Ajax ecosystem What we produce Documents (e.g., specs) Open source (mostly JavaScript) Interoperable Ajax Tools and Mashups 5
  • OpenAjax Alliance Areas of Focus Interoperability Ajax runtime libraries Ajax IDEs Mashups and widgets Mobile Ajax Marketing, education and evangelism Future browsers Interoperable Ajax Tools and Mashups 6
  • Runtime Interoperability Runtime = JavaScript running in the browser Problems Name collisions Integration difficulties • Critical for mashups, where you assemble pre-built components onto the canvas, often using different Ajax toolkits OpenAjax Registry An industry-wide registry of JavaScript globals, CSS classnames, and HTML markup extensions OpenAjax Hub OpenAjax Metadata Interoperable Ajax Tools and Mashups 7
  • IDE Interoperability IDEs = Developer tools (code assist, debug, visual layout) Problem NxM permutation problem (~200 Ajax toolkits, ~15 Ajax IDEs) Each Ajax toolkit documents their APIs and widgets in their own way OpenAjax Metadata for Ajax Libraries Industry standard XML for: • JavaScript APIs • UI controls JSDoc to OpenAjax Metadata converter (open source) Some of the leading OpenAjax Alliance’s IDE WG members Adobe Dreamweaver Eclipse (Aptana, JSDT, ATF) Microsoft Visual Studio Interoperable Ajax Tools and Mashups 8
  • Mashup and Widget Interoperability Mashups = Ability to assemble pre-built components into a composite application Problems Security Widget interoperability OpenAjax Hub 1.1 OpenAjax Metadata for Widgets Open source Google Gadgets support Open source mini-mashup tool Interoperable Ajax Tools and Mashups 9
  • Mobile Ajax Mobile Ajax = Full Ajax running on mobile phones Problems Special challenges (screen size, latency, keypad, battery, …) Special opportunities (portability, GPS, camera, voice, …) White paper: Introduction to Mobile Ajax for Developers Mobile Device APIs Open source JavaScript to access CPS, camera, address book, SMS, … Targets both existing proprietary, system-dependent APIs (via plugins) and emerging industry standards Collaborating with OMTP, tracking W3C (e.g., geolocation) Interoperable Ajax Tools and Mashups 10
  • Marketing, Education and Evangelism Problems: Industry: needs a central place for industry-wide initiatives Customers: With so many choices: Ajax can be confusing to newcomers OpenAjax Conformance A small set of conformance requirements that products must meet in order to interoperate well with other Ajax products An Ajax industry interoperability trust brand White papers Introduction to Ajax and OpenAjax When Does Ajax Make Business Sense Next Generation Applications Using Ajax and OpenAjax Successful Deployment of Ajax and OpenAjax Ajax and Mashup Security Introduction to Mobile Ajax for Developers Good News for Ajax – the Browser Wars are Back Interoperable Ajax Tools and Mashups 11
  • Shaping the Future of Ajax Ecosystem Ajax industry browser wishlist initiative April – July, 2008 222 participants, including many industry leaders 55 separate feature requests described and discussed on wiki Top feature requests 2D Graphics Security (better prevention of XSS and CSRF) Improved low-level DOM hooks for visual layout DOM performance Rich text editing Server push (Comet) Video and audio Interoperable Ajax Tools and Mashups 12
  • Agenda Introducing OpenAjax Alliance Ajax IDEs OpenAjax Metadata (for Ajax Libraries) Mashups OpenAjax Hub 1.1 OpenAjax Metadata (for Widgets) Summary Interoperable Ajax Tools and Mashups 13
  • Ajax IDEs: Limited support for Ajax libraries Adobe Dreamweaver CS3: Spry widgets Visual Studio: ASP.NET AJAX APIs and widgets TIBCO, Backbase, Nexaweb, …: their own libraries JSEclipse: no special support for Ajax libraries Eclipse JSDT and ATF: works in progress Netbeans/jMaki: widgets from various libs (dojo, GWT, YUI) Aptana: supports JavaScript APIs in many popular toolkits Aflax, ASP.NET AJAX, Dojo, Ext JS, jQuery, Mochikit, Mootools, Prototype, Scriptaculous, Spry, YUI Interoperable Ajax Tools and Mashups 14
  • What should be possible? Intelligent code assist for APIs in Ajax libraries What Aptana does with APIs Visual design using widgets from Ajax libraries What jMaki/Netbeans does with widgets So what’s the problem? NxM problem (~200 Ajax toolkits, ~15 Ajax IDEs) Each toolkit documents APIs and widgets their own way Interoperable Ajax Tools and Mashups 15
  • Agenda Introducing OpenAjax Alliance Ajax IDEs OpenAjax Metadata (for Ajax Libraries) Mashups OpenAjax Hub 1.1 OpenAjax Metadata (for Widgets) Summary Interoperable Ajax Tools and Mashups 16
  • Solution: OpenAjax Metadata OpenAjax Metadata for JavaScript APIs Embraced an industry leader (Aptana ScriptDoc XML) Standard stuff: <class>, <namespace>, <method>, <parameter>, etc. Open source • JSDoc to OpenAjax Metadata (extension to JSDoc Toolkit) • Aptana ScriptDoc XML to OpenAjax Metadata (and probably vice versa) OpenAjax Metadata for Widgets Embraced an industry leader (Adobe Dreamweaver submission) Standard stuff: <widget>, <content>, <require>, <author>, <icon>, etc. Markup designed for strong alignment with Google Gadgets Open source • Sample widgets • Reference implementation of a simple mashup editor Interoperable Ajax Tools and Mashups 17
  • OpenAjax Metadata for JavaScript APIs Sample JavaScript with JSDoc /** * Processes a method found in the JSDoc data structure. * Produces an OpenAjax 'method' element. * @param {object} method JSDoc object that holds info on this method * @param {number} indent Current indent level for pretty printing */ this.method_element = function(method, indent) { … } Corresponding OpenAjax Metadata <method name="method_element"> <description> Processes a method found in the JSDoc data structure. Produces an OpenAjax 'method' element. </description> <parameter name="method" datatype="Object" usage="required"> <description>JSDoc object that holds info on method</description> </parameter> <parameter name="indent" datatype="Number" usage="required"> <description>Current indent level for pretty printing</description> </parameter> </method> Interoperable Ajax Tools and Mashups 18
  • OpenAjax Metadata for Widgets <widget name="Calendar" id="…" spec="0.1" jsClass="Calendar" sandbox="true" xmlns="http://openajax.org/metadata"> <requires> <require type="library" name="dojo" version="1.1" copy="false"/> <require type="javascript" src="calendar.js"/> <require type="css" library="dojo" src="dojo/resources/dojo.css"/> <require type="css" library="dojo" src="dijit/themes/tundra/tundra.css"/> <require type="css" src="../../lib/dijit/themes/tundra/tundra_rtl.css"/> </requires> <properties> <property name='date' datatype='Date' publish='true' topic='date'/> </properties> <content type='fragment'> <![CDATA[ <input ID="__WID___calendar" class='tundra' lang="en-us" style="background-color:#f5f5f5" dojoType="dijit._Calendar"/> ]]> </content> <javascript location="atEnd"> this.init(); </javascript> </widget> Interoperable Ajax Tools and Mashups 19
  • OpenAjax Metadata for Widgets <widget name="Calendar" id="…" spec="0.1" jsClass="Calendar" sandbox="true" xmlns="http://openajax.org/metadata"> <requires> <widget> is the root element. name="dojo" version="1.1" copy="false"/> <require type="library" <require type="javascript" src="calendar.js"/> <require type="css" library="dojo" src="dojo/resources/dojo.css"/> <require type="css" library="dojo" src="dijit/themes/tundra/tundra.css"/> <require type="css" src="../../lib/dijit/themes/tundra/tundra_rtl.css"/> </requires> <properties> <property name='date' datatype='Date' publish='true' topic='date'/> </properties> <content type='fragment'> <![CDATA[ <input ID="__WID___calendar" class='tundra' lang="en-us" style="background-color:#f5f5f5" dojoType="dijit._Calendar"/> ]]> </content> <javascript location="atEnd"> this.init(); </javascript> </widget> Interoperable Ajax Tools and Mashups 20
  • OpenAjax Metadata for Widgets <widget name="Calendar" id="…" spec="0.1" jsClass="Calendar" sandbox="true" xmlns="http://openajax.org/metadata"> <requires> <require type="library" name="dojo" version="1.1" copy="false"/> <require type="javascript" src="calendar.js"/> <require type="css" library="dojo" src="dojo/resources/dojo.css"/> <require type="css" library="dojo" src="dijit/themes/tundra/tundra.css"/> <require type="css" src="../../lib/dijit/themes/tundra/tundra_rtl.css"/> </requires> <properties> <require> elements specifydatatype='Date' publish='true' topic='date'/> <property name='date' the various resources that the </properties>to run successfully widget needs <content type='fragment'> <![CDATA[ <input ID="__WID___calendar" class='tundra' lang="en-us" style="background-color:#f5f5f5" dojoType="dijit._Calendar"/> ]]> </content> <javascript location="atEnd"> this.init(); </javascript> </widget> Interoperable Ajax Tools and Mashups 21
  • OpenAjax Metadata for Widgets <widget name="Calendar" id="…" spec="0.1" jsClass="Calendar" sandbox="true" xmlns="http://openajax.org/metadata"> <requires> <require type="library" name="dojo" version="1.1" copy="false"/> <require type="javascript" src="calendar.js"/> <require type="css" library="dojo" src="dojo/resources/dojo.css"/> <require type="css" library="dojo" src="dijit/themes/tundra/tundra.css"/> <require type="css" src="../../lib/dijit/themes/tundra/tundra_rtl.css"/> </requires> <properties> <property name='date' datatype='Date' publish='true' topic='date'/> </properties> <content type='fragment'> <property> elements specify the list of widget parameters <![CDATA[ that should ID="__WID___calendar" dialogs. <input appear in property editor class='tundra' lang="en-us" style="background-color:#f5f5f5" dojoType="dijit._Calendar"/> You can say whether a given property should participate ]]> in cross-widget message via ‘publish’ and ‘subscribe’ </content> <javascript (Also, there is a <topic> element) attributes. location="atEnd"> this.init(); </javascript> </widget> Interoperable Ajax Tools and Mashups 22
  • OpenAjax Metadata for Widgets <widget name="Calendar" id="…" spec="0.1" jsClass="Calendar" sandbox="true" xmlns="http://openajax.org/metadata"> <requires> <require type="library" name="dojo" version="1.1" copy="false"/> <require type="javascript" src="calendar.js"/> <require type="css" library="dojo" src="dojo/resources/dojo.css"/> <require type="css" library="dojo" src="dijit/themes/tundra/tundra.css"/> <require type="css" src="../../lib/dijit/themes/tundra/tundra_rtl.css"/> </requires> <properties> <property name='date' datatype='Date' publish='true' topic='date'/> </properties> <content type='fragment'> <![CDATA[ <input ID="__WID___calendar" class='tundra' lang="en-us" style="background-color:#f5f5f5" dojoType="dijit._Calendar"/> ]]> </content> <content> element contains the HTML snippet for the <javascript location="atEnd"> visualthis.init(); widget. rendering of the </javascript> </widget> Interoperable Ajax Tools and Mashups 23
  • OpenAjax Metadata for Widgets <widget name="Calendar" id="…" spec="0.1" jsClass="Calendar" sandbox="true" xmlns="http://openajax.org/metadata"> <requires> <require type="library" name="dojo" version="1.1" copy="false"/> <require type="javascript" src="calendar.js"/> <require type="css" library="dojo" src="dojo/resources/dojo.css"/> <require type="css" library="dojo" src="dijit/themes/tundra/tundra.css"/> <require type="css" src="../../lib/dijit/themes/tundra/tundra_rtl.css"/> </requires> <properties> <property name='date' datatype='Date' publish='true' topic='date'/> </properties> <content type='fragment'> <![CDATA[ <input ID="__WID___calendar" class='tundra' lang="en-us" <javascript> elements are mainly for initialization dojoType="dijit._Calendar"/> style="background-color:#f5f5f5" logic. ]]> The “this” object will be set to the widget instance. </content> <javascript location="atEnd"> this.init(); </javascript> </widget> Interoperable Ajax Tools and Mashups 24
  • Standards improve industry efficiency and unleash innovation Ajax libraries can produce one format (OAM) for their APIs Their library will now be compatible with many IDEs If the library uses JSDoc, then auto-generation of OpenAjax Metadata We are investigating auto-generation for other inline documentation formats, such as what Dojo uses Ajax IDEs can consume one format (OAM) That IDE will now support dozens of Ajax libraries By unifying the industry around a single XML file, IDEs can now innovate and compete in other areas Interoperable Ajax Tools and Mashups 25
  • IDE WG Participants Aptana Studio (chair of the WG) Adobe Dreamweaver (Spry toolkit) Microsoft Visual Studio (ASP.NET AJAX toolkit) Eclipse ATF and JSDT Sun jMaki/Netbeans TIBCO (GI toolkit) OpenLink SW (OAT framework) Interoperable Ajax Tools and Mashups 26
  • Current status Specification We have a complete draft spec for OpenAjax Metadata Now in the implementation phase (see 2008 InteropFest, subsequent slide) Schema (in RelaxNG) and validator Open source implementation OpenAjax’s open source mashup tool implements the widget format Eclipse JSDT has implemented the JavaScript API features Version 0.1 of JSDoc to OpenAjax Metadata is available Commercial implementation Adobe Dreamweaver is implementing the widget features in the spec Aptana Studio is implementing the JavaScript APIs features Interoperable Ajax Tools and Mashups 27
  • Agenda Introducing OpenAjax Alliance Ajax IDEs OpenAjax Metadata (for Ajax Libraries) Mashups OpenAjax Hub 1.1 OpenAjax Metadata (for Widgets) Summary Interoperable Ajax Tools and Mashups 28
  • Mashups – the self-service business pattern Interoperable Ajax Tools and Mashups 29
  • Business value of mashups • Faster, cheaper delivery of applications • Save time and money through reuse and lightweight integration techniques • Lower skill set needed to assembly new applications • Support innovation and new business opportunities • Users empowered to innovate and explore • Gain valuable insights • Due to remixing enterprise and web information • Better align IT and business • Do-it-yourself IT will be expected by Facebook generation • Extend reach and value of SOA • Service reuse illuminates the business value of SOA Interoperable Ajax Tools and Mashups 30
  • Mashup software • Mashup tools • Widget and feed discovery • Application assembly • Instant deployment • Widgets • Pre-packaged, remixable mini-applications • Usually tied to a back-end web service • Sometimes leveraging previous investment in SOA • Public or company-private • Key enabler of the long tail Interoperable Ajax Tools and Mashups 31
  • Widget innovation – no shortage Interoperable Ajax Tools and Mashups 32
  • Industry challenges Interoperability Dozens of proprietary technologies Good news: many use the “Web Runtime” (i.e., Ajax)! Bad news: even when using the Web Runtime, widgets are not interoperable Security The power of mashups – comes largely from discovering and integrating great widgets from 3rd parties But 3rd party widgets might be malicious Interoperable Ajax Tools and Mashups 33
  • OpenAjax – Addressing the challenges Web browser URL: http://example.com/mashup_builder/my_mashup1 Widget-C Widget-E (trusted) Communicates in the Company server (1) OpenAjax Hub 1.1 background with one provides framework for of the company’s web loading/isolating widgetsservers (untrusted) and secure message Communicates in the management background with a Public server public web server Message passing Widget-A (4) Open source mini- between Communicates in the (untrusted) mashup application the widgets background with a Public server shows how to use all of public web server these technologies (2) OpenAjax Metadata defines an industry (3) Open source transcoders standard widget wrapper convert popular existing format proprietary gadget formats into OpenAjax Metadata Interoperable Ajax Tools and Mashups 34
  • Agenda Introducing OpenAjax Alliance Ajax IDEs OpenAjax Metadata (for Ajax Libraries) Mashups OpenAjax Hub 1.1 OpenAjax Metadata (for Widgets) Summary Interoperable Ajax Tools and Mashups 35
  • OpenAjax Hub 1.0 What is it? Small bit of standard JavaScript (< 3K after compaction) Enables multiple Ajax runtimes to work together Key use case: Developer mashups Where a professional developer mashes up components using HTML+JavaScript+… Version 1.0 features Ajax library registration • OpenAjax.hub.registerLibrary() Simple publish/subscribe engine (the pub sub hub) • OpenAjax.hub.publish(topicName, payload) • OpenAjax.hub.subscribe(topicName, callbackFunction) Interoperable Ajax Tools and Mashups 36
  • OpenAjax Hub 1.0 – an example Assume multiple Ajax OpenAjax Hub 1.0 Example toolkits: This is a mockup of a Web application that uses UI controls • UTILS.js – Various utils, inc. XHR from multiple Ajax toolkits. • CALENDAR.js – Calendar control • DATAGRID.js – Powerful tables • CHARTS.js – Charting utilities The visual controls need to react to new server data and to each other and update their views appropriately. Interoperable Ajax Tools and Mashups 37
  • Example – under the hood <html> <head> ... <script type="text/javascript" src="OpenAjax.js"/> <script type="text/javascript" src="UTILS.js"/> <script type="text/javascript" src="CALENDAR.js"/> <script type="text/javascript" src="CHARTS.js"/> <script type="text/javascript" src="DATAGRID.js"/> <script type="text/javascript"> ... function MyCalendarCallback(...) { OpenAjax.hub.publish("myapp.newdate", newdate); } ... function NewDateCallback(eventname, publisherData, subscriberData) { ...update the given visualization widget... } OpenAjax.hub.subscribe("myapp.newdate", NewDateCallback); ... </script> </head> ... Interoperable Ajax Tools and Mashups 38
  • OpenAjax InteropFest Objectives: Allows OpenAjax Alliance to verify that OpenAjax Hub is reliable, performant, and suitable Allows members to verify that they are OpenAjax Conformant Jan-March 2007 July-Sept 2007 12 toolkits participated 14 organizations, 20 toolkits participated http://www.openajax.org/member/wiki/InteropFest_2007_March http://www.openajax.org/member/wiki/InteropFest_1.0 Interoperable Ajax Tools and Mashups 39
  • InteropFest Demos For people who are just looking at the slide deck, some InteropFest demos can be found at: http://www.openajax.org/member/wiki/InteropFest_1.0 Participating organizations Participating toolkits 24SevenOffice AjaxEngine Apache XAP Apache XAP Dojo Foundation Dojo Toolkit IBM Ext ILOG ILOG JViews DWR/Getahead IT Mill Toolkit IT Mill jMaki Lightstreamer JQuery Microsoft Lightstreamer Nexaweb Microsoft Ajax Library OpenLink SW Nexaweb Ajax Client Open Spot OAT: OpenLink AJAX Toolkit Software AG OpenSpot CalcDesk Sun Microsystems Prototype TIBCO script.aculo.us Software AG's webMethods/CAF TIBCO General Interface 24SevenOffice Vili YUI Interoperable Ajax Tools and Mashups 40
  • OpenAjax Hub 1.0 Status Approved Specification http://www.openajax.org/member/wiki/OpenAjax_Hub_1.0_Specification Reference implementation at SourceForge http://openajaxallianc.sourceforge.net Interoperable Ajax Tools and Mashups 41
  • OpenAjax Hub 1.1 – New features OpenAjax Hub 1.0 Key use case: Developer mashups Key technology: pub/sub within a single browser frame OpenAjax Hub 1.1 Key use case: Secure end-user mashups Key technologies • Widget isolation (for security) • Pub/sub across browser frames • Security manager mediates all cross-widget messages Interoperable Ajax Tools and Mashups 42
  • Security vulnerabilities Web browser URL: http://example.com/mashup_builder/my_mashup1 Widget-C Widget-E (trusted) Communicates in the Company server background with one of the company’s web servers (untrusted) Communicates in the background with a Public server public web server Message passing Widget-A between Communicates in the (untrusted) the widgets background with a Public server public web server What if one of the widgets is malicious? Interoperable Ajax Tools and Mashups 43
  • Browser Security Browser same-origin policy IFRAMEs isolation - IFRAMEs from different domains (and subdomains) cannot communicate with each other via DOM bridging or JavaScript bridging Implemented in all popular Web browsers today Today’s tricks for cross-domain mashups Dynamic SCRIPT tag to another server Server-side proxies “IFrame proxy” (window.location fragment identifier) New browsers: W3C postMessage() and Access Control Interoperable Ajax Tools and Mashups 44
  • SMash SMash stands for “Secure Mashups” Secure handling of 3rd party mashup components Runs in today’s browsers (without plugins) Designed and implemented at IBM™ Research (beginning of 2007) Open-sourced (openajaxallianc.sourceforge.net) in August 2007 Research Paper describing SMash in WWW 2008 Conference High-level APIs, independent of implementation technology Fragment communication, HTML5 postMessage, Java™ platform, Flash etc. Will still work when browsers add native support for secure cross-frame messaging Interoperable Ajax Tools and Mashups 45
  • OpenAjax Hub 1.1: Plug-in communication providers Widget 1 Hub 1.1 Code Mashup assembly tool FIM provider Hub 1.1 Code Widget 2 SPI Hub 1.1 Code FIM provider inline provider inline provider HTML5 postMessage provider Widget 3 Hub 1.1 Code HTML5 provider Interoperable Ajax Tools and Mashups 46
  • OpenAjax Hub 1.1: Simple example Web browser URL: http://example.com/mashup_builder/my_mashup1 Mashup container Widget-C Widget-E Broadcast an event using connHandle.publish() Hub 1.1 (Managed Hub) Hub 1.1 Hub 1.1 inline provider inline provider smash provider smash provider Widget-A Subscribe to a topic and register a Security callback function using manager connHandle.subscribe() Invoke the callback function Hub 1.1 smash provider Interoperable Ajax Tools and Mashups 47
  • OpenAjax Hub 1.1: the steps Web browser URL: http://example.com/mashup_builder/my_mashup1 Mashup container Widget-C Widget-E 1 2 Load the Initialize and widgets used 4 Broadcast an event using connHandle.publish() create a in the mashup “Managed Hub” Hub 1.1 (Managed Hub) 7 5 Hub 1.1 Hub 1.1 8 inline provider 6 inline provider smash provider 9 smash provider Widget-A 3 Subscribe to a topic and register a Security callback function using manager connHandle.subscribe() 10 12 Invoke the callback function Hub 1.1 11 smash provider Interoperable Ajax Tools and Mashups 48
  • Hub 1.1 status Specification First draft spec – far along http://www.openajax.org/member/wiki/OpenAjax_Hub_1. 1_Specification Reference implementation at SourceForge First implementation (far along) http://openajaxallianc.sourceforge.net Timeline for Hub 1.1 August-October 2008: 2008 InteropFest End of 2008: Finalize and approve Interoperable Ajax Tools and Mashups 49
  • Agenda Introducing OpenAjax Alliance Ajax IDEs OpenAjax Metadata (for Ajax Libraries) Mashups OpenAjax Hub 1.1 OpenAjax Metadata (for Widgets) Summary Interoperable Ajax Tools and Mashups 50
  • Widget innovation – no shortage Interoperable Ajax Tools and Mashups 51
  • OpenAjax Metadata Mashup shortcomings today Widget interoperability • Many widget formats (Google, Yahoo, Apple, Microsoft…) • Widget developers usually have to build different versions of their widgets to work with different containers Security • No comprehensive, standards-based approach to widget isolation OpenAjax Metadata addresses these two shortcomings Widget interoperability • OpenAjax Metadata defines industry standard XML for mashup widgets • Very close to Google Gadgets (easy to transcode with XSLT) Security • OpenAjax Metadata designed to work with OpenAjax Hub 1.1 (which provides a secure mashup runtime) Interoperable Ajax Tools and Mashups 52
  • OpenAjax Widgets <widget name="Calendar" id="…" spec="0.1" jsClass="Calendar" sandbox="true" xmlns="http://openajax.org/metadata"> <requires> <require type="library" name="dojo" version="1.1" copy="false"/> <require type="javascript" src="calendar.js"/> <require type="css" library="dojo" src="dojo/resources/dojo.css"/> <require type="css" library="dojo" src="dijit/themes/tundra/tundra.css"/> <require type="css" src="../../lib/dijit/themes/tundra/tundra_rtl.css"/> </requires> <properties> <property name='date' datatype='Date' publish='true' topic='date'/> </properties> <content type='fragment'> <![CDATA[ <input ID="__WID___calendar" class='tundra' lang="en-us" style="background-color:#f5f5f5" dojoType="dijit._Calendar"/> ]]> </content> <javascript location="atEnd"> this.init(); </javascript> </widget> Interoperable Ajax Tools and Mashups 53
  • Widget Isolation and Security Widget content is either a stand-alone HTML snippet (a DIV) or an entire HTML page Container manages the widget Widget loading and unloading Widget isolation (e.g., widget in its own IFRAME) Inter-widget communication – container provides connection handle • connHandle.publish() • connHandle.subscribe() Container implements pub/sub security Container includes a “policy manager” (who can pub/sub to what) Widget is oblivious to message passing technology • fragment identifiers, postMessage, window.Name or whatever Interoperable Ajax Tools and Mashups 54
  • OpenAjax Metadata and Google Gadgets Google Gadgets The gorilla is the “Web Widget” space (tens of thousands of Gadgets) Solid technology OpenAjax Metadata strategy Match Google Gadgets wherever possible Open source XSLT transcoders to/from Google Gadgets Interoperable Ajax Tools and Mashups 55
  • OpenAjax Metadata status Specification First draft spec - far along http://www.openajax.org/member/wiki/OpenAjax_Metadata_Specifica tion Open source Mini mashup application Includes support for Google Gadgets (via transcoder) Timeline for OpenAjax Metadata August-October 2008: 2008 InteropFest Fall 2008: Finalize and approve Interoperable Ajax Tools and Mashups 56
  • OpenAjax – Addressing the challenges Web browser URL: http://example.com/mashup_builder/my_mashup1 Widget-C Widget-E (trusted) Communicates in the Company server (1) OpenAjax Hub 1.1 background with one provides framework for of the company’s web loading/isolating widgetsservers (untrusted) and secure message Communicates in the management background with a Public server public web server Message passing Widget-A (4) Open source mini- between Communicates in the (untrusted) mashup application the widgets background with a Public server shows how to use all of public web server these technologies (2) OpenAjax Metadata defines an industry (3) Open source transcoders standard widget wrapper convert popular existing format proprietary gadget formats into OpenAjax Metadata Interoperable Ajax Tools and Mashups 57
  • OpenAjax Mashups in action Interoperable Ajax Tools and Mashups 58
  • 2008 InteropFest Objectives Test OpenAjax Metadata interoperability across multiple vendors Test OpenAjax Hub 1.1 for reliability, performance, and suitability When August – October, 2008 http://www.openajax.org/member/wiki/2008_InteropFest http://www.openajax.org/2008_InteropFest/refimpl Interoperable Ajax Tools and Mashups 59
  • Agenda Introducing OpenAjax Alliance Ajax IDEs OpenAjax Metadata (for Ajax Libraries) Mashups OpenAjax Hub 1.1 OpenAjax Metadata (for Widgets) Summary Interoperable Ajax Tools and Mashups 60
  • Summary Ajax IDEs aren’t realizing their potential yet Inteoperability challenges Mashups aren’t realizing their potential yet Security challenges Interoperability challenges OpenAjax Alliance is addressing the challenges For Ajax IDEs • OpenAjax Metadata addresses IDE interop challenges For mashups • OpenAjax Hub 1.1 addresses security challenges • OpenAjax Metadata addresses widget interop challenges Interoperable Ajax Tools and Mashups 61
  • For More Information Web site: http://www.openajax.org Wiki: http://www.openajax.org/member/wiki Blog: http://www.openajax.org/blog Mail list: public@openajax.org Email: Jon Ferraiolo <jferrai@us.ibm.com> Interoperable Ajax Tools and Mashups 62