Adobe MAX 2008

Highlights of the Adobe MAX conference in San Francisco, Nov 2008

Flash Player 10

Flash 10's new text engine ("Vellum") provides advanced text rendering capabilities. Layouts such as text wrapping around images, which is very easy to do in HTML, is now supported in Flash 10. Bi-directional (R-to-L) languages are natively supported. Text rotation does not require embedded fonts in 10. New York times demo-ed a new AIR-based news reader application that takes advantage of Flash 10's new text capabilities. CS4 and Flex Gumbo components use the new text engine which is written entirely in ActionScript.

The ability to allow search engines to index/search content inside a SWF file was unveiled. While it requires some extra work, the fact that this now possible is significant.

The new text and search capabilities address what used to be one of the major drawbacks of Flash for text-oriented content. One wonders if Flash 10 will usher in a new era where we will see more traditional consumer-facing Web sites adopting Flash.

One intriguing announcement was the "Alchemy" project which allows your C++ code to run in the Flash player. This project provides libraries that can be used to generate ActionScript code from C++ which can then run in the Flash Player. A demo of OpenSSL code ported to run in Flash was very interesting. Encryption may be a good example of established, existing C++ code that one may want to run in the Flash Player.

Another cool demo was the new feature that enables direct Player to Player communication using the new RTMFP (Real Time Media Flow Protocol) protocol. This is peer-to-peer communication but does not support file or document sharing. It requires a server for the initial connection hookup between peers.

Flash Catalyst (formerly known as Thermo)

This is a new design tool that allows designers to import creative graphics content from Photoshop or Fireworks and turn them into real application components. The designers can control the look and feel of the application including state transition animations. The output of Catalyst is a "FXP" package that can then be imported into Flex by a developer and used directly.

Catalyst leverages the new XML-based FXG graphics language. This language lets you declaratively define look and feel of components - effectively this is doing programmatic skinning without writing code. Hopefully this will reduce the need for graphical skinning and reduce the proliferation of image assets for skinning and leverage all the advantages of programmatic skinning.

Couple of concerns I have about Catalyst are 1) Will this end up in "XML hell" with projects containing hundreds of FXG XML files, and 2) Will round-tripping between Catalyst and Flex (designer and developer) really work well for large commercial-grade projects?

Flex Gumbo (Flex 4)

This is the next generation of Flex which was previewed and is due to be released next year. The main feature seems to be the new MVC separation at the component level. This ties in with Catalyst - the separation allows for designers to have more control over the look and feel of components using the Catalyst tool. Other than this separation for Catalyst, there does not seem to be anything of major significance. There is some new ColdFusion integration but that is of no use to those of us who don't live in the proprietary world of ColdFusion.

A disappointment for me was that there is no change to facilitate runtime changing of CSS. CSS files are still compiled into the SWF. The same applies to FXG files. If you need to be able to change the CSS/FXG files after deployment of your application at the customer site, it requires custom code to be written to allow this.

AIR

There seems to be more buzz around AIR with several well attended sessions around this technology. The application that won the top award in the Enterprise category was a trading desktop AIR application from NASDAQ.

Adobe announced the new "Wave" AIR application for desktop notification. Using this application, users can get desktop notifications from (say) their favorite social networking sites without having to browse to each site to look for anything new. There is a notification service in the back-end that Adobe hosts and that content producers integrate with.

Sneak preview of "Nitro" widgets provided glimpses of a formalized framework for building widgets that can run on multiple screens. Drag and drop of widgets from the Browser to the desktop reminded me of the JavaFX demos of similar functionality. The "Durango" preview showcased AIR mashups - dragging and dropping application components to weave together a composite AIR app.

AIR, with its platform independence, local database, WebKit embedded Browser, JavaScript and ActionScript scripting capabilities, and of course the Flash Player runtime, seems poised to be a powerful channel for widgets/gadgets. It is possible that AIR on the desktop could be as ubiquitous as Flash in the Browser. Interestingly, downloading the free Adobe Reader 9 also installs AIR by default showing Adobe's desire to try and get AIR on as many desktops as Reader. Smart strategy!

PDF

Acrobat sessions introduced new features of version 9 released recently. The most interesting feature to me was the new embedded Flash player in Reader/Acrobat and better support for a SWF file running inside PDF. It is possible to script JavaScript to interact with the SWF within the PDF. Adobe is moving Acrobat from being a viewer for static documents to a full-blown application platform. Given the popularity of Reader on desktops, this is very promising. However, the ability to debug/profile code in Acrobat needs to be improved if it needs to really be an application platform.

One wonders if Adobe will start blurring the lines between its desktop runtimes - AIR, Flash Desktop Player and Reader.

Business Intelligence

SAP Business Objects had a demo booth where they were showcasing their XCelsius product line. A new demo that I haven't seen before was the ability to export a dashboard to PDF that contains a SWF providing rich interactive capabilities. See demo here on their Web site. Another new demo was their use of AIR for desktop widgets/gadgets delivering BI content. It ships a component SDK that can be used to put together custom dashboards - this is oriented towards IT and consultants rather than the end user. XCelsius uses a home-grown server-side SWF generation/manipulation library.

XCelsius is clearly ahead of the competition in terms of taking advantage of Adobe technologies such as Flash, Flex, AIR and PDF in its BI suite. BI aside, SAP in general seems to have a solid partnership with Adobe. Adobe's PDF generation libraries are baked into all of SAP's OLTP products. They use Adobe Connect Web Conferencing product for their training solutions.

ILOG (soon to be part of IBM) demo-ed their Flash/Flex-based visualization library Elixir. ILOG does have a history of experience in the advanced visualization space although their traditional forte is optimization and business rules. The library is quite rich including Charts, Maps, Org Charts, Gantt Charts, Treemaps and Gauges (they don't have Pivot table). Their library is re-sold by Adobe for $799 per license, but the catch is the hefty deployment fees/royalties which reportedly could cost tens of thousands of dollars a year.

Cocomo

This is a new Platform as a Service offering for building real-time collaboration capabilities leveraging Acrobat.com cloud services and the Connect infrastructure. Cocomo promises to make it easy to add chat, live file sharing, screen sharing, white-boarding and VOIP audio to applications. Given the high quality of Adobe's Connect product, Cocomo is likely to be a winner.

Mobile

While CTO Kevin Lynch demo-ed a number of phones running Flash, the big one was missing - iPhone. Kevin held up an iPhone and said Flash on it was still baking in the oven and that Apple's chief taster hadn't approved it yet! Looks like the obstacle for getting Flash on the iPhone is not a technical one but a business one. Apple is concerned that allowing Flash on the iPhone will result in a Adobe monopoly on the default channel for content and applications with sizzle. Apple however is doing a great disservice to developers because there is a phenomenal advantage to coding with one platform for all screens although you are likely to build the same application differently (scaled down) for a mobile device. I'm still in the process of picking up Objective C, XCode etc. which I need to build an iPhone app. I wish I could write the same ActionScript for the iPhone that I write for the Browser, AIR and PDF.

Miscellaneous

Some random thoughts from the conference:

• One way to feel the pulse of the market and understand trends is to look at which sessions at a conference are the most popular ones. At MAX the most popular and sold-out sessions included (in no particular order) CS4, Search-able SWF, Flex Introduction and ColdFusion. The majority of attendees at the conference seemed to be folks producing creative content using CS4 products and/or folks building Web sites using ColdFusion. CS4 remains Adobe's flagship product suite and hugely popular. I was quite surprised by the fact that ColdFusion, which I had assumed to be legacy stuff, is alive and well. Interestingly ColdFusion seems to enjoy a cult following among its users who don't seem to care that it is a proprietary platform. The popularity of the Search-able SWF session shows that consumer-facing Web sites using Flash are very keen on a solution that lets search engines get to content within their SWFs. This may have been the single biggest concern of Web sites using Flash for whom search hits are important. The fact that Flex introductory sessions were so popular shows that while Flex is gaining a lot of popularity, it is still an early-stage technology that more people are beginning to discover.
• Google's session on Flash support in Google Maps was interesting not just from the perspective of users now being able to use maps natively in their Flash/Flex applications, but for what Google mentioned were the advantages of Flash over JavaScript-based Maps solution - 1) performance advantage of Flash in manipulating 5-10K vertex polygons in real-time and 3D; 2) vector graphics drawing APIs of Flash to be able to do specialized markers such as a rectangle with glow filters or video markers overlay-ed on Maps.
• Scrapblog is a company that won an award in the RIA category. Scrapblog is a tool for creating online multimedia scrapbooks and is an example of what still remains the primary use of Flash - creative design with graphical and audio/video content.

JavaFX - Applets Part II

SUN entered the RIA foray with its announcement at JavaOne of the JavaFX Rich Client Technology - "a family of products for creating RIAs with immersive media and content across all screens of your life". JavaFX technology includes the following:

• A runtime plugin similar to Adobe's Flash Player
• Development SDK including IDE plugins, compiler and debugger
• A new declarative scripting language for building UIs called JavaFX Script
  

JavaFX adds a third player in the RIA competitive landscape - the other two being Adobe's Flash/Flex/AIR and Microsoft's Silverlight/WPF. It validates and reinforces the Web 2.5 future we are heading towards - a future where users enjoy applications that are rich, interactive, engaging, cinematic, responsive and stylish, and where developers don't have to struggle with trying to use Web-page-centric DHTML/AJAX technologies to get even very basic, minimally rich applications to work consistently across Browsers and other "screens of your life". Kudos to SUN for recognizing the future and creating a promising, open-source-based RIA solution.

The JavaFX technology for RIAs is conceptually similar to Adobe's Flex and Microsoft's Silverlight in that it has the following key ingredients:

• A formalized client-side component and event model which is absolutely essential for any RIA with heavy client-side business logic, and which is sorely lacking in the DHTML/AJAX/JavaScript world
• A JIT-compiled Virtual Machine runtime that is far more efficient than interpreted JavaScript in the Browser
• A development SDK with editors, designers, debuggers and profilers
• Built-in support for hardware acceleration and superior vector graphics with a library that supports animations and effects out-of-the-box
  

The runtime plugin is the Java SE 6 Update 10 runtime. For old-timers that probably brings back bad memories of Applets - the poorest contribution from SUN to the Java world (some would argue that abysmal position belongs to EJB 2.x!). When most people hear Applets they think of massive downloads, install and configuration issues, browser freezes/crashes, Browser back button problems, and ugly UIs. Of course some of the issues are really issues with the Swing technology whose failure caused the emergence of superior technologies such as IBM's (now Eclipse's) SWT. JavaFX is fundamentally a similar Applets technology - in fact the JavaFX site refers to JavaFX programs as Applets (if I were the marketing guy at SUN, I'd call it anything but Applets). However, it looks like there have been some improvements such as:

• Size of the plugin core needed for typical applications is only a few MB
• Grahics capabilities look much more refined, competing with Flash and Silverlight UIs
• Installation, configuration and launch may be easier with the deployment toolkit and JNLP support
• Runtime performance has been improved
  

In spite of all of the above, SUN's team would have to work very hard to convince developers that they have a real, commercial-grade solution. The demos at JavaOne kept crashing, but of course that was because of Moscone center's bad network right?! Seriously, early stage demos apart, given the Applets and Swing history, I wouldn't risk real money on this technology until I am fully convinced that it is really more that a fun project for the Computer Science PhDs at SUN. Once bitten, twice shy.

One interesting aspect of this technology is the new language - JavaFX Script. JavaFX Script is a declarative, statically typed language for defining GUIs and application behavior. It provides data binding capabilities for synchronizing UI element state with application data. It is possible to call Java code from JavaFX Script making it easy to leverage existing Java APIs such as the Swing toolkit. It is unclear if we will have something analogous to the Flex-AJAX bridge for JavaFX Script-to-JavaScript communication. With JavaFX Script you can do true multi-threaded applications but I am reminded of Swing developers often shooting themselves in the foot with UI update and the event-dispatch thread. JavaFX Script is compiled to JVM bytecode providing superior execution performance. Some other academically interesting features of the language are described later in this post.

JavaFX Script can be compared to Adobe's MXML/ActionScript and Microsoft's XAML/C#. However, unlike MXML and XAML, JavaFX does not have an XML description of the application UI tree. The UI tree description and the business logic behavior is combined into JavaFX scripts. As a developer looking at Flex and Silverlight to produce commercial software, the first reaction to JavaFX Script is - oh no, another language! Why not just do what Adobe did with ActionScript? - adopt the ECMA Script standard and enhance it where needed. While the ability to work with Java from within JavaFX Script is appealing to Java developers, ActionScript's object oriented-ness and semantics is also quite natural for a Java developer. I wonder if SUN could have served developers better by sticking with the ECMA Script standard which is the basis for ActionScript and JavaScript, and extended it for supporting Java invocation and any other features as needed.

Some other features of the JavaFX technology include:

• Ability to run an application both in the Browser and on the desktop. In fact you could drag an application out of the Browser and drop it on to your desktop and continue working as a full desktop application. JavaFX applications run in a separate process. Conceivable a JavaFX application crash will not crash the browser - along the same lines of tabs in Google's Chrome Browser running in separate process spaces.
  
• JavaFX applications communicate with the server back-end either through Web Services or through RMI. Web Services are extremely useful; but for heavy-duty applications, more efficient mechanisms such as AMF3 over HTTP that Flash/Flex supports is needed (see this). Perhaps someone could implement AMF3 over HTTP support to JavaFX as an open-source project. RMI has issues with firewalls requiring complex HTTP-tunneling solutions.
  
• Mobile and TV platform support coming in the future
  

Coming back to the JavaFX Script language itself, some interesting features that may sound unfamiliar to Java developers include:

• Classes have attributes (analogous to fields in Java), functions and operations (analogous to methods in Java)
• The distinction between functions and operations is interesting. One wonders if it adds additional complexity and could have been combined into one construct. Functions are for implementing simple business logic while operations are for complex logic with exception handling. More interestingly, return values of functions are always re-evaluated when the value of any variable referenced by the function changes. This is useful with data binding described below. On a data-binding related note, functions are independent entities that don't need to be associated with a class - this is more of a procedural concept rather than object-oriented one. While the separation of state and behavior is valid on the server for SOA (see this), applying the concept on the client feels weird although it may make sense from a data binding perspective.
• Function and Operation definitions are outside of the class declaration. The class declaration just contains the declaration of the function/operation. Similarly, attribute initialization is defined outside of the class declaration. This feels more C++-ish rather than Java-ish.
• Data binding is a useful feature for UI development. An attribute can be defined to be bound to another attribute or to a function so that its value is dynamically (and optionally lazily) updated whenever the bound target value changes.
• Blocks of code within a "do" or "do later" block execute in a separate thread. While Java developers are familiar with convenient multi-threading mechanisms available in Java, this is the first time a scripting language has provided multi-threading capabilities. While this is a great advantage, it also opens the door for pitfalls for average developers as multi-threading in inherently hard to design and implement correctly for complex applications.
• Triggers is an exciting feature where you can write code that kicks in on state change events such as an attribute value change. This is not unlike database triggers that developers are familiar with.
• Attributes can have cardinality operators such as *, ?, + (think regex) to indicate optional, one or more, and zero or more.
• An attribute can have an inverse declaration indicating a bi-directional relationship with another attribute with automatic update of the inverse on attribute change. This feels like something one does in ORM (Object Relational Mapping) with persistence to a datastore. It seems out of place in a UI development-oriented scripting language.
• Arrays with "list comprehensions" seem extremely useful. This is like writing SQL statements on lists e.g. var a:Integer* = select n*n from n in [1..10] where (n%2 == 0); New keywords such as insert as first, into, before and after facilitate useful list manipulations.
  
• Object literals allow for creating object instances in a JSON-like fashion. While this seems useful, it is likely to lead to very verbose and difficult to read code - see this TableNodeExampleApplet.fx example from a JavaFXpert.
• Multiple inheritance, which Java avoided due to its inherent complexity, is supported by JavaFX Script.
  

JavaFX Script is an exciting new language with some cool features that developers have not used in other scripting languages. Obviously some brilliant minds have been applied to its creation. However, my gut feel is that this is a language that, given its many new constructs, is going to have a steep learning curve and a slow adoption.

Overall, the JavaFX technology is very promising and will help usher in the new Web 2.5 era faster. If SUN plays its cards right, JavaFX may catch up with Silverlight and maybe even with Flash/Flex someday.

Flex TabNavigator Image Snapshot Icons

Example files below illustrate generating thumbnail snapshots of tabs in a Flex TabNavigator. The thumbnails are shows as tab icons.
See this flexcoders thread.

ImgSnapshot.mxml - Main Application File:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">

<mx:Script>
<![CDATA[
import mx.events.IndexChangedEvent;
import mx.containers.TabNavigator;

private var tabNav:TabNavigator = new TabNavigator();

private function init():void
{
  // tab1
  var tabChild1:MyComponent = new MyComponent(0);
  this.tabNav.addChild(tabChild1);

  // tab2
  var tabChild2:MyComponent = new MyComponent(1);
  this.tabNav.addChild(tabChild2);

  this.tabNav.percentHeight = 100;
  this.tabNav.percentWidth = 100;
  this.addChild(this.tabNav);
}     
]]>
</mx:Script>

</mx:Application>

MyComponent Class - MyComponent.as:

package
{
  import flash.events.Event;
 
  import mx.charts.PieChart;
  import mx.charts.series.PieSeries;
  import mx.collections.ArrayCollection;
  import mx.containers.HBox;
  import mx.containers.TabNavigator;
  import mx.core.Container;
  import mx.events.FlexEvent;
 
  public class MyComponent extends Container
  {
 private var box:HBox = new HBox();
 private var chart:PieChart = new PieChart();
 private var index:int;
 
 public function MyComponent(indx:int)
 {
     super();
   
     this.index = indx;
     this.label = "Tab " + this.index;
     this.percentHeight = 100;
     this.percentWidth = 100;
  
     this.addEventListener(FlexEvent.UPDATE_COMPLETE, updateComplete);
 }
  
 override protected function createChildren():void
 {
     super.createChildren();        
     this.box.addChild(this.getPie());   
     this.addChild(this.box);
 }
  
 override protected function updateDisplayList(
   unscaledWidth:Number, unscaledHeight:Number):void
 {
     super.updateDisplayList(unscaledWidth, unscaledHeight);
     this.box.setActualSize(unscaledWidth, unscaledHeight);
     this.chart.setActualSize(unscaledWidth, unscaledHeight);
 }
  
 private function updateComplete(event:Event):void
 {
     var tabNav:TabNavigator = TabNavigator(this.parent);
     if (this.width == 0 && this.height == 0) {
  var selTab:MyComponent = MyComponent(tabNav.getChildAt(tabNav.selectedIndex));    
    
         this.width = selTab.width;
         this.height = selTab.height;
         this.updateDisplayList(selTab.width, selTab.height);
        
         return;
     }         
     if (this.icon == null)
         this.icon = IconUtil.getIconClass(this, tabNav.getTabAt(this.index), 150, 100); 
      }
  
 private function getPie():PieChart
 {   
     chart.percentWidth = 100;
     chart.percentHeight = 100;
     chart.showDataTips = true;
     chart.dataProvider = this.getChartDataProvider();

     var series:PieSeries = new PieSeries();             
     series.nameField = "label";
     series.field = "data";
     series.filters = [];
     chart.series = [series];
   
     return chart;
 }
  
 private function getChartDataProvider():ArrayCollection
 {
     var arr:Array = [];
           arr.push({label:"East", data:24});
           arr.push({label:"West", data:32});
           arr.push({label:"North", data:22});
           arr.push({label:"South", data:11});
           arr.push({label:"Texas", data:5});  
           return new ArrayCollection(arr);
 }
  }
}

IconUtil.as:

package
{
import flash.display.BitmapData;
import flash.events.Event;
import flash.geom.Matrix;
import flash.utils.Dictionary;

import mx.core.BitmapAsset;
import mx.core.UIComponent;
import mx.graphics.ImageSnapshot;

public class IconUtil extends BitmapAsset
{
    private static var dictionary:Dictionary = new Dictionary(true);

    public function IconUtil()
    {
        addEventListener(Event.ADDED, addedHandler, false, 0, true);            
    }

    private function addedHandler(event:Event):void
    {
        if (this.parent == null)
            return;
    
        var value:Object = dictionary[this.parent];
        if (value == null)
            return;
        
        this.bitmapData = value.src;
        UIComponent(this.parent).invalidateSize();
    }

    public static function getIconClass(source:UIComponent, target:UIComponent,
            width:int, height:int):Class
    {         
        if (source.width <= 0 || source.height <= 0)
            return null;
       
        var scaleWidth:Number = width/source.width;          
        var scaleHeight:Number = height/source.height;          
        var mtrx:Matrix = new Matrix(scaleWidth, 0, 0, scaleHeight);          
        var bitmap:BitmapData = ImageSnapshot.captureBitmapData(source, mtrx);
        dictionary[target] = {src:bitmap, w:width, h:height};             

        return IconUtil;                      
    }           
 } 
} 

Flex Uncertainty Doubt

If you are evaluating Flex and attempting to pitch it to your management, these are some issues that you are likely to encounter. As with any new technology, you encounter a mix of reality and FUD. This is my attempt at objective analysis of real and perceived issues with Flex that one typically hears.

1. Flex applications are too bulky - An empty Flex 3 application produces a swf file of roughly 150K size. Full-fledged applications can produce swf files of hundreds of kilo-bytes or even mega-bytes. This has historically been a problem. However, with current versions of Flex and the Flash Player, this can be mitigated in 2 ways - modules and framework RSL caching.
   
• A Flex application can be broken down into modules with each module being loaded only when needed e.g. on application startup, only the login module is loaded. This reduces the amount of bytes going across the wire each time, as the application is loaded in pieces depending on user interactions.
  
• Bulk of the size of a swf file is due to the Flex framework code. The Flex framework can be loaded once as a runtime shared library (RSL) across all applications and cached by newer versions of Flash Player 9 even across domains. So your application does not have to statically link in the Flex framework thereby reducing its size.
2. Why not just do everything with Flash Authoring (CS3?) - Flash Authoring is a designer tool while Flex is a developer tool. Flash Authoring is for producing creative, stylized content such as animations and graphics. Flex is the framework for application development. The typical usage is to build graphical assets in Flash Authoring, and bring them into Flex to incorporate into Flex components. Of course, if all you are doing is producing intro-screen Flash movies, stick to Flash Authoring. If you are building applications with re-usable components and business logic, use Flex.
   
3. Flex involves license fees to Adobe - The Flex SDK with its UI component library and command-line compilers is free. Flex Builder Eclipse IDE Plugin has to be licensed (no runtime license involved though). If your application uses server-side Flex Data Services (now called Live Cycle Data Services), that involves a significant runtime license to Adobe although a portion of it has been open sourced as Blaze Data Services.
4. Flex is proprietary - Yes, Flex is proprietary. But Adobe plans to open-source the Flex SDK - see this.
   
5. Flex applications are poor at rendering text/HTML - This is truly one of the big issues with Flex applications (actually this is a Flash Player issue rather than a Flex issue). Text layouts taken for granted in HTML are difficult to do with Flex. Flex has issues with system fonts and font embedding results in very large swfs. Adobe plans to provide better text support in Flash Player 10 - see this. Adobe's acquisition of Buzzword - the Flash-based word processor - shows its commitment to filling this gap.
   
6. Flex is not internationalization friendly - The lack of support for RTL (right-to-left) languages such as Arabic and Hebrew is a huge drawback. This is really a Flash Player issue and Player 10 is supposed to fix this - see this.
7. Flex applications are not skinnable - Flex supports applying CSS-based styling. However the drawback is that style sheets are compiled into swfs and cannot be changed without compilation at runtime by editing a .css text file (See this enhancement request).
   
8. Flex is architecturally inferior to Java Server Faces (JSF) - The comparison to JSF might not be an apples to apples comparison.
• JSF is a server-side framework while Flex is client-side. Flex can take advantage of the power of client-side processing that typical JSF applications cannot.
  
• JSF provides a formalized Model-View-Controller (MVC)-based framework with a component and event model for Web applications. While Flex provides an excellent component and event model, it does not have a full, formalized MVC framework out-of-the-box. One has to use frameworks such as Cairngorm if a rigorous, formalized MVC framework is required.
• In contrast to JSF Web-page type applications, building Flex applications are like building thick desktop applications (that happen to run in a Browser). Unlike JSF, in Flex one does not think in terms of pages rather in terms of application state. Therefore, the JSF notion of a controller that orchestrates page flow does not directly apply to Flex.
  
• JSF render kits for different UI channels is a great concept that works for output channels where there is server-generated markup such as HTML for browsers and WML for phones. Stretching this concept to server-side rendering of full-fledged thick client applications such as Swing, WPF or Flex is practically infeasible beyond a "Hello World" application.
9. Flex applications don't play well with the Browser back button and URL bookmarking - This is a valid concern. As noted earlier, Flex applications are like thick desktop applications where one does not think in terms of pages as in traditional Web applications. However, users are used to Browser Back/Forward functionality and bookmarking pages, and are likely to use it. Hitting the Back button with a Flex application may take the user to the page he was on before navigating to the page that loaded the swf. Bookmarking may not bookmark the state the user was in within the Flex application. The solutions to these issues include Flex's deep-linking and toolkits such as UrlKit. The solutions however require extra coding effort.
   
10. Flex applications are slow - Flex applications may be slow to load initially because of the size of the swf files (see 1. for ways to mitigate this). However, Flex applications allow for client-side processing that can provide superior interactivity on subsequent interactions by reducing server round trips. Using the optimized, binary AMF3 message format that Flash natively understands, one can achieve significant performance improvements over text-based formats. The new ActionScript Virtual Machine (AVM) in Flash Player 9 with JIT-compilation provides an efficient runtime for executing swf byte code. JavaScript in the Browser may some day come close to this performance, but it is not going to be happen anytime soon (see Tamarin).
11. ActionScript is yet another language to learn - ActionScript is very much like JavaScript (both based on ECMAScript). ActionScript 3.0 is based on Edition 4 of ECMAScript which is also the same base for JavaScript 2.0. which is not finalized yet. Adobe is ahead of the game with ActionScript 3.0 but it is likely that in the future ActionScript 3.0 == JavaScript 2.0.
12. With Flex I'm tied to the Flash Player and locked into Adobe - Yes you are tied to Adobe's Flash Player but the Flash Player is ubiquitous and free. As noted earlier, Flex is being open sourced. With the Flash Player, there is of course the issue of being dependent on Adobe for any enhancements you may need to the Player. For example customizing Flash right mouse-click context menus is not possible to the extent an application may desire (see this) and one has no choice but to depend on Adobe to fix it if and when it chooses to.
    

Flex is still relatively new and is likely to improve along with improvements to the Flash Player. But it is part of an emerging and significant change in the Web 2.0 RIA landscape. Flash-Flex/AIR and Silverlight/WPF are ushering in the next revolution in Web and Desktop applications which are easier to build and provide superior user experience. The days of DHTML AJAX applications and the struggle to provide rich user interfaces that work consistently across Browsers are numbered. The Web 2.5 (r)evolution is here.

Enums in ActionScript 3

The introduction of Enums in Java 1.5 was a welcome addition. Prior to Java 1.5, one had to simulate Enums with some special patterns. In ActionScript 3 there is no native enum construct in the language. So we need to apply patterns similar to what we did in Java prior to 1.5. While similar, the pattern for ActionScript is a bit different.

Let's start with the basic Enum pattern in ActionScript:

package enumexample
{
  public class Color 
  {
    public var _value:String;

    public function Color(val:String):void {            
        this._value = val;
    }

    public static const RED:Color = new Color("RED");
    public static const BLUE:Color = new Color("BLUE");
    public static const GREEN:Color = new Color("GREEN");
  }
}

The issues with the above Enum implementation are:

• The constructor is public. So one could do: var c:Color = new Color("FOO"); which violates the notion of the Color Enum constants being restricted to RED, GREEN or BLUE. ActionScript does not allow private constructors.
  
• Color does not have a default no-arg constructor which is needed if an instance of Color is de-serialized by the Flash Player from data from the back-end e.g. when using LCDS's RemoteObject to invoke a Java method that returns an instance of Color (see this for LCDS Enum support). For default serialization based on property-value pairs, not only do we need a no-arg constructor but we also need to make _value public or provide a setter. Both these are undesirable because one could change an enum as follows: var c:Color = Color.RED; c._value = "MAROON";
  
• If an Enum cannot guarantee uniqueness of enum constant instances, object comparisons based on == will fail. var c:Color = new Color("RED"); if (c == Color.RED); // false. ActionScript does not have the notion of operator overloading.
  
• When a Color instance is de-serialized, an instance is first created using the default no-arg constructor and the _value property is then populated. There is no object substitution mechanism available in ActionScript like the readResolve() Java serialization mechanism. So created instances will fail the == comparison as Enum constant instance uniqueness cannot be guaranteed.
  

The solution I use in conjunction with LCDS RemoteObject is to have Color implement Externalizable and have readExternal() and writeExternal() methods read/write value for _value. In addition, the class is "locked" after the initial construction of the valid Enum constant instances - see the lock member in the Color class below. An exception is thrown when an attempt is made to construct an Enum instance after it is locked. However, since the de-serialization will construct an Enum instance with no args, the exception is not thrown if no args are specified to the constructor. Unfortunately there is no way to detect in the constructor that the instance is being created in the context of de-serialization. The _value member is made private. An equals() method is added which is the way to compare enum instances rather than using ==. However, this is just a guideline/convention and the use of == cannot be enforced. Here's what Color looks like finally - the best one can do given the limitations of the language.

package enumexample
{
  [RemoteClass(alias="javaenumexample.Color")]
  public class Color implements IExternalizable
  {
    private var _value:String;
    private static var lock:Boolean=false;

    public function Color(val:String=null):void {            
        if (lock && val != null)
               throw new Error("Cannot instantiate Enum");

        this._value = val;
    }

    public function get value():String {
        return this._value;
    }

    public static const RED:Color = new Color("RED");
    public static const BLUE:Color = new Color("BLUE");
    public static const GREEN:Color = new Color("GREEN");

    {
        lock = true;
    }

    public function equals(enum:Color):Boolean {
        if (enum == null)
            return false;
         
        return enum.value == this._value;
    }

    public function readExternal(input:IDataInput):void {
        this._value = input.readUTF();
    }

    public function writeExternal(output:IDataOutput):void {
        output.writeUTF(this._value);
    }
  }
}

"Tear-off" from online Flash App to offline AIR App

Say you have an interactive, connected, online, Browser-based Flex application that is used for scenario-based analysis. Users of this application need to be able to "tear-off" a scenario and work on it offline in an AIR application. How does one achieve this and re-use the same code written for the online application? The following outlines an approach:

• Online Flash Client requests metadata and data from the server needed to render scenario view

• ActionScript metadata and data objects are delivered to client from Java versions on server using FDS remoting (AMF3 over HTTP)

• Client creates a byte array of these objects in some pre-defined sequence and sends this to the server using URLLoader

• Server writes these bytes into a temporary file on server disk

• Client uses FileReference::download() to download this file to the client machine

Once downloaded, the AIR application (containing the exact same rendering code as the online application) reads this data file to de-serialize the byte arrays as ActionScript metadata and data objects, and renders the scenario view.

Works, but ugly and convoluted! Got an alternative?

Web 2.5

I've always considered myself a "server guy" - working on server-side infrastructure and tooling for enterprise-scale application development, with Java as the programming language of choice in recent years. Client-side UI development, Web UIs in particular, always seemed less challenging. Writing HTML markup and scripting was for "designers" whose focus was on aesthetics rather than heavy duty coding. The heavy duty coding was done by the so-called server guys who provided nicely encapsulated business logic "beans" that designers could consume easily through simple scripting and without much knowledge of programming constructs. Currently popular Web UI development frameworks such as Java Server Faces (JSF) have promoted such a separation of concerns. JSF is fundamentally server oriented (the user interface code runs on the server) and provides separation of the roles of "page authors" writing markup and "application/component developers" writing server-side Java code.

Then came the Web 2.0 revolution. Rich Internet Applications (RIAs), the principal component of Web 2.0, are everywhere. Applications based on AJAX, the umbrella term for technologies associated with building Web 2.0 RIAs, are becoming increasingly sophisticated. The appearance a couple of years ago of revolutionary applications such as Google Maps perhaps triggered interest in more traditionally server-side developers to start working with Web 2.0 AJAX client applications. A larger community of developers taking on the challenge of building Web 2.0 RIAs has resulted in more innovation and wider adoption. In addition, it has changed much of our traditional thinking on application development for the Web.

The fundamental paradigm shift with Web 2.0 RIAs is the moving of more processing away from the server and on to the client. Rich interactivity in RIAs is provided by more client-side execution of business logic and by portions of the application being able to asynchronously communicate with the server and update their state. This paradigm shift has not been a result of any new technology breakthrough, rather a result of factors such as more developers discovering the exciting possibilities of DHTML and JavaScript, and the increased penetration of broadband internet connectivity among consumers. So as more processing moved from the server to the Browser client, what has it meant for the way we build these Web 2.0 RIAs? Well... a lot of pain! The pain is related to three principal factors - client-side component and event models, browser compatibility, and enhanced graphical capabilities.

When software modules reach a certain level of complexity, they require formalized models and frameworks for developers to work with to be effective. With JSF, for the first time we had a formalized component and event model for building Web UIs that we never had before. However, JSF's model is a server-side model. There is no formal, standardized client-side model defining component and event contracts, with frameworks for managing component lifecycle and event handling in the client. As a result most RIAs work without any formal client-side models. Coding complex client-side business logic in RIAs typically involves JavaScript code manipulating an XML/HTML DOM tree rather than invoking client component APIs. With multiple elements of an application asynchronously interacting with the server, having an element of the application coordinate with, and react to, events triggered by other elements often involves intimate knowledge of the internals of other elements. All this results in code that is difficult for developers to write, debug and maintain beyond certain simple applications. For a server-side developer in particular, coding with loosely typed scripting against a XML DOM tree is disconcerting compared to working with statically type-checked, fully object oriented Java code using strongly typed objects and formal APIs.

The second pain point is all too well known - getting a Web application to work consistently across Browsers. With JavaScript implementations that are still different in different Browsers, and RIAs heavily using JavaScript, managing the quirks of each Browser implementation is a major challenge requiring significant development and maintenance effort. This is particularly unsettling for server-side Java developers who take the "write once run anywhere" paradigm for granted.

The last pain point is related to building better graphical capabilities in user interfaces. RIA UIs are increasingly becoming less text oriented and more graphical. Popular Finance applications provide sophisticated graphical data visualizations, with greater ability for users to interact with the data. Even traditional "shopping cart applications" employ more graphical capabilities in helping consumers visualize and interact with products they buy. This enhanced interaction involves things such as sliders for moving the window of data to visualize, 3-D views of products and charts, rotation of a views for alternate perspectives, real-time data push to clients with animated update, use of audio and video etc. It is safe to assume that this trend will continue to grow as users get accustomed to rich graphical capabilities in the interfaces they use. The challenge in today's Web 2.0 RIAs is related to the difficulty in building such capabilities into applications without sacrificing performance. The Browser compatibility issue mentioned before is perhaps even more of a problem when attempting to do vector drawing and animation in the Browser.

Several commercial and open-source AJAX frameworks exist today that attempt to address the pain points described above. While many have done a reasonable job, two fundamental problems remain. One is the fact that these frameworks typically are not directly compatible with each other. Due to the lack of any client-side standards, plugging in AJAX widgets from multiple vendors within an application and having them interact with each other is not an easy task. The second and more fundamental problem relates to the inherent limitations of the JavaScript runtime in the Browser. AJAX frameworks that have attempted to create a "thick client" in the Browser with complete component/event models and client-side state have suffered from performance issues when trying to scale from basic Web pages to larger full-blown applications. It is unlikely that this fundamental limitation is going to go away in the immediate future.

So are we then doomed to just living with these limitations of building Web 2.0 RIAs? Is there a better solution? Yes, there is. It appeared to me as a flash while prototyping with Adobe's Flex framework for building applications that run in the Flash player in Browsers. The pain points mentioned above don't exist when building in this environment. With Flex components, one works with a formal client-side UI component and event model, data model contracts, and MVC-based patterns. With the object-oriented ActionScript 3.0 language, one can work with strongly typed objects, static type checking, interfaces and implementation classes, formal API contracts, polymorphism and exception handling which feels natural for a Java developer. Service calls to the server from the client are by definition asynchronous and don't require any special coding. The AMF3 message format used in the communication between the Flash Player and a Java server provides an efficient binary mode of exchanging information without being forced to using verbose and inefficient text-based formats. With remoting and data service facilities, plugging into a Java back end is a breeze. The Flash Player frees the developer from having to code for compatibility with all Browsers. The ubiquitous nature of the player in consumer and business machines provides a standardized, pre-installed runtime. But above all, the most significant factor is the superior runtime - the Virtual Machine in the Flash Player that executes bytecode generated by compiling ActionScript code. The new ActionScript Virtul Machine (AVM2) in Flash Player 9 with its JIT compiler provides compelling performance. It is possible now to build "thick" client applications running in the Flash Player that can provide satisfactory runtime performance. Flash has graduated from being a channel for "intro screen" multi-media content rendering to a viable medium for full-blown enterprise applications. The graphical capabilities within Flash are of course well known - after all that has traditionally been the sweet spot of Flash. The fact that popular Finance sites offering stock charts render Flash versions is testimony to the superior capabilities of this channel for such graphical content.

I find building with the Flex framework for the Flash Player a significant step forward in the evolution of Web 2.0 RIA development. Microsoft's Silverlight (formerly WPF/E) may provide a similar channel in the near future although we're unlikely to see any easy integration with Java back ends. JavaFX may facilitate similar capabilities for building RIAs sometime in the future (re-incarnation of applets). I call this evolution to the next step Web 2.5. Web 2.5 is not a revolutionary new breakthrough (that's why it is not Web 3.0!), rather an evolutionary step up. Web 2.5 is building the same Web 2.0 style applications without all the pain. Web 2.5 is large complex applications being able to provide more intuitive, interactive, graphical, responsive interfaces to users. Web 2.5 is building "thick" Browser-based client applications that can perform. And with Web 2.5, even us server guys can whip out sizzling Web UIs!