IS AJAX MOVING TOWARD THE ENTERPRISE?
Upcoming SlideShare
Loading in...5
×
 

IS AJAX MOVING TOWARD THE ENTERPRISE?

on

  • 2,293 views

 

Statistics

Views

Total Views
2,293
Views on SlideShare
2,293
Embed Views
0

Actions

Likes
0
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

IS AJAX MOVING TOWARD THE ENTERPRISE? IS AJAX MOVING TOWARD THE ENTERPRISE? Document Transcript

  • IS AJAX MOVING TOWARD THE ENTERPRISE? FOR
  • The Web 2.0 Desktop www.laszlosystems.com/go/webtop Transforming the Web Experience™
  • November 2007 Give your users a ride they’ll want to take again and again. n6 AJAX: Where Next? n20 AJAX Reporting Challenges by Jeremy Geelan & Solutions with Adobe Flex AJAX technologies from Sun make it possible. With AJAX technologies Bringing together JavaScript, Flash from Sun, you have the flexibility to pick and choose any toolkit, any Player, and Web Services IDE, and even your development platform, so you can put AJAX in n8 Working with the Google by Yakov Fain practice in your web applications, and keep users coming back for more. AJAX Feed API To learn more, visit developers.sun.com/ajax Simplifying a historical complexity n26 Betting on Java for AJAX by Chris Schalk Bringing established Java technologies to the real-time Web by Brian Albers n16 Growth of Web Applications in the U.S. n30 Bringing AJAX into Status and implications the Enterprise for the tech industry New challenges, new solutions by Michael Mace By Adam Breindel © 2007 Sun Microsystems, Inc. All rights reserved. AJAx.SYS-CoN.CoM November 2007 
  • From The Publisher Senior Vice President AJAX: Where Next? Editorial & Events Jeremy Geelan Art Director By Jeremy Geelan Louis F. Cuffari JOIN Discussion Forums Editor Nancy Valentine, 201 802-3044 Software Downloads nancy@sys-con.com Documentation Technical Articles I To submit a proposal for an article, go to s AJAX fit to serve as spear carrier for next-genera- Backbase, a company specializing in rich Internet http://grids.sys-con.com/proposal. tion Web technology? That question, asked by the applications, published as long ago as in 2005 a white- Tutorials Subscriptions San Diego Business Journal in March 2007, was paper entitled “AJAX and Beyond” to explain their Podcasts Java E-mail: subscribe@sys-con.com answered by the sheer scale of the last two AJAXWorld Backbase Presentation Client, designed to interact SOA U.S. Toll Free: 888 303-5282 Conference & Expos, in March (New York) and September with their Presentation Server. International: 201 802-3012 Middleware (Santa Clara). The undisputed answer is “Yes!” And some Microsoft developers, while acknowl- Fax: 201 782-9600 So many companies have jumped aboard the edging that AJAX is a very important piece of the Database Cover Price U.S. $5.99 U.S. $19.99 (12 issues/1 year) AJAX train that when we wanted to do an informal puzzle, and solves many of the problems faced when More Canada/Mexico: $29.99/year survey the other day on upcoming Web and Internet creating responsive Web user interfaces, claim that International: $39.99/year technology trends, I was able to quickly compile a list AJAX isn’t really asynchronous at all when it comes Credit Card, U.S. Banks or Money Orders of 800 different companies that are leaving the sta- to HTTP requests. (“An AJAX Web request is a syn- Back Issues: $12/each tion. chronous Web request just like any other,” writes AJAX is moving toward the enterprise. Google, the Brendan Tompkins, for example. “All AJAX solutions Editorial and Advertising Offices company that helped light the AJAX wildfire in the first really are doing is using the browser’s built-in thread- Postmaster: Send all address changes to: SYS-CON Media place by using it in Google Maps and Gmail, has since ing – via JavaScript – to make multiple Web requests 577 Chestnut Ridge Road, then released a paid version of its Web-based appli- for you, and then updating the page when the server Woodcliff Lake, NJ 07677 cations for small businesses, Google Apps Premier responds.”) Tompkins’ notion of “Beyond AJAX” is to Edition, which relies on AJAX. use what he calls “real-life honest to goodness asyn- Worldwide Newsstand Distribution Curtis Circulation Company, chronous method invocation on the server.” New Milford, NJ Beyond AJAX List Rental Information Gmail was released on April 1, 2004, nearly a whole Securing AJAX Help yourself. year before Jesse James Garrett even coined the term Before we worry about Beyond AJAX, though, there Kevin Collopy: 845 731-2684, “AJAX.” Some are already saying that Comet is the next are many developers (and companies) who believe we Downloads, documentation, kevin.collopy@edithroman.com, Frank Cipolla: 845 731-3832, step beyond AJAX. Chester Millisock, for example, should first worry about securing the AJAX apps we forums, and more. frank.cipolla@epostdirect.com wrote recently: currently have. Two pioneers of better AJAX security, Log in to Oracle Technology Network for expert advice, “It took ten months after the release of Gmail for Billy Hoffman and Bryan Sullivan, have even devel- Promotional Reprints free tutorials, and sample code. Or get help in solving your AJAX to become a common technology. It took ten oped a groundbreaking one-day “Bootcamp” that will Megan Mussa job’s biggest challenges—from debugging code to complex megan@sys-con.com months for others to discover what Google was doing be premiered at AJAXWorld 2008 East in New York City migrations—from our community of 5.5 million developers, and to learn how to implement it themselves. It took (March 18–20, 2008). Copyright © 2007 who are ready to share tips and solve problems. You can ten months to come to the point where the program- Among other innovations, Hoffman and Sullivan by SYS-CON Publications, Inc. All rights also download free software and read articles on the latest mer’s brain said, “This Web app communicates with have a whole new never-before-seen AJAX applica- reserved. No part of this publication may trends in IT. be reproduced or transmitted in any form the server without refreshing the page. I like that!” tion that AJAX Security Bootcamp attendees will get or by any means, electronic or mechani- The same thing is happening all over again. Except to hack against, before using the app just attacked as cal, including photocopy or any informa- tion storage and retrieval system, without in a short while the programmer’s brain will become a catalyst to lead the discussion about how to secure JOIN TODAY Go to: otn.oracle.com/join trained to say, “This Web app has a large amount of AJAX applications. “The audience will have probably written permission. data that it wants to send to me. The server is continu- missed some vulnerabilities in the application they AJAXWorld Magazine ously sending data to my browser, so it’s there imme- just hacked and Bryan and I will use that to illus- is published bimonthly (6 times a year) diately when I ask for it. I like that!” trate how hard AJAX can be to QA and how to prop- by SYS-CON Publications, Inc., Using a Comet approach implies keeping a con- erly perform QA tests,” Hoffman tells AJAXWorld 577 Chestnut Ridge Road, Woodcliff Lake, NJ 07677. nection open between the server and each client. This Magazine. n SYS-CON Media and SYS-CON allows for a “push” style of notification, whereby the Publications, Inc., reserve the right to server can inform the client of events asynchronously Jeremy Geelan is Sr. Vice-President, Editorial & Events of SYS-CON revise, republish, and authorize its rather than wait for the client to poll for updates at Media. He is Conference Chair of the AJAXWorld Conference & Expo readers to use the articles submitted regular intervals. series and of the “Real-World Flex” One-Day Seminar series. for publication. 6 November 2007 AJAx.SYS-CoN.CoM Copyright © 2007 Oracle Corporation and/or its affiliates. All rights reserved. Oracle is a registered trademark of Oracle Corporation and/or its affiliates. Other names may be trademarks of their respective owners. 07003958 ,
  • Feeds Working with the Google by Chris Schalk SYS-CON Media President & CEO AJAX Feed API Fuat Kircaali, 201 802-3001 fuat@sys-con.com Senior VP, Editorial & Events Jeremy Geelan jeremy@sys-con.com Simplifying a historical complexity Advertising Senior Vice President, Sales & Marketing A Carmen Gonzalez, 201 802-3021 s you may know, one of the most compelling for a client Web page to make requests and pull digg.com and display some of its data on a Web page. should load the feed located at http://www.digg. carmen@sys-con.com features of the Internet has been the explo- down any feed data. The API does this by injecting In that example, we see how to load the AJAX com/rss/index.html. The remainder of the function Advertising Sales Director sion in the use of Internet feeds. Internet a script tag onto the client page, which then makes Feed API using the new common loader syntax by establishes an in-line callback function to process Megan Mussa, 201 802-3028 feeds serve as an extremely useful way to syndicate the feed data request directly from Google without specifying both the name of the API (“feeds”) and the returned data. Since no data type is specified, megan@sys-con.com Associate Sales Manager pure data in XML, as opposed to classical HTML Web violating the same origin security policy. The API has its version (“1”). Incidentally the other AJAX APIs, the default data is in JavaScript’s native JSON format Corinna Melcon, 201 802-3026 pages where the data is intermixed with the user provisions for the user to specify a callback func- AJAX Search and Google Maps also support this and is loaded into the result object. The remain- corinna@sys-con.com interface. Due to its simplicity, there are now literally tion so when the request is complete it will call the syntax. der simply iterates through the data in the result Events Manager millions of Internet feeds available with myriad data provided callback function that can render the feed After loading the Feed API, a function called object and uses the DOM methods, createElement( Lauren Orsi, 201 802-3022 lauren@sys-con.com like the weather, news, and blogs. data. The user-provided callback function can either initialize( ) is defined. This function creates a new ), createTextNode( ), and appendChild( ) to write the Events Associate Historically the only downside was that interact- be low-level JavaScript code that iterates through google.feeds.Feed instance and specifies that it returned feed data directly to the parent document Sharmonique Shade, 201 802-3024 ing directly with Internet feed data was somewhat the raw feed data and updates the user interface via by putting it inside of the empty <div> element with sharmonique@sys-con.com complex because you had to extract and parse the DOM methods, or it can be just a few lines calling id=”feed.” Production XML feed data for display. Typically this was done one of the available higher-level controls such as the Figure 4 shows how the HelloWorld example will Lead Designer using server-side technologies such as Java and FeedControl or the feed SlideShow. The overall AJAX render in a browser. Louis F. Cuffari, 201 802-3035 PHP. Feed architecture is displayed in Figure 2. louis@sys-con.com With Google’s AJAX Feed API, however, pulling The AJAX Feed API provides flexible ways to Extending the HelloWorld Example – Dis- Associate Art Directors down Internet feed data and integrating it into your display feed data. At a low level, it provides both playing Multiple Feeds Tami Beatty, 201 802-3038 tami@sys-con.com Web pages has never been so easy! It’s like Google’s JSON and/or XML output to the Web page. The As you get more familiar with the AJAX Feed API, Abraham Addo, 201 802-3037 Maps API, where all you need is a bit of JavaScript JSON output is a unified, or canonicalized, output of you’ll find it quite easy to display the returned data abraham@sys-con.com code on your page and you instantly have a usable data from the original RSS or Atom feeds. Why is it in more interesting ways. For example, here’s an SYS-CON.COM Map. With a bit of JavaScript on your page, you can canonicalized? This is done to provide a single way example that illustrates how multiple feeds in dif- Vice President Information easily integrate Internet feed data into your Web of extracting feed data as opposed to having to parse ferent formats will display in the same manner. This Bruno Decaudin, 201 802-3051 pages. the different feeds separately because of their differ- page is merely an extended version of the HelloWorld bruno@sys-con.com Consultant, Information Systems In Figure 1, the Blogroll and Photos content on ent RSS and Atom specifications. With the unified example above that lets the user select or enter his Robert Diamond the right is derived from Internet feeds. This is easily feed elements, it’s easy to work with multiple feeds own Feed URL. In stepping through this demo, you robert@sys-con.com Figure 1: The AJAX Feed API’s SlideShow (My doable in just a few lines of JavaScript. Before jump- of multiple formats using the same code. Photos) and FeedControl (My Blogroll) see how the AJAX Feed API provides unified access Web Designers ing into examples of Google’s AJAX Feed at work, let’s on a Web page to any supported RSS or Atom feed without having Stephen Kilmurray, 201 802-3053 Chris Schalk is a Tech Lead in the review a bit the Feed API’s architecture. Using the AJAX Feed API to parse them independently. stephen@sys-con.com Richard Walter, 201 802-3057 Developer API Evangelism group at Google. To get a feel for how to work with the AJAX Feed, As you can see in Figure 5, it displays the BBC’s richard@sys-con.com He is also one of the original members of The AJAX Feed API’s Architecture let’s review some basic examples for starters. As men- RSS News Feed. Figure 6 shows the same Web page the OpenAjax Alliance. Prior to Google, at a Glance tioned earlier, the AJAX Feed API is a JavaScript API but pointing to a different feed URL. In this case it’s Accounting Financial Analyst Schalk was a Principal Product Manager Google’s AJAX Feed API is a combination of a that communicates with Google’s worldwide servers Yahoo’s Weather Feed. Joan LaRose, 201 802-3081 and Java Evangelist for Oracle’s applica- hosted service provided by Google along with a light- to provide feed data to your client Web page. As with Creating a page that displays feed data this way joan@sys-con.com tion server and development tools divi- weight JavaScript client API that allows for the easy the other JavaScript APIs that Google provides, one is relatively straightforward. We have a portion of Accounts Payable Betty White, 201 802-3002 sion. While at Oracle, he worked to define integration of public RSS and Atom feeds into any first has to get the API key that’s issued after agree- the relevant code from this example. Aside from a betty@sys-con.com the overall Web development experience Web page via JavaScript. At its core, the AJAX Feed ing to a Terms of Services document. Once you have standard HTML form on the page, there’s an empty for Oracle JDeveloper and ADF Faces API relies on a Google service known as FeedFetcher your API key, you can begin coding in JavaScript and portion beneath the form that’s populated dynami- Customer Relations (Trinidad). He is also the co-author of that continuously scours the Internet for feeds and build your first example such as a HelloWorld. In cally by calling the JavaScript function showFeed( ). Circulation Service Coordinators Edna Earle Russell JavaServer Faces: The Complete Reference caches them on Google’s worldwide servers, similar fact, Google provides some initial examples to help This function accepts a feed URL passed from the edna@sys-con.com published through McGraw-Hill Osborne to how Google caches all other Internet data. Since you get started. HTML form. (ISBN: 0072262400) and maintains a popu- feed data is constantly updated, the FeedFetcher is The code that populates the lower part of the lar Blog on J2EE Web development at www. constantly refreshing its caches with fresh data. An AJAX Feed HelloWorld Example Figure 2: The AJAX Feed API architecture page is in Listing 2. jroller.com/page/cschalk. As the feed data is cached on Google’s servers, There’s a simple HelloWorld example in Listing 1 at a glance You can see in the code that, as the showFeed( ) func- cschalk@google.com the AJAX Feed JavaScript API provides an easy way that illustrates how to download an Internet feed from tion is executed, it first creates a new Feed object 8 November 2007 AJAx.SYS-CoN.CoM AJAx.SYS-CoN.CoM November 2007 
  • with the chosen feedURL passed to it from the HTML form. The rest of the code works to display the feed data using DOM methods. First it displays core feed information such as the title, link, description, and author. These are attached to an existing <div> with id = “banner-div.” It then generates an HTML table dynamically to display the repeating feed data from the entries array and attaches it to an existing <div> with id=”feed-div.” Displaying Feed Data More Compellingly – GeoCoded Photos on a Google Map Dumping feed data into an HTML table is some- what interesting, however there are more interest- ing and compelling ways to display feed data. For example, it’s possible to use the AJAX Feed API to extract geo-encoded data and then display it on a Google Map. Here’s a fun mash-up where the AJAX Feed API extracts geo-encoded photos from a feed and then Figure 3: AJAX Feed’s unified feed elements uses the Google Maps API to display the data. As shown in Figure 7, this example displays photos that correspond to one or a set of tags. In this case the single tag, “Paris,” is used as a query parameter to the Flickr photo feed: http://api.flickr. com/services/feeds/photos_public.gne?tags=geo,pa ris&georss=true Also notice that an additional parameter, “georss=true,” is also provided. This triggers the feed to supply only photos that are geo-encoded in the feed. The raw data with the pertinent parts highlighted as it is returned from the feed is in Listing 3. You’ll see that this feed contains a series of entries that have both HTML snippets in <content> tags and Figure 4: A simple AJAX Feed HelloWorld example latitude and longitude information encoded in a <geo:Point> tag. The JavaScript code responsible for extracting the feed information and putting it in an array of Google Map points is in Listing 4. The important thing to notice in the code is the statement: feed.setresultFormat(googlefeeds.Feed. MIXED_FORMAT);. This statement allows for the extraction of both JSON and extra XML data at the same time. In our case this is important because the <geo:lat> and <geo:long> tags are extracted and assigned to the variables latnode and long- node. Its actual text content is then used to create a new Google Map point (using the constructor for GLatLng( )). Then it’s pushed into an array of Google Maps points (mapPoints) that are displayed on a Google Map using the function showMap( ). The code for showMap( ) isn’t shown but is simi- lar to many basic Google Maps API examples where an array of Map points are displayed with pop-up windows that contain HTML content. You can see Figure 5: A simple AJAX feed example that shows different feeds in a consistent manner examples on how to do this at www.google.com/ apis/maps/documentation/examples/index.html. 10 November 2007 AJAx.SYS-CoN.CoM
  • To see a live demo go to http://gmaps-samples. FeedControl provides a neat solution for Web page googlecode.com/svn/trunk/ajaxfeed-flickr.html. authors who want to present the text from one or mul- tiple feeds in a stacked or tabbed HTML box without AJAX Feed Controls having to write a lot of JavaScript code as shown in The code examples so far involve a fair amount of Listing 5. JavaScript code to iterate through feed data and display Figure 8 shows how the FeedControl renders. it dynamically. However, if you simply need to display You’ll notice that in the draw( ) method, there’s a text or image data from a feed in a neatly formatted second argument with options for the FeedControl. box on your Web page with minimal coding then using In this case, it specifies render the control with one of the AJAX feed controls with their efficient coding tabbed bars. The default is to render multiple feeds approach is definitely recommended. in a stacked linear manner. The FeedControl also provides a setNumEntries( ) method that specifies Using the FeedControl how many feed results to display. And, finally, anoth- The first AJAX API Feed control worthy of atten- er feature of the FeedControl worth mentioning is tion is the AJAX Feed API control. The AJAX Feed API its setLinkTarget( ) method, which defines the link target of the feed links rendered by the FeedControl. This lets you control whether clinking the links Figure 8: The FeedControl in Action rendered in the FeedControl opens a new window, current window, top frame, or replace the current frame. The FeedControl display is governed by a set of CSS Using Feed Discovery styles that’s well documented on the AJAX API Feed’s So far, all of the AJAX Feed examples have includ- homepage on the code.google.com Web site. A base ed known feed URLs. There are instances, however, look and feel stylesheet comes as a default with the when you may want to offer the user the ability to FeedControl and to customize it, you merely override search for feeds on-the-fly. In this case you can use the default styles in your Web page. the AJAX Feed API’s new Feed Discovery feature. Using it is a simple process of passing a query string Using the SlideShow Control as well as a callback function to a method, find- In contrast to offering an easy solution to display Feeds( ) and it will return a set of results as an array textual data from an Internet feed, the SlideShow of feed URLs with their respective titles. The results (GFslideShow) control displays photos from Internet array can then be iterated through and have their feeds in a slideshow format. The code to add this con- feeds applied to a FeedControl. Listing 6 is a sample Figure 9: The AJAX Feed SlideShow Control trol to your page is also minimal. that queries feeds that are associated with the term rendering a series of sunset photos “AJAX.” Figure 6: The same feed example showing Yahoo’s Weather Feed ... The results of the “AJAX” query returns the fol- google.load(“feeds”, “1”); lowing feeds shown in Figure 10 that were displayed in a FeedControl in stacked display mode. function LoadSlideShow() { var feed = “http://feed.photobucket.com/images/ Summary sunsets/feed.rss”; Having stepped through the various uses of the var options = {displayTime:2000, transition- AJAX Feed API, you can see that it offers a wealth Time:600, scaleImages:true}; of functionality to a diverse audience. For those new GFslideShow(feed, “slideShow”, options); comfortable with JavaScript and DOM program- } ming, the AJAX Feed API doesn’t get in the way! Instead it empowers power developers in building google.setOnLoadCallback(LoadSlideShow); completely custom solutions with Internet feed data. This code renders as shown in Figure 9. The On the other hand, for those who’d rather not get SlideShow controls can pause a show by click- too deep into JavaScript programming, the easy-to-use ing a pause button that appears when you hover advanced controls such as FeedControl and SlideShow offer over the image. Some of the options that you can complete and polished solutions with minimal coding. specify are the time that each image will show For more information on Google AJAX APIs check (displayTime), the time it takes to transition out Google’s API technology Web site at http://code. Figure 10: The AJAX FeedControl displaying between images (transitionTime), the number google.com or more specifically see http://code. different feeds returned from a Feed of images to loop through (numResults), and google.com/apis/ajaxfeeds/. You’ll see detailed doc- Discovery query using the term “AJAX” Figure 7: A fun mash-up with AJAX Feeds, geo-encoded photos, and Google Maps whether or not to scale the images to the actual umentation along with many helpful samples that size of the control. will help you get started in minutes. n 12 November 2007 AJAx.SYS-CoN.CoM AJAx.SYS-CoN.CoM November 2007 13
  • } if ((latnode.length > 0) && (longnode. Listing 1 else { length > 0)) { <html> alert(“Error retrieving feed from: “ var geolong = longnode[0].textCon- <head> + feedUrl + “nnPlease check that this is a tent; <script type=”text/javascript” valid feed Url.”); var geolat = latnode[0].textContent; src=”http://www.google.com/jsapi?key=YOUR_ } // Save in Map Points array KEY_HERE”></script> }); point = new GLatLng(geolat, geo- <script type=”text/javascript”> } long); google.load(“feeds”, “1”); point.name = result.feed. function initialize() { entries[i].title + result.feed.entries[i]. var feed = new google.feeds.Feed(“http:// content; www.digg.com/rss/index.xml”); Listing 3 mapPoints.push(point); feed.load(function(result) { <?xml version=”1.0” encoding=”utf-8” } if (!result.error) { standalone=”yes”?> } var container = document. <feed xmlns=”http://www.w3.org/2005/Atom” } getElementById(“feed”); xmlns:dc=”http://purl.org/dc/ele- for (var i = 0; i < result.feed. ments/1.1/” xmlns:geo=”http://www. // Show results on map if data exists entries.length; i++) { w3.org/2003/01/geo/wgs84_pos#” xmlns: if (mapPoints.length > 0) { var entry = result.feed.entries[i]; georss=”http://www.georss.org/georss”> showMap(); var div = document. <title>Photos from everyone tagged geo and } createElement(“div”); paris</title> else { div.appendChild(document. <link rel=”self” href=”http://api.flickr. setStatus(“”); createTextNode(entry.title)); com/services/feeds/photos_public.gne?tags=geo alert(“No tagged photos were found for container.appendChild(div); ,paris&amp;georss=true” /> tag(s): “ + extraTag ); } <link rel=”alternate” type=”text/html” } } href=”http://www.flickr.com/photos/”/> }); }); <id>tag:flickr.com,2005:/photos/public/ } } tagged/all/geo-paris</id> google.setOnLoadCallback(initialize); <icon>http://www.flickr.com/images/bud- dyicon.jpg</icon> Listing  </script> <subtitle></subtitle> ... </head> <updated>2007-09-18T19:22:15Z</updated> google.load(“feeds”, “1”); <body> <div id=”feed”></div> <generator uri=”http://www.flickr.com/ ”>Flickr</generator> function OnLoad() { </body> </html> <entry> <title>Paris</title> // create a feed control <link rel=”alternate” type=”text/html” var feedControl = new google.feeds. Listing 2 href=”http://www.flickr.com/photos/barbara- FeedControl(); <script type=”text/javascript”> rich/1402627819/”/> google.load(“feeds”, “1”); <id>tag:flickr.com,2005:/ feedControl.addFeed(“http://www.digg.com/ photo/1402627819</id> rss/index.xml”, “Digg”); function showFeed(feedUrl) { <published>2007-09-18T18:12:24Z</pub- feedControl.addFeed(“http://googleblog. var feed = new google.feeds. lished> blogspot.com/atom.xml”, “Google Blog”); Feed(feedUrl); <updated>2007-09-18T18:12:24Z</updated> feedControl.addFeed(“http://feeds.feed- feed.load( function(result) { <content type=”html”>&lt;p&gt;...Musee burner.com/Techcrunch”, “TechCrunch”); if (!result.error) { d’Orsay, vue du Pont du Carrousel&lt;/p&gt;.. feedControl.addFeed(“http://blog.outer- var feedTable = createFeedTable(); ...&lt;img src=&quot;http://farm2. court.com/rss.xml”, “Google Blogscoped”); static.flickr.com/1331/1402627819_62a8b5df0f_ var feedTitle = result.feed.title; m.jpg&quot; /&gt; feedControl.setLinkTarget(google.feeds. var feedLink = result.feed.link; </content> LINK_TARGET_BLANK); var feedDescription = result.feed. <author> feedControl.setNumEntries(10); description; <name>B. Rich</name> var feedAuthor = result.feed.author; <uri>http://www.flickr.com/peo- feedControl.draw(document.getElementById( ple/.../</uri> “feedControl”), var p = document.createElement(“p”); </author> {drawMode : google.feeds. p.innerHTML = “<b>Feed Title</b>: “ <category term=”paris” scheme=”http:// FeedControl.DRAW_MODE_TABBED}); + feedTitle + “<br/>”; www.flickr.com/photos/tags/” /> } p.innerHTML += “<b>Feed Link</b>: <category term=”france” scheme=”http:// google.setOnLoadCallback(OnLoad); <a href=‘“ + feedLink + “‘>” + feedLink + www.flickr.com/photos/tags/” /> “</a><br/>”; <category term=”geotagged” p.innerHTML += “<b>Feed scheme=”http://www.flickr.com/photos/tags/” Listing 6 100+ Ready-Made Ajax Components. ... 100+ Description</b>: “ + feedDescription + /> “<br/>”; ... google.load(“feeds”, “1”); p.innerHTML += “<b>Feed Author</b >: <georss:point>48.860113 2.327363</ var defaultQuery = ‘AJAX’; “ + feedAuthor + “<br/>”; georss:point> function findFeeds(query) { var bannerDiv = document. getElementById(“banner-div”); bannerDiv.appendChild(p); <geo:Point> <geo:lat>48.860113</geo:lat> <geo:long>2.327363</geo:long> Done); google.feeds.findFeeds(query, feedSearch- } Open Source Licensed. </geo:Point> function feedSearchDone(result) { for (var i = 0; i < result.feed. </entry> var el = document.getElementById(‘feedCo entries.length; i++) { ... ntrol’); var rowData = result.feed. </feed> if (result.error || result.entries.length entries[i]; <= 0) { var tr = feedTable.insertRow(-1); el.innerHTML = ‘No Results Found’; var titleCell = tr.insertCell(-1); return; Listing 4 var contentCell = tr.insertCell(- } function showFeed(extraTag) { 1); // Create a feed control var feed = new google.feeds.Feed(feedUrl + var feedControl = new google.feeds. var publishedCell = tr.insertCell(-1); extraTag + “&georss=true”); FeedControl(); Why are professional developers choosing TIBCO General Interface? feed.setResultFormat(google.feeds.Feed. var snippetCell = tr.insertCell(- // Grab top 4.. MIXED_FORMAT); 1); feed.setNumEntries(50); for (var i = 0; i < 4; i++) { feedControl.addFeed(result.entries[i].url, With more than 100 ready-made Ajax components and easy-to-use visual titleCell.innerHTML = “<a href=‘“+rowData.link+”‘ target=‘_new’>” + feed.load(function(result) { result.entries[i].title); layout, data management, and communication tools, TIBCO General rowData.title + “</a>”; } if (!result.error) { contentCell.innerHTML = rowData. for (var i = 0; i < result.feed.entries. feedControl.setLinkTarget(google.feeds. Interface™ enables you to create Ajax applications that look and feel like content; LINK_TARGET_BLANK); length; i++) { publishedCell.innerHTML = rowData. // get latitude/longitude if available feedControl.setNumEntries(2); desktop GUIs with astounding speed. publishedDate; feedControl.draw(el); var latnode = result.feed.entries[i]. snippetCell.innerHTML = rowData. } xmlNode.getElementsByTagNameNS(“http://www. contentSnippet; google.setOnLoadCallback(function() {findFee w3.org/2003/01/geo/wgs84_pos#”, “lat”); feedTable.appendChild(tr); ds(defaultQuery)}); var longnode = result.feed.entries[i]. } xmlNode.getElementsByTagNameNS(“http://www. var feedDiv = document. w3.org/2003/01/geo/wgs84_pos#”, “long”); getElementById(“feed-div”); feedDiv.appendChild(feedTable); Download and explore TIBCO General Interface, now available through an open source license at http://developer.tibco.com/. 14 ©2007, TIBCO Software Inc. All rights reserved. 1704.0 November 2007 AJAx.SYS-CoN.CoM
  • E-mail and games are the leading Web ap- • Web app users were slightly better educated but Web 2.0 plications the difference was only a few percentage points. Among people who use Web apps, the most • There was no significant difference between Web Growth of Web popular use (90%) is sending and receiving e-mail app users and non-users in income, sex, marital by Michael Mace through a browser-based client. Games are next, status, and presence of children in the family. used by just over 50% of the Web app users, followed Adoption by Students Applications in the U.S. by music (25%+) and photo management and edit- ing (30%+). The most striking difference with Web app users Web app adoption differs dramatically by appli- was that they were more than twice as likely to be cation category. Some of the most discussed Web enrolled in college or graduate school. So we ana- Status and implications for the tech industry app categories, such as word processing and spread- sheets, have attrac ted only a very small percentage lyzed students separately from the rest of the popu- lation and found some interesting results: of home PC users to date. T he rise of Web applications – Web sites that explain the benefits of it in terms users can under- (Percent of Web app users who say they use a Web Student adoption of Web apps is much more replace the functions of a software program stand. app in each category. Multiple responses allowed. advanced that was traditionally installed on a personal Base: People who use at least one Web application More than half of the college and grad students computer – is one of the hottest topics in tech. Huge Traditional software companies are very vulner- on a regular basis. To get the percentage of the total surveyed said they use one or more Web apps on a numbers of Web 2.0 start-ups are competing for able. home PC population using an application category, regular basis. Only 11% said they had not heard of user attention and many observers predict the rapid The low adoption barriers to Web applications multiply these numbers by 37%. For example, less Web applications. It’s safe to say that among U.S. growth of Web applications. mean that no traditional packaged software compa- than 2% of U.S. home PC users say they use a Web- college students, Web app usage has become a main- But most analysts refer to Web application growth ny is safe from Web-based competition in the near- based database.) stream activity. as something that’s going to happen in the future. term. The time to embrace Web 2.0 development (Base: All respondents.) The reality is that Web app use has already stretched and business practices is now. If packaged software Web applications consume 40% of total applica- far beyond early adopters and is rapidly moving into companies wait for the competition to intensify, it tion usage time Web applications used by students and non- the mainstream of U.S. home computer users. A will probably be too late. Another way to measure the impact of Web apps students recent survey, done by Rubicon Consulting, showed is to ask how much time people spend using them. The students’ Web app use patterns were similar that more than a third of them already use at least Improve Web app security now. People who use Web applications say that they to those of non-students. Students were somewhat one Web application on a regular basis. Students are The latent security fears of many PC users could spend about 22% of their total computing time doing more likely to do blogging and Web page creation moving especially fast, with more than 50% using explode if there’s a well-publicized security melt- so. That amounts to about 40% of the total time they via Web applications and somewhat less likely to Web applications. down in a major Web application. This could derail spend with applications of any sort. do security, finance, word processing, and spread- Other key findings of the research included: the current growth in Web app usage. It’s important That implies that for these users, Web applica- sheets. • Adoption of Web applications varies tremendous- that Web app companies take steps to make their tions are already crowding out much of the users’ (Base: People who use Web applications on a regu- ly by category. E-mail and games are the leaders software more secure now, before the insecurities total application activity. Over time, that’s likely to lar basis.) at the moment. Other categories, such as word turn into outright fear. reduce the demand for traditional applications. processing and spreadsheets, still have extremely (Percent of total computing time devoted to each Time spent using Web applications low adoption. Methodology activity. Base: People who use at least one Web appli- Although students were more likely to use Web • Web applications displace traditional applica- More than 2,000 U.S. adults who have personal cation on a regular basis. To get the percentage of the applications on a regular basis, they don’t neces- tions. Among people who use any Web applica- computers at home were surveyed in the summer of total home PC population using an application cat- sarily spent more time with them. Students who tions, those apps consume about 40% of the user’s 2007. Windows, Mac, and Linux users were included. egory, multiply these numbers by 37%. For example, use Web applications spent about 15% of their total A principal at Rubicon Consulting, a lead- total application time. So Web apps are already Survey participants were randomly selected through less than 2% of U.S. home PC users say they use a computing time using those applications, compared ing business and marketing strategy firm displacing traditional application use for many a third-party sampling firm. Web-based database.) to 22% for non-students. for tech companies, Michael Mace is a 20- people. This trend is likely to cut into the sales of (Percent of total computing time devoted to each year veteran of some of the tech industry’s conventional applications over time. Adoption & Awareness of Web Applications Web application users versus non-users activity. Base: People who use Web applications on a toughest battles. He was vice president of • Security is a looming problem. Fear of security Eighty percent of U.S. home PC users say they The research attempted to identify character- regular basis.) strategic marketing at PalmSource, where problems is one of the biggest barriers to the fur- have heard of Web applications. More than half of istics of the people who use Web applications. Are he helped handset companies and wireless ther adoption of Web applications. them have tried at least one Web app, and more than Web apps being adopted most by a particular demo- Security fears limit growth of Web applications carriers plan new smartphone products a third – 37% – say they use at least one Web applica- graphic segment? The answer was generally no, but (Reasons why Web apps aren’t used. Multiple and wireless services. Prior to that he was Implications for the Industry tion on a regular basis. there were some differences: responses permitted. Base: People who do not use Web chief competitive officer and vice president Web apps need to solve practical problems. That means use of Web applications has already applications.) of product planning at Palm Inc., where he Users don’t care whether they’re using a Web spread far beyond the 16% of the population tradi- • The people who used Web applications were Although Web applications use has grown rap- led the design of the new product planning application or a traditional application; they just tionally identified as innovators and early adopters. heavier users of applications in general, both idly, there are storm clouds on the horizon. When process, and led the creation of the compa- want to get on with their lives. The good news for Web applications are entering the mainstream of US Web-based and traditional. Web app users had people who don’t use Web applications were asked ny’s long-term product road map. Web app companies is that there’s little barrier to PC users. 28% more applications installed on their comput- why they don’t use them, two answers stood out: mike@rubiconconsulting.com adoption of Web apps. The challenging news is that (Base: All respondents. Web applications were ers than non-users. The Web app users also used users expect the apps to solve real-world problems. defined as Web sites that replace a task the user previ- their computers more heavily. • “I don’t need them.” This is a common response in any Charts and graphs available at Web app companies must make sure they’re offer- ously did using a software application installed on a • Web app users were somewhat more likely to rate developing market for a technology product – many peo- www.rubiconconsulting.com ing a service that users really care about, and must PC. Examples were given to ensure comprehension.) themselves as having good technical skills. ple just haven’t yet seen a Web application they need. 16 November 2007 AJAx.SYS-CoN.CoM AJAx.SYS-CoN.CoM November 2007 17
  • • “I’m worried about security.” This is not a typical just want to solve their problems. Since virtually all response in most tech market surveys and it was U.S. PC users have a Web connection and a browser, cited by 38% of the respondents, making it the if a Web app solves their problem, they won’t hesitate second most common response. to use it. So the barrier to adoption for Web applica- tions is extremely low. Based on this research, security fears appear to But this also puts important responsibilities on be a significant barrier to future growth of Web appli- Web app developers. The research didn’t detect any cations. Those fears are not unjustified, considering significant group of people who are strongly biased what’s being said online about Web applications. towards adopting Web applications for their own Here are two examples: sake. Again, they just want their problems solved. Symantec Corporation issues a semi-annual If a Web application isn’t better than a traditional report on Internet security trends called the Internet software app or doesn’t solve some new problem, Security Threat Report. The September 2007 edition most people won’t adopt it just because it’s on the calls out Web applications as a major risk area: Web. “Sixty-one percent of all vulnerabilities dis- Web app companies need to ensure they solve closed were in Web applications. Once a trusted real-world problems that significant numbers of Web site has been compromised, cyber-criminals people care about and they need to communicate can use it as a source for distribution of mali- those benefits clearly. cious programs in order to then compromise To traditional software companies: No tradi- individual computers. This attack method allows tional software application is immune to Web-based cyber-criminals to wait for their victims to come competition, so adopt Web app practices now. to them versus actively seeking out targets. Social It’s easy for traditional packaged software com- networking Web sites are particularly valuable panies to convince themselves that Web applica- to attackers since they provide access to a large tions are not an immediate threat. In Rubicon’s number of people, many of whom trust the site work with them, we often hear software company and its security. These Web sites can also expose executives say things like “Web applications will a lot of confidential user information that can be a big challenge to us in three or four years.” then be used in attempt to conduct identity theft, Assuming that Web app growth will be moderate online fraud, or to provide access to other Web and predictable is extremely dangerous. Since Web sites from which attackers can deploy further app adoption has already moved fast in some soft- attacks. http://www.symantec.com/enterprise/ ware categories, it can move fast in any software theme.jsp?themeid=threatreport. category if the Web app company gets its features IBM published a white paper on the security of right. mash-ups, Web applications that combine func- The time for traditional software companies to tionality from several different Web sites. Mash- adopt Web app technologies and business prac- ups are a very common procedure for producing tices is now, before they’re in a crisis. If they wait a Web app. IBM wrote: “The workarounds cur- for a crisis to develop, it will probably be too late to rently in wide use to enable AJAX mash-ups each respond. come at some cost. When stretching a browser’s designed limits, you affect other aspects of the Everyone: Address security now. application’s overall operation....The tools that The security fears of many people who don’t use browsers currently provide for mash-ups are Web applications should be taken very seriously. insufficient to allow you to build applications They show a latent undercurrent of fear that could that are both scalable and secure.” http://www- grow rapidly in the future. A single well-publicized 128.ibm.com/developerworks/library/x-secure- security disaster in a major Web app could dis- mashups/. credit the entire category and severely limit Web app growth, just as safety problems in a few Chinese Implications for the industry products have affected the image of the country’s To Web app companies: Users are incredibly entire manufacturing sector. practical; the products must be as well. The IBM report on mash-ups acknowledged that Although the tech industry spends a lot of time there are several efforts underway to make Web apps drawing distinctions between traditional software more secure. Web app companies should embrace and Web 2.0 apps, computer users don’t care. They solutions like these aggressively. n 18 November 2007 AJAx.SYS-CoN.CoM
  • Flex AJAX Reporting Challenges by Yakov Fain & Solutions with Adobe Flex Bringing together JavaScript, Flash Player, and Web Services C reating reporting applications in AJAX is Robustness Figire 1 shows an HTML/JavaScript applica- This call will load Amazon’s WSDL, which often more challenging than developing Challenge #4: The HTTP protocol is very forgiving tion that uses an invisible Flash Player component among other things will contain the operation data entry CRUD applications. Reporters because it was optimized for non-reliable networks. (WebService.swf) and one visible (ClearBI.swf). In KeywordSearchRequest: usually need to process lots of data, preferably on the Web browsers were designed to display whatever has this example we’ll use the data coming from a pub- client side to minimize the amount of information arrived with a Web page. If a page includes an image, licly available book search Web Service off Amazon <wsdl:message name=”KeywordSearchRequest”> that goes through the wire. Reporters need to know which was not available at the moment, you’ll see an .com. <wsdl:part name=”KeywordSearchRequest” type=”typens: how to apply formulas, group the data, and calculate icon of the broken image, and, maybe an alternative The entire process works like this: KeywordRequest”/> totals and subtotals. Add to the mix a requirement to text. But what if a piece of JavaScript code doesn’t 1. The JavaScript code gives a URL of Amazon’s </wsdl:message> give the end user an ability to customize the look and arrive for whatever reason? WSDL to a hidden WebService.swf. feel of the report, and you’re facing a serious project. There’s no built-in way to ensure the delivery of 2. The WebServices.swf loads WSDL from Amazon Currently AJAX frameworks don’t offer advanced JavaScript. This means that AJAX programmers have and automatically converts XML into an object reporting capabilities. So let’s go over some of the to write additional code just to check if the applica- with properties (it uses E4X as will be explained challenges and solutions to creating Web reporting tion code has arrived. On top of this, Web browsers below). software. In this article I’ll pay special attention to offer mediocre debugging support. 3. The JavaScript asks WebService.swf to call the a rich Internet application working as a Web Service Solution: Use a virtual machine with reliable code selected operation from Amazon’s WSDL. consumer. delivery and good development and debugging tools. 4. WebService.swf gets the data and passes them We’ll start by identifying some of the major chal- to JavaScript (XML or JavaScript objects). If lenges of creating reports in AJAX applications. Web Browsers Have an Unpredictable you’re just interested in simplified processing Future of SOAP in your AJAX application, you don’t Browser Incompatibilities Challenge #5: Software vendors don’t seem to be need to do step 5 – WebService.swf is all you Challenge #1: Reporting requires complex UI pro- eager to invest into browsers. Microsoft is investing need. gramming, but maintaining browser-specific code in .NET (WPF) and Silverlight, which runs on CLR. 5. To produce reports that look as shown below and is a huge effort. Optimizing code delivery is an art. Adobe is developing AIR. Sun Microsystems is about can be customized by the end users, pass the data Optimizing data delivery isn’t easy because it needs to release a small consumer VM for rich Internet from JavaScript to ClearBI swf. to support ever-changing protocols (SOAP REST). , applications written in Java and JavaFX. Solution: Flash Player is a virtual machine that Solution: Select a ubiquitous technology (cur- What’s Under the Hood Figure 1: works the same way in every browser rently it’s Flash Player) that offers a solid develop- The entire workflow consists of two major steps Challenge #2: Code packaging (in Internet ment and deployment environment. described below: Yakov Fain is a managing principal of Explorer Web Services are packaged as HTC, which 1. Using JavaScript initialize the WebService.swf Farata Systems, consulting, training and is not supported by Mozilla browsers. I’ve listed some major challenges that any RIA object, register event listeners, and load the product company. He’s authored several Solution: Use a browser-agnostic invisible Flash developers would face regardless of what protocol WSDL: Java books, dozens of technical articles. Player-based agent that supports communications they use for data delivery. Recently, our company, SYS-CON Books has released his latest with Web Services regardless of the Web browser Farata Systems, which was working mainly with Flex/ Var ws=com.farata.jsfx.WebServices(“MyWebService”); book, “Rich Internet Applications with you’re using. Java applications, decided to create a version of our Add the WSDL load listener Adobe Flex and Java: Secrets of the Masters” ClearBI reporter as a component for AJAX applica- ws.addEventListener(“serviceload”, onWsdlLoaded); in Spring of 2007. Sun Microsystems has Performance tions as well. After experimenting with various proto- Add the error listener nominated and awarded Yakov with the Challenge #3: Large JavaScript projects such as cols, we created a component called WebService.swf, title Java Champion. He leads the Princeton reporting applications need to be loaded, pre-pro- which is a Flash Player and can easily turn a SOAP ws.addEventListener(“servicefault”, onError); Java Users Group. Yakov teaches Java and cessed, and executed on every page load Web Service into an object with methods that corre- Initialize the WebService.swf with wsdl. Load wsdl Flex 2 part time at New York University. He Solution: Use Flash agents that are pre-compiled, spond to WSDL operations, and the XML processing and notify ServiceLoadListeners on success. is an Adobe Certified Flex Instructor. compressed, and optimized for streaming and cach- is done using ECMAScript for XML (E4X), which lets ws.useService(“http://soap.amazon.com/schemas2/ Figure 2: yfain@sys-con.com ing. you avoid XML parsing headaches AmazonWebServices.wsdl”, “Amazon”); 20 November 2007 AJAx.SYS-CoN.CoM AJAx.SYS-CoN.CoM November 2007 21
  • As you can see, this operation expects an argu- ment of a KeywordRequest type that is described in the same WSDL: KewordRequest format. 2. Call the Web Service quasar technologies var ws = com.farata.jsfx.WebServices(“MyWebService <xsd:complexType name=”KeywordRequest”> ”); <xsd:all> Add the Web Service operation result listener. <xsd:element name=”keyword” type=”xsd:string”/> ws.addEventListener(“serviceresult”, onXmlResult); <xsd:element name=”page” type=”xsd:string”/> <xsd:element name=”mode” type=”xsd:string”/> Prepare the arguments for the call (i.e., as an XML <xsd:element name=”tag” type=”xsd:string”/> object) to find books that have the work AJAX in their <xsd:element name=”type” type=”xsd:string”/> titles: <xsd:element name=”devtag” type=”xsd:string”/> <xsd:element name=”sort” type=”xsd:string” minOc- Var args = ‘<m:KeywordSearchRequest xmlns:m=”http:// curs=”0”/> soap.amazon.com”>’ <xsd:element name=”variations” type=”xsd:string” + ‘ <KeywordSearchRequest>’ + ‘<keyword>AJAX</key- minOccurs=”0”/> word>’ <xsd:element name=”locale” type=”xsd:string” minOc- + ‘ <page>1</page>’ + ‘<mode>books</mode>’ curs=”0”/> + ‘<tag>D3HW0PG66IPLAM</tag>’ + ‘<type>lite</type>’ </xsd:all> + ‘<devtag>D3HW0PG66IPLAM</devtag>’ + ‘<sort></ </xsd:complexType> sort>’ Now we need to call the operation Keyword- + ‘<variations></variations>’ + ‘<locale></locale>’ + ‘</KeywordSearchRequest>’ + ‘</m: Nuqleo Nuqleo SearchRequest providing the data according to the KeywordSearchRequest>’; High-Performance Web 2.0 Ajax-Based Call the “KeywordSearchRequest” Web Service Print Publishing Tools for Everyone! operation. ws.callService(“Amazon”, “KeywordSearchRequest”, args); Create a globally collaborative , fully automated, high-performance Later in this article I’ll show you how to pass the on-line publishing environment that allows you to control and operation’s arguments as a JavaScript object instead streamline all users, tasks and processes to eliminate work of XML. Now the data from Amazon comes back and redundancies, delays, bottlenecks and ensure accountability. WebService.swf will get something like this: Nuqleo empowers you to increase productivity with the same number of resources, while creating new revenue streams, <SOAP-ENV:Envelope SOAP-ENV:encodingStyle=”http:// schemas.xmlsoap.org/soap/encoding/” xmlns:SOAP- resulting in significant ROI! Figure 3: ENV=”http://schemas.xmlsoap.org/soap/envelope/” xmlns:amazon=”http://soap.amazon.com” xmlns: xsi=”http://www.w3.org/1999/XMLSchema-instance” xmlns:SOAP-ENC=”http://schemas.xmlsoap.org/soap/ encoding/” xmlns:xsd=”http://www.w3.org/1999/ Nuqleo’s Web 2.0 Ajax-Based Tools XMLSchema”> – Global Collaboration: Users from around the world log into – Phonetic Search: Proprietary search algorithms can find text <SOAP-ENV:Body>-<namesp1099:KeywordSearchRequestResp the system via browser and collaborate on publications. even when exact spelling is unknown. onse xmlns:namesp1099=”http://soap.amazon.com”> – Publication Management: Through the flatplan manager, – Visual Search: Fast access to visual information that can not <return xsi:type=”amazon:ProductInfo”> publications are displayed, managed and updated in real-time via be captured by keywords. <TotalResults xsi:type=”xsd:string”>355</ browser-based interface. TotalResults> – Integrated Image Management: Speed up page production <TotalPages xsi:type=”xsd:string”>36</TotalPages> – User Administration: Sophisticated support for internal users with Nuqleo’s centralised picture and crop management, with <Details xsi:type=”SOAP-ENC:Array” SOAP-ENC: and external contributors (even those who are not allowed automatic image quality control and IPTC/XMP metadata access to the system). support. arrayType=”amazon:Details[10]”> <Details xsi:type=”amazon:Details”> – Web Editing: Comprehensive editing tools (including copy- – Localisation Management: Seamlessly manage localised <Url xsi:type=”xsd:string”>http://www.amazon.com/gp/ fitting and design modifications) accessed directly via browser. versions (alternate designs, visuals, etc.) for all local markets. product/0596101996%3ftag=D3HW0PG66IPLAM%26link_code= – Workflow Automation: Simple construction of very complex – Project Management: Automated project management tools sp1%26camp=2025%26dev-t=D3HW0PG66IPLAM</Url> automated workflow scenarios. that manage documents from start to finish. <Asin xsi:type=”xsd:string”>0596101996</Asin> Figure 4: <ProductName xsi:type=”xsd:string”>JavaScript: The 22 November 2007 AJAx.SYS-CoN.CoM www.quasar-tech.com Phone: +34 915 770 650 info@quasar-tech.com
  • Definitive Guide</ProductName> As you can see, there is 355 AJAX books that can be JavaScript, which in turn passes the data to ClearBI swf: The report variable above represents ClearBI.swf, which inter- <Catalog xsi:type=”xsd:string”>Book</Catalog> returned as 36 pages, and Amazon has returned the nally (in ActionScript) allowed JavaScript calling its function <Authors xsi:type=”SOAP-ENC:Array” SOAP-ENC: page number one as was requested in the argument var ws = com.farata.jsfx.WebServices(“MyWebService”); // a loadReport, which is mapped to ActionScript’s loadReport arrayType=”xsd:string[1]”> object. Parsing this XML will be automatically done hidden swf function. <Author xsi:type=”xsd:string”>David Flanagan</ for you by the WebService.swf component that will Author> turn it into an object for easy access via dot notation. Add a Web Service operation result listener. The next line ExternalInterface.addCallback(“loadReport”, loadReport); </Authors> maps the WebService.swf method serviceresult to JavaScript’s <ReleaseDate xsi:type=”xsd:string”>17 August, 2006</ A Mini-Tutorial on E4X, a Standardized function onJavaScriptResult that will receive the data from That’s all there is to it. End users can run and customize ReleaseDate> Processing of XML WebService.swf when available and will format it as JSON reports themselves. For example, their Web browser window <Manufacturer xsi:type=”xsd:string”>O’Reilly Media, Working with XML (SOAP)-based Web Services in objects. may look like Figure 4. The top portion of the screen is regular Inc.</Manufacturer> AJAX isn’t easy: each browser handles XML different- JavaScript while the report and its editor are rendered by Flash <ImageUrlSmall xsi:type=”xsd:string”>http://ec1. ly. But consuming Web Services with AJAX can be fun ws.addEventListener(“serviceresult”, onJavaScriptResult); Player 9. images-amazon.com/images/I/11G8BIrxn7L.jpg</ if you delegate XML processing to our WebService. var args = { ImageUrlSmall> swf component that engages E4X. KeywordSearchRequest: { Using a Faster Communication Protocol: OpenAMF <ImageUrlMedium xsi:type=”xsd:string”>http://ec1. In Figure 3 you’ll see how ActionScript 3 (we used it in keyword: “AJAX”, If you’re building your application in-house and it doesn’t images-amazon.com/images/I/21yLdMet2BL.jpg</ creating WebService.swf) can work with any XML source page: “1”, have to connect to someone else’s Web Service, you may be ImageUrlMedium> (i.e. SOAP) using familiar dot notation. This is an exam- mode: “books”, better off creating a Java-based data feed using faster com- <ImageUrlLarge xsi:type=”xsd:string”>http://ec1. ple from ActionScript documentation and will give you tag: “D3HW0PG66IPLAM”, munication protocol called OpenAMF. This open source imple- images-amazon.com/images/I/51OY5KP5ydL.jpg</ a feeling of the ease of dealing with XML in ActionScript type: “lite”, mentation of the AMF communication protocol performs ImageUrlLarge> (for a more detailed explanation of E4X go to http:// devtag: “D3HW0PG66IPLAM”, serialization of the server-side POJO into its ActionScript peer <ListPrice xsi:type=”xsd:string”>$49.99</ListPrice> livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/ sort: null, on the client (see Figure 5). This is how it goes: <Availability xsi:type=”xsd:string”>This item is common/html/wwhelp.htm?context=LiveDocs_Book_ variations: null, • Client: A Web browser with Flash Player 9 plug-in or currently not available.</Availability> Parts&file=13_Working_with_XML_169_03.html. locale: null ActiveX <UsedPrice xsi:type=”xsd:string”>$18.49</UsedPrice> The XML file on the left is processed by the } • Mid-tier: A servlet container with open source OpenAMF </Details> code on the right. The first three ActionScript trace }; (five jars), open source Flex SDK, ClearBI’s jars to support … statements demonstrate how you can access the ele- report compilation and hot deployment, JOTM, JTS, JDBC ments and attributes of this XML stored in the vari- Call Amazon’s “KeywordSearchRequest” Web Service oper- drivers able myXML. The second line has a filtering criteria ation. • Report persistence: ClearBI uses two database tables to in parentheses: @id==2. This line means “find me all store reports’ metadata (can be co-located with other data) XML elements named item, and print the content ws.Amazon.KeywordSearchRequest( args ); • Report publishing: Reports can be compiled into swf files of the element menuName for those that have the … and published on the Web attribute id equal to 2. Pretty loaded and elegant line, isn’t it? The JavaScript function receives the data arriving as Summary After that, the code snippet above creates a newI- JavaScript into a variable lastData. Proper integration of JavaScript and Flash Player’s compo- tem element and appends it to myXML, and then nents can enrich your AJAX application with powerful report- again uses dot notation to access XML elements and function onJavaScriptResult(ev) { ing capabilities offered by ClearBI (written in Adobe Flex). If attributes. lastData = ev.result.Details; you aren’t into reporting, just use the WebService.swf to com- this.removeEventListener(“serviceresult”, onJavaScriptRe- municate with SOAP Web Services. From SOAP to JavaScript and FlashPlayer sult); You can download the description of the API for the with ClearBI } JavaScript wrapper to WebService.swf at http://www.myflex. Figure 5: ClearBI is a commercial Web reporter original- org/demo/webservice_swf/doc/. The WebService.swf is located ly created for Flex/Java applications and worked Now we can pass the data from lastData to clearBI.swf for at http://www.myflex.org/demo/webservice_swf/WebService. only with server-side applications that had Adobe displaying and customizing the report. swf . LiveCycle Data Services, which implemented a fast The trial version of ClearBI 1.1 became available on communication protocol called AMF. But the newest Pass the Data to ClearBI from a JavaScript Array October 15, 2007 at http://www.myflex.org. version of ClearBI 1.1 can work with the data that In JavaScript, get a reference to the Flash Player object and The demo application that uses JavaScript, WebService.swf, comes in a form of JavaScript objects, a Web Service, call the function loadReport giving the report name (a tem- and ClearBI.swf is deployed at http://www.myflex.org/theri- or uses OpenAMF, an open source implementation plate customized by the user and stored in a database) and the abook/ClearBI.Ajax/main.html. It looks like Figure 6. of the AMF0 communication protocol. data itself: In the first three tabs you’ll be able to play with sending In this section I’ll go over the process of getting the var report XML and JavaScript requests to Amazon, and the last three tabs data from Amazon’s SOAP Web Service to JavaScript are supported by ClearBI (the name of the report is Amazon. and then to ClearBI. This is what has to be done after report = $plugin(“ClearBIPlayer”); // a helper function to KeywordSearchRequest. You might want to watch a short pre- the Web Service is initialized by WebService.swf. This return reporter’s id recorded demo that shows working with a sample Employees time we’ll use a JavaScript object as an argument to report.loadReport(reportName, lastData); database and using ClearBI editor for report customization. This the operation KeywordSearchRequest. demo is located at http://myflex.org/screencast/clearbi_ajax/ Pass a JavaScript object with retrieval args to a hid- The data exchange between JavaScript and ClearBI.swf is clearbi_ajax.html. It shows how end users can add grouping, Figure 6: den swf object, which will return the data back to supported internally by the ActionScript class ExternalInterface. modify styling, and apply formulas. n 24 November 2007 AJAx.SYS-CoN.CoM AJAx.SYS-CoN.CoM November 2007 2
  • To demonstrate these benefits, we had work and the server with unnecessary status update Feature approached SYS-CON Media with the idea of build- requests. Furthermore, polling inherently introduces ing a showcase application for its upcoming confer- latency tied to the frequency of the poll; the cost of Betting on Java for AJAX ence, AJAXWorld Conference & Expo, based on our that latency might not matter in some situations, by Brian Albers translation product. We agreed that a Texas Hold’em but there are quite a few applications where every poker game would be a great way to deliver in real- second counts. time to a conference audience. Unlike the standard Although Comet techniques have been in prac- Bringing established Java technologies to the real-time Web stock quote ticker demos, a poker game gives users a hands-on way to see their own actions reflected in tice for a while now, it is only recently that major application and Web servers have built-in support real-time across the screens of their eight competi- for Comet in ways that do not cripple scalability. tors, and potentially hundreds of viewers. Using our Servers such as Glassfish, Tomcat, and Jetty allow translation technology, it was feasible to quickly browsers to maintain Comet connections without E ach day as an AJAX developer seems to bring High Stakes Development build a poker application that would look great in dedicating a thread to each client. This was a key another helpful revelation: a new tool, a new To that end, my peers and I built technol- the browser, even if the coding was done via Java and requirement of our own poker game, as we needed gadget, a new way to reinvent the browser. ogy to bring real-time AJAX development to Java with our familiar tools. the ability for tens or hundreds of viewers to observe But even when I’m confronted with a breakthrough developers. Our core technology is the Chai vir- a game table without constantly slowing the server as big as Firebug – the brilliant debugging tool for tual machine that allows Java bytecode to be Comet Rising with update requests. Firefox – in the back of my mind I’m reminded translated down to the browser and run without When you need real-time, event-driven Web that the AJAX state-of-the-art is trailing behind the any plugins or setup. Other projects such as applications, the clear choice is to use the technique Reinventing the Java Message Service debugging tools that we’ve had in Java for years. the Google Web Toolkit (GWT), Java2Script, and broadly known as “Comet.” Using a Comet approach To keep each game fast and exciting, we needed With age comes maturity, and with Java’s maturity Script# take a similar translation approach. Even implies keeping a connection open between the to make sure that players moved within an allotted has come a wealth of development environments, though the focus differs, these projects share a server and each client. This allows for a “push” style time, and that no one was able to stall the game by field-tested frameworks, and a rich set of strongly goal of allowing developers to write AJAX applica- of notification, whereby the server can inform the pausing indefinitely. In other words, we needed to typed APIs. tions in their familiar development environment client of events asynchronously rather than waiting make sure that the game did not depend on the stan- and language, and let the framework or virtual for the client to poll for updates at regular intervals. dard request-response cycle, and that the server had machine generate the corresponding JavaScript. Polling – the predominant way of driving a real-time the power to force the game forward with or without Why does this approach work so well for AJAX Web client for the last few years – ties up the net- user participation. How can we bring the real-time development? • AJAX applications generally are impressive not for what they do, but for where they do it. As amazing as it has been to see mapping tools, photo browsers, and chat clients running in a browser, these applications have been running just fine as native or Java clients for many years. There are many more skilled Java and .NET developers across the world that can write such applications in their frameworks than there are skilled AJAX developers. Although an elite few have the skills required to craft AJAX applica- tions by hand, a much larger majority would love to apply their Java or .NET expertise to browser-based clients. • Using a translated JavaScript client rather than In my current company, we all share a back- a hand-coded file frees the runtime code from ground in enterprise Web development. Our primary the constraint of being human readable, thereby goal has always been to take the most innovative increasing the opportunity for optimizations. user interface technologies and massage them into • Similarly, server-side translation allows for a single a form that new programmers can feel comfortable source of truth that can target and adapt to the dif- with, no matter the underlying platform. Although ferences in browsers. Although client-side frame- I have significant experience in both Java and AJAX works can also do this, they can incur an overhead Brian Albers is vice president of research client development, I’m reluctant giving up the for executing through a runtime. and development at Kaazing Corp. For maturity of the former just to achieve the pervasive • Why partition your developers across tiers? If your 10 years he has developed and led user reach of the latter. server team already has the knowledge of your interface technology projects for the enter- Today, our goal is to bring the power of an event- communication protocols, let them work on both prise, and he has presented his findings at driven Web – one that breaks away from the request- ends of the pipeline. They can implement both the JavaOne and AJAXWorld conferences. response patterns ingrained over the last 10 years using the Java they already know, even if the client brian.albers@kaazing.com – to the largest possible development community. side is translated to JavaScript. 26 November 2007 AJAx.SYS-CoN.CoM
  • “AJAX applications other players can be broadcast to a public JMS Topic that all players and observers listen to, while the pri- However, the application development team gets the benefit of working against the strongly typed, yet speak to the shared back end by translating the Java JMS calls to our underlying Comet support. Both client generally are vate cards and player moves are distributed via a set simple, JMS standard. types and the server can work against the same Java of private JMS Queues between dealer and player. Object model. Cards, players, and tables run on both JMS Destinations can be either looked up by A Winning Combination tiers, but are defined and implemented once. Messages impressive well-known persistent names, or created with a tem- Translating JMS code to Comet may not be the can be strongly typed, with no need to drop down to porary scope. For instance, a site can create a series most obvious solution for real-time programming, text or XML. It’s a refreshing way to write a Web client. of poker tables that a user can choose to watch, but it comes with real benefits. Besides the transfer This is only one example of how an established not for what they each with unique names such as “HighStakes” or of knowledge from experienced Java EE program- Java API can be integrated into AJAX client develop- “Novice.” Accordingly, “HighStakes” and “Novice” mers, working directly against JMS APIs allows a ment. Due in no small part to Java’s head start, the would be the public names of the JMS topic to which multitude of existing back-end messages to extend pool of Java developers vastly outnumbers those do, but for where any client would attach. Then, any messages sent their reach into the client – and vice-versa – without with AJAX development experience. Bridging suc- to the corresponding “HighStakes” or “Novice” JMS forcing the client or server to undergo a mapping cessful Java APIs to an AJAX client is a great way to topics on the server would be immediately pushed transformation. While JMS poker applications may expand the pool of AJAX developers and also expand they do it.” to only those clients who were interested in them. Private messages are also supported by such a mapping. In JMS, there is the concept of a temporary not be ubiquitous, monitoring and business logic messages are. Allowing a real-time Web client to handle such messages opens up the possibility for the capabilities of your applications. Resources Destination, which is scoped to the duration of a Java Swing-based clients that talk natively to JMS to • Comet: http://en.wikipedia.org/wiki/Comet_ communication session. This provides a convenient be replaced with AJAX equivalents. Or, if coexistence (programming) way for clients and servers to attach and detach is preferred, an AJAX client can live alongside a Swing • Java Message Service: http://java.sun.com/prod- programming model of a Comet application to a short-term channels as necessary. If, for example, peer, as both will be able to communicate with the ucts/jms/ Java-to-JavaScript translation environment? there existed a well-known public JMS Queue named back-end business logic via JMS Destinations. • Firebug: http://www.getfirebug.com/ The natural solution for a real-time Java API “HighStakesSeatRequests” where observers could This was put to the test with our own poker applica- • AJAX in ActiveMQ: http://activemq.apache.org/ is one that is already well established in the Java send messages to attempt to sit and play at the tion, which was largely built and tested using a simple ajax.html Enterprise Edition space, having been included in HighStakes table, the corresponding client JMS code Swing client while the AJAX client was under develop- • Enterprise Comet: http://kaazing.com/collateral/ the standard for years: Java Message Service (JMS). might look something like this: ment. The AJAX poker application was then able to kaazing_overview.pdf n JMS is a standard set of APIs for sending messages asynchronously across distributed systems. The APIs ObjectMessage seatRequest = are supported across all Java EE application servers pokerSession.createObjectMessage(); and allow developers to share messages as plain text, maps, streams, or even full object instances. All the // ... while, the JMS servers and clients remain loosely // Fill in pertinent seat reqeuest information on coupled, with no necessary knowledge of each other // the seatRequest Find more support. beyond the shared message destinations to which // ... they send or receive predefined data types. JMS works on a publish/subscribe model, where Queue privatePlayerQueue = participants can either broadcast messages to any pokerSession.createTemporaryQueue(); listener inclined to hear them (via a “Topic”), or seatRequest.setJMSReplyTo(privatePlayerQueue); target them to a queue where there is a single con- Discover what the world’s most trusted provider of sumer (via a “Queue”). The Topics and Queues, pokerSession.send(seatRequest); digital map content can do for your LBS application. known collectively as “Destinations,” can be estab- lished by well-known names or created temporarily In JMS terms, the temporary queue’s name is not and discarded after use. Enterprise Java develop- important, and is usually a generated value such ers have been using JMS for years, and there is a as “xyz123”. But by creating it and setting it as the wealth of documentation and familiarity with its “replyTo” field, any receivers of this message – such Tele Atlas DeveloperLinkSM MultiNet™ APIs. Apache’s popular ActiveMQ messaging server as the server handling the seat request – can store FREE sample maps, prototyping tools, business Tele Atlas has completed the largest map update has already provided AJAX client libraries for bridg- that temporary Queue for future direct messages to planning support and technical and sales assistance. in history—resulting in the freshest, richest, most ing its JMS messages to the browser, although it is that client. Notably, the server/dealer can use this Register at http://developerlink.teleatlas.com. accurate digital map database ever built. limited to using text formats for its payloads. temporary queue to notify that client/player if his Enter promo code: AJAX07 Consider the poker game again: each player seat request was accepted or rejected. Securing that For more information call 1-800-331-7881 option “1” and observer needs to be able to see public moves channel is beyond the scope of this article, but it Tele Atlas LBS Innovators Series and events broadcast over the course of the game. goes without saying that security through channel Tele Atlas hosts contests and other events throughout On the other hand, those actually participating in name obscurity is not sufficient when critical data is the year to help you get more exposure for your company the game also need private dedicated channels by being transported! and application. Visit www.teleatlas.com/LBSseries which moves can be made and hidden values (i.e., Kaazing’s Enterprise Comet technology sup- for more information. www.teleatlas.com player cards) can be sent to them alone. The JMS API ports this API by mapping the JMS APIs to Comet accommodates this, as the moves of the dealer and transports and protocols such as Bayeux and JSON. 28 November 2007 AJAx.SYS-CoN.CoM AJAx.SYS-CoN.CoM November 2007 2
  • Enterprise Development Adapting to the Challenge Bringing AJAX into the Enterprise missing dependencies when they break the app at By Adam Breindel runtime. We’ll look at approaches to mitigating these Wrangling Platform Versions issues. It also doesn’t help that software teams using There are two basic approaches to dealing with scripts extensively as “duct tape and baling wire” version changes: controlling the version in use New challenges, new solutions may have developed scripting habits that are not where possible, and leveraging abstraction layers to suitable for production code. hide version differences. I recommend using both Next, we see that the languages are fundamen- techniques as much as possible. tally different from what enterprise developers typi- On the server, you have control of all of your cally use. JavaScript, for example, is at its core a library versions (including JavaScript that is served functional programming language, where functions, to run in the client), and many of your interpreter T hose startups have it easy. Okay, startups is critical, as is resilience in the face of restructur- with their closures, are the fundamental construct in versions (e.g., Ruby or Python on the server, but don’t have it easy where products, funding, ing and staff turnover, compliance with changing the language and serve to control scope boundaries. not the JavaScript or Flash runtime in the browser). customers, or revenue are concerned. But regulations, and adherence to business continuity JavaScript, and other scripting languages such as Think of the interpreter as a runtime library and when it comes to building slick AJAX applications, if planning rules. Ruby, are also dynamic. This means that significant consider deploying it together with your server app. you’re an enterprise developer, you have a lot more If you spend a good part of your career at a large parts of the program code may be generated at run- On the client, a key evaluation criterion for a to worry about than they do. This article discusses company, you may be the one paying the price in time based on external data or the branch path an JavaScript library should be its cross-browser, cross- the challenges to developing AJAX applications in the future for a poor technology design today. Think application takes. Metaprogramming – programs platform abstraction capabilities. Your AJAX toolkit the enterprise environment, how to adapt to handle about those utility scripts you write day-to-day: the writing themselves or other programs – is fairly com- should handle the differences between Safari and those challenges, as well as ways you can avoid idea of building and maintaining a mission-critical mon in these languages and, even if you don’t use Firefox, Mac OS and Windows, leaving you to focus some challenges altogether through your choice of business application with those kinds of scripting these techniques, you are likely to encounter librar- on core UI and business logic. Because of the rapid technologies. languages should make you nervous. ies that do so. evolution of AJAX toolkits, you may even want to Remember how easy Visual Basic was for those As we’ve said, enterprise applications are also consider a minimal abstraction layer of your own Key Differences Between Startup Develop- first apps in the early ’90s…and how difficult it less likely to be green-field projects. What does that to mediate between your code and the underlying ment and Enterprise Development became to modify and maintain those apps in pro- mean for AJAX development? toolkit, to ease potential toolkit changes. Let’s begin by asking, “Why do startup AJAX duction years later? And those data-access samples For one thing, test-driven-development tech- developers have a leg up on enterprise developers?” in the magazines look so easy…but the authors don’t niques, a cornerstone of building solid code with Working with Dynamic There are two reasons: know that your company’s “Customers” table is split dynamic platforms, become trickier. Since enter- Interpreted Languages 1. Startup applications are, by definition, new, or across two legacy databases and a mainframe. prise apps often span many systems, it is harder to A number of techniques make it easier to enjoy “green-field,” projects: there are no old internal As an enterprise developer, you have different assemble a full test system that can be manipulated success with your dynamic-language projects. databases, code, infrastructure, business rules, and longer-term concerns. by automated testing. The data in the test systems Testing at all levels, and “Test-Driven Development,” or data center rules to deal with. In this regard, may not be complete, or may be encumbered by are probably familiar. But adding some extra juice to building a new app is playing tennis without a net, Issues Facing Enterprise Development privacy issues. The test systems may be formally a testing model will really pay off: compared to the challenging game of enterprise with AJAX Technologies controlled or resource constrained so that con- 1. Code coverage analysis – knowing exactly how development. A number of characteristics of AJAX technologies tinuous testing may not be allowed. Proper testing much of your program and which parts of it are 2. The life cycle of startup code is measured in weeks create tricky – or at least thought-provoking ques- of gateways from partner companies may be hard or being exercised by your test suite – is critical. or months, rather than years. Large parts of the tions – when we bring them into the enterprise. impossible. And, since real-world legacy data is not Testing without coverage analysis can give you a application are rebuilt on a regular basis to add Some of the popular languages and runtime all clean and up to date, you need test data sets that false sense of security, or cause you to eat up time new features. If the company does so well that options are young and still evolving quickly. There cover these dirty or incomplete-record scenarios as fixing the wrong bugs. the code is running five years hence and starts are hundreds of AJAX toolkits in use today. Only a well. 2. Expand your test coverage using aggressive testing getting crufty or unmaintainable, that means the few of these will still be in wide use in several years. If your application needs to access existing non- mechanisms that take advantage of dynamic run- early developers are doing pretty well. So the early Even the most popular libraries are adding features HTTP-based network resources, you will need to time features. For example, Kevin Clark’s Heckle developers don’t worry so much about the long and fixing problems at a prodigious pace. While this do some special planning. Pure AJAX is restricted library1 for Ruby will automatically mutate your term. is a great sign of their vitality, it means there’s a new to HTTP; if you need another TCP protocol, or Ruby code in critical ways, in order to make sure version every few months. UDP you’ll have to plan on deploying to a plug-in , that if the code is altered, your tests take notice In enterprise scenarios, few projects are fully There is also reason for concern over running environment in the browser or using a proxy on the and fail. If the code changes (e.g., a branch condi- Adam Breindel is a lead engineer at “green-field.” If a new project is valuable enough to interpreted scripts as production software, whether server side. tion is reversed, with > becoming <=) and your IndustryNext, responsible for architecture execute, it’s gaining some of that value from exist- in the browser or on the server. While scripting envi- The overhead of deploying additional server tests still pass, then something’s wrong. and delivery of RIAs. An early adopter of ing business data and systems. Examples include ronments are used successfully – and power some of applications just to serve as proxies to other systems AJAX, he built an AJAX media library/player projects to provide new access to existing customer the most successful applications on the Web today (a common AJAX technique) could be considerable Although it may sound like an exercise in red for startup Mediabolic in 2000. Adam has records, or a better way to process an existing trans- – transitioning from a traditional code-compile-link- in the enterprise. And, finally, your data access layer tape, write a style guide for your team’s code. Discuss also tackled integration and mobile chal- action. deploy-test methodology may be challenging for needs to be both compatible with your legacy sche- things like variable and method names, and rules for lenges, enabling web and mobile access to In addition, enterprise code will be around for your software organization. mas (something not handled equally well by all of language features to embrace or to avoid. Without United Airlines’ 40-year-old mainframe. a long time – typically 2–5 years and occasionally Because there is no compile/link step, you’ll only the popular frameworks) and compatible with the a compiler to help catch mistakes, it’s really easy to abreindel@industrynext.com as long as decades. Over that time, maintainability find problems when your code hits them; you’ll find rules and leanings of your DBAs. assign a value to one variable and try to read it from 30 November 2007 AJAx.SYS-CoN.CoM AJAx.SYS-CoN.CoM November 2007 31
  • another – maybe in a different module of code – and of solutions as an extra tier in the architecture. ogy, Script# may be an effective way to leverage that deploy rock-solid apps via script, to mechanisms for automatic type conversions only make this trickier. One of the advantages of a proxy app is that it can investment to create browser applications. It’s also avoiding script altogether and using the company’s The style guide can help you prevent similar names. leverage existing code and platform knowledge in your worth noting that while Mr. Kothari is an architect at existing technical know-how instead. Then use a configurable lint-type tool (such as company. If, for example, the “old” Website used Java Microsoft, Script# is thus far a personal project and As long as we think carefully about the issues – espe- Douglas Crockford’s JSLint2 for JavaScript) to check to access a particular data store, then it is straightfor- not part of a Microsoft offering. cially how they work at our company – rather than grab- your code against your style guide. Make this step ward to create a Java Web service that accomplishes Another approach is to employ tools that use bing onto the latest trend for its own sake, we can not only part of your testing scheme. the same access and offers those records as XML or declarative markup (in the form of tags) to generate be successful, but also contribute to enterprise best prac- For some rules, consider writing your own testing JSON for the new AJAX application. JavaScript. Enterprise developers, who are often start- tices for AJAX, which are just beginning to be invented. tools. Suppose you want to find all symbol pairs in ing from a Java-based or .NET-based Web application your code that differ by only one or two characters, Alternate Approaches: Side-Stepping AJAX stack, may already have ready-to-run tag libraries Resources/Notes suspecting you might find some bugs this way. If Challenges available to AJAX-enable their pages. ASP .Net AJAX8 1. Kevin Clark’s Heckle library: http://glu.ttono.us/ your team is ramping up on a new language, build- In addition to writing JavaScript to build AJAX cli- as well as JSF (JavaServer Faces) Dynamic Faces9 are articles/2006/12/19/tormenting-your-tests-with- ing a script to produce this report is a fun and practi- ents, there are a variety of other approaches to pro- just two examples of libraries that allow declarative heckle cal exercise in language reflection. ducing AJAX and AJAX-like rich Internet applications markup to generate AJAX capabilities in a Web page. 2. Douglas Crockford’s JSLint: http://www.jslint. In conjunction with testing, leverage your SCM (soft- (RIAs). Some of these alternatives are noteworthy for This approach is not as flexible as some other com/lint.html ware configuration management, or source control) enterprise developers because they can obviate the ways to create JavaScript; however, it is a quick, easy 3. Subversion version control system: http://subver- system to help keep dependencies together. Bring all need to write script applications directly. In some way to add some AJAX functionality within a tech- sion.tigris.org/ of your scripts inside the SCM system, even if that was cases they can make it easy to take advantage of a nology stack that is already adopted at your firm. 4. Eval in Mozilla-based browsers: http://developer. not common practice before. Tag or annotate versions company’s existing codebase and comfort using a mozilla.org/en/docs/Core_JavaScript_1.5_Guide: of files that have been tested to work together. If your particular platform (not to mention those critical Targeting Browser Plug-Ins: Bring Your Predefined_Functions:eval_Function enterprise SCM system is unwieldy, consider bringing in support contracts). Own Language • In Internet Explorer: http://msdn2.micro- a lighter-weight source control system, like Subversion3, The alternate approaches break down into two While browser plug-in applications can have soft.com/en-us/library/12k71sw7.aspx for your day-to-day builds, while still committing code groups: their own issues (vendor control, slow startup time, • In PHP: http://us2.php.net/eval to the company’s official repository regularly. 1. Building browser-native JavaScript applications less-than-100% install base), they represent the most • In Ruby: http://www.ruby-doc.org/core/ Another addition to your toolset is the axiom without actually writing the JavaScript direct route for enterprise RIA deployment without classes/Kernel.html#M005947 that just because a language supports a particular 2. Building applications that run in browser plug- building a JavaScript application. • In Python: http://docs.python.org/lib/built- construct doesn’t mean it’s a good idea to use that ins (Flash, Java, etc.) rather than the browser’s Nearly all of the widely used Web app development lan- in-funcs.html construct. A modest number of programming con- JavaScript engine guages are present in plug-ins today, and more are coming: 5. By concrete proxy, we mean objects with concrete structs can be the source of serious problems, and the Java plug-in can, of course, run Java applications, but methods or properties, rather than dynamically the easiest way to rein in the trouble is to resist the Compiled or Generated JavaScript: it can also run JavaFX scripts, Python (via Jython), and dispatched calls. Examples of the latter include temptation to use those constructs in the first place. Building AJAX Clients Without Coding even Ruby (via JRuby)10. Silverlight 1.0 requires JavaScript, dynamic proxies built on Ruby’s method_miss- At the top of the list is the eval statement4, which JavaScript but the upcoming 1.1 release of this Microsoft plug-in ing, ActionScript’s flash.utils.Proxy, etc.) takes string data and passes it to the interpreter to Outside of writing your own script or using adds support for .NET languages such as C#, Python 6. Google Web Toolkit: http://code.google.com/ run as code. At the least, it’s worth auditing your JavaScript libraries, there are a variety of other (IronPython), Ruby (IronRuby), Visual Basic, and others11. webtoolkit/ code and making sure you know each and every ways to end up with JavaScript apps. These other Flash Player versions 9 and up support ActionScript 7. Nikhil Kothari’s Script#: http://www.nikhilk.net/ place eval is called and why (remember, each eval approaches fall into two groups of their own: 3. ActionScript 3, while less familiar to enterprise ScriptSharpIntro.aspx call can potentially hide arbitrarily many other eval 1. Systems that let you code in another imperative coders than C# or Java, is an implementation of 8. ASP .Net AJAX: http://www.asp.net/ajax/ calls, depending on what is passed to it). language and then transform that to JavaScript ECMAScript 412. As such, it brings classes, static typing, 9. JSF Dynamic Faces: https://jsf-extensions.dev. Some valuable dynamic programming patterns 2. Systems that let you declaratively mark up the AJAX packages, namespaces, and other familiar elements java.net/nonav/mvn/gettingstarted-ajax.html can be used, but separated out from the core run- effects you’d like, and then generate script to do it that make an easy on-ramp for C# or Java developers. 10. Jython applets: http://www.jython.org/applets/ time app by design so that they’re easier to analyze Adobe’s Flex development tool adds another layer of index.html and test before the application is run. Examples The Google Web Toolkit (GWT) is the most influ- familiarity, since it is built on the Eclipse IDE used by • JRuby applets are not mainstream-practi- include scripts to generate a set of types, such as ential library in the former group6. GWT allows you many enterprise developers already13. cal today, but will be soon: http://head- proxies for accessing remote resources (databases or to leverage your company’s existing investment in Though plug-in based RIAs are not strictly AJAX, ius.blogspot.com/2006/11/ruby-for-web- Web services). Sacrificing full dynamism by running Java development by building both your browser in many cases they meet or exceed enterprise and check.html a “generate” script ahead of time, which builds a client and your Web services using standard Java. customer requirements, while bringing traditional • JavaFX applications are typically deployed as concrete proxy5 that can later be used at runtime, is When you need to pass data between tiers, you do so languages and powerful development capabilities Java Web Start apps (running outside of the a reasonable compromise. using plain old Java objects (POJOs). At build time, such as complete control over graphics and net- browser), but can run in an applet as well: GWT compiles the client-side Java application into working operations. http://www.reportmill.com/jfx/gallery/ Working with Legacy Infrastructure and optimized JavaScript, and handles marshaling data 11. Microsoft GM Scott Guthrie on Silverlight 1.0 and 1.1 Databases between the server and the client. Conclusion language support: http://weblogs.asp.net/scott- In a pure AJAX scenario, a dedicated server-side A .NET-based alternative to GWT is Nikhil Kothari’s Enterprise development faces challenges that gu/archive/2007/09/04/silverlight-1-0-released- proxy is a practical solution to both network issues Script#7. Similar to GWT, Script# translates C# code to make the transition to AJAX trickier than it is for a and-silverlight-for-linux-announced.aspx (access to various network resources, unusual pro- JavaScript. Unlike GWT, though, Script# attempts to startup. Nonetheless, there are a variety of ways to 12. ActionScript 3: http://www.adobe.com/devnet/ tocols, etc.) and data access. Although, as mentioned create human-readable, human-editable JavaScript, address these challenges. actionscript/articles/actionscript3_overview.html earlier, running an additional proxy app can itself rather than code optimized for speed and size. If your Solutions range from improvements in develop- 13. Adobe Flex: http://www.adobe.com/products/ involve some enterprise red tape, it opens up a world firm has a large investment in C# and .NET technol- ment and testing processes, which make it easier to flex/ n 32 November 2007 AJAx.SYS-CoN.CoM AJAx.SYS-CoN.CoM November 2007 33