All about AJAX

Protagonize: Choose your own Web 2.0 Adventure

2008-01-03T11:16:00.000-08:00

Nick Bouton has released Protagonize, an online writers’ community dedicated to the (nearly) lost art of the adventure, a type of collaborative fiction. Once an author writes a story, others can post branches to that story in different directions. We chatted with Nick about the new site: What was your inspiration? Early forms of this on the web date back over a decade, when Snoot.com popularized a site called “Choose Your Own Schizophrenia”, an collaborative fiction site popular in the mid-to-late ’90s. Of course, this all dates back to the old Choose Your Own Adventure™ series that started back in 1979 and ran until 1998, published by Bantam Books. I developed Protagonize as an attempt to modernize the collaborative creative writing arena a bit and inject a little Web 2.0 love to produce a better interface. So far, so good. How did you use Ajax? The site uses the Yahoo! User Interface (YUI) library quite extensively. Here’s a brief overview of the features that use AJAX calls (thus far — still adding more): Commenting (add/delete)Add & remove favourites & page markers (like a bookshelf)Story ratingsModal dialogs (login)Send to a friendContact authorReport an item All of the AJAX calls I’ve written return JSON objects as results, so the transactions are quite lightweight. We also use JavaScript pretty heavily throughout the rest of the site — for example, branch previewing is all JS, and the YUI TabView control is used for managing your favourites / page markers / top rated listings; the lists are each loaded once and reformatted into different sorted views via JS. The site also uses FCKEditor for content editing, which is a pretty JS-heavy component on its own. What features are you proud of? The ease of use of the interface. The TabViews were a lot of work to get working nicely and I’m pretty happy with those, too. My AJAX calls are pretty snappy (particularly managing your favourites and page markers), and I really liked using the YUI Animation effects to do fade-ins and fade-outs when showing/hiding dialogs and deleting items. Makes the whole app feel nice and smooth.

The toughest parts were probably securing the AJAX/JSON calls and dealing with user input validation gracefully (I can still work on that a bit — not very happy with the built-in ASP.NET client-side validation scripts). I’ve also had some minor layout problems with smaller-market
browsers (specifically Opera) that are a pain in butt to track down. I’d also like to make user profiles feel a bit more personal; they’re a little cold right now without any way to put in your own image, but I think the profile blurb and quote helps people customize it a bit so far. Future plans? Future plans - the main large feature I’m I’m going to be adding in the next month or two is user-created and controlled group functionality. Groups will be either be open or closed membership, where closed groups would require an invitation and optionally not be displayed on the front end of the site (i.e. public/private), and open groups would allow people to join in at will. That way we could cater to your usage, private & closed groups, and allow others to use the feature in a different way, maybe for close circles of friends who don’t want other people participating in their stories. Nick has some more cool projects coming over at Taunt Media too.

JavaScript Benchmarks

2007-12-22T11:09:00.001-08:00

Can JavaScript performance become a big selling point for browser acceptance? That's what Jeff Atwood is speculating as he put several browsers through the WebKit SunSpider JavaScript Benchmark. The tests evaluate the performance of a browser's implementation of JS language only and claims to be a real world, balanced and statistically sound testing suite.

Jeff put IE 7, Firefox 2, Opera 9.5 & Safari 3.0.4 through the benchmark to determine who had the best performance.

Image from Jeff Atwood's posting.

What surprised me here is that Firefox is substantially slower than IE, once you factor out that wildly anomalous string result. I had to use a beta version of Opera to get something other than invalid (NaN) results for this benchmark, which coincidentally summarizes my opinion of Opera. Great when it works! I expected Opera to do well; it was handily winning JavaScript benchmarks way back in 2005. The new kid on the block, Safari, shows extremely well particularly considering that it is running outside its native OS X environment. Kudos to Apple. Well, except for that whole font thing.

Slide and Flektor

2007-05-11T05:23:00.000-07:00

The news earlier this week that MySpace is acquiring Photobucket for up to $300 million highlights the importance of the widget space in general, and photo/video sharing widgets in particular. Competitors like Slide and RockYou allow users to create photo slide shows with various effects and transitions, and then embed those slide shows onto MySpace pages and other profiles. These services are growing rapidly. Newcomer Flektor wants to carve out a piece of this market for itself, and we think they have to tools to compete with these more established startups.

Slide’s most recent financing, rumored to be in the $20 million range, is a reflection of this growth. According to Hitwise, they have grown by more than 2,000% in the last year. Slide tells us that they are delivering more than 150 million daily slide show views and that more than 200,000 new slides shows are created daily (a press release will be issued later today).

The new kid on the slide show block is Flektor. It just recently came out of beta and has few users so far, but we’re hearing they are getting a lot of attention from potential acquirors. Flektor’s founders, Jason Rubin and Andy Gavin, previously co-founded game developer Naughty Dog (Crash Bandicoot and Jak Daxter), which was acquired by Sony Computer Entertainment in 2000. These guys are experts in creating attractive user interfaces, and Flektor is a generation ahead of Slide and RockYou in ease and flexibility in creating slide shows and related products.Like Photobucket’s recent offering, Flektor allows users to create slide shows using video, photos, text and effects/transitions, something Slide and RockYou have yet to release (Slide and RockYou also don’t do effects, which are like Photoshop filters - users eat this stuff up). In our testing we also found the Flektor creation wizard to be far easier to use than the current Slide and RockYou offerings. Click on the screen shot for a larger view. Slide and RockYou have valuations that prohibit speculative acquisitions. Flektor is brand new and doesn’t have the capitalization complications of the older startups. My bet is they may be acquired this year by one of the social networks, perhaps one of the up and comers looking for as many tools as possible to compete with MySpace.

Automatic testing of Ajax from Java

2007-05-11T05:17:00.000-07:00

Ed Burns (of Sun and the JSF expert group) has created an automated testing framework for Ajax in Java called MCP.

This framework stems from an old, old Mozilla project called the Mozilla Web Client started in 1999 as a part of the Sun/AOL/Netscape alliance. The ambitious misson statement of the project is:

The webclient project aims to provide the premier browser-neutral Java API that enables generic web browsing capability. This capability includes, but is not limited to: web content rendering, navigation, a history mechanism, and progress notification. The actual capabilities implemented depend on the underlying browser implementation.

You can tie unit tests into browser ajax events by using an AjaxListener and getting access to items such as the responseText/responseXML/HTTP headers, and more.

Zimbra Desktop

2007-05-11T05:10:00.000-07:00

Zimbra has had a local proxy solution for a long time, so it only made sense that they would innovate quickly to come up with Zimbra Desktop:

Zimbra Desktop is the next generation leap forward for Web 2.0 applications- now you can have Zimbra's Ajax-based collaboration experience online and offline. That means when you are out of the office without a connection (say, in a plane, train, or automobile), you can keep working without missing a beat. Write email, add new appointments, edit documents and when you re-connect changes will be automatically synced to the Zimbra Server.

We talked to Kevin Henrikson of Zimbra and he kindly answered some questions:

Q. Not all offline is equal. What is Zimbra's solution, and how does it compare to Apollo, Slingshot, Firefox...

Zimbra has used a variety of off the shelf open source technologies to provide our offline solution. Jetty(http support), Derby (SQL support), Lucene (full-text indexing), etc. The choice of these components was for several reasons. They can be embedded, Java based(our tech of choice), made reuse of our current code easy, ability to support extremely large data sets, and ability to be optimized for heavy email/collaboration work loads. The key difference is large datasets and the ways in which we need to to access that data with a mix of structural (SQL), full-text (search) and object (blob) patterns. Most other offline solutions take a file or object based storage API but for Zimbra we need to be more flexible.

Summary of ways in which Zimbra Desktop's solution differ's from apollo/slingshot/firefox/dojo:

Released and publicly available today(although in alpha)
100% Open Source and based on open protocols/technology
Cross platform including Mac/Linux/Win32
Designed for very large datasets (sub-second search responses on multi-GB mailboxes)
Reuses Zimbra AJAX web UI and SOAP/JSON based API
Requires a local client install(some of the above may not)
Cross browser (Safari/IE/Firefox)
Java Based vs Rails (Slingshot) vs Flex/Flash (Apollo) vs Browser specific (Firefox)

What are the challenges for a developer to create offline capable applications?

Some questions/challenges when taking a webapp offline:

Do you take all your features and data offline?
What browsers/platforms will you support?
Data integrity now that an offline copy can become the master.
Conflict resolution and change mgmt in multi-user environments/applications.
End user desktop support. Something many web app developers take for granted.

How important is offline to your customers?

Very important. In fact this was a major driver. People have asked for a Zimbra offline solution and in particular wanted the same interface they'd fell in love with when working online. Countless number of times we've heard customers and our community and ask to keep the Zimbra AJAX interface when away from home and a network connection. The pain they felt when forced to use Outlook, Apple Mail, Thunderbird, or some other fat client when traveling made them want a Zimbra like interface and feature set.

Should the average Joe start trying to implement offline, or should we be waiting for the new standards to be implemented and such?

It depends. Do you users need it? Are they asking for it? Is the data your app needs offline access to small and simple? Applications like Instant Messaging don't make sense to take offline. On the flip side applications where offline editing, composing and creating are common may have reasons or need for an offline solution today. For Zimbra we heard the need frequently. Other applications may not have that same pressure and can wait until standards are written and toolkits like Dojo stabilize and become popular making the hard things easy for the average web developer. Dojo in particular is something we are watching with great interest. Brad Neuberg has been looking at this issue for quite sometime. First with AMASS (flash backed web storage), then Dojo Storage (pluggable storage toolkit) and more recently the Dojo Offline Toolkit(complete offline framework). It's 100% open source, cross platform and cross browser. Doesn't quite meet the needs of an application like Zimbra but will help a large number of applications on the web today. Those apps should be able to create an offline solution rather quickly when starting with the Dojo Toolkit. In particular we like the way he's handled online/offline detection and the automatic switch between.

InfiView

2007-05-11T05:05:00.000-07:00

InfiView is a mapping development tool that empowers engineers to build infinite-sized Web 2.0 mind maps, network topologies, organization charts, LDAP tools and technical diagrams.

InfiView uses Ajax technology and its own unique dynamic memory management to enable developers to systematically create graphical web applications using any amount of data (from very small all the way to infinite). With InfiView-built web-applications, end-users seamlessly interact (pan, zoom, right-click for actions…) with all types of graphical data - such as network topologies, DNA sequences or genealogy charts - oblivious to the vast amounts of data available.

100% built in Bindows (www.bindows.net), InfiView is built on top of the Bindows framework which is back-end/server agnostic, and provides best-in-industry support for section-508 accessibility compliance, internationalization and localization.

Iris

2007-05-11T05:01:00.000-07:00

Last week I got to see Iris, a Flickr manager that uses Java applets and Ajax together to give enhanced features such as:

Native desktop integration (drag and drop works, full screen)
Rich media: OpenGL for 3D graphics (hardware accelerated), OpenAL for spatialized audio, Java Media codecs

Jasper Potts, a Sun developer, explains Iris, and points us to a video of the product.

There are some really nice features here, although having to click through three "trusted" dialogs is a pain. Also, note that you need Java 6 installed to see the glory.

The Swing team had an interesting time delving into the CSS world, and aren't fans of it for layout. That being said, they would love to be able to style Swing components in a simple way, and our own Ben has a solution to this problem.

Make slideshows with Ajax

2007-05-11T05:00:00.001-07:00

I recently stumbled upon Ajax-S, which is a short for AJAX-Slides. AJAX-S uses an XML format for the actual data which is being presented and XSLT to transform it into it’s final presentational form in order to provide strict separation of content and presentation. Now the best part is, it is available for free download and hence will be helpful for the developer minds.

The idea came to me because I wanted a lightweight slideshow based on HTML, CSS and JavaScript, but I also wanted to separate the data of each page from the actual code that presents it. Therefore, I decided to move the data into an XML file and then use AJAX to retrieve it. The name AJAX-S is short for AJAX-Slides (or Asynchronous JavaScript and XML Slides, if you want to).

After the recent release it supports incremental rendering, non-JavaScript users and also offers a printable version and fixed many other bugs.

ActiveScaffold

2007-05-11T04:56:00.000-07:00

Richard White has created another Rails Ajax Scaffolding solution with the ActiveScaffold plugin:

ActiveScaffold provides you with a wealth of dynamically created goodness:

An AJAXified table interface for creating, updating, and deleting objects
Automatic handling of ActiveRecord associations
Sorting, Search and Pagination
Graceful JavaScript degradation
RESTful API support (XML/YAML/JSON) baked in
Sexy CSS styling and theming support
More extension points than you can shake a stick at
Guaranteed to work on Firefox 1+, IE 6+ and Safari 2+
Released under the MIT License, the same one as Rails itself, so you can use it freely in your commercial applications.