Will Flex be the engine of economic recovery?

I'm looking forward to next week's SeedCamp, a regular London-based forum where some of the UK's most promising web technology start-ups are invited to demonstrate their ideas to venture capitalists. I'll be with CityOdds, a innovative Flex-based financial services betting website. What's interesting is that CityOdds is not the only company with a Flex-based product in the top 20. Check them out for the next big idea. Will the Flash platform be the engine of global economic recovery I wonder?

Implementing the Presentation Model in Flex using daisy-chained ArrayCollections

ArrayCollection is perhaps the most important data type in the Flex framework as it underpins all the data-driven components such as List and DataGrid. One of the things that I don't like about ArrayCollection is that it couples two quite separate concerns, namely data storage and data presentation (i.e. sorting an filtering). In a well architected Flex application storage should be the concern of the data model and presentation should be the concern of the view (or the view's presentation model). If you use ArrayCollection to both store data and to filter and sort the data you have to choose where to put it. The trouble is wherever you choose to put it, it's in the wrong place. Obviously in simple applications this isn't a big deal but in more complex applications getting the separation of concerns right pays big dividends in developer productivity.

Imagine an application that displays streaming market prices. Your user will probably want to be able to filter the prices by product or price (or whatever) and the user may want several different views of the same data in the same application, at the same time. So what do you do? Do you implement this as several ArrayCollections in the data model, one for each view and have your Cairngorm command keep them all up-to-date each time a new price arrives? Obviously there are problems with that approach. Firstly it's a lot of work and secondly every time you add a new view you have to change your command. What that should tell you is that your commands are coupled to you views which is bad news.

Ideally what you want to solve this problem is a single underlying collection in the client-side data model whose concern is data storage and nothing else and several collections in the application's views (or presentation models), whose job is to filter and sort the underlying collection. Using this approach you'd only need to keep one collection synchronized with it's equivalent in the server-side data model (either with polling or with the more elegant LCDS DataService) and the collections in the views (or presentation models) would be filtered and sorted versions of the same underlying collection. When a new price arrives the underlying collection is updated and what you want is that all the dependent collections in the views update accordingly.

This separation of concerns between view-agnostic data in the data model and view-specific versions of the underlying data in the presentation model is the fundamental idea that underpins Martin Fowler's presentation model pattern, a pattern that's already been made popular in the Flex community by Paul Williams, Borre Wessel and David Deraedt

The good news is that it's pretty trivial to implement this sort of separation of concerns in Flex using the ListCollectionView class. ListCollectionView provides the filtering and sorting functionality of an ArrayCollection and its list property allows you to define, what is effectively, a dataProvider allowing you to link them together like a daisy chain. (Had the list property been named dataProvider by Adobe it might be more obvious that this functionality exists but that's another story.)

Anyway here's a simple example that demonstrates how to daisy-chain ListCollectionViews with an ArrayCollection like this. Clearly in a real application the underlying view-agnostic data collection would be in the data model, the view-specific sorted/filtered collections would be in the relevant presentation model and there would be no ActionScript in the view but you get the idea.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.IList;
import mx.collections.SortField;
import mx.collections.Sort;
import mx.events.CollectionEvent;
import mx.collections.ArrayCollection;
import mx.collections.ICollectionView;

[Bindable]
private var underlyingList : IList = new ArrayCollection(
[
{name: "Graeme", age: 47},
{name: "Jane", age: 19},
{name: "Mary", age:30}
]);

private var itemIndex : int = 0;

private function onAddButtonClick():void
{
var newNames : Array =
[
{name:"Harry", age:70},
{name:"George", age:71},
{name:"Germain", age:65},
{name:"Vanessa", age:21}
];

this.underlyingList.addItem(newNames[itemIndex++]);
}

private function onSortByAgeButtonClick(collection : ICollectionView, descending:Boolean):void
{
var sort : Sort = new Sort();
sort.fields = [new SortField("age", true, descending)];
collection.sort = sort;
collection.refresh();
}

private function onSortByNameButtonClick(collection : ICollectionView, descending:Boolean):void
{
var sort : Sort = new Sort();
sort.fields = [new SortField("name", true, descending)];
collection.sort = sort;
collection.refresh();
}

private function filterByGenderFunction(person:Object):Boolean
{
switch (person.name)
{
case "Harry":
case "George":
case "Graeme":
return true;

case "Vanessa":
case "Germain":
case "Jane":
case "Mary":
return false;

default:
throw new Error("unrecognized name");
}
}

private function onFilterByGenderButtonClick(collection : ICollectionView, on:Boolean):void
{
if (on)
{
collection.filterFunction = this.filterByGenderFunction;
}
else
{
collection.filterFunction = null;
}

collection.refresh();
}
]]>
</mx:Script>

<mx:ListCollectionView id="firstCollection" list="{this.underlyingList}"/>
<mx:ListCollectionView id="secondCollection" list="{this.underlyingList}"/>

<mx:DataGrid dataProvider="{this.underlyingList}"/>
<mx:Button label="Add" click="this.onAddButtonClick()"/>

<mx:HBox>
<mx:VBox>
<mx:DataGrid dataProvider="{this.firstCollection}"/>
<mx:Button label="Sort by age (ASC)" click="this.onSortByAgeButtonClick(this.firstCollection, false)"/>
<mx:Button label="Sort by age (DESC)" click="this.onSortByAgeButtonClick(this.firstCollection, true)"/>
<mx:Button label="Sort by name (ASC)" click="this.onSortByNameButtonClick(this.firstCollection, false)"/>
<mx:Button label="Filter by gender" click="this.onFilterByGenderButtonClick(this.firstCollection, true)"/>
<mx:Button label="Unfilter by gender" click="this.onFilterByGenderButtonClick(this.firstCollection, false)"/>
</mx:VBox>
<mx:VBox>
<mx:DataGrid dataProvider="{this.secondCollection}"/>
<mx:Button label="Sort by age (ASC)" click="this.onSortByAgeButtonClick(this.secondCollection, false)"/>
<mx:Button label="Sort by age (DESC)" click="this.onSortByAgeButtonClick(this.secondCollection, true)"/>
<mx:Button label="Sort by name (ASC)" click="this.onSortByNameButtonClick(this.secondCollection, false)"/>
<mx:Button label="Filter by gender" click="this.onFilterByGenderButtonClick(this.secondCollection, true)"/>
<mx:Button label="Unfilter by gender" click="this.onFilterByGenderButtonClick(this.secondCollection, false)"/>
</mx:VBox>
</mx:HBox>

</mx:Application>


Should the financial services industry be using Flex?

For the last ten years software built by banks can be broadly divided into two very distinct categories. One type is software destined to be used internally by traders, sales people and the like. This software needs to be "connected", fast and is typically what I call "push-oriented". For example internal trading systems typically need to show streaming prices that a trader can "execute" (i.e not just indicative prices). The other type is software is designed to be used externally by the bank's customers and partners.

Today internal systems in banks are typically built using rich native desktop technologies such as Java Swing or Windows Forms.NET. On the other side of the fence software built for external use by the banks' customers is typically built using traditional web technologies such as JSP/Struts/Spring MVC or ASP.NET.

For a long time now business managers in banks have been under pressure to offer better services to their customers and partners. Hedge funds, for example, are typically staffed by the brightest and best former employees of the investments banks and represent very demanding customers. As a consequence IT managers in the banks are under pressure from the business to come up with software that provides as good an experience outside the firewall as is offered to the bank's traders inside the firewall. The last five years has seen the development of increasingly sophisticated web applications, still using traditional web technologies but with the addition of AJAX to the mix, that look more and more like the bank's internal systems.

In practice this means that most banks are developing and maintaining two software systems that increasingly offer overlapping functionality, one for internal use and one for external use. The push for more service-oriented architecture in banks is one of the responses this this duplication of effort. Clearly the parts that are common between systems that largely do the same thing can be "factored out" into common services to reduce the duplication.

Nonetheless building separate user interfaces, one for internal use and one for external use, has a significant cost implication. Given that even the smallest IT projects in the financial services industry cost in the order of tens of millions of dollars (many cost much more than this), if it's possible to build software that provides both the performance and connected-ness of traditional native desktop applications so that it can be used internally while at the same time providing the "reach" of a traditional web application so that the same software can be deployed externally, there's a huge potential cost saving for financial services institutions.

Clearly RIA technologies, such as the Adobe Flash Platform, allow banks to take advantage of this opportunity. RIA represents a huge bottom line opportunity for the financial services industry worth thousands of millions of dollars. What's surprising is that, even in the current financial climate, most IT managers in the financial services industry don't appear to have identified this opportunity yet.

Instead the visionaries in the financial services industry are the business managers. One great example of a visionary is Mike Chadney who gave up his position as head of derivatives trading at an a investment bank in London to build a business providing on-line options trading on the internet.

The company that Mike founded, CityOdds Ltd., has a traditional multi-threaded real-time pricing and quoting engine at the back-end and a front-end RIA built using Flex and Adobe LCDS.



It's been a non trivial exercise to build a system that can deliver tradable quotes, process cash trades and revalue positions in real-time to thousands of connected desktops concurrently. Nonetheless I'm convinced this is the shape of things to come in the financial services industry.

Buy ADBE and register to trade for free at www.cityodds.com!

Can a Flex application support 500,000 users?

Well, at betfair.com we're going to find out pretty soon as we're pretty close to launching the next generation exchange games trading platform to over 1 million registered customers. If you're attending MAX Barcelona check out Manny Correia's presentation on Tuesday 16th October at 16:00 where you'll get a chance to see a demo of this application.

If you're based in the US make sure you don't miss this session as this may be your only chance. The recent (somewhat misleadingly named) US Port Security Act prevents non-US based gambling companies, including betfair.com, from trading in the US. This act is so at odds with the existing free trade agreements that even the World Trade Organization has ruled against the US. In other cases similar WTO rulings have resulted in severe economic sanctions against the offending country.

Colin Moock's guide to Flash for Flex programmers

One of the things that makes me laugh (and cry) about the Flex 2 documentation is that it implicitly assumes that the reader is familiar with Flash. Given that Flex is supposed to be a development environment targeted at traditional developers (familiar with Eclipse and source code control and the like), you'd think that it would be a fair assumption that at least a significant share of the readers of the Flex 2 doc set would be Java, C++ or C# programmers (like me) who are keen to understand how to build rich clients in Flex.

I guess that other newcomers to Flash will probably have the same frustrating time as I did trying to figure out how (and when) the AVM2 dispatches mouse, focus and keyboard events, how to refer to the instance's properties of a symbol created with Flash CS3 using the Flex Component Kit for Flash CS3, and how to write programmatic skins etc...

So I thought a guide to Flash for Flex programmers was needed and I even though about writing one. That is until I read Colin Moock's recently published Essential AS3 book. Section 2 is the essential "missing manual" on the AVM for Flex developers who don't come from a Flash background and Chapter 29 is the perfect introduction to the Flash IDE for Flex programmers.

One day there might be a book on the Flex class library of the same thoroughness and quality.

Flex's DateTimeAxis renders in GMT by default!

I have to admit to that fact that getting used to Flash's Date class has been a struggle, especially in its new localized form. If you instantiate a Date with a single parameter, it assumes the parameter you supply is the number of milliseconds since UNIX was cool, and it also assumes you're specifying the time in GMT. All is fine. If, however, you instantiate a Date with several parameters, (specifying the day, month and tear etc... separately) it assumes that you're specifying the date in "clock-on-the-wall" time. Once you've created the Date object, its toString() method renders the time in "clock-on -the-wall" time.

The fun really starts when you render a collection of Date objects using Flex Charting. Despite the fact that the Date class's toString() method renders UTC times in "clock-on-the-wall" format by default, the mx.charts.DateTimeAxis class renders Date objects in a line series in UTC by default. Thankfully the DateTimeAxis class has a property called displayLocalTime that you can set to "true" to get the Date objects rendered in "clock-on-the-wall" format but it's not the default.

Flex jobs at betfair.com in London, England

I recently joined betfair.com as the development lead for a new team responsible for reimplementing the gaming systems in Adobe Flex. We've already completed a beta and, because of the positive feedback, we now need to urgently grow the development team in London, England.

We're looking for talented developers who have experience of developing service-oriented smart clients in a team environment, ideally with first-hand experience of Adobe Flex2 and Cairngorm but strong candidates with experience of Java Swing and/or Windows Forms.NET will also be considered.

Launched in 2000, betfair.com is the world's leading online betting exchange with customers more than 35 countries. betfair.com provides a similar service for online betting that a "derivatives exchange" offers for the financial markets, just at a much bigger scale (over 1 billion trades were processed on the exchange last year). betfair.com is a profitable company with annual revenues exceeding GBP 140 million (USD 280m).

If you're interested in applying for one of these positions please send your resume to me at graeme dot harker at betfair dot com.

Happy Brithday Flex 2

By my calculation it's exactly one year ago today that Flex 2 went GA. Happy birthday! A lot's changed in a year.

Does Flex need an fconsole (like Java's jconsole)?

As Flex is used for more complex applications and is more widely used in the enterprise I'm wondering how long it's going to be before people want to peer inside the black box of the Flash Player and see how it's working (how the garbage collector's working, how many event/s it's processing and how it's using the operating system's vm system).

Java's addressed this with its JMX framework and the super-cool free jconsole tool that comes with the JDK that charts thread and memory utilization.

Grant Skinner's been writing some cool stuff on the Player's memory management system. This presentation is a must for anyone developing enterprise Flex applications).

How long it will be before people will be asking if Flash Player needs an fconsole?

Did Mark get the idea for Flex from his parrot?

In a interview with Mark Anders in today's UK Guardian newspaper, Mark talks about ASP.NET, Flash as a development framework and his parrots!