Mashups, and New Trends In Enterprise Software

Brian “Bex” HuffChief Software Architect, Bezzotech Inc. February , 2007

2

Agenda

Intro to mashups

Demo of public mashups

The value and limitations of mashups

Preparing your enterprise for mashups

Stellent tools and techniques for mashups

The future of mashups

3

What the heck is a mashup?

It’s a Hybrid Web Application• Combines data from 2 sources on a third web site• Create new and novel web interfaces to existing data

Similar to J2EE portal servers• But no complex J2EE frameworks, only JavaScript and HTML• Drastically lowers the barrier to entry

No Java / C# / PHP knowledge required!• Use AJAX, Remote Scripting, and DHTML instead• Drawback: mashups can only access XML or JavaScript content

More of a philosophy than a framework• Make your data easy to reuse, and innovation will follow

4

Examples of Mashups

Housing Maps• http://housingmaps.com• JavaScript mashup of Google Maps and rental data from Craig’s List

Chicago Crime• http://chicagocrime.org• JavaScript Mashup of Google Maps and Chicago crime statistics

Google Flight Simulator• http://www.isoma.net/games/goggles.html• Flash mashup of Google Maps and an airplane video game

5

What’s the value?

Don't need enterprise programmers for enterprise products!• JavaScript runs in user’s browser, not the web server• Most of the work is done by Google Maps and the user’s browser!• Security, performance, uptime is already managed

Imagine instant access through DHTML to all enterprise data!• A little JavaScript knowledge goes a long way

Allow new and novel forms of visualization• Draw customers on a map according to addresses• Use purchase history data to display customers differently

• Old customer, new customer, angry customer• Merge in data from content management system as well

• Last searches, recent content, recent support tickets

6

Technology Behind Mashups

DHTML and DOM Scripting• Well known techniques for dynamically drawing HTML

Content published in specific formats• XML, JSON, and JavaScript

Asynchronous JavaScript and XML (AJAX)• For loading XML and JSON formatted data in JavaScript

Remote Scripting• Similar to AJAX, but much more flexible

7

DHTML and DOM Scripting

Draw HTML to the page with JavaScript• Simple, been around for a decade• Has limitations when it comes to accessibility

Use the innerHTML attributevar container = document.getElementById("container");container.innerHTML = "<p>Hello World!</p>";

Create new HTML nodes with DOM Scriptingvar container = document.getElementById("container");var paragraph = document.createElement("p");var text = document.createTextNode("Hello World!");paragraph.appendChild(text);container.appendChild(paragraph);

8

XML and JSON Formatted Files

Mashup code and data is in JavaScript files

Raw data in JavaScript Object Notation (JSON) or XML• XML is document oriented: verbose, complex, human readable• JSON is data oriented: compact, simple, machine readable

{ "widget": { "debug": "on", "window": { "title": "My Widget", "name": "main", "width": 500, "height": 500 } } }

<widget> <debug>on</debug> <window title="My Widget"> <name>main</name> <width>500</width> <height>500</height> </window></widget>

9

Asynchronous JavaScript And XML (AJAX)

Uses the XmlHttpRequest JavaScript object • Dynamically load XML or JSON formatted data files• Use DHTML to alter the page based on the data

var request = new XMLHttpRequest();request.onreadystatechange = myFunction;request.open("GET", "http://myserver.com/data.xml", true);...function myFunction() { var data = request.responseXML;}

Limited single-origin security policy• Can only load XML from originating server• Can bypass with proxies, but has performance / security limitations

10

Remote Scripting

Dynamically load new JavaScript files• Use DHTML to append new <script> nodes to page• Loads JavaScript or JSON formatted data

Older, more powerful than AJAX• No single-origin policy: can load files from any server

var scriptNode = document.createElement("script");scriptNode.src = "http://myserver.com/data.js";document.body.appendChild(scriptNode);

Loaded JS files need callbacks at bottom of page• Triggers asynchronous code in parent page after resource load• Callbacks enable better event-driven GUIs• Unfortunately, there is no JavaScript callback standard

11

Public Mashup Diagram

• Housing Maps downloads Craig’s List data• Downloads XML data, publishes static JavaScript on a schedule• Expert programmers needed to set this up

• User requests HTML and JavaScript from Housing Maps• Google Maps and user’s browser do all the work of rendering the page!

Craig’sList

GoogleMaps

housing mapsStatic

HTML &JavaScript

12

Beyond Google Maps

Many public mashups use Google Maps APIs• Can load Google’s resources from any web site• Can’t do that with AJAX!

Google Maps mashups are just the tip of the iceberg• Why not allow mashups for all enterprise content?• What are the risks? What are the rewards?

Four basic steps to enable mashups of your data 1) Separate your information from its presentation2) Create a robust JavaScript API to access the information3) Tell people about it4) Stand back and see what happens!

13

Enterprise Mashup Diagram

• Swizzler: a site that mashes up data from content silos• User requests HTML from swizzler

• Page includes references to secured enterprise JavaScript resources• User logs in to enterprise systems, and downloads secured JavaScript• Enterprise systems handle performance and security for you!

EnterpriseSystem B

EnterpriseSystem A

Swizzler Static HTML

14

Limitations of All Mashups

Accessibility for the blind• Since its all DHTML, screen readers do not support it• Browser screen readers have not been updated since 1998

• The law supports their laziness; all users suffer• Open source Firevox might put pressure on them to improve

• http://www.firevox.clcworld.net/

Sites stealing content from others• Access to XML and JS can require an API key, like Google Maps• Place reusable content on an intermediary site

• http://dappit.com

Too much information• Combining data in ways that are fun, but make no sense

15

Limitations of Enterprise Mashups

Security• Need single sign on (SSO) security for static files• Difficult to do SSO over the greater internet, or extranets

Performance• Published data is faster than dynamic data, but more rigid

• Web proxy cache can help out a lot• Bad JavaScript programmers may make too many requests

• Google Maps API limits number of requests

Stability and Uptime• Can you trust Google Maps to be up 24/7?• What if a vital public website goes down?• Can enterprise mashups only use intranet resources?

16

Making Mashup Ready Systems

Follow the lead of Google Maps• Easy to use JavaScript API

• Handles all asynchronous weirdness for you• Need an API license to download the root JavaScript file• Use Remote Scripting instead of AJAX

• Much more flexible, less limited, but harder to get right

App server front-end to enterprise data silos• Static published resources for common or public content• Dynamically published resources for secure or personalized content• Secure web cache to boost performance

17

Making Mashup Ready Systems – cont.

But, Google Maps is read-only• Cannot tell Google about bad directions, traffic jams, etc.• Read-only limitation is bad for trusted contributors on an intranet

What about creating new content through mashups?• Why not insert data with custom HTML forms as well?• What is needed to ensure security, and data integrity?

Architectures that support writable mashups• Must support HTTP POST from remote web forms

• Service-oriented architecture (SOA) is best,• Representational State Transfer (REST) will do,• Avoid Remote Procedure Call (RPC) like the plague!

• Need secure rules to redirect back to swizzler after a POST• When done properly, data integrity can be guaranteed

18

Stellent Mashup APIs

Schema Architecture• Not just for option lists anymore!• Pure JavaScript API for displaying database content and queries• Can be statically published data, or served on-the-fly

• Custom security filters available

SOAP Requests through AJAX• Run a search, user info, or content info service• Place IsSoap=1 in any URL to get back an XML response• Parse the results with standard XML tools• Draw the page with DHTML or DOM Scripting

Available right now in 7.5!

19

Demo Of Stellent Mashups

Mashup of ‘Address’ metadata field • Display search results on a Google Map

Mashup of ‘Customer’ option list• Runs a database query through Schema architecture• Load published JavaScript files• Maps the customer addresses

Search results through SOAP and AJAX• For the AJAX fans out there

Samples included with this presentation

20

Mashup Related Predictions

Long, slow, hopefully painful death of J2EE Portal Servers

Service Oriented Architectures become more common• Make enterprise mashups a piece of cake• Service oriented superior to object- or resource-oriented (REST)

App servers used to mashup-enable back end systems• Create vital interface layer to back-end systems• Extract and publish content so its mashup-ready• A secure web cache is key

Changes in the laws about web usability• DHTML wont go away, and is genuinely useful for the disabled!• Current generation of screen readers must be destroyed

21

More Predictions

Content silos live alongside swizzlers• Content contained in silos for security & ownership purposes• But data is mashed up outside the silo for popular consumption

JSON will surpass XML as data transfer format• If judged upon merits

JavaScript, Flash, XUL, and Apollo grudgingly gain some respect• If they receive a much needed polishing

Information overload leads to chaos and pain• Data mining and data visualization tools become more common

22

What to do Tomorrow...

Are mashups just about pretty maps?• Is it really useful for me, and my enterprise?• When will applications besides Stellent be mashup-ready?

Let Schema publish your data• Users, workflows, documents, content tracker reports

• Static, or dynamic?• With effort, can even publish data from other databases

Tell people in your organization about mashups• Let them play with the Stellent samples

Step back, and see what happens!

23

My Company: http://bezzotech.com My Blog: http://bexhuff.com My Self: bex@bezzotech.com

Please complete the session survey before you leave today Visit the Stellent Solutions Center & Partner Expo to learn more!

Access this presentation* at: http://www.stellentcrescendo.com/Crescendo/Sessions/index.htm*Log-in and password required to access presentations (watch for an email containing your codes)

And finally –Questions!