Mashups, and New Trends In Enterprise Software

1. Mashups, and New Trends In Enterprise Software Brian “Bex” Huff Chief 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 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);

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</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 } } }

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! Google Maps Craig’s List Static HTML & JavaScript housing maps

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 • 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!

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 performanceand security for you! Enterprise System A Swizzler Static HTML Enterprise System B

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. And finally –Questions! • 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)