• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Adam Peller Interoperable Ajax Tools And Mashups
 

Adam Peller Interoperable Ajax Tools And Mashups

on

  • 3,631 views

 

Statistics

Views

Total Views
3,631
Views on SlideShare
3,624
Embed Views
7

Actions

Likes
3
Downloads
42
Comments
0

1 Embed 7

http://www.slideshare.net 7

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

    Adam Peller Interoperable Ajax Tools And Mashups Adam Peller Interoperable Ajax Tools And Mashups Presentation Transcript

    • Interoperable Ajax Tools and Mashups
      • Jon Ferraiolo
      • Adam Peller
      • IBM and OpenAjax Alliance
      • Sept. 14, 2009
    • Agenda
      • Introducing OpenAjax Alliance
      • Interoperability with Ajax Tools – OpenAjax Metadata
      • Interoperability with Ajax Mashups – OpenAjax Hub
      • Demo, Wrap-up, Q&A
      Interoperable Ajax Tools and Mashups
    • OpenAjax Alliance
      • Consortium of leading vendors, open source projects, and individual members
      • Mission is to promote success of Open Web technologies, particularly Ajax (HTML + JavaScript + …)
      • Key focus is interoperability - ability to mix and match solutions from Ajax technology providers
      Interoperable Ajax Tools and Mashups 3
    • Membership
      • 120 members, mostly companies, some individuals
      • Big guys: Cisco, Google, IBM, Oracle, SAP
      • Ajax toolkits: Backbase, Dojo, DWR, jQuery, Laszlo
      • Tools: Adobe, Aptana, Eclipse, IBM/Rational, Microsoft
      • Mobile: FranceTelecom/Orange, Opera, Vodafone
      • Other standards organizations: Eclipse, HR-XML, W3C
      • Ajax “users”: American Greetings, Fidelity, MITRE
      Interoperable Ajax Tools and Mashups 4
    • OpenAjax Alliance Scope of Activities
      • Interoperability
        • Ajax IDEs (OpenAjax Metadata for JS APIs and Widgets)  today’s focus
        • Mashups and widgets (OpenAjax Hub 2.0 & Metadata)  today’s focus
        • Ajax client libraries (OpenAjax Registry)
      • Browser wishlist
        • 2008: chaired by Nexaweb and IBM
        • 2009: chaired by Microsoft
      • Ajax Security
        • White paper: “Ajax and Mashup Security”
        • Mashup single sign-on
      • Mobile Ajax
        • White paper: “Introduction to Mobile Ajax for Developers”
        • Device APIs initiative (2007-2008, transitioned to OMTP and W3C)
      • Ajax Accessibility
        • RIA accessible tooling – conformance requirements, tools and best practices
      • Marketing, education and evangelism
      Interoperable Ajax Tools and Mashups
    • Agenda
      • Introducing OpenAjax Alliance
      • Interoperability with Ajax Tools – OpenAjax Metadata
      • Interoperability with Ajax Mashups – OpenAjax Hub
      • Demo, Wrap-up, Q&A
      Interoperable Ajax Tools and Mashups
    • What should be possible Interoperable Ajax Tools and Mashups (JSDT and WTP) Ajax Developer Tools: (and many more ….) Ajax Toolkits:
      • Dojo/Dijit
      • ExtJS
      • jQuery/jQueryUI
      • MooTools
      • Prototype
      • qooxdoo
      • script.aculo.us
      • Spry
      • YUI
      (and countless more ….) Plug-and-Play Interoperability
    • Key IDE features to enable
      • Code assist
      Interoperable Ajax Tools and Mashups WYSIWYG authoring with widgets
    • What we have today
      • A sparse matrix
        • Only a small percentage of matches between N toolkits x M tools
      • Monolithic tool/toolkit combinations
        • In order to use a particular developer tool, you have to commit to a particular platform
        • Examples: Backbase, Dreamweaver CS3, Ext 2.0 IDE, TIBCO GI, WaveMaker
      • A handful of tools support multiple Ajax toolkits by leveraging abstractions
        • Aptana:
          • Intelligent code assist for Dojo, Ext, jQuery, MochiKit, MooTools, Prototype, script.ac.ulous, Spry
          • Achievable via ScriptDocXML and OpenAjax Metadata (for JavaScript APIs)
        • Adobe Dreamweaver CS4
          • Widget support for any Ajax library (Dojo, jQueryUI, Ext, Spry, YUI, etc.)
          • Achievable via Dreamweaver Extensions and OpenAjax Metadata (for Ajax widgets)
        • Eclipse JSDT
          • Intelligent code assist for OpenAjax Metadata (for JavaScript APIs)
        • IBM Rational Application Developer
          • Widget support for any Ajax library (Dojo, jQueryUI, Ext, Spry, YUI, etc.)
          • Achievable via OpenAjax Metadata (for Ajax widgets)
      Interoperable Ajax Tools and Mashups
    • Leading developer tools came together in the OpenAjax Alliance IDE Working Group
      • Aptana Studio
      • Adobe Dreamweaver (Spry toolkit)
      • Eclipse JSDT
      • Microsoft Visual Studio (ASP.NET AJAX toolkit)
      • IBM Rational Application Developer
      • Sun jMaki/Netbeans
      • TIBCO (GI toolkit)
      • OpenLink SW (OAT framework)
      Interoperable Ajax Tools and Mashups
    • Advantages of universal plug&play
      • Standards improve industry efficiency
        • Ajax tools only have to consume a single standard format in order to work with all toolkits
        • Ajax toolkits only have to generate a single standard format in order to work with all tools
        • Tools and toolkits don’t have to have one-off meetings to coordinate integration efforts (and continue to meet with each new release)
      • Standards unlock innovation
        • Toolkit and tool developers can work on important new features
      • Ajax developers can choose best-of-breed solutions
        • Ajax should not have to commit to a particular toolkit in order to use a particular developer tool
      Interoperable Ajax Tools and Mashups
    • 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)
          • YUI to OpenAjax Metadata (and probably vice versa)
      • OpenAjax Metadata for Widgets
        • Embraced an industry leader: Adobe Dreamweaver widget format
        • Standard stuff: <widget>, <content>, <require>, <author>, <icon>, etc.
        • Open source
          • OpenAjax widget loader
          • Sample widgets
          • Reference implementation of a simple mashup editor
      Interoperable Ajax Tools and Mashups
    • OpenAjax Metadata: why XML (vs JSON)?
      • Started from two existing XML formats
        • JavaScript APIs: Aptana ScriptDoc XML
        • Widgets: Adobe Dreamweaver widget format
      • XML had a couple of advantages
        • Validation – could provide validation tool for developers to check their files
        • Extensibility – via namespaces (Dreamweaver uses this in a couple of places)
      • But OAA members realize the benefits of JSON, so:
        • Designed XML format so that there was a straightforward mapping into JSON
        • Architected the open source implementation into two phases
          • Step 1: XML to JSON preprocessor (can be done on server or batch process)
          • Step 2: All subsequent logic uses the JSON
      • Future version of OpenAjax Metadata might define a JSON option
        • version 1.1?
      Interoperable Ajax Tools and Mashups
    • 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=&quot;method_element&quot;>
      • <description>
      • Processes a method found in the JSDoc data structure.
      • Produces an OpenAjax 'method' element.
      • </description>
      • <parameter name=&quot;method&quot; datatype=&quot;Object&quot; usage=&quot;required&quot;>
      • <description>JSDoc object that holds info on method</description>
      • </parameter>
      • <parameter name=&quot;indent&quot; datatype=&quot;Number&quot; usage=&quot;required&quot;>
      • <description>Current indent level for pretty printing</description>
      • </parameter>
      • </method>
      Interoperable Ajax Tools and Mashups
    • 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=&quot; method_element &quot;>
      • <description>
      • Processes a method found in the JSDoc data structure.
      • Produces an OpenAjax 'method' element.
      • </description>
      • <parameter name=&quot;method&quot; datatype=&quot;Object&quot; usage=&quot;required&quot;>
      • <description> JSDoc object that holds info on method </description>
      • </parameter>
      • <parameter name=&quot;indent&quot; datatype=&quot;Number&quot; usage=&quot;required&quot;>
      • <description> Current indent level for pretty printing </description>
      • </parameter>
      • </method>
      Interoperable Ajax Tools and Mashups
    • OpenAjax Metadata for JavaScript APIs
      • Main elements
      • <alias>
      • <ancestor>
      • <class>
      • <constructor>
      • <event>
      • <exception>
      • <globals>
      • <handlerFunction>
      • <interface>
      • <method>
      • <mix>
      • <mixin>
      • <namespace>
      • <parameter>
      • <property>
      • <returnType>
      • <singleton>
      Interoperable Ajax Tools and Mashups
      • Other features
      • Localization (compatible with OpenSocial)
      • Descriptive metadata:
      • <description>, <shortDescription>, <example>, etc.
      • Datatypes: ‘datatype’ and ‘format’ attributes
      • ‘ format’ is mostly for widgets. Gives hint to IDE about what type of special UI to use within property editor. For example, format=“color” might result in color picker.
      • Enumerations: <enum>, <options>, <option>
      • Object literals: <config>
      • Required vs. optional
      • #Occurrences (e.g., zero or more, exactly one, …)
      • Function prototype definitions
      • <parameter name=“foo” datatype=“Function”>
      • <parameter name=“opts” datatype=“Object”/>
      • </parameter>
      • Factory methods
      • Compatibility metadata
      • <userAgent>, <available>, <deprecated>
      • Variable substitution
      • Primary usage scenario are widgets.
    • Tool support (JS APIs)
      • Eclipse provides JavaScript code assist via JSDT using OpenAjax Metadata
        • Has been shipping support for OpenAjax Metadata since late 2008
      • Aptana provides JavaScript code assist for any of the following:
        • ScriptDocXML or OpenAjax Metadata files (two formats are very similar)
        • ScriptDoc inline comments (similar to JSDoc)
        • http://aptana.com/dev/index.php/Adding_support_for_a_new_Ajax_library#Adding_Code_Assist
      • Microsoft Visual Studio
        • Regular attendee in committee meetings, valuable contributions, but no public statements so far about product support
      Interoperable Ajax Tools and Mashups
      • Mozilla Bespin
      • Under consideration
    • OpenAjax Metadata for Widgets
      • <widget name=&quot;Dojo Calendar&quot; id=&quot;http://openajax.org/samples/widgets/calendar&quot;
      • spec=&quot;1.0&quot; jsClass=&quot;Calendar&quot; width=&quot;155&quot; height=&quot;185&quot; sandbox=&quot;true&quot;
      • xmlns=&quot;http://openajax.org/metadata&quot;>
      • <require type=&quot;javascript&quot; src=&quot;calendar.js&quot;/>
      • <library name=&quot;dojo&quot; version=&quot;1.3“ src=&quot;http://ajax.googleapis.com/ajax/libs/dojo/1.3/&quot;>
      • <preload>
      • djConfig = { isDebug: false, parseOnLoad: false, afterOnLoad: true };
      • </preload>
      • <require type=&quot;javascript&quot; src=&quot;dojo/dojo.xd.js&quot;/>
      • <require type=&quot;css&quot; src=&quot;dojo/resources/dojo.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/dijit.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/dijit_rtl.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/tundra/Calendar.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/tundra/Calendar_rtl.css&quot;/>
      • </library>
      • <property name=&quot;date&quot; datatype=&quot;Date&quot; defaultValue=&quot;&quot; sharedAs=&quot;date&quot;/>
      • <content>
      • <![CDATA[
      • <div id=&quot;__WID___calendar&quot; class=&quot;tundra&quot; style=&quot;background-color:#f5f5f5&quot;
      • dojoType=&quot;dijit._Calendar&quot; />
      • ]]>
      • </content>
      • </widget>
      Interoperable Ajax Tools and Mashups
    • OpenAjax Metadata for Widgets
      • <widget name=&quot;Dojo Calendar&quot; id=&quot;http://openajax.org/samples/widgets/calendar&quot;
      • spec=&quot;1.0&quot; jsClass=&quot;Calendar&quot; width=&quot;155&quot; height=&quot;185&quot; sandbox=&quot;true&quot;
      • xmlns=&quot;http://openajax.org/metadata&quot;>
      • <require type=&quot;javascript&quot; src=&quot;calendar.js&quot;/>
      • <library name=&quot;dojo&quot; version=&quot;1.3“ src=&quot;http://ajax.googleapis.com/ajax/libs/dojo/1.3/&quot;>
      • <preload>
      • djConfig = { isDebug: false, parseOnLoad: false, afterOnLoad: true };
      • </preload>
      • <require type=&quot;javascript&quot; src=&quot;dojo/dojo.xd.js&quot;/>
      • <require type=&quot;css&quot; src=&quot;dojo/resources/dojo.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/dijit.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/dijit_rtl.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/tundra/Calendar.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/tundra/Calendar_rtl.css&quot;/>
      • </library>
      • <property name=&quot;date&quot; datatype=&quot;Date&quot; defaultValue=&quot;&quot; sharedAs=&quot;date&quot;/>
      • <content>
      • <![CDATA[
      • <div id=&quot;__WID___calendar&quot; class=&quot;tundra&quot; style=&quot;background-color:#f5f5f5&quot;
      • dojoType=&quot;dijit._Calendar&quot; />
      • ]]>
      • </content>
      • </widget>
      Interoperable Ajax Tools and Mashups <widget> is the root element.
    • OpenAjax Metadata for Widgets
      • <widget name=&quot;Dojo Calendar&quot; id=&quot;http://openajax.org/samples/widgets/calendar&quot;
      • spec=&quot;1.0&quot; jsClass=&quot;Calendar&quot; width=&quot;155&quot; height=&quot;185&quot; sandbox=&quot;true&quot;
      • xmlns=&quot;http://openajax.org/metadata&quot;>
      • <require type=&quot;javascript&quot; src=&quot;calendar.js&quot;/>
      • <library name=&quot;dojo&quot; version=&quot;1.3“ src=&quot;http://ajax.googleapis.com/ajax/libs/dojo/1.3/&quot;>
      • <preload>
      • djConfig = { isDebug: false, parseOnLoad: false, afterOnLoad: true };
      • </preload>
      • <require type=&quot;javascript&quot; src=&quot;dojo/dojo.xd.js&quot;/>
      • <require type=&quot;css&quot; src=&quot;dojo/resources/dojo.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/dijit.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/dijit_rtl.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/tundra/Calendar.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/tundra/Calendar_rtl.css&quot;/>
      • </library>
      • <property name=&quot;date&quot; datatype=&quot;Date&quot; defaultValue=&quot;&quot; sharedAs=&quot;date&quot;/>
      • <content>
      • <![CDATA[
      • <div id=&quot;__WID___calendar&quot; class=&quot;tundra&quot; style=&quot;background-color:#f5f5f5&quot;
      • dojoType=&quot;dijit._Calendar&quot; />
      • ]]>
      • </content>
      • </widget>
      Interoperable Ajax Tools and Mashups <library> and <require> elements identify the dependencies, such as the Ajax libraries and supplemental files (e.g., calendar.js) needed by this widget.
    • OpenAjax Metadata for Widgets
      • <widget name=&quot;Dojo Calendar&quot; id=&quot;http://openajax.org/samples/widgets/calendar&quot;
      • spec=&quot;1.0&quot; jsClass=&quot;Calendar&quot; width=&quot;155&quot; height=&quot;185&quot; sandbox=&quot;true&quot;
      • xmlns=&quot;http://openajax.org/metadata&quot;>
      • <require type=&quot;javascript&quot; src=&quot;calendar.js&quot;/>
      • <library name=&quot;dojo&quot; version=&quot;1.3“ src=&quot;http://ajax.googleapis.com/ajax/libs/dojo/1.3/&quot;>
      • <preload>
      • djConfig = { isDebug: false, parseOnLoad: false, afterOnLoad: true };
      • </preload>
      • <require type=&quot;javascript&quot; src=&quot;dojo/dojo.xd.js&quot;/>
      • <require type=&quot;css&quot; src=&quot;dojo/resources/dojo.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/dijit.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/dijit_rtl.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/tundra/Calendar.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/tundra/Calendar_rtl.css&quot;/>
      • </library>
      • <property name=&quot;date&quot; datatype=&quot;Date&quot; defaultValue=&quot;&quot; sharedAs=&quot;date&quot;/>
      • <content>
      • <![CDATA[
      • <div id=&quot;__WID___calendar&quot; class=&quot;tundra&quot; style=&quot;background-color:#f5f5f5&quot;
      • dojoType=&quot;dijit._Calendar&quot; />
      • ]]>
      • </content>
      • </widget>
      Interoperable Ajax Tools and Mashups <property> elements specify the list of widget parameters that should appear in property editor dialogs. You can make the widget “mashable” by enabling cross-widget property sharing via the ‘sharedAs’ attribute and cross-widget pubsub via the <topic> element (not shown).
    • OpenAjax Metadata for Widgets
      • <widget name=&quot;Dojo Calendar&quot; id=&quot;http://openajax.org/samples/widgets/calendar&quot;
      • spec=&quot;1.0&quot; jsClass=&quot;Calendar&quot; width=&quot;155&quot; height=&quot;185&quot; sandbox=&quot;true&quot;
      • xmlns=&quot;http://openajax.org/metadata&quot;>
      • <require type=&quot;javascript&quot; src=&quot;calendar.js&quot;/>
      • <library name=&quot;dojo&quot; version=&quot;1.3“ src=&quot;http://ajax.googleapis.com/ajax/libs/dojo/1.3/&quot;>
      • <preload>
      • djConfig = { isDebug: false, parseOnLoad: false, afterOnLoad: true };
      • </preload>
      • <require type=&quot;javascript&quot; src=&quot;dojo/dojo.xd.js&quot;/>
      • <require type=&quot;css&quot; src=&quot;dojo/resources/dojo.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/dijit.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/dijit_rtl.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/tundra/Calendar.css&quot;/>
      • <require type=&quot;css&quot; src=&quot;dijit/themes/tundra/Calendar_rtl.css&quot;/>
      • </library>
      • <property name=&quot;date&quot; datatype=&quot;Date&quot; defaultValue=&quot;&quot; sharedAs=&quot;date&quot;/>
      • <content>
      • <![CDATA[
      • <div id=&quot;__WID___calendar&quot; class=&quot;tundra&quot; style=&quot;background-color:#f5f5f5&quot;
      • dojoType=&quot;dijit._Calendar&quot; />
      • ]]>
      • </content>
      • </widget>
      Interoperable Ajax Tools and Mashups <content> element contains the HTML snippet for the visual rendering of the widget.
    • Industry support (Widgets)
      • Dreamweaver CS4 uses OpenAjax Widgets as a preferred way to import contributed widgets
        • With CS4, transitioned from Dreamweaver’s old proprietary widget format to OpenAjax’s format
        • Works with most Ajax toolkits: Dojo, ExtJS, jQueryUI, YUI, etc.
        • Can post your widgets at Dreamweaver Exchange
        • http://labs.adobe.com/wiki/index.php/Dreamweaver_Widget_Packager:Developer%27s_Guide_to_the_WDF
      • IBM Rational Application Developer
      • IBM Blue Spruce: “Collaborative Web”
      • Demos or in process: IBM Mashup Center, TIBCO, SAP, RadWebTech
      Interoperable Ajax Tools and Mashups
    • OpenAjax Metadata 1.0: current status
      • Specification – in final review phase
        • http://www.openajax.org/member/wiki/OpenAjax_Metadata_1.0_Specification
        • Word-for-word proofreading of the spec
        • Should finish review in Oct 2009
        • Then send to members for finalization and approval (Nov 2009?)
      • Open source implementations
        • Eclipse JSDT has implemented the JavaScript API features
        • OpenAjax widget loader has implemented the widget features (@OAA)
        • Sample mashup application uses the widget loader (@OAA) and provides sample widgets
        • JSDoc to OpenAjax Metadata converter (@OAA)
        • YUI to Openajax Metadata converter (@OAA)
        • Dojo XML file for API docs is 90% the same as OpenAjax Metadata
      • Commercial implementations (described earlier)
        • Adobe Dreamweaver, Aptana, IBM Rational Application Developer, Lotus Mashups, SAP, TIBCO
      • Formal language schema and validator
        • http://www.openajax.org/schema/OpenAjaxMetadata/1.0/ValidatorPage.php
      • Futures – version 1.1 of OpenAjax Metadata?
        • JSON version of OpenAjax Metadata (in addition to current XML version)?
        • JSDoc standards?
      Interoperable Ajax Tools and Mashups
    • Demo: OpenAjax Sample Mashup Application
      • http://www.openajax.org/samples/mashupapp/gadgets/samples/
        • from OpenAjax interopFest 2008
        • Test implementation for metadata spec
    • OpenAjax Hub 1.0 – an example Interoperable Ajax Tools and Mashups OpenAjax Hub 1.0 Example This is a mockup of a Web application that uses UI controls from multiple Ajax toolkits.
      • Assume multiple Ajax toolkits:
      • UTILS.js – Various utils, inc. XHR
      • 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.
    • Example – under the hood Interoperable Ajax Tools and Mashups <html> <head> ... <script type=&quot;text/javascript&quot; src=&quot;OpenAjax.js&quot;/> <script type=&quot;text/javascript&quot; src=&quot;UTILS.js&quot;/> <script type=&quot;text/javascript&quot; src=&quot;CALENDAR.js&quot;/> <script type=&quot;text/javascript&quot; src=&quot;CHARTS.js&quot;/> <script type=&quot;text/javascript&quot; src=&quot;DATAGRID.js&quot;/> <script type=&quot;text/javascript&quot;> ... function MyCalendarCallback(...) { OpenAjax.hub.publish(&quot;myapp.newdate&quot;, newdate); } ... function NewDateCallback(eventname, publisherData, subscriberData) { ...update the given visualization widget... } OpenAjax.hub.subscribe(&quot;myapp.newdate&quot;, NewDateCallback); ... </script> </head> ...
    • Demo: OpenAjax Sample Mashup Pub-Sub example
      • http://www.openajax.org/samples/mashupapp/gadgets/samples/
        • data visualization example
    • Agenda
      • Introducing OpenAjax Alliance
      • Interoperability with Ajax Tools – OpenAjax Metadata
      • Interoperability with Ajax Mashups – OpenAjax Hub
      • Demo, Wrap-up, Q&A
      Interoperable Ajax Tools and Mashups
    • Mashup Applications
      • Combining data sources or services to create a new application
      • Easy, fast integration
    • Two types of mashups
      • Programmer mashups
        • Web developer creates a mashup by coding in HTML and JavaScript
      • End-user mashups
        • Non-programmer builds a mashup using mashup assembly software
      • OpenAjax Hub
        • Applies to both
        • But particularly focused on special requirements of end-user mashups
      Interoperable Ajax Tools and Mashups
    • End-user mashups – the self-service business pattern Interoperable Ajax Tools and Mashups
    • Business value of end-user mashups Interoperable Ajax Tools and 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
    • Mashup software Interoperable Ajax Tools and Mashups
      • Mashup tools
      • Widget and feed discovery
      • Application assembly
      • Instant deployment
      • Mashable Widgets
      • Pre-packaged, remixable mini-applications
      • Usually tied to a back-end web service
      • Sometimes leveraging previous investment in SOA
      • Public or company-private
    • IBM Lotus Mashups
    • IBM Project “Blue Spruce” collaborative interactive mashups
    • Widget innovation – no shortage Interoperable Ajax Tools and Mashups
      • Widgets are the natural evolution path for Web Services and SOA
      • A widget represents the pre-packaged browser UI for a Web Services (SOA or WOA)
      • Already common in consumer space (e.g., Google Maps)
      • Will grow over time within Enterprise IT
    • End-User Mashup Step 1: Widget and Feed Discovery and Cataloging Interoperable Ajax Tools and Mashups
      • Widget Catalog
      • Widget-A (public data feed)
      • Widget-B (customized public data feed)
      • Widget-C (company data feed)
      • Widget-D (personal data)
      • Widget-E (3 rd party widget)
      • Widget-F (company widget)
      • etc.
      • Feeds
      • Widgets
      • Other data
      Public site 1 Personal data Company site 2 Public site 2 Public site 3 Company site 1 Public site 4 Data transform Data merge and transform (Feeds are packaged as widgets)
    • End-user Mashup Step 2: Mashup Assembly Interoperable Ajax Tools and Mashups Widget Catalog Widget-A Widget-B Widget-C Widget-D Widget-E Widget-F etc. Web browser URL: http://example.com/mashup_builder Widget-C Widget-E Widget-A User drags widgets from widget catalog and drops onto the canvas Using the mashup tool, the mashup designer links event publishers with event subscribers. As a result, user actions on one particular widget will cause a message to be sent to the other widgets, thereby triggering updates in those other widgets
    • As the mashup runs, widgets communicate with each other and with various servers Interoperable Ajax Tools and Mashups Communicates in the background with one of the company’s web servers Company server Communicates in the background with a public web server Public server 1 Communicates in the background with a public web server Public server 2 Web browser URL: http://example.com/mashup_builder Widget-C Widget-E Widget-A Message passing between the widgets
    • Industry challenges
      • 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
    • Mashup security challenge Interoperable Ajax Tools and Mashups Communicates in the background with one of the company’s web servers Company server (trusted) Communicates in the background with a public web server Public server 1 (untrusted) Communicates in the background with a public web server Public server 2 (untrusted) Web browser URL: http://example.com/mashup_builder Widget-C Widget-E Widget-A Message passing between the widgets
      • What if one of the widgets is malicious?
      • Is it able to bridge across to other widget’s client-side JavaScript to access company and user private information (get and set)?
      • Is it able to piggyback user credentials to access other servers?
    • Browser Security
      • Browsers only offer limited ability to isolate components
        • IFRAMEs from different domains (and subdomains) cannot communicate with each other via DOM bridging or JavaScript bridging
      • In practice, two main techniques for isolating 3 rd party components
        • IFRAMEs isolation – untrusted components placed into IFRAMEs with different domains (and subdomains)
        • JavaScript containment – restrict untrusted components to a well-defined subset the JavaScript language to prevent access to global JavaScript environment and other components (e.g., ADsafe, Caja). Note: ADsafe is built into JSLint.
      • OpenAjax Hub 2.0 uses IFRAME isolation approach
        • Allows use of Ajax toolkits that use JavaScript features that Caja disallows
      Interoperable Ajax Tools and Mashups
    • OpenAjax Hub 2.0
      • OpenAjax Hub 2.0 – framework for secure mashups
        • Client-side JavaScript
        • Runs in today’s browsers (without plugins)
        • Untrusted widgets are isolated into secure sandboxes
          • Using IFRAMEs and browser same-domain policy
        • Trusted widgets can be placed inline
          • Using DIVs for lower overhead and faster performance
        • All inter-widget communication managed by container application
          • Mashup app provides callbacks that implement policy manager
      • Based on “SMash” technology from IBM Research
        • Open-sourced (openajaxallianc.sourceforge.net) in August 2007
        • Research Paper describing SMash in WWW 2008 Conference
      • Cross-widget messaging via pub-sub APIs
        • Key APIs: hubClient.publish() and hubClient.subscribe()
      • High-level APIs, independent of implementation technology
        • Fragment communication, HTML5 postMessage, etc.
      Interoperable Ajax Tools and Mashups
    • OpenAjax Hub 2.0 Security Overview Interoperable Ajax Tools and Mashups Communicates in the background with one of the company’s web servers Company server Trustworthy Public Server Communicates in background with a malicious public server Malicious Public Server Web browser URL: http://example.com/mashup_builder Widget-A Widget-B Malicious Widget Communicates in background with a trustworthy public server OpenAjax Hub 2.0 – Widget Isolation and Messaging Mediator Hub 2.0 only permits cross-widget communication via a mediated publish/subscribe messaging bus Hub 2.0 isolates each widget into its own sandbox
    • Hub 2.0 Initialization Interoperable Ajax Tools and Mashups 5 Using the Managed Hub Load OpenAjax Hub Create a “ManagedHub” instance, identifying security manager callbacks Create containers for each component in the mashup and then load/initialize the components within those containers As application runs, components publish messages to other components Typically at initialization time, components subscribe to message topics of interest Component subscribes to message topics: OpenAjax.hub.HubClient.subscribe(…); Component publishes messages on Hub: OpenAjax.hub.HubClient.publish(…); Web browser URL: http://example.com/mashup_builder/my_mashup2 1 2 3 4 3 Container HubClient Component-A HTML/JavaScript Container HubClient Component-B HTML/JavaScript OpenAjax.hub ManagedHub instance 1 2 2 Security manager callbacks 3 4 5
    • Run-time message passing with Hub 2.0 Interoperable Ajax Tools and Mashups Managed Hub Message Passing Component-B publishes a message IFrame container marshalls the message across browser frames IFrame container sends message to Managed Hub Security manager callbacks decide whether to let the message through Component-A’s callback is invoked Message sent to Component-A’s container Web browser URL: http://example.com/mashup_builder/my_mashup2 OpenAjax.hub ManagedHub instance Security manager callbacks 1 2 3 4 5 6 4 IframeContainer HubClient Component-B HTML/JavaScript Component publishes messages on Hub: OpenAjax.hub.HubClient.publish(…); 1 <iframe> (for component isolation) InlineContainer HubClient Component-A HTML/JavaScript Component subscribes to message topics: function MyCallBack() {…} OpenAjax.hub.HubClient.subscribe(…); <div> (inline component) 2 6 3 5
    • OpenAjax Hub 2.0: current status
      • Specification – approved July 2009
      • Open source
        • Commercial-grade open source implementation
        • Comprehensive test suite
        • Sample mashup application uses Hub 2.0 and OA widget loaders
      • White papers on OpenAjax site
        • “ Introducing OpenAjax Hub 2.0 and Secure Mashups”
        • “ OpenAjax Hub 2.0 and Mashup Assembly Applications”
      • Industry support – demos, in process, or stated intentions
        • IBM Mashup Center (primary contributor to Hub 2.0 effort)
        • TIBCO (primary contributor to Hub 2.0 effort)
        • JackBe, RadWebTech, SAP (demo’d in 2008), Software AG
        • Financial companies (internally)
      • Next step
        • Samples that show how to use Hub 2.0 with single sign-on technologies such as OpenID and SAML
      Interoperable Ajax Tools and Mashups
    • Mashup and Widget Interoperability
      • Reminder: two challenges to overcome with mashups
        • Security (discussed in previous slides)
        • Interoperability (this slide)
      • Two widget interoperability standards
        • OpenAjax Widgets (within OpenAjax Metadata specs)
          • Includes “mashable widgets” extensions
          • Pubsub metadata (via <topic> element)
          • Shared property metadata (via ‘sharedAs’ attribute on <property> element)
          • Widget APIs (onLoad, onUnload, adjustDimensions, etc.)
        • OpenSocial Gadgets
          • 90% overlap with OpenAjax Widgets
          • But last 10% is important – e.g., mashup wiring metadata (topics and props), inline widgets, Ajax library sharing
      • Two widget standards? One possible approach
        • Have mashup applications support both OA Widgets and OS Gadgets
        • Use Hub 2.0 underneath for security
        • Work with OpenSocial, Shindig to address remaining 10% needed for user-built mashups
        • For widgets requiring certain key features, use OA Widgets (for time being)
      • Note: OpenAjax Alliance and OpenSocial Foundation are in discussions about coordinating efforts
      Interoperable Ajax Tools and Mashups
    • Agenda
      • Introducing OpenAjax Alliance
      • Interoperability with Ajax Tools – OpenAjax Metadata
      • Interoperability with Ajax Mashups – OpenAjax Hub
      • Demo, Wrap-up, Q&A
      Interoperable Ajax Tools and Mashups
    • DaVinci builder
      • DEMO
    • Thank you! Any questions?
      • For more information:
      • Web site: http://www.openajax.org
      • Wiki: http://www.openajax.org/member/wiki
      • Blog: http://www.openajax.org/blog
      • Mail list: [email_address]
      • Email: Adam Peller ( [email_address] m ) Jon Ferraiol o ( [email_address] com )
      Interoperable Ajax Tools and Mashups