Raible Designs

What's the best Java Hosting Solution?

A friend recently asked me who I'd recommend for a Java hosting provider. Since I get asked this question every-so-often, it seemed appropriate to post my answer here.

1. KGB Internet - I use KGB for this site. I have my own JVM and have full control over what I want to install. I can control Tomcat versions and upgrade as needed. I don't know if I'd recommend him for a business site as he can take up to 12 hours to respond to requests.
2. Kattare - These guys will give you your own Tomcat instance and seem to have reasonable prices. They do seem to take quite some time to respond to requests (24-48 hours). I have a free instance that I use for a non-profit, so that could be the reason.
3. Contegix - These guys are far-and-away the best company for Java-based hosting. They're not cheap though. However, they have the best customer service in the business - often responding to e-mails in less than a minute.

Do you agree with these recommendations? If not, who do you recommend for Java hosting and why?

Ajax: The State of the Art with Dion and Ben

This morning, I added Dion and Ben's talk titled Ajax: The State of the Art. Below are my notes from the event.

Ajax started out as a bunch of hacks. It showed that we could take our web interfaces and do a lot more with them. A hack isn't necessarily a bad thing. Often, they turn into something much more elegant over time. The new browsers have many amazing capabilities that we haven't taken advantage of yet. We've seen discussions on Ajax go from how to do XHR to frameworks and how rich and mature they are. Dojo is great for Enterprise Development (packing system, namespaces). jQuery is well-suited for lightweight developers (PHP). Prototype is fantastic for people who do a lot of JavaScript development and take it very seriously.

Today's Ajax landscape is mature, really rich, and really exciting. Today, Dion and Ben are going to talk about technologies they're really excited about for the future.

Canvas
The building blocks of the web are text, boxes and images. With canvas, it really makes a lot more things possible. You can do bitmap rendering and image manipulation. They're showing a slide with Doom and Mario Kart running. Canvas 3D does true 3D rendering. Firefox and Opera have done prototypes of this. Can you do canvas-type things today in a browser? Yes, if you use Flash or Curl. Dion and Ben are excited about canvas over plugins for the following reasons:

• No start-up delay
• Available on mobile devices today
• Rendering fidelity with browser (especially important for typography)
• No bridges necessary (no marshalling/unmarshalling)
• Not a plug-in

The <canvas> tag originally came from Apple's Dashboard. Dashboard's programming model was in HTML and JavaScript. Dashboard is using WebKit under the covers. Today, canvas support exists in every major browser except for IE. The good news is there are Flash and Silverlight bridges to add support to IE. There's also an ActiveX component that wraps the Firefox implementation and allows it to run in IE.

SVG
Dion and Ben aren't that excited about SVG because it's such a huge spec. We've been struggling with the HTML standard for the last 10 years and the thought of another huge spec for the next 10 years isn't that appealing.

Fast JavaScript
Almost all major browsers have a Fast JavaScript implementation. Chrome has V8, Safari has SquirrelFish Extreme, Firefox has TraceMonkey and Opera has Carakan. This is exciting because of industry trends and how companies are trying to reduce computation cycles in data centers. The more computing that can be put on the client, the better. IE doesn't have anything, but Dion and Ben believe they are working on something.

Web Workers
Interface latency is awful for applications. Jakob Nielsen once said:

0.1 second is about the limit for having the user feel that the system is reacting instantaneously. 1.0 second is about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay.

Anything that takes longer than a tenth of a second should be pushed to a background thread. Unfortunately, there are no threads in the web. Maybe we can add threads to JavaScript? Brendan Eich has said that "Threads suck" and there's very little chance for threads getting into JavaScript. Gears brought Worker Pools and this is going into HTML 5 as Web Workers. You could also use Java applets to do this. With the latest Java Plugin, many of applets' long-standing issues have been solved.

Desktop Integration
The ability to build desktop apps as web apps is very exciting. There's a few technologies that demonstrate this: Fluid, Mozilla Prism, Adobe AIR, Appcelerator Titanium and Gears. The Palm Pre demonstrates the logical extension of this. The Palm Pre uses the web stack as its developer SDK. It's very cool that web developers don't have to learn anything new to become a Palm developer. Desktop integration is exciting especially if we can access desktop applications like email and address book.

The Ajax frameworks that are out there have done a lot to make web development simpler. However, there's still a lot of pain with CSS and cross-browser issues. What if you took canvas and combined it with a sophisticated grid-based layout in JavaScript?

There's a lot of platforms out there: Microsoft Silverlight, Adobe Flash, Apple Cocoa and Sun's JavaFX. The web often isn't considered a platform. Dion and Ben believe there should be an Open Web Platform. The problem right now is there is no central location to find out how to get stuff done. You have to search and find resources from many different locations. Mozilla is putting it's resources into creating an Open Web Platform. This site will consist of 4 different areas:

• Home
• Documentation (for different frameworks, browsers, quirks)
• Dashboard (state of the open web)
• Roadmap (what's going on)

This is not just Mozilla, it's very much a community effort. This is something that Ben and Dion have been working on. But there's something else they've been working on too. They've been talking about all these cool things, but what about an interesting application to test all these technologies?

Bespin
As they looked at code editors, most of them provide awful user experiences. Bespin is the Editor of Your Dreams and contains the following features:

• Accessible from anywhere - any device in any location
• Simple to use, like Textmate (not heavyweight like Eclipse) - an editor, not an IDE
• Wicked Fast - performance, performance, performance
• Rock-solid real-time collaboration, like SubEthaEdit - it just works
• Integrated command-line, like vi - Fun like Quicksilver, social like Ubiquity
• "Self-hosted" environment, like Emacs - For extreme extensibility, but with JavaScript!

For viewing files, they couldn't bring themselves to use a tree. Instead, they developed a file-browsing interface that looks very much like Apple's Finder. Personally, I like Finder, but wish it had Windows Explorer's path bar that allows you to simply type in the path without mouse clicks. Back to the command line. They've done a lot to make things more discoverable so users can easily find the power of the editor.

Bespin could be used to engage developers more with open source projects. Checking out projects, modifying code and creating patches can be a real pain. Bespin could be used to interface with open source projects in the cloud. You could login, modify code and easily patch/build with the click of a button. One other thing they want to do is to have the server do code-analysis as you're developing.

Is it OK to love a software tool? You must love your software tools. What we do as Software Developers is one of the most difficult jobs on the planet. Programmers, like poets, start with a blank slate and create something from nothing. If you don't love your tools, you'll start resenting what you do. If you don't love your tools, it shows in your work. -- Dave Thomas at RubyConf08

Thunderhead
A GUI Toolkit written with canvas and JavaScript. Allows you to do layouts with very little thought. It's a lab experiment that's in progress, stay tuned for more information.

All users care about is the user interface. Dion and Ben believe there's a key to creating compelling user experiences. It all has to do with managing expectations. It's not that different from how you manage relationships in your life. Expectations for movies and games have changes drastically over the years. What used to be the web (animated gifs and awful web pages) has also changed drastically (video of Apple's online store). What was cool with MapQuest got changed drastically with Google Maps. What we have today isn't the end of the game - expectations will continue to change. However, users have different expectations for software.

Alan Cooper has done some interesting work in this area. The software designer needs to focus in on a user's goals. There are basic things you can apply to all users, for instance "sex sells". An example of this is Delicious Library. This application allows you to keep track of things in your home such as books, movies, music and games. They made $500K in 3 months and made $54K the first day, with no advertising.

The quality of any software is determined by the interaction. If the interaction isn't good, it will poison the entire experience. Donald Norman has a good quote: "Attractive things work better". In society, this is often called "Dress for Success".

The Open Web is hear to stay because it has:

• An Easy Programming Model
• Easy Remoting
• Extensive Customization Vectors (e.g. GreaseMonkey)
• Easy Deployment
• Great Widgets
• Great Visual Effects
• Great Mobile Story
• Desktop Integration
• State-of-the-Art Plug-ins

Bespin is a tech preview that they hope to release next week. Thunderhead will be released at the same time.

Conclusion
This was a great talk and easily the most inspiring of the conference. Dion and Ben always do a great job and the sexiness of their presentation made it all the more appealing.

Changes in the Languages of the Web with Dan Connolly

Web Directions is held in Australia and Japan and now the US. A few months ago, they were a bit hesitant about doing it in Denver in the middle of winter. However, they've discovered our best-kept secret: it's beautiful and sunny all week. People are attending this conference from all around the world.

Dan Connolly is the keynote speaker. He's played some very important roles, such as Chairmain of the HTML Working Group during HTML 4. He's also a research scientist at the Computer Science and Artificial Intelligence Laboratory at MIT and a member of the technical staff at the W3C.

Dan's talk is titled Changes in the Languages of the Web and you can view it online at http://www.w3.org/2009/Talks/02wdn/slides.

Web Languages are like languages of the world. Like programming languages, web languages are artificial. Web-native languages are PHP and JavaScript. A Web Language is influenced by natural languages but are artificial. Learning languages is like reading music. With music, most learn from good ol' fashion sheet music. Nowadays, many are learning to read music from Rock Band (the game).

Is there a web language for music? It's not mp3/ogg and it's not Apple's GarageBand. ABC music notation is close and fake-book style cords mostly works. The problem is often these sites and specifications disappear because copyright holders come and scare them away.

Technology deployment rides on the practice of sharing media and culture. Open standards preserve freedom to tinker and supports cultural heritage. Lawrence Lessig at OSCON 2002:

• Creativity and innovation always builds on the past.
• The past always tries to control the creativity that builds upon it.
• Free societies enable the future by limiting this power of the past.
• Our is less and less a free society.

Lastly, Lawrence asked what have you done about it?

In 1991, some places would fire you for looking at code from the Net. At the time, Dan worked at Convex, who encouraged participation in Free Software. Convex did business with HP; HP used SGML; HTML was SGML (almost). When Dan read about the World Wide Web from Tim Berners-Lee, he had an excuse to look at HTML as part of his day job.

Computer Science students and hackers learn BNF and parse trees. SGML is a little funny looking, but works mostly like BNF. Feedback loop:

1. Draft a DTD
2. Run some tests, ask the computer if it matches the test cases
3. Discover an issue; repeat

While Dan was at Hal in Austin in 1994, and adding HTML support in products, he:

• Asked other HTML Working Group members to try James Clark's sgmls parser
• Not many of them were in the habit of building software from source
• Mark Gaither and Dan installed sgmls as a CGI service
• Feedback loops works over the Web!

Dan was first the editor and then the chair of the standardization of HTML 4. HTML's standardization timeline:

• November 1995: HTML 2.0
• January 1997: HTML 3.2
• December 1997: HTML 4.0
• December 199: HTML 4.0.1

Browser marketplace explodes and then stagnates. Early 1990's - lots of little projects. In 1995, Netscape Navigator IPO rewrites the business books. In the late 90's IE takes over Netscape. After HTML, Dan started working on other stuff: Feb 98 (XML 1.0), Jan 99 (Namespaces in XML), Jan 00 (XHTML 1.0), Feb 04 (RDF and OWL), Apr 06 (SPARQL) and Sep 2007 (GRDDL).

W3C fostered many of the technologies of Ajax and Web 2.0:

• HTML, CSS, DOM, XML from W3C circa 2000
• JavaScript from Netscape, ECMA in 1995
• XMLHttpRequest from Microsoft in 1999

W3C's efforts since then lacked clear deployment paths.

XHTML is not the solution to a problem that concerns anybody except the guys who have to write parsers that convert markup into DOM trees. It turns out that XHTML put the validation on the wrong end of the network. It turned out that the market didn't put much value in a document delivery system that could decide to not display the document because there was an unrecognized attribute on an invisible meta tag.
-- Doug Crockford Jan 2008

The web isn't just for computer geeks anymore. From The Future of Information by Ted Nelson in 1997:

The software world currently corresponds to the Pre-Director stage in movie-making (1893-1904). During those years, when short films were already being shown in theaters, the job of making the movie was given to the cameraman - because he knew how to work the equipment.

That is how it is with software today. Today's software designers are those who only understand the technicalities, and not - with rare exceptions - those who understand how to integrate the presentation of ideas to the mind and heart.

The Web facilitates a shift from mass media to participatory culture. Worth watching: An Anthropological Introduction to YouTube by Michael Wesch and the Digital Ethnography Working Group.

The W3C HTML Working Group charted in March 2007 and ended up with hundreds of participants (most prior working groups had 20-30 people). In November 2007, there was an HTML WG meeting at W3C Technical Plenary and was very much an unconference. The HTML 5 Working draft was published in January 2008. Goals for HTML 5:

• Off-the-shelf parsers and tools for reading web pages like browsers do, including tag soup
• Modern test materials
• Standardize successful experiments in the Web Applications platform to balance the attraction of proprietary approaches:
  • <video>, <audio>
  • scripting details, security policies
  • offline storage

HTML 5 co-chairs: Chris Wilson (Microsoft) and Sam Ruby (IBM) with W3C staff support from Mike Smith and Dan Connolly.

Some ideas from the CSS validator roadmap:

• JavaScript CSS parser
• Support for CSS 2.1 forward-compatible grammar
• Integrate test-result data showing browser support

The browser marketplace is moving again.

• 2003: Internet Explorer, Firefox, Safari, Opera.
• April 2006: Mobile Phones Poised To Overtake The PC As The Dominate Internet Platform In Some Markets
• August 2007: iPhone
• Sep 2008: Google Chrome
• Jan 2009: Internet Explorer 8 Release Candidate

How about authors? How do they feel about HTML 5? Two days ago, Dan received support from Adobe to work on HTML 5 materials for authors.

Design Principles Last Through Change. From Zeldman on Twitter: Client who saves $5K buying cut-rate non-semantic HTML will later spend $25K on SEO consultant to compensate.

There's still something to the nothing behind XHTML+CSS Web Design. Kudos to whoever designed the Kansas Tax web site (Dan is from Kansas City).

Sharing data in documents is one of the original goals of the WWW. Dan has been investing some of his own time into microformats.

Tantek Çelik in June 2006: "XML formats in the long run are not better than propriety binary formats."

• XML, both in technology (namespaces...) and as a "technical culture" is too biased towards Tower of Babel outcomes.
• A few XML formats may survive and converge (RSS, maybe Atom).
• But for now, XHTML is the only longterm reliable XML format that has more to do with it being based on HTML than it being XML.

And if longevity is not a goal, try JSON - it's yummy.

Microformats are not just technical ideas, but it's something that you can actually use in your life. XSPF - what if media players had used an XHTML dialect a la hMedia. RSS and hAtom - will feed readers grow native support for hAtom? Will calendar subscription clients grow native support for hCalendar? The process and the technology of microformats provide an 80% solution for global scale problems.

The Personal Information Disaster: The bane of my existence is doing things I know the computer could do for me. -- The XML Revolution, Nature Web Matters Oct 1998.

Let's find ways to make it cost-effective record and share knowledge formally, i.e. so that computers can manipulate it. How great would it be if your kid's soccer coach could distribute a schedule that would feed into everyone's calendaring system?

Flickr, Facebook and Twitter demonstrate the attraction of hosted services. Identi.ca supports federation (OpenMicroBlogging). Instant Messaging is much like e-mail used to be, where you couldn't e-mail folks that used a different provider.

Be careful not to delegate too much to machines!

• A United Airlines near-bankruptcy item from 2002 appeared as 2008 news via Google News
• Syndication continued up to a Bloomberg news flash.
• UAL stock cratered from $12 to $3 ($1.14 billion in market cap).
• The stock recovered within the day to $10 (down $300M in market cap)

Something to keep an eye on - SEC Interactive DATA and XBRL. Three dozen companies, representing more than $1 trillion of market value, have joined the SEC's test group. Have been working on this since 2005.

Conclusion
The balance between proprietary risk/reward and open standards is delicate. Media independence is more important than ever as mobile emerges. When content doesn't match specs, changing browsers is cheap compared to changing all the content, authors. Web technology is deeply intertwingled with social, economic context.

I enjoyed Dan's talk. He's obviously a smart guy and has been involved with the web since before it even existed. More than anything, I like the conference location. It's 1/2 block from my office and has excellent views. I hope to return for The State of the Web 2009 later this afternoon.

Taking Apache Camel for a Ride with Bruce Snyder

Camel is a Java API that allows you to do message routing very easily. It implements many of the patterns found in Enterprise Integration Patterns. It doesn't require a container and can be run in any Java-based environment. Camel has a whole bunch of components - Bruce is showing a 6 x 10 grid with a component name in each grid. In other words, there's 60 components that Camel can use. Examples include: ActiveMQ, SQL, Velocity, File and iBATIS.

Chris Richardson asks "What's left inside of ServiceMix". Why use ServiceMix if you have Camel? ServiceMix is a container that can run standalone or inside an app server. You can run distributed ServiceMix as a federated ESB. Camel is much smaller and lightweight and is really just a Java API. ServiceMix 4 changed from a JBI-based architecture to OSGi (based on Apache Felix). They also expect to create your routes for ServiceMix 4 with Camel instead of XML. To process messages, you can use many different languages: BeanShell, JavaScript, Groovy, Python, PHP, Ruby, JSP EL, OGNL, SQL, XPath and XQuery.

Camel has a CamelContext that's similar to Spring's ApplicationContext. You can initialize it in Java and add your routes to it:

CamelContext context = new DefaultCamelContext();
context.addRoutes(new MyRouterBuilder());
context.start();

Or you can initialize it using XML:

<camelContext xmlns="http://activemq.apache.org/camel/schema/spring">
    <package>com.acme.routes</package>
</camelContext>

Camel's RouteBuilder contains a fluid API that allows you to define to/from and other criteria. At this point, Bruce is showing a number of examples using the Java API. He's showing a Content Based Router, a Message Filter, a Splitter, an Aggregator, a Message Translator, a Resequencer, a Throttler and a Delayer.

Bruce spent the last 10 minutes doing a demo using Eclipse, m2eclipse, the camel-maven-plugin and ActiveMQ. It's funny to see a command-line guy like Bruce say he can't live w/o m2eclipse. I guess Maven's XML isn't so great after all.

Camel is built on top of Spring and has good integration. Apparently, the Camel developers tried to get it added to Spring, but the SpringSource guys didn't want it. Coincidentally, Spring Integration was released about a year later.

Camel also allows you to use "beans" and bind them to Camel Endpoints with annotations. For example:

public class Foo {

    @MessageDriven (uri="activemq:cheese")
    public void onCheese(String name) {
        ...
    }
}

Other annotations include @XPath, @Header and @EndpointInject.

Camel can also be used for BAM (Business Activity Monitoring). Rather than using RouteBuilder, you can use ActivityBuilder to listen for activities and create event notifications.

Bruce had quite a few folks show up for this presentation. I had trouble finding a seat because I was late. I think he did a good job of showing what Camel is and how you might use it.

Applying Flash to Java: Flex and OpenLaszlo with Dustin Marx

If you're going to choose Flex or OpenLaszlo, chances are you're targeting Flash. The Flash Player allows you to abstract the browser idiosyncrasies and give users a better experience. It hides the browser quirks from both developers and users. It's also a highly ubiquitous web browser runtime environment. It provides a user experience way beyond traditional HTTP request-response. Also, its visual effects and "richness" rival of non-browser desktop applications.

Mark's blog stats show that 95% of readers are using Flash 9 and 1% is Flash 10. All others don't have their version exposed. Most other sources claim that Flash 9 has 98% penetration in mature markets. One of the nicest things about Flash is it frees users from limitations of traditional web applications. Request/response is largely a thing of the past and Ajax-like behavior was built-in from the beginning.

Flash Criticisms: has reduced SEO as well as bookmarking and URL history support.

Flash Player Criticisms: not open source, no significant alternative, no 64-bit player, loading performance and it's only useful for games, movies and annoying advertisements.

The good news is Flash is getting better. There's currently a SWF Searchability initiative with Google and Yahoo!. For bookmarking and URL History, you can use "deep linking" with mx.managers.BrowserManager and mx.managers.HistoryManager. Flash Player issues are also being addressed. There's a Flash Open Screen Project, there's a 64-bit player in Adobe Labs and Flash 9/10 is much better than in the past.

To prove that Flash is a compelling technology, all you have to do is look at Microsoft's Silverlight and Sun's JavaFX. These are direct competitors that are fairly new and prove that companies like what Flash has.

Flex
Flex is not Flash. Flex requires Flash (9+), but Flash does not require Flex. Flex is a language and framework and applications are compiled into .swf files. Flash is the runtime environment that executes .swf files. Flex 3 is FREE. The Flex SDK, compiler and debugger are open source. They have no license costs. BlazeDS is also open source and has no license cost.

Flex MXML was formerly called Macromedia XML. It's an XML-based presentation/layout language that's editable with any text editor or IDE. MXML is to ActionScript 3 as JSP is to Java. MXML provides the layout and ActionScript provides the dynamic business logic.

ActionScript
ActionScript is an ECMAScript implementation that's been proposed as the Edition 4 implementation. It's not your older sibling's JavaScript. It uses class-based object-oriented features and static typing. Thanks to the Flash Player, it works the same across multiple browsers. Most of the things you can do with MXML, you can do with ActionScript. However, MXML typically requires less LOC.

ActionScript allows packages, interfaces, inheritance, objects and methods. It includes extensive XML Support, particularly E4X (ECMAScript for XML). It has a large class library and can talk directly to the Flash Player. Finally, it has many Java-like features and it's syntax looks similar.

At this point, Dustin started doing demos of two popular Flex components: RichText Editor (which creates horrible HTML) and Data Grid. More third-party Flex components seem to appear every day. Examples include flexlib, ASDIA as well as all those listed on FlexBox. Additionally, it's not too difficult to create your own Flex components (no proof provided).

Flex's property binding is one of Dustin's favorite features, but he says he has a difficult time conveying how cool it is. Property binding allows you to tie data in one object to data in another object. Updates in one object affect another. To use it in MXML, you can use curly braces or the tag. In ActionScript, you can use the BindingUtils object. You can also use Flex's metadata annotation "Bindable" to denote bindable objects.

To compile Flex applications, you can use mxmlc from the command line. You can use Ant with the <exec> task or using Flex's Ant Tasks. You can also invoke mxmlc from Java as long as you include mxmlc.jar in your classpath. FlexBuilder is an Eclipse-based IDE that's not included with the free Flex SDK. It's not a free product and can be used as a plugin or a standalone IDE.

Flex and Java
There's two predominant out-of-the-box methods for Flex to communicate with Java EE backends.

• HttpService: traditional HTTP request/response.
• WebService: SOAP-based Web Services.

If the above two methods aren't fast enough, you can use BlaseDS and it's additional options.

• Web Messaging: HTTP publish/subscribe with JMS, ColdFusion and/or other Flash/Ajax client.
• Remoting with AMF: access server-side objects from Flash client-tier as if they were hosted there.

Flash applications can access either a client's machine or a remote site, but not both. You can use a crossdomain.xml file on your server to allow remote Flash clients to connect. This file allows access for both Flex and OpenLaszlo applications.

BlazeDS adds proxy server support for HTTPService and WebService. To use, set the useProxy attribute to "true". Features include authentication and logging. It adds a new RPC mechanisms called RemoteObject. This object allows ActionScript and Java EE transparent integration. It also adds publish/subscribe messaging with a JMS Adapter available. Lastly, it adds Ajax support to your Flex application.

GraniteDS is an open-source (LGPL) alternative to Adobe LiveCycle and is similar to BlazeDS. It has COMET-like functionality and supports Spring, Spring Security, EJB 3, Seam and Guice.

Flex Frameworks: Cairngorm (Adobe Consulting), Pure MVC, Mate and many others.

Flex 4 (Gumbo) will have improvements for designers (easier customization, better tool support), improvements for developers (faster compiler, two-way data binding) and will leverage new features of Flash 10.

OpenLazlo
OpenLaszlo 4 is XML-based and uses an XPath syntax for data access. OpenLaszlo was actually created before Flex and is ECMAScript-based. Unlike Flex that requires Flash 9, OpenLaszlo is architected to deploy on different runtime environments, including: Flash 7/8/9 and DHTML. Dustin believes OpenLaszlo would be a lot more appealing if your source code could be compiled into Silverlight or JavaFX.

OpenLaszlo's syntax looks a lot like Flex, except it does not use namespaces. OpenLaszlo's Constraints are similar to Flex's property binding, except the syntax is a bit different. You use ${} in LZX tags or applyConstraint() and LzDelegate in scripts. OpenLaszlo's event handling is similar to Flex and JavaScript event handling. All attributes have an implicit "on" event that is triggered when an attribute's value is changed. Event handlers can be written CSS-style in LZX nodes or using the <handler></handler> tag. Script code can be embedded in LZX XML in many ways:

• Inside event attributes
• Within <script></script> tags
• Within <method></method> tags
• Within <handler></handler> tags
• In a separate file (<script src="someFile.js" />)

Dustin believes the debugger and view-source tools in OpenLaszlo are much better than the ones available for Flex.

For the rest of the presentation, Dustin covered many of Laszlo's feature, how they relate to Java as well as how to integrate SWF and HTML. SWFObject is Dustin's preferred method for adding Flash to HTML. One of its nifty features is it allows SWF-to-SWF communication.

This talk was an excellent and in-depth overview of Flash, Flex and OpenLaszlo. I especially liked all the details on ActionScript and the different methods for remote communication. Nice job Dustin!

Appcelerator with Matt Quinlan

This evening I attended the Denver Open Source User Group meeting where the Basic Concepts talk was on Appcelerator. Matt Quinlan (Twitter, Blog, LinkedIn) was the presenter. I arrived 10 minutes late, so I didn't hear any of the intro stuff. Below are my notes from the event.

The Appcelerator developers liked the "onclick" syntax, but found it was too limited to do everything they wanted. Rather than onclick, they use an on attribute. For example:

<div on="click then l:show.box">
Click me
<div>

"DOM Manipulation is JavaScript cruft."

Appcelerator allows you to implement the Observer pattern in the browser. In addition to allowing DOM elements to subscribe to messages, server-side objects (in any language) can subscribe as well. In Appcelerator syntax "l:" means local and "r:" means remote. The messages that are passed to the server are JSON and have payloads. JSON is more popular than XML because you can eval() it and create JavaScript objects from it. Appcelerator allows you to do Declarative Ajax. On the server-side, you can annotation Java and C# classes with @Service to subscribe to messages. In other languages (i.e. PHP), Javadoc-style comments are used.

Tagline: The seamless fusion of RIA and SOA.

Web Expression Language
Goal is to eliminate 90% of the JavaScript you write. Example syntax:

on="[condition] then [action]"

Conditions include DOM events (click, focus, blur, change, mouse events), key events (up, down, press), other (history, drag/drop, selected, resize, iPhone orient, sortXYZ), subscribe to custom message. Actions include Scriptaculous effects (show/hide, fade, move, drop, grow), set element value (static, dynamic, bind), set CSS class or attribute, execute custom JavaScript, publish custom message.

Now Matt is doing a demo on http://try.appcelerator.org. This site consists of a form that allows you to type in Appcelerator code and run it. 3 attributes can be added to any tag: draggable, droppable and resizeable.

Client-Side
Add simple tags to your HTML to inject RIA widgets. Add single property to existing HTML elements for dynamic behavior. Eclipse Plugin built on Aptana, but is generally targeted towards web developers moreso than business analysts (no drag and drop of widgets).

Server-Side
Server-side development done with your IDE of choices. Based on your server-side tehchnology platform. Easily create services using annotations.

App Command
The app command is similar to Rails' GEM command. Allows you to build scaffolding and deploy to cloud (AppEngine, Amazon S3). It also allows you to pulldown components from the main server and auto-updating.

Examples:

• appTunes: widget that wraps Flex Cover Flow widget
• Snapshot: photo editing application
• Radio Javan: Persian music online
• SkyBlox: wireless company

Appcelerator allows you to create prototypes easily by using a JavaScript file with mocks for the server-side objects. In the next version, you can "annotate" the UI and allow end-users to Ctrl+Click on elements and add feedback. For an example of this, see http://dev.appcelerator.com/pearson.

When starting with Appcelerator, you can start by crawling (including appcelerator.js for widgets) then move to walking (decouple server-side and client-side) and finally running (developing working prototypes with mocks for server-side).

"Let's face it, ASP, JSP, PHP and Ruby are just lipstick on CGI."

Ajaxified Body

I've often wondered if it was possible to use Ajax to reload the main content of a web application without reloading the header, menu and footer. SiteMesh allows you to move these common elements to a decorator that gets wrapped around each page. Below is a diagram of how SiteMesh works.

You can read the Introduction to SiteMesh article if you're interested in learning more about SiteMesh's basic features. By default, SiteMesh decorates text/html responses and ignores any other content type (e.g. image/gif). It also contains an <excludes> configuration element that allows you to turn off decoration when a URL matches a certain pattern. For example, the following allows you to disable decoration when "ajax=true" is passed in the URL.

<excludes>
    <pattern>**ajax=true</pattern>
</excludes>

To optimize the loading of an application so the common elements aren't loaded for each page, it should be possible to create an Ajaxified Body where the primary content area (PCA) of the site is loaded via Ajax rather than refreshing the whole page. The header, footer and navigation bar often stays the same from page-to-page, so it doesn't seem to make a whole lot of sense to load them each time the page loads. The image below shows the PCA (of an AppFuse Light application) as a grey square with a red border.

Implementing an Ajaxified Body consists of the following steps:

1. Adding SiteMesh and moving common elements to a decorator.
2. Remove common elements from each individual page (if you're using includes).
3. Configure SiteMesh so decoration is disabled when the requested URL contains "ajax=true".
4. Write JavaScript that modifies all <a href=""> links (and buttons with onclick='location.href') in the PCA to have an onclick handler.
5. The onclick handler should call a JavaScript function that loads the link's URL + ajax=true using XMLHttpRequest (XHR).
6. Add XHR success handling to replace the PCA with the loaded content.
7. Add XHR error handling to go to the URL normally when response.status != 200.
8. Inspect the response HTML for <title> element and replace document.title if exists.
9. Inspect the response HTML for <head> element and append to current if exists.
10. Inspect the response HTML for <script> and <link> elements (JavaScript and CSS) and evaluate them if they exist.

As a proof of concept, I created a prototype using AppFuse Light (Prototype/Scriptaculous for Ajax). You can see a demo at the following URL. You can also download a patch or the source for this project.

http://demo.raibledesigns.com/ajaxifiedbody

Below are a number of things I discovered while writing this prototype:

• The hardest part of implementing this seems to be coding the exceptions. It's possible you'll have some links with existing onclick handlers and you may have to disable "ajaxifying links" for those links.
• A progress indicator is important or the page might load so fast that the user doesn't visually detect it changed. This can lead to a worse user experience because they don't see the flash of the blank page they're used to when a page load occurs.
• While forms can be submitted via Ajax, there's no harm in leaving existing form behavior in place where the full site is reloaded after submitting a form.
• If a particular page needs to change the common elements (header, menu, footer), it should be possible to do that with JavaScript after the PCA content loads.
• If the success/error indicator is outside the PCA, it may need to be populated and displayed/hidden with JavaScript after the PCA loads.

I'm sure my implementation can be improved, but I'm also curious to see what you think of this idea. I know it's not revolutionary, but it's something I'm considering adding by default to AppFuse and AppFuse Light. Do any Ajax frameworks do something like this out-of-the-box?

Update: Thanks to everyone for the great feedback - keep it coming. I agree that adding history support is a must. I'll try to do that in the next day or two. This post has also been featured on Javalobby and Ajaxian.

Update 2: Added history support.

EhCache Project Busy this Summer

The EhCache project appears to be having a very busy summer. EhCache 1.5.0 (a major new version) was released on July 12th. In addition, a new (SOAP-based) EhCache Server was released at the end of July. You might ask yourself why you'd need such a beast. I think Greg explains it best:

Why am I doing this? There are lots of theories that have made their way on to the ehcache mailing list. The prosaic truth is that a large US corporate using ehcache for their Java apps on 200+ servers also wants to use it for their C++ apps. And they are prepared to sponsor development. The Web Services API lets them do it. That's it.

As to the larger question of how interesting this is to the world at large, my view is not very. However having to jump through all the hoops to get a server infrastructure done, I thought that the world at large may be interested in a RESTful, resource oriented ehcache server.

The next day, Greg announces EhCache for JRuby on Rails. A few days later, RESTful, resource-oriented caching becomes available in ehcache-server.

I guess this helps answer the question about OSCache vs. EhCache. OSCache hasn't had a release in over a year and EhCache is pumping out new releases and new products. Well done, Greg!

At LinkedIn, we use EhCache for many of our caching needs. However, it's likely we'll be moving to Memcached in the future. Since I'll be part of the team that implements Memcached, it'll be interesting to see which one performs better.

OSCON 2008 Wrapup

This week, I attended OSCON 2008 in Portland, Oregon. I talked to someone who thought the conference had a very small Java presence. I noticed this too, but that's how it's always been. Interestingly enough, they also thought it had a small Ruby showing. I guess Perl, Python and PHP will always dominate OSCON. Of course, there's nothing wrong with that. I've always admired OSCON for the diversity of developers and languages.

Below is a list of my entries for all the sessions I attended.

• The Keynote with Tim O'Reilly, Christine Peterson and Dirk Hohndel
• An Introduction to Ruby Web Frameworks by Ryan Carmelo Briones
• Google XML Pages (GXP) by Harry Heymann and Laurence Gonsalves
• Caching and Performance: Lessons from Facebook by Lucas Nealan
• Web Frameworks of the Future: Flex, GWT, Grails and Rails (my presentation)
• The State of Lightning Talks
• CSS for High Performance JavaScript UI by Gavin Doughtie
• Even Faster Web Sites by Steve Souders

If you attended OSCON, did you enjoy the show? What was your favorite session? I'd love to hear other's impressions of the conference and how it could be improved.

[OSCON 2008] Caching and Performance: Lessons from Facebook by Lucas Nealan

Facebook is not just a Social Networking Site, they're a "Social Utility". They have the 4th most trafficked site in the world and over 90 million active users. Of those users, the average usage is 50 pages per day. There's currently over 24,000 platform applications. There's thousands of Apache web servers and hundreds of MySQL and Memcached servers.

The biggest problem with scaling for Facebook is the complexity. Connecting to all the databases is impossible. They have a very large codebase - their homepage has 500 library files and 10,000 functions. Scaling affects resources, particularly with regards to memory consumption and socket connection limits. Cache retrieval is ~10% cpu-user of most pages.

Caching Layers: $GLOBALS, APC, Memcached, Database, Browser Cache, Third Party CDN.

The Globals Cache is a PHP function called "cache_get". The Globals Cache works nicely in that it avoids calling APC and Memcached, but it still requires the overhead of a function call. APC (Alternative PHP Cache) is used for opcode caching (hundreds of included libraries, thousands of functions) and variable caching (hundreds of MB's of data). They use the APC for non-user specific data: network/school information, database information, useragent strings, hot application data, site variables and language strings (now the largest consumer of memory). They don't use it for User data because they don't send users back to the same server each time.

Friends page with a normal run takes 4050ms, with APC enabled it takes 135ms. You can also set apc.stat=0 to gain even more speed (128ms). To bust client-caching, they use APC+SVN with the SVN tag on the file and get the latest version from SVN and store it. Of course, this is a "prime the pump" thing that doesn't happen in production at runtime.

The next layer of caching is Memcached. Facebook currently utilizes over 400 instances of Memcached and has made contributions back to the project. They use Memcached for user-specific data: long profile, short profile, friends and applications. They don't use the timeout feature, but rather use cache invalidation on SQL insert and update. It's harder to do when writing your application, but it's easier to maintain in the long run. To make Memcached faster, they created a PHP extension that reduced PHP function calling overhead and allowed UDP support. The Memcached extension runs ~10% faster realtime than in PHP space.

Facebook likes for each page to render in under 250ms on the backend. To see how long a page took to load, you can mouseover the copyright at the bottom of the page, and a tooltip will show you the elapsed time.

This presentation is available online at http://sizzo.org/talks.