Transcript Crescendo 2006 Presentation Format

Mashups, and New Trends In
Enterprise Software
Brian “Bex” Huff
Chief Software Architect, Bezzotech Inc.
February , 2007
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
2
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
3
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
4
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
5
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
6
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 attribute
var container = document.getElementById("container");
container.innerHTML = "<p>Hello World!</p>";
 Create new HTML nodes with DOM Scripting
var container = document.getElementById("container");
var paragraph = document.createElement("p");
var text = document.createTextNode("Hello World!");
paragraph.appendChild(text);
container.appendChild(paragraph);
7
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</debug>
<window title="My Widget">
<name>main</name>
<width>500</width>
<height>500</height>
</window>
</widget>
{ "widget": {
"debug": "on",
"window": {
"title": "My Widget",
"name": "main",
"width": 500,
"height": 500
}
}
}
8
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
9
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
10
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!
Google
Maps
Craig’s
List
housing maps
Static
HTML &
JavaScript
11
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)
2)
3)
4)
Separate your information from its presentation
Create a robust JavaScript API to access the information
Tell people about it
Stand back and see what happens!
12
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!
Enterprise
System A
Swizzler
Static HTML
Enterprise
System B
13
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
14
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?
15
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
16
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
17
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!
18
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
19
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
20
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
21
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!
22
And finally –
Questions!
 My Company: http://bezzotech.com
 My Blog: http://bexhuff.com
 My Self: [email protected]
 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)
23