Your SlideShare is downloading. ×
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
Facing a few barriers
        on the road to SOA?




        JackBe’s Rich Enterprise Application (REA) platform
        ...
March 2007




n6	     The	AJAX	Story	Is	                        n20	   Exposing	and	Preventing	
	       Still	Just	Beginn...
From The Editor



                                                    The	AJAX	
Group Publisher Jeremy Geelan
Art Directo...
SAAS



                                         On-Demand	Is	In	Demand
SYS-CON Media
President  CEO
Fuat Kircaali, 201 80...
RDF



Mashups	and	Semantic	Mashups                                                                                       ...
ing the name “rlhv”!); the markup just links it together        /owl:Class

in a consistent way. The extra markup makes no...
/owl:Class                                                 You can display your mashup to include information
       owl:C...
Advertising	Index
information appears when you hover over an icon or                       Advertiser                     ...
Design



    AJAX,	Where	Design	                                                                                         ...
gets the response and handles displaying it to the user.          are made, what server-side processes occur, and how the
...
RSS



Building	the	Data	Web                                                                                              ...
1960, hardly an extensive dataset. I got relatively good       col title=”Population” format=”0” /

data for London and Ne...
Tests



Exposing	and	Preventing	                                                                                         ...
adopt is common industry best practices for               own custom browser-agnostic JavaScript methods are
how code shou...
Application Server Output                                     Creating	a	Nightly	Build/Test	
         Code that’s delivere...
way, or else they’ll be ignored. But the infrastructure isn’t enough. There   Client-Side JavaScript Engine
must be a cult...
AJAx  SoA



The	Big	Shift                                                                                                ...
experience there is akin to Microsoft Outlook. The           GUIs, AJAX is evolving with libraries focused on
semantics of...
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
Upcoming SlideShare
Loading in...5
×

AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP

5,741

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
5,741
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP"

  1. 1. AJAXWORLD 2007 EAST: LASZLO UNVEILS LASZLO WEBTOP
  2. 2. Facing a few barriers on the road to SOA? JackBe’s Rich Enterprise Application (REA) platform clears the road to SOA business benefits. There’s an abundance of products and vendors to help you create your SOA. Now, consume those SOA services with JackBe REAs to achieve the business productivity and results that led you to SOA in the first place. Our new REA platform combines the power of Ajax and SOA with reliable, secure communications to extend your SOA directly into powerful business applications. A fully visual IDE reduces manual coding and accelerates the development process. And our lightweight, vendor-neutral platform easily integrates with existing middleware and services while maintaining server-side governance and control--unlike products that leave governance to the browser or create middleware platform dependencies. Join over 35 industry leaders like Citigroup, the U.S. Defense Intelligence Agency, Sears, Tupperware, and Forbes who are already optimizing their business activity with JackBe solutions. Call or visit our website—let us help you remove the barriers on the road to achieving real business value from your SOA investment. Web: www.jackbe.com Phone: (240) 744-7620 Optimizing Business Activity Email: info@jackbe.com
  3. 3. March 2007 n6 The AJAX Story Is n20 Exposing and Preventing Still Just Beginning Errors in AJAX Applications From The Editor Using a quality infrastrucure by Dion Hinchcliffe by Nathan Jakubiak n24 The Big Shift n8 On-Demand Is in Demand AJAX and Web Service Bus architectures Advances in programming make SaaS enable the shift from request and response a viable option for SMBs to message and event-driven application architectures by Victor Pinenkov by Kevin Hakman n10 Mashups & Semantic n32 Automatically Testing AJAX Mashups The value of RDF: Taking the Web User Interfaces The reason for automating to the next step user interface tests by Dean Allemang by Reginald Stadlbauer n14 AJAX, Where Design n38 Struts Portlets with Meets Code AJAX in Action Challenges faced during implementation The beginning of a new Web experience by Kris Vishwanathan by Kris Hadlock n44 How Web 2.0 Makes Business Intelligence Smarter n16 Building the Data Web And what corporate IT needs to do A call for a data syndication standard to implement such solutions by Ric Hardacre Langdon White AJAx.SyS-coN.coM March 2007
  4. 4. From The Editor The AJAX Group Publisher Jeremy Geelan Art Director Louis F. Cuffari Editorial Story Is Still Editor-in-chief Dion Hinchcliffe Dion Hinchcliffe dion@sys-con.com Just Beginning Editor Nancy Valentine, 201 802-3044 nancy@sys-con.com To submit a proposal for an article, go to T http://grids.sys-con.com/proposal. he conjunction of AJAXWorld in New York City. Many are addressed too Subscriptions Conference Expo 2007 this month in Real-World AJAX, but many remain rela- E-mail: subscribe@sys-con.com with the publication of the 600- tively unanswered in an industry strug- U.S. Toll Free: 888 303-5282 page blockbuster Real-World AJAX, the gling to deal with a major mid-industry International: 201 802-3012 Fax: 201 782-9600 announcement by the OpenAjax Alliance change. The tools, processes, and tech- Cover Price U.S. $5.99 of the OpenAjax Hub and OpenAjax nologies we’ve brought to bear to build U.S. $19.99 (12 issues/1 year) Conformance, the release by Laszlo Web applications are going to change a Canada/Mexico: $29.99/year Systems of OpenLaszlo 4.0 and the Laszlo lot, as well as the skill sets. These types International: $39.99/year Credit Card, U.S. Banks Webtop...all these thing coming together of rich Web applications require serious or Money Orders at once mark a significant milestone in the software development skills, particularly Back Issues: $12/each brief history of AJAX, rich user experiences as the browser is a relatively constrained in general, and the growing challenges and environment compared to traditional soft- Editorial and Advertising Offices Postmaster: Send all address changes to: opportunities in this space as we continue ware development runtime environments SYS-CON Media to witness a tectonic shift in the way Web like Java and .NET. 577 Chestnut Ridge Road, apps are designed and built. Of course, despite these issues – even Woodcliff Lake, NJ 07677 We are now rapidly leaving the era because of them – it is a very exciting Worldwide Newsstand Distribution where static HTML is acceptable to the time to be in the AJAX business right now. Curtis Circulation Company, users and customers of our software. The One big reason is that there are few AJAX New Milford, NJ “Web page” metaphor is just no longer products with clear market dominance a compelling model for the majority of yet and the dozens and dozens of AJAX List Rental Information online Web applications. libraries and frameworks currently avail- Kevin Collopy: 845 731-2684, kevin.collopy@edithroman.com, Combined with the rise of badges and able offer a very diverse and compelling Frank Cipolla: 845 731-3832, widgets, and the growing prevalence of set of options for use as the foundation of frank.cipolla@epostdirect.com what I call the “Global SOA” to give us vast the next great AJAX application. While the landscapes of incredibly high-value Web Dojo Toolkit is probably the AJAX toolkit Promotional Reprints Megan Mussa services and Web parts, it’s important with the largest mindshare and lots of megan@sys-con.com to note that the use of AJAX is essential industry interest at the present time, the to even start exploiting these important big vendors such as Microsoft and their Copyright © 2007 trends. Skirting the corners of this phe- ASP.NET AJAX (a.k.a. “Atlas”) show, as the by SYS-CON Publications, Inc. All rights reserved. No part of this publication may nomenon are also the non-trivial chal- first major products from big vendors be reproduced or transmitted in any form lenges offered up by largely abandon- make their way to market, that the story or by any means, electronic or mechani- ing the traditional model of the browser. is still just beginning. cal, including photocopy or any informa- Specifically, what happens to search There’s little doubt that we’ll continue tion storage and retrieval system, without written permission. engine optimization (SEO), disabled to see the AJAX market maturing and I’m accessibility, link propagation (along with looking forward to a variety of upcoming AJAXWorld Magazine network effects), Web analytics, tradition- improvement such as Project Tamarin, the is published bimonthly (6 times a year) al Web user interface conventions, and high-speed JavaScript engine donated by by SYS-CON Publications, Inc., more, which are all dramatically affected Adobe to the Mozilla project; the ongoing 577 Chestnut Ridge Road, Woodcliff Lake, NJ 07677. – often broken outright – by the AJAX Web evolution of OpenAjax; and the 1.0 release SYS-CON Media and SYS-CON application model? of Dojo sometime this year; to name just Publications, Inc., reserve the right to Many of these questions will be a few of the exciting things that have the revise, republish, and authorize its answered, for those of you reading this potential to ensure AJAX continues to grow readers to use the articles submitted for publication. issue at AJAXWorld 2007 East, at the event and evolve. n 6 March 2007 AJAx.SyS-coN.coM
  5. 5. SAAS On-Demand Is In Demand SYS-CON Media President CEO Fuat Kircaali, 201 802-3001 fuat@sys-con.com Group Publisher Jeremy Geelan, 201 802-3040 Advances in programming make SaaS a viable option for SMBs jeremy@sys-con.com by Victor Pinenkov M Advertising ost small and medium-sized businesses configure the application across the entire business, Senior Vice President, (SMBs) require the same software capa- setting parameters that meet the company’s particu- Sales Marketing Carmen Gonzalez, 201 802-3021 bilities as large enterprises but don’t have lar requirements. Customization also allows resellers carmen@sys-con.com the resources and in-house technical expertise neces- and systems integrators to add new fields, create new Vice President, Sales Marketing sary to manage it themselves. A study by the Cutter interfaces, and integrate data from other software Miles Silverman , 201 802-3029 Consortium finds that many businesses are no longer applications. miles@sys-con.com willing to tolerate the long deployment cycles, ongoing Integration used to be a challenge for SaaS appli- Advertising Sales Director Megan Mussa, 201 802-3028 administrative hassles, high operating costs, and low cations and a deterrent for potential customers who megan@sys-con.com ROI associated with traditional on-premise software. needed the hosted program to integrate with their Sales Manager Consequently, an increasing number of organiza- existing applications, databases, and architectures. Corinna Melcon, 201 802-3026 tions are seeking outsourced and hosted solutions, Advanced integration middleware, service-oriented corinna@sys-con.com which offer comparable levels of functionality at a architectures, and open APIs are making it easier to Events Manager Lauren Orsi, 201 802-3024 fraction of the cost. Now a viable alternative to on- create connections between software systems. Many lauren@sys-con.com premise solutions, Software as a Service (SaaS) adop- SaaS vendors now offer a variety of options, such as file tion is expected to grow over the next several years. and batch transfer, and provide a defined set of pro- Production Research by industry analyst firms shows that the gramming interfaces to make it easier for customers to Lead Designer percentage of business software spending on SaaS integrate their SaaS and on-premise applications. Louis F. Cuffari, 201 802-3035 louis@sys-con.com will grow from 5% in 2005 to 25% in 2011. “The advent of AJAX and other de facto Web-ori- Art Director ented application development standards has helped Alex Botero, 201 802-3031 New Life for Hosted Applications to accelerate the growth of the SaaS market by mak- alex@sys-con.com Application service providers (ASPs), the first ing it easier for users to implement and integrate Associate Art Directors companies to offer software via the Web, hosted on-demand software services,” according to Jeffrey Tami Beatty, 201 802-3038 tami@sys-con.com third-party applications in mini-data centers. The M. Kaplan, managing director of THINKstrategies Abraham Addo, 201 802-3037 large complex software had limited functionality and and founder of the SaaS Showplace ( www.saas-show- abraham@sys-con.com required expensive server installations. place.com). The current crop of SaaS applications operate at A wider array of service options and capabili- SYS-CON.COM higher speeds and have greater capabilities because ties will become available as developers make fur- Consultant, Information Systems Robert Diamond, 201 802-3051 of breakthrough technologies and programming such ther advances in programming technology. Some robert@sys-con.com as Asynchronous JavaScript and XML (AJAX). AJAX experts suggest that an increasing number of SaaS Web Designers programming provides an intelligent and efficient vendors will offer fully functioning offline versions Stephen Kilmurray, 201 802-3053 approach to client/server interaction and enables of their AJAX-based services that synchronize with stephen@sys-con.com automatic changes to content without requiring the a user’s online account when reconnected to the Richard Walter, 201 802-3057 richard@sys-con.com full Web page to reload, allowing users to move rapid- Internet. Kaplan suggests the growth of offline ly between different areas of the application. Software capabilities is a natural market evolution for SaaS Accounting applications end up operating much like familiar solutions. Financial Analyst desktop software and provide similar functionality. SaaS providers will also continue to focus on Joan LaRose, 201 802-3081 For example, the improved interactivity and usability improving security, reliability, and integration capa- joan@sys-con.com Accounts Payable of the applications make it easy to conduct real-time bilities and enhancing features offered to end users. Betty White, 201 802-3002 actions, such as drag-and-drop, grab and scroll, and With its current market penetration and expectations betty@sys-con.com grab and zoom. for growth, it’s apparent that SaaS is asserting its posi- Advances in AJAX and other HTML standards, tion in the software industry – an affordable alterna- Customer Relations open source systems, and the increasing availabil- tive that allows SMBs to break free of costly enterprise Circulation Service Coordinators Edna Earle Russell, 201 802-3081 ity of open application program interfaces (APIs) applications. n edna@sys-con.com have made it possible to develop and enhance SaaS more quickly and less expensively. SaaS providers Victor Pinenkov is vice-president of engineering for BlueTie, Inc. He now have greater customization and configuration is responsible for managing the company’s application development, capabilities. Many solutions enable administrators to software infrastructure, and all IT engineers and staff. 8 March 2007 AJAx.SyS-coN.coM
  6. 6. RDF Mashups and Semantic Mashups by Dean Allemang The value of RDF: Taking the Web to the next step I n the early days of the Web, we were thrilled when mate mashup language; it provides a simple way to we could find addresses and phone numbers of express information from spreadsheets, databases, commercial establishments. As more sophisti- Web pages, XML files, and, yes, even native RDF/XML cated Web sites started using databases behind the files, allowing them to be merged into a single graph scenes, we came to expect a page that included all structure. the addresses for each branch of a chain in our city If you have unfettered access to the database or neighborhood. When Mapquest came along, we behind a Web page, you can treat it as RDF using an were delighted that we could click a button and see RDF database wrapper like D2RQ, but since we usu- the location for each of these shops on a map. Then ally want to mash up information from other sources, came the Web 2.0 idea of the mashup; at a click of a and most security administrators don’t provide global single button, we could see all the Starbucks in a zip access to their database, another approach is needed. code all at once. Enter the W3C Working Draft. These mashups are great if you’re looking for one RDFa lets Web site developers make an HTML kind of thing (coffee shops, hotels, gyms) and come page do double duty as a presentation page (the usual from one source (especially when that source is an role of HTML) and as a machine-readable source of amalgamator like Citysearch or even Google). But structured data in RDF. As a simple example, consider suppose you’re moving to an unfamiliar city; you’d the following excerpt from the Los Angeles Metro Rail like to see a map with all the subway stations, gyms, Web page, with a few minor modifications to embed organic supermarkets, art-house movie theaters, and, RDF data in with the HTML display: yes, coffee shops so you can figure out where you’d like to live, preferably each type in a distinctive color pfont size=”2”div name=”rlhv” id=”rlhv” or icon to distinguish it from the others, providing a link rel=”rdf:type” href=”[LAMetro: real integrated picture of the neighborhood. RedlineStation]”/ There are a couple of ways to do this with com- meta property=”rdfs:label”Hollywood/ mon Web 2.0 approaches today. You could do a map Vine/meta br/ Dean Allermang is a long-time traveller mashup of each kind of thing you want to see and a href=”../../about_us/metroart/images/ in knowledge science. He was awared his display all those maps on the screen at once. This gets pict_mrlhv.jpg”Station Image/a PhD in AI in 1990, worked at five differ- you the information you need, but you might be at bbr/ ent AI labs in Europe between 1990-1996, risk of whiplash turning your head so much from one co-founded a company in the mid-90s that map to another. /bmeta property=”geo:address”6250 tried to invent the Semantic Web when the You could spend some time bookmarking all these Hollywood Bl.br/ standards were just a gleam in the eye of things in your favorite mapping application so that Los Angeles 90038 br//meta a few W3C folks, and is now working as a they’re all on a single map. But the idea of a mashup 60 Park/Ride Lot Spaces (Parking Fee)br/ consultant for TopQuadrant Inc. as their is that the information should be available from feeds a href=”../../projects_plans/bikeway_plan- Semantic Web expert. Though he is the one – like the RSS feeds we’ve become familiar with for ning/images/bike_rack_mrhv.jpg”18 running the training course, he learns more our news. That way, whenever Starbucks opens a Bike Rack Spaces/a/div/font/p from the students than they ever guess. His new shop or a neighborhood announces an open- laptop is full of semantic web software, and studios event or another real estate listing is posted, The extra div …, link … , and meta … tags he even knows how to use more than half of your mashup will update with it. When we can merge mark up the HTML page to include a few simple facts; it. “It’s an exciting time,” says Allerman, “for information from multiple feeds and organize the something called “rlhv” has type “RedlineStation,” those of us who have been fans of abstrac- results – that’s what we call a Semantic Mashup. label “Hollywood/Vine,” and the address “6250 tion for the past three decades.” The first step is to turn all of your data sources Hollywood Bl. Los Angeles 90038.” Most of this infor- dallemang@topquadrant.com into feeds that can be mashed up. RDF is the ulti- mation was already available in the Web page (includ- 10 March 2007 AJAx.SyS-coN.coM
  7. 7. ing the name “rlhv”!); the markup just links it together /owl:Class in a consistent way. The extra markup makes no dif- owl:Class rdf:about=”#LAMetro” ference to HTML viewers (like the browser); the page rdfs:subClassOf rdf:resource=”#LALocale”/ displays in the same way. /owl:Class The Web Ontology Language was built on top owl:Class rdf:about=”#Fitness” of RDF to let us describe how we want to combine rdfs:subClassOf rdf:resource=”#LALocale”/ information from multiple sources together. Types /owl:Class in RDF (like “RedlineStation,” in this example) are owl:Class rdf:ID=”GoldLineStation” called Classes in OWL, and typed individuals (like rdfs:subClassOf rdf:resource=”#LAMetro”/ “rlhv” above) are members of one or more classes. /owl:Class Information from different sources will have different owl:Class rdf:ID=”GreenLineStation” types, and so appear as members of different classes; rdfs:subClassOf rdf:resource=”#LAMetro”/ the Red Line page describes members of the class /owl:Class RedLineStation, the Blue Line page describes mem- owl:Class rdf:ID=”BlueLineStation” bers of the class BlueLineStation, and so on. We define rdfs:subClassOf rdf:resource=”#LAMetro”/ Figure 1: Class hierarchy for a new class for anything else we can find, a class for /owl:Class places in Los Angeles, gyms, amusement parks, organic supermarkets. owl:Class rdf:ID=”RedLineStation” displayed in Now we can use OWL to describe how we want to rdfs:subClassOf rdf:resource=”#LAMetro”/ TopBraid Composer. combine these things together. If we want to combine /owl:Class information about all the metro lines, we define a new owl:Class rdf:ID=”Cinema” class in OWL called LAMetroStation and make each of rdfs:subClassOf rdf:resource=”#Entertainment”/ the line classes (BluelineStation, RedlineStation, etc.) /owl:Class subclasses of it. We can do the same for any other owl:Class rdf:ID=”Gym” classes we’ve defined for gyms, amusement parks, rdfs:subClassOf rdf:resource=”#Fitness”/ organic supermarkets, whatever. We can express this /owl:Class class/subclass structure in RDF/XML as follows: owl:Class rdf:ID=”Pool” rdfs:subClassOf rdf:resource=”#Fitness”/ owl:Class rdf:about=”#LALocale”/ /owl:Class owl:Class rdf:about=”#Entertainment” owl:Class rdf:ID=”Yoga” rdfs:subClassOf rdf:resource=”#LALocale”/ rdfs:subClassOf rdf:resource=”#Fitness”/ Figure 2: Places of various types (metro station, amusement park, etc.) shown on a single google map. AJAx.SyS-coN.coM March 2007 11
  8. 8. /owl:Class You can display your mashup to include information owl:Class rdf:ID=”AmusementPark” at any level of the tree. rdfs:subClassOf rdf:resource=”#Entertainment”/ But OWL goes far beyond simply amalgamat- /owl:Class ing information through subclasses; you can also owl:Class rdf:ID=”Theater” specify constraints on your information. For exam- rdfs:subClassOf rdf:resource=”#Entertainment”/ ple, we could say something like “All members of /owl:Class BlueLineStation are restricted to have http://www. owl:Class rdf:ID=”ConcertHall” topquadrant.com/images/icons/bluetrain.gif as an rdfs:subClassOf rdf:resource=”#Entertainment”/ icon.” In OWL/RDF this looks like: /owl:Class owl:Class rdf:about=”#BlueLineStation” This is easier to see in outline form (as shown in rdfs:subClassOf an RDF visualization tool like TopBraid Composer, see owl:Restriction Figure 1). owl:hasValuehttp://www.topquadrant.com/imag- The meaning of subClassOf in OWL is very simple; es/icons/bluetrain.gif/owl:hasValue it just means that all the members of BlueLineStation, owl:onProperty rdf:resource=”http://www. RedLineStation, etc. are also members of LAMetro, topquadrant.com/maps/mapModel.owl#hasIcon”/ and that all the members of LAMetro, Fitness, or rdfs:subClassOf Entertainment in turn are members of the top class, /owl:Class LALocale. So to display all the metro stations, you just query for members of LAMetro; to display all the When we do the same for the other classes (redtrain.gif places of interest in L.A., you query for members of for RedLineStation, ferriswheel.gif for AmusementPark), LALocale. Send the results off to a display API like this lets OWL set icons according to the class an instance GoogleMaps and you get a screenshot, that looks like belongs to. We send that to the mapping API as before, Figure 2. and we get a map with different kinds of places indicated Just as class structures in object-oriented pro- by appropriate icons, as shown in Figure 3. gramming help you to organize your program code, This same approach can be used to customize class structures in OWL let you organize your data. any part of the mashup that the API can handle, what Figure 3: Each type of place from Figure 2 is shown with a different icon; colored icons for each metro line, ferris wheels for amusement parks, etc. 12 March 2007 AJAx.SyS-coN.coM
  9. 9. Advertising Index information appears when you hover over an icon or Advertiser URL Phone Page Adobe www.adobe.com 23 what URL you visit when you click through a bubble. Backbase www.backbase.com 866-800-8996 47 There’s no reason to limit this kind of mashup to Cynergy Systems www.cynergysystems.com 50,51 maps; the same approach works just as we ll for any way Etelos ajaxworld.etelos.com 37 you might want to display data, calendars, spreadsheets, Google www.google.com/jobs/ 31 helmi technologies www.helmitechnologies.com 41 org charts, pie charts, and PERT charts. There’s not ICEsoft www.icesoft.com 1-877-263-3822 21 even any reason to limit your mashup to a single one of JackBe www.jackbe.com 240-744-7620 4 these modes; after all, concert halls have performance JetBrains www.jetbrains.com/idea 27 schedules, train stations have timetables, and people Kapow technologies www.kapowtech.com 43 Laszlo Systems www.laszlosystems.com 2,3 in your organization attend meetings that take place at Nexaweb www.nexaweb.com 7 particular places and times. OWL provides a wide range ORACLE oracle.com/middleware 1-800-ORACLE1 9 of modeling capabilities that let you combine informa- Parasoft www.parasoft.com 888-305-0041 35 Quasar Technologies www.quasar-tech.com 29 tion from multiple sources in your filters. Following the Servoy www.servoy.com 805-624-4959 45 map example, display the location of all the amusement Sun Microsystems sun.com/startup 13 parks, but use a special icon for the ones you’ve visited, telerik www.telerik.com/radajax 52 and put the date you visited them on the hover label. Advertiser index is provided as an additional service to our readers. Publisher does not assume any liability for ommissions and/or misprints in this listing since this listing is not part of any insertion order. This paints a pretty rosy picture of how you can build powerful semantic mashups with standards-compliant, readily available tools. But there’s a bit of rain on this parade of exhibitionists. The only reason their data is on the – a pre-requisite for all this mashing up is that the data be Web in the first place is to show it off. And the more available in RDF – and who wants to do all that work? My people who have their data available in RDF, the more data is in a database, or a spreadsheet, or HTML, or XML, valuable it is to have your data available that way too or… Do I have to transfer it to yet another format? And for semantic mashups like the ones we describe here. especially RDFa – who’s going to do all that marking up just This is the sort of network effect that brought the Web to make their data easier for other people to use? into being. TopQuadrant is doing its part to start this Well, fortunately for semantic mashups (and bootstrap by providing semantic mashup tools; you indeed, fortunately for the Web, since this is how the can get in the game by making your own data avail- Web came into being in the first place), the Web is full able in RDF. n © 2007 Sun Microsystems, Inc. All rights reserved. Jumpstart your Startup. Get enterprise-grade products at ridiculously low prices, free world-class software and expertise to get you up and running fast. Visit sun.com/startup.
  10. 10. Design AJAX, Where Design by Kris Hadlock Meets Code T ime and again I’ve seen applications fail Coding an Experience because of an unusable interface design. This The whole purpose behind using AJAX is centered not only includes the look-and-feel of the on the idea of creating a better user experience, one application, but the actual interaction processes that in which users don’t have to wait for pages to load, it contains. I know many people who immediately allowing them to get information on demand and leave a Web site if it does not look appealing or func- achieve what they set out to do with an application. tion simply from the start. It doesn’t matter whether Although AJAX requires development skills to cre- the application could have helped them accomplish a ate the complex server-side requests and front-end goal, it simply doesn’t stand a chance without usable interactions, the learning curve is truly not very steep design and functionality. Simply put, if an application and any designers with the motivation and drive can doesn’t look usable it’s not usable. easily find resources or wrappers to help them imple- There are far too many options on the Web today, ment an AJAX solution. Aside from a good idea a suc- leaving no time for discovery. People want information cessful AJAX application relies heavily on the design immediately and they will get it elsewhere if an appli- and interaction processes it implements. To create a cation doesn’t provide it. This is one of many reasons successful AJAX application the code shouldn’t just why the primary focus during application develop- be solid and written well, its primary focus should ment should be on the design of the application and be keeping itself invisible to the user and focusing on the code should be used to accomplish those design what occurs at the front-end. goals. Although design is largely based on what some- Until recently desktop applications were the way to thing looks like, Web application design is also based provide complex possibilities to users. With browsers on how interactions flow and how a user interacts with adopting more standards the Web is becoming a new that design to accomplish a goal. The code should be realm of experience capable of providing powerful func- focused on making the interface more usable, the tasks tionality that rivals the desktop. The Web not only pro- easier to understand and so easier to accomplish. vides information to the user, it lets users provide infor- AJAX offers solutions to this problem by keeping mation to the Web. We’re experiencing the beginning of the design tightly integrated with the code. As an AJAX a new Web experience that lets users interact with infor- developer it’s impossible not to consider how the code mation, collaborate, and really immerse themselves in relates to the interface because the request/response the information they want. AJAX simply provides a new model that it creates requires knowledge of how to platform that lets users achieve this possibility. parse and display the data to the user, how to interact with the server from the front-end, and how to use Tech Talk code to stylize the end results. AJAX is replacing the AJAX relies on the request model inherent in the disjointed user experiences of the past with cohesive xmlhttprequest object, but is made accessible to the applications that require that design and code work user by the integration of JavaScript, CSS, and (X)HTML Kris Hadlock is the author of AJAX for Web together. AJAX makes the right features of an applica- and its combined creation of DHTML. All three of these Application Developers (Sams, October 2006) tion more responsive and keeps the attention of the technologies produce the graphical user interface or and a featured columnist and writer for numer- user where it counts. Web 2.0 relies on these concepts; GUI. The GUI is where the user views and interacts with ous Web sites and design magazines. He is also although not new to some, the Web is finally becom- an application. In an application that implements AJAX, the founder of Studio Sedition, a Web develop- ing a reliable destination for implementing them. the GUI and the server share a common bond through ment firm, the co-founder of 33Inc alongside AJAX has existed for years now, but many browsers XML. With AJAX, XML is the glue that ties design with partner Robert Hoekman, Jr., and maintains a didn’t support the technologies that produce this code and produces a process like no other. The process blog called Designing with Code. You can find functionality. Now we’re in the presence of Web 2.0 begins with an interaction made by the user. The inter- all of the above and more about Kris at where design and code are integrated to produce Web action produces a request that’s made to the server, the www.krishadlock.com applications of a new breed. server responds with static or dynamic XML. JavaScript 14 March 2007 AJAx.SyS-coN.coM
  11. 11. gets the response and handles displaying it to the user. are made, what server-side processes occur, and how the CSS is used to stylize the elements in the interface and responses are parsed and displayed. A developer who the (X)HTML is used to display the data to the user in uses this approach has to understand how the data relates the presentation defined by CSS. The figure below shows to the user and server and how to integrate the two seam- the layers of an AJAX application and how the GUI and lessly to create an exclusive experience. This approach server work closely to integrate design with code. can also teach developers techniques they wouldn’t have The GUI and the server work in cohesion to produce the learned otherwise. Most often programmers don’t touch results necessary for a successful application. AJAX integrates the GUI and GUI designers don’t touch the back-end, but the front- and back-end by letting them communicate with- AJAX requires both to interact so closely that it’s impos- out reloading the page. Complex data exchanges can occur sible not to use both unless a team of developers and without interrupting the experience. Exchanges such as designers are involved. Ultimately an application’s focus saving, retrieving, updating, or deleting data from a database should be on how to leverage both sides to create a more are possible just as with the standard HTTP request model. usable experience. There are many different options when deciding how to approach an AJAX application, let’s focus on a couple that The Right Place at the Right Time leverage the full capabilities of an AJAX experience. As with any technology, AJAX isn’t always the best solution to a problem. Using it at the right place at the Approaches right time is crucial to its purpose. As always, when plan- When developing AJAX applications there are a ning an application, the right blend of technologies is number of ways to approach the creation of an appli- imperative to the purpose and overall goal of the appli- cation. You can build one from scratch, choose from cation. AJAX is rarely necessary for an entire application one of the many existing libraries and frameworks, or and should be used for more specific features, features integrate these options to create a hybrid. that would benefit in some way from using this group Creating an application from scratch requires that the of technologies. It’s rare that any one technology is right developer know both the client- and server-side technol- for an entire application, as was discovered with Flash in ogies, or two tightly knit teams. AJAX creates a bridge that the not so distant past. Most developers learned that it’s allows closer collaboration between programming and more beneficial to use extremely interactive technolo- design teams. To a single developer this approach pro- gies in smaller doses where it counts. This automatically vides much more power because it requires a complete draws more attention to those areas of the application understanding of the application, such as how requests and provides the user with focus. n Graphical User Interface (X)HTML The combination of these front- end technologies is DHTML. This is where the user views and interacts CSS with an application. This is also the location where Ajax requests are made and responses are received then displayed to the user. JavaScript XML Server-side language Server Figure 1: AJAx.SyS-coN.coM March 2007 1
  12. 12. RSS Building the Data Web by Ric Hardacre A call for a data syndication standard T he Web is full of data: statistics, surveys, and the Web 2.0 age and should not be overlooked. Before reports can be found on almost any topic you there were JavaScript APIs coming out of the wood- care to search for. It’s this very fact that makes work there were RSS aggregators that built virtual Web the Web the first stop in anyone’s research. Want to sites out of the parts of other Web sites. know the average number of petals on a daisy? Thirty- Now let’s consider the most seen AJAX powered four. The number of species of whale? Eighty (or mashup: modifications of map sites, adding real thereabouts, depending on your definition of “whale” estate pictures and locations to a map, for example. apparently). This sort of thing would be made a lot easier and Of course one could spend all day typing random accessible if the real estate agents published an RSS- questions into a search engine but the serious busi- like feed of properties, along with their GPS coor- ness of research lies in statistical analysis, comparing dinates and prices. Even in this limited scope the datasets for trends. One obvious example is compar- possibilities are endless, a burger chain could publish ing the performance of various stock markets around the locations of its restaurants, or news bulletins the globe over time, this happens so frequently that could come attached with markers. Planes, trains, and it’s quite a simple task online. So is comparing curren- – well, possibly – automobiles could be tracked and cy’s performances against each other. But what if you tacked onto maps. Want to see where the roadworks wanted to do both? What if you wanted to compare are on your journey? Just import the official highway’s the yen against the London Stock Exchange’s closing feed of roadworks into any mapping site or software index? At first glance that might seem like a nonsensi- of your choosing. cal comparison but in financial research trends are This problem has already been solved to a certain key and trends can’t be found without comparing extent of course with Google Earth, but the scope is datasets, no matter how far and wide. limited by its narrow focus, purely on coordinates. Unfortunately most, if not all, of the data on the Wouldn’t it be great if a feed could contain not only Web is embedded in Web pages, and most often only property locations and prices, but that your browser presented in graphical form. There’s just no way of could detect the presence of both. The browser itself looking at a chart of something over time and reliably would then let you tack them onto a map, or sort by viewing the corresponding data, at least, not across price in a spreadsheet. This too has limits. I doubt the board. “number of bedrooms” could be generalized into a Now let’s step back a moment and look at another universal datatype, but price (currency=”USD”) and existing Web technology: RSS (or ATOM if you are so coordinates (type=”GPS”) are easily comparable and inclined). Really Simple Syndication is a way for Web transposable across differing datasets. The next step sites to publish a simplified list of links to articles and would be to merge the property and burger chain items on their sites. So instead of logging into a news feeds, selecting only those houses within x miles of site every day to check for new items you “subscribe” the nearest drive-thru. to an RSS feed and just check the feed. What made So let’s get back to our original data problem, this possible was a simple, standard, open format that this time suppose I want to compare the popula- Ric Hardacre discovered the Web in the mid was easy both to create and read by both humans and tions of London, New York, and Tokyo over the past ‘90s when he really should have been at computers. century. Sounds simple enough and a few minutes lectures and not in the University computer Over the past few years RSS has caught on in a of Web searching yielded a handy “Inner London” lab. He’s since worked as a Web solutions big way, it’s simple to write your own RSS parser and set of census data I could use, which was encourag- developer, systems architect, and wireless create a news ticker that watches your favorite Web ing. However, New York took a few minutes longer and satellite network specialist. His current sites, for example. Browser plug-ins have given way before it too yielded data. Tokyo proved too stubborn day job is as an MCP C# Developer in the to native support and suddenly the Web started to however and I gave up, having only managed to get UK. ric.hardacre@cyclomedia.co.uk feel just that little bit more integrated. RSS foretold data for a handful of random years; 2000, 2003, and 16 March 2007 AJAx.SyS-coN.coM
  13. 13. 1960, hardly an extensive dataset. I got relatively good col title=”Population” format=”0” / data for London and New York, one set of figures /head for each decade. One, however, was embedded in a body HTML table and the other in a text file, formatted and trtd1901/tdtd6506889/td/tr aligned using spaces. trtd1911/tdtd7160441/td/tr The next step is to copy and paste each snippet trtd1921/tdtd7386755/td/tr of data cell by cell into a spreadsheet and finally run trtd1931/tdtd8110358/td/tr the graph wizard. Finally you can behold the wonder trtd1941/tdtd note=”Estimate”8160000/td/ as Inner London’s population stays essentially still tr while New York’s stealthily overtakes it. Now I could trtd1951/tdtd8196807/td/tr be accused at this point of serial laziness, but it just trtd1961/tdtd7992443/td/tr seems like a lot of work, especially the extensive trtd1971/tdtd7368693/td/tr search engine hammering. Suppose that each site trtd1981/tdtd6608598/td/tr had published a standard formatted set of data, and trtd1991/tdtd6679699/td/tr I could run a dataset search to pull it back. Then an trtd2001/tdtd7172036/td/tr aggregator could look at the data and splice it togeth- /body er. Sounds farfetched, but is it really? /dataset Let’s now pull RSS back into this discussion, sup- pose we apply a similar principle to this data too. Basically what we have here is a combination of First, give the dataset a header including its title and technologies, the XML is designed to reflect RSS and source then add each column of data with a strict set bear more than a passing resemblance to an HTML of criteria for defining its type and formatting. This table. In the latter case it means that any program- way a piece of aggregator software would look at our mer familiar with browser DOM scripting can easily population sets and see two columns in eac h, one for parse this too. It takes a different approach to a SOAP the year and one for the population. Population is just dataset in that the datatypes and column names are a number and at the behest of trying to keep it simple listed in a header block while the data table structure our columns could probably be just “year” and “num- is fixed. It’s also more lightweight than a serialized ber,” leaving it up to the column title to belie what the recordset but still contains the important details number count is, well, counting. about the data we’re publishing. Next the aggregator would look across the datasets Because it’s a straight table with defined columns and recognizing that both have a major axis of “year” we can use it to publish serial data, as above, or dis- instantly know that they can be combined, even if the creet data, such as the list of burger restaurants and years don’t match exactly (British population counts their locations. Finally, because it’s simple XML it’s are done on years ending in 1, not 0 for example). extensible, rows, or cells could have individual notes Provided the definition of “year” is fixed and the num- attached. Indeed, notice that in 1941 World War II was bers representing the year are always four-digit then going on so we only have an estimate to work with. there can never be any ambiguity between different Suddenly comparing global temperature to the datasets. numbers of sea-borne pirates over time becomes so Now the aggregator would see that both have a much easier – and though I’m only speculating out second column of number, but even though it doesn’t loud here, I for one would welcome such a standard. know what the number pertains to it would notice Imagine what this would do for business practice that their lowest and highest values fall into a similar in general, and democracy at large. If the de facto range, hardly rocket science. The result is the ability to standard of openness was to publish on one’s Web graph them both together. Even if we were comparing site a syndication of data: incomes, expenditure, tax, two datasets with differing second columns then, like contracts – all there for the public to parse, analyze, we do manually, we would overlay them both scaled and compare in the click of a button. to facilitate easy comparison with a label to say what Wait a minute, I hear you say, what about ODF units each are in. spreadsheets? Yes, they’re open, standard, and And here’s a crude example, thrown together in already XML formatted. But suggesting that a data minutes: syndication format would be pointless if you could already download and open a spreadsheet in a ?xml version=”1.0” encoding=”utf-8” ? spreadsheet application is the same as asking of RSS: dataset title=”Census Population of Inner London Why not just visit the Web site and check for new 1901-2001” key=”year” news items yourself? So ask yourself this instead: head cols=”2” If that had remained the attitude for all this time, col id=”year” title=”Year” format=”yyyy” / would we have a Web 2.0? n AJAx.SyS-coN.coM March 2007 17
  14. 14. Tests Exposing and Preventing by Nathan Jakubiak Errors in AJAX Applications Using a quality infrastructure W hen organizations focus on exposing Web Services, client-side JavaScript engine, and errors in any kind of application, they different browsers with different JavaScript/DOM traditionally focus on testing. Once an implementations, just to name a few. Logic no application is finished, it’s passed to a QA team to find longer resides only on the server, but also in cli- and report problems. There’s some back and forth as ent-side JavaScript. Figure 1 shows the aspects of the QA team reports problems, development fixes a typical AJAX application on which I focus in this them, QA retests the application, and so on. Once that article. cycle has been repeated a few times (if there’s time 2. The user interface is put together bit by bit – it for that), the application is released. This approach consists of an initial HTML layout, followed by is problematic, however. The quality of the applica- inserted data from asynchronous server requests, tion is assessed at the end of the project. By that time, all constructed using a JavaScript engine to pro- incorrectly implemented requirements or bugs may duce the finished result. be firmly planted in the application and have features 3. Because Web applications are delivered through built on top of them, and addressing the problems browsers, and browsers have different JavaScript/ can be very difficult and time-consuming, if not DOM implementations, it’s crucial to test the Web impossible. With no way to determine whether the application against different browser types and quality objectives are actually being met throughout versions. This can be time-consuming and tedious the development process, it’s impossible to deliver a if it’s not automated. truly quality application. Another issue unique to Web applications that Because of these complexities, AJAX applications deliver critical business needs is that many of them require specific ways of ensuring their quality. In this are in a continual “beta”state. There’s no time for a article, I’ll focus on what it means to define a quality traditional development cycle where requirements infrastructure, and I’ll also explain what that looks like are defined and the application is then architected, in detail for an AJAX application. built, tested, and released. Features are put into the application as quickly as possible because they affect Defining and Enforcing the bottom line. Since there’s no time for heavily Development Best Practices investing in the design of a new feature, it’s quickly The first step in building a quality infrastructure added as a “trial”; if the feature doesn’t meet the needs is defining quality at the beginning – with devel- of the customer, it can be removed just as quickly. This opers. This means defining the development best means that many Web applications are in a continual practices that are going to be followed to ensure that state of flux; there’s never a finishing point. Features when the application is ready for deployment, it has are simply added one or two at a time, on demand, as been developed correctly the entire time. You may they’re needed. Without being able to take any signifi- not think that this is important, but consider this: the cant amount of time for testing, how do you ensure quality of the code base for your Web applications Nathan Jakubiak is a software engineer the quality of the application? directly influences your organization’s bottom line. at Parasoft. He currently manages the The answer to ensuring quality lies in creating a If the application works properly, more customers development of Parasoft WebKing and is quality infrastructure that enables an organization to use your services; if it doesn’t, they may never return. the lead developer of Parasoft’s AJAX testing establish quality through all stages of development. Functional and other kinds of tests are crucial to vali- solution. Nathan has extensive experience However, in the case of AJAX applications, the follow- dating the quality of your application; however, test- developing testing tools for Web-based ing challenges arise: ing finds errors after they’ve been introduced. Many technologies and has a number of pending 1. AJAX applications are very complex. A large num- errors can be prevented simply by identifying them in patents in the area of automated ber of components make up the application such your source code as soon as they’ve been added. regression testing. as application server, database server, back-end One source of best practices that you should 18 March 2007 AJAx.SyS-coN.coM
  15. 15. adopt is common industry best practices for own custom browser-agnostic JavaScript methods are how code should be written to prevent errors. being called instead of browser-specific methods that Conventional wisdom exists regarding the best could break your application in some browsers. way to write code in different languages to solve Use an enforcement tool that automatically checks for different problems. Any given project may not syntax problems besides having built-in rules to look benefit from all the coding best practices that exist, for common JavaScript coding mistakes or browser but every project can benefit from some subset of incompatibility issues. The enforcement tool should them. also let you easily define your own internal best In addition, your organization may have defined practices guidelines and automatically enforce them. its own internal standards for ensuring that applica- Examples of some custom guidelines you might cre- tions are written properly. Most development groups ate and enforce: already have these kinds of best practices defined, 1. Every method or variable must be defined in a either formally or informally. However, defining them namespace is only part of the solution – you must also enforce 2. Use your own NodeCreator.createNode() method these best practices. instead of the standard DOM methods for creating Best practices do no good unless they’re followed. nodes to handle browser inconsistencies. You’ll get pushback from developers here. I know because I am one. Developers don’t like being told Security Policies how to write code. However, if the infrastructure Security issues are more important for AJAX appli- is defined in such a way that best practices can be cations than for traditional Web applications. There enforced and followed painlessly, developers can are two reasons for this. First, the application logic easily adapt. Enforcing best practices means using that now resides on the client in the form of JavaScript some means (either open source or from a vendor) exposes more of the guts of the application to would- of validating the code on a regular basis to ensure be hackers, making it easier to determine how to that best practices are being followed. Each devel- attack the application. Second, the automatic page oper should be able to run best practices validation update mechanisms of many AJAX applications pro- on his code before checking it in. There should also vide more opportunities for cross-site scripting kinds be a nightly process running against the entire code of exploits. base that identifies violations and which developer However, the methodologies for preventing securi- is responsible for them, and sends a report to that ty flaws haven’t changed. You should take a two-phased person so that he can fix them. This handles cases approach. The first phase is to define a security policy where the developer forgot (or refused) to check that specifies how code should be written to ensure his code before he checked it into the source code security. A policy might specify things such as: repository. 1. Call a custom method you’ve defined called clean- Input() on any client input to the Web application Development Best Practices to remove malicious input for AJAX Applications 2. For Java applications, use the class Prepared- The following best practices should be enforced Statement for all DB queries to prevent SQL injec- for AJAX applications: tion exploits JavaScript The second phase should involve functional vali- If you’re not using a server-side AJAX frame- dation that the security policy is being followed. I work, your application is likely heavily dependent discuss this below. With a well-defined security policy, on JavaScript. It ‘s much easier to introduce errors this two-phased approach should let you build secu- into JavaScript code than into a compiled language rity into your application. because there is no compile-time check for errors. Hence syntax checking is important for JavaScript Application Source Code code. JavaScript’s language features promote bad Your application probably uses a range of tech- programming practices that can make it difficult nologies and languages, including but not limited to manage and reuse a JavaScript code base – for to CSS, HTML, JSP JSF, Java, ASP .NET, PHP etc. All , , example, it’s very easy to add global variables and source code should be validated using a set of best methods. So it’s important to eliminate these kinds of practices to ensure maintainability and reliability. As problems by continually validating that coding best with JavaScript, you should use an automated tool practices are being followed. Browser compatibility to enforce the best practices that meet the goals is a huge issue for AJAX applications. It’s critical to and needs of your Web application. The tool should ensure that your developers aren’t using browser- have built-in best practice enforcement as well as specific JavaScript (and CSS) features, and that your allow you to define your own internal best practices. AJAx.SyS-coN.coM March 2007 19
  16. 16. Application Server Output Creating a Nightly Build/Test Code that’s delivered to the browser from the server Infrastructure is often the result of an application server processing Creating a nightly build/test infrastructure is the sec- server-side code (JSP JSF and ASP for example) and , , , ond major step in building the overall quality infrastruc- outputting HTML, JS, etc. As a result, it’s often impor- ture. At Parasoft we’re continually amazed at how many tant to validate the server output once it reaches the organizations don’t do a nightly build. Without a nightly client, since there’s no physical representation of the build, how can you be sure that your current code base “page” on the server. For AJAX applications, HTML even compiles? Or runs properly? Without a nightly build, code often needs to contain certain elements (div errors introduced into the application can exist for a long or span tags, for example) onto which AJAX libraries time before they’re detected. So, a nightly build is a crucial attach the user interface controls that they define. component of the quality infrastructure. The nightly build Validating that such essential elements exist is impor- must be easily repeatable (meaning it can be run without tant in ensuring that developers don’t inadvertently user intervention), and must build the full application. break page components. This can be done by using Next, the infrastructure should run automated tests an automated tool to define additional best practices every night against the application built by the nightly customized for an individual page or group of pages, build. The tests should run automatically without user and enforcing them on the appropriate rendered intervention, and a report should be generated and pages. Enforcing other best practices regarding well- possibly e-mailed with the results of the run. The formed and accessible HTML is also important here. report should categorize the results in an easy-to-read Figure 1: Focus areas for ensuring quality in an AJAX application 20 March 2007 AJAx.SyS-coN.coM
  17. 17. way, or else they’ll be ignored. But the infrastructure isn’t enough. There Client-Side JavaScript Engine must be a culture in the development group where failures in the nightly Validating the functionality of a client-side JavaScript engine may tests aren’t allowed to remain. Failures must be addressed as soon as they be the most difficult aspect of ensuring quality in an AJAX applica- appear. Otherwise you lose the benefit of automated tests. tion. This is why it’s important to use both best practice enforcement This is where the real power in the quality infrastructure lies. The and functional testing to attack the problem from multiple angles. development group should adopt a practice that, as each new feature Functionally validating the JavaScript engine is done by constructing is added, one or more automated tests that validate the feature are functional tests for each user interface control in your Web applica- added to the test suite. In addition, for each bug that’s fixed, one or tion. You should use an automated tool that lets you record a user’s more automated tests should be created that find the error being actions as he interacts with a browser and set up validations that fixed. Personally, some of my nightly tests are JUnit-based. I’ve made it ensure the control correctly responds to the user’s actions. Since a practice to create a JUnit test that catches the bug I’m fixing before I what the user sees in a Web application is directly tied to the brows- actually fix it. Then I know that my JUnit test reproduces the problem, er’s DOM, and since AJAX applications rely on heavy manipulation of and by running it I can know when I actually do fix the problem. This the DOM, the automated tool should be able to perform validations speeds up my development AND adds another test to my test suite. at the level of the browser DOM. Tools that emulate a browser, rather By adopting these practices, you’ll develop a large array of tests in than actually using a real browser for testing, are probably not going the long run. If they all succeed, you can be reasonably sure that your to be able to accurately test the application. The tests should be application has no major flaws. If you have to put out an emergency component-level tests of individual page components, rather than build and you have no time for testing, you can have a reasonable functional scenarios of the Web application as a whole. When these amount of confidence that the application is stable and works cor- tests are combined with accurate regression tests on asynchronous rectly if the automated tests succeed. This is especially true in the message content, you can have confidence that your AJAX compo- world of Web applications, where features are bled into the applica- nents are working properly. tions constantly. End-to-End Functional Scenarios Functional Tests for AJAX Applications Automated functional tests of the scenarios that describe your Web Since automated nightly tests are so important, let’s focus on the application users’ actions are crucial to ensuring that your Web application details of what should be functionally tested in an AJAX application. is providing its critical business functions. This is where you validate that all aspects of the complex AJAX application are working together properly. Back-end Web Services You should identify what the important scenarios are, and then use an Many AJAX applications depend on Web Services. These may be automated tool that can record and replay the scenarios easily. The tool services that your company owns and manages, or they may be services should let you validate that the user interface updates properly, as well exposed by your partners. For Web Services owned by your company, you as test that the user’s actions can actually be done. As with validating the should use an automated Web Services testing solution to validate that JavaScript engine, the user interface validations should be done at the level the Web Services provide the functionality they’re supposed to, and that of the browser DOM. In addition, since it’s probably important for your they handle both expected and unexpected inputs. Your Web application Web application to support multiple kinds of browsers, the test tool should depends on these Web Services providing the expected data, so you need let you define the tests once, yet run them against the different browsers to ensure that they do. Whether you own the Web Services or you use and different browser versions that your application needs to support. services exposed by someone else, you also need to validate that your Web application correctly handles unexpected responses from the Web Functional Security Tests Services (such as the service being inaccessible, the service returning Functional security tests ensure that the security policy that’s been malformed or unexpected data, etc.). This way you can be certain that put in place actually works and is being followed. These tests should sup- your Web application will provide an appropriate response under unex- port, rather than replace, the policy. The tests should send various kinds pected conditions. of unexpected inputs to the Web application to validate that it responds appropriately to hacker attacks (such as cross-site scripting and SQL Asynchronous Message Content injections). Server responses should be validated to ensure that the appli- When an error occurs with the page-update mechanism of an cation filters out the inappropriate inputs and doesn’t reveal information AJAX application, it’s typically in one of two places. The first place that would help a would-be hacker with further attacks. is in the contents of the asynchronous messages used to commu- nicate with the server. The second place can be in the logic of the Conclusion JavaScript engine that processes the asynchronous messages and Creating a quality infrastructure will let you deliver your applica- that updates the user interface. So it’s important to validate that the tions quickly, but with confidence that they are reliable and robust. server returns expected content for the asynchronous messages. This is especially true of AJAX applications. Creating the infrastructure Regression tests should be set up to verify that the server returns may require a significant investment of time and resources upfront; the correct responses for both expected and unexpected inputs. If however, experience with my own development and with that of cli- there’s a problem in the Web application, and these tests are suc- ents has shown that the gains from finding and preventing errors early ceeding, then the problem must be somewhere in the client-side using a quality infrastructure are many times greater than the initial JavaScript engine. cost. n 22 March 2007 AJAx.SyS-coN.coM
  18. 18. AJAx SoA The Big Shift by Kevin Hakman AJAX and Web Service Bus architectures enable the shift from request and response to message and event-driven application architectures T here have been numerous articles over Client Side: Pages Become Applications the last year on how the complemen- Unto Themselves tary nature of AJAX and service-orienta- In many ways AJAX has provided the perfect tion together are rapidly transforming the way in complement to HTTP information services. AJAX which we design, architect, deploy, and manage is highly optimal at consuming raw information applications. The ramifications of this change over HTTP be it SOAP XML, JSON, or other formats, , , impact nearly every aspect of business application and transforming that information into what the development, from design conception, architec- user sees on the screen. Both AJAX and SOA were tural planning, and implementation to unit testing born from taking the Hypertext Markup Language and monitoring. New methodologies, tools, and (HTML) out of Hypertext Transfer Protocol (HTTP) infrastructure are now emerging as the industry transmissions. Instead of a Web server generating an evolves from the three-tier system concepts that HTML page, it provides an XML, SOAP or JSON data , have dominated the last decade on the Web into service with which any number of applications can the Service Oriented Architectures (SOA) currently communicate. And instead of a Web browser repeat- being implemented. edly, often redundantly, rendering a stateless, static Let’s look at several major areas of application HTML page received from the server, the browser development and architecture that are shifting from gets and executes JavaScript to update portions or three-tier implementation styles to AJAX and SOA the entirety of the user interface within the stateful implementation styles to deliver more powerful, context of a single HTML page. high-performance, extensible, manageable, and With the tremendous exploration of the relation- cost-effective solutions: ship between AJAX and services that has occurred • Client Side: Web pages are becoming applica- over the past 18 months, it’s important to under- tions. stand the difference between the ideas of “AJAX- • Web Protocols: Publish/Subscribe events and enriched pages” and “AJAX applications.” A quick messages over HTTP are becoming peers with peek at Yahoo!’s personalized homepages and Yahoo! standard HTTP Request/Response. Mail easily demonstrates the distinction. On the My • Server Side: Centralized, silo’d application deploy- Yahoo! page you get a variety of AJAX interactions ments are getting plugged into Enterprise Service within the page. You can drag-and-drop a content Buses to make way for massively distributed ser- section to rearrange the layout, even remove an item vice deployments. from the page with an AJAX call in the background • Coding: Custom coding page-based GUIs is while it fades from view, then other content areas diminishing in favor of assembling solutions from flow in to fill the gap. Pretty cool. But as soon as you ready-made parts and services. click a content item, you go to a different page and so primarily navigate page to page to page. You go In general this evolution can be summarized as to the information, though some of it comes to you moving from homogenous, language- and vendor- through AJAX without leaving the page. I call these centric solutions, to the mixed environment, het- AJAX-enriched HTML pages and the nuances they erogenic systems typical of a business information add atop static HTML are excellent enhancements. system. Now try dropping in on Yahoo! Mail (beta). The 24 March 2007 AJAx.SyS-coN.coM
  19. 19. experience there is akin to Microsoft Outlook. The GUIs, AJAX is evolving with libraries focused on semantics of the solution lack the concept of “page” the value of enriched HTML pages or streamlining altogether. Instead of navigating from page to page the process of creating richer, software-style GUIs. to page, information comes to you via tabs, alerts, Therefore the question won’t be “which AJAX library windows, drag-and-drop, and the characteristics should I use” but “which collection of AJAX libraries of robust software solutions. Of course the units of should I use.” For example, one of our customers (a Internet advertising are based primarily on pages large investment bank) uses Direct Web Remoting and navigating between them, so we’ll certainly not (DWR) for simple enhancements to HTML pages see the page disappear. In addition, pages are great when it wants asynchronous access to its server-side for documents, forms, reports, and lots more. At the Java environments and simple updates to the HTML same time, AJAX liberates us from the paradigms elements with that data. In addition, it uses the Dojo of the page so that we can deliver richer business Toolkit when it needs richer controls in those HTML productivity applications akin to the experiences of pages. Finally, it uses TIBCO GI when it needs to desktop installed software, but, of course, do so over deliver richer business productivity solutions as part the Web via the browser. of its core business processes. Three different kits Where desktop-style applications were created used for three different problems. in the past with VisualBasic, Java Swing, MFC, or the like, they can now be substantially created and Web Protocols: Real-Time HTTP deployed using AJAX techniques. And where GUIs Messages and Events for business productivity solutions were bound to Aside from the Web page, request/response com- the limited paradigms of HTML pages and forms, munications are architecturally significant. This is AJAX opens a whole new vocabulary of end-user what Web servers have been optimized to do for the interactions that go well beyond the tabbed pane last decade – get a request, send the response as fast and into sliders, editable grids, tree tables, hierarchi- as possible, and close the connection. Inherently, cal menus, modal dialogs, toolbars, vector graphics the HTTP protocol is much like flipping pages, and charts, accordions, spinners, and date pickers. going from one to the next, sitting idle in between. AJAX libraries are already optimizing themselves Accordingly, the user experience is diminished by for both AJAX pages and AJAX application-style the request/response limitation, coming up short implementations. Much the way that the Java lan- relative to the streaming data and server-originating guage has .jsp for generating pages and that AWT, event capabilities of client systems that run outside Swing and others have for generating software-style the ubiquitous browser. Figure 1: Evolution to AJAX and SOA-enabling capabilities AJAx.SyS-coN.coM March 2007 2

×