• standard mac book pro 2Gb of Rams.
• Database is Sql Server 2005 that runs in a virtual machine on the same machine.
• 3,5 millions of rows. The dataset has dimensions with a pretty low cardinality.
• We skipped data retrieve time. We use standard JDBC here. However, we have a small performance impact above JDBC as we need to marshal data between Flex and Java.

For Flex developers interested in what’s happening under the wood, we used heavily vectors to build the OLAP engine. It would be impossible to achieve this level of performance with standard Array. We used green thread to optimize the rendering. Merapi is used for the bridge between Java and Air…

So, how to use RSL winthin an ant script to reduce the size of the swf result file ?

Firs of all, you have to use a configuration file witch specifies a lots of information to the compiler about your application like the name, the player version, etc. So, you can create your own configuration file and specify all the informations needed. A sample of the file is in the flex sdk named “flex-config.xml”. Inside this file, you can write a tag runtime-shared-library-path witch specify the SWC file you want to use as an RSL.

An example of the config file may be:

<flex-config>
<compiler>
...
</compiler>

</flex-config>

The <path-element> tag is the relative path to the library file, the <rsl-url> is the relative url of the RSL relatively to the root server path and the <policy-file-url> is the relative URL for the crossdomain.xml file. If not specify, flash will try to find it at the root of the server.

Now we can use this file in our ant task as a config file for the compiler. Therefore, the compiler will create correct links to the RSL in the project SWF file.

This is a sample how to use the config file:

<mxmlc file="..." >
...

<load-config filename="${basedir}/flex-config.xml"/>
...
</mxmlc>

After the build, the SWF file of the project is smaller than before and you have just to put the framework.swz and framework.swf file at the correct location on the server to use them as Runtime Shared Libraries !

  
	
   
...

Now you can call method like drawLinearTrend() or drawPolynomialTrend(). It’s that easy and should work with all cartesian charts (column / bar / plot etc…) without extra work.

Have a look here for a demo. View source enabled.

Let us know for any trouble. Huge credits to the as3mathlib for the maths.

We don’t stop to add features like this in Bime so if you are interested in, register above to the Beta. It should come very soon: jump on the bandwagon!

Design goals were to:

1) add more encoding variables to the standard charts: size, color and shape are used to convey more meaning to visualizations.

2) charts should be as easy to use as the flex ones and require no extra work.

Click on the image below to see some sample (but be warned that it is just technical examples: axis are not properly formated, titles are missing etc…)

We used extensively degrafa. Almost all data renderers are rewritten using it. Thanks to the degrafa team for the good work. We only scratched the surface and it opens already a lot of opportunities for innovations in the data visualization field. We also used examples written by Ely Greenfield. Once again, I can’t imagine doing this kind of work without Flex being open source.

Bime will help end users to create easily this type of visualization (+ treemap, sparkline etc…) on the fly. With a simple drag and drop user interface, they’ll be able to visually analyze their data from almost anywhere: web services, cloud databases, relational databases, spreadsheets…

If we see some interest, we plan to open source these extensions soon after the official launch of bime in March. So, if you are interested drop us a line in a comment below!

Why?

Try to validate your default flex 3 html wrapper against this validator. You should get a bunch of errors. For the full rational look at here and at Ted Patrick.

How?

Gumbo, Flex 4, will include templates based on SWFObject. Steal them and use them today!

1) Download Gumbo SDK here. Choose the latest milestone release and the Open Source Flex SDK (the small one).

2) Look for a “templates” folder in the unziped directory. Copy it. 10 seconds…

3) Go to your SDK home. On Mac os: Applications > Adobe Flex Builder 3 (plug-in) > sdks > 3.x.x . Rename the “templates” directory as “templates bak”. Paste the new one. 20 seconds…

4) Open Flex Builder / Eclipse. Force the refresh by making a change on the project settings of the html wrapper. Build. 30 seconds: you are done.

By the way, validate your new page against the validator. Woow, no error. Thanks Gumbo.

Disclaimer: I didn’t test extensively with history enabled. But we use that for our main app and some projects for several weeks and so far it works great. Let me know if you face any trouble.

To help us, we build an application, open source (MIT), the “AS3 performance tester”, that takes some operations (such as incrementing a variable) and measure the time consumed by the different options you can use to achieve the operation.

There are a lot of resources on the web about AS3 performance but none seem to embrace the whole problem. Enter the AS3 performance tester. With it, we are trying to build a comprehensive tool that demonstrates (with tests) which syntax for a particular task is the most performant in AS3.

But first things first with the usuals:

More Computing sins are committed in the name of efficiency than any other reason including blind stupidity”–W.A. Wulf

“Premature Optimization is the root of all evil.”-Hoare and Knuth

“Bottlenecks occur in surprising places, so don’t try to second guess and
put in a speed hack until you have proven that’s where the bottleneck is.”-
Rob Pike

Nevertheless, here we talk of the basic of the AS3 language. Things you do in your everyday programming. Do you know the faster way to loop over an array ? Do you know that division is slower than multiplication and slower than bitwise operations ?

Most of the time, to provide accurate metrics, we loop on the operation a number of times and we calculate the mean. This application will evolve to include more robust tests.

We also used the D.eval library to allow the user to enter 2 scripts and compare performance on the fly. It uses a kind of eval() function so the code is much slower than actual compiled code. Nevertheless, our tests, so far, show that the proportions are right: a script slower with the eval() will be slower when compiled. Nevertheless, we mark this feature as highly experimental as my understanding of what the D.eval do can give improper results.

the application

the source

the lighthouse project

Solution 1: the wrong way

You take care of hosting the videos file on a server behind the same domain you served your RIA application. This is important because you can’t stream videos (or anything for that it matters) from another domain unless it has a liberal crossdomain.xml file in the root or unless you proxy request (a pain). Forget YouTube, Vimeo and any major video delivering solution.

Problems: all rely in the solution= “you need to take care of the files”. Here come a bunch of problems: files are most of the time pretty big. You will need to back them up, you can’t check them in your source control or they slow down your deploy to a new server and explode your repository size, you can, of course, host them on a separate server but, hey, it’s a new server to manage etc…

Solution 2: the easy way

You can simply put your videos (and all your static files by the way) on Amazon S3. I hear your inner geek: “but Amazon S3 don’t have a a liberal crossdomain.xml file!”. Yes but they have virtual hosting of bucket. It means you can have a cname that points to S3 in your domain.

For example: videos.wearecloud.com can point to a S3 bucket available at videos.wearecloud.com.s3.amazonaws.com. For the Flashplayer it is exactly the same domain that served the RIA application, hence no security error. For you, it is a whole new world of easy video streaming in your RIA with nothing to worry about.

The steps

1) Create a bucket that matches the hostname you want. Let’s say “videos.wearecloud.com”

2) Create a CNAME on your domain like that:

videos.wearecloud.com CNAME videos.wearecloud.com.s3.amazonaws.com

nota: the exact process depends of your DNS hosting but it should be pretty easy and, in general, involves a DNS zone file.

That’s it. In your Flex app you can:

Going further

On the performance side, we are so far pretty happy with this solution. But let’s face it: it is not yet as fast as with a FMS in the basement. Nevertheless, amazon annouced a few weeks ago CloudFront, that is basically a Content Delivery Network (CDN) on top of S3. An simple API call make your bucket redundant across the globe for faster delivery.

We didn’t test this yet, but it should be an effective way to speed up the solution. Let us know if you test this out or if you have any trouble with the steps above.

For the flex part of the application (that is 75% of the code base), we use Puremvc as a micro architecture framework. It is heavily based on G.O.F design patterns : observers, proxy, mediator, command and MVC separation of concerns. It allows you to organize your code in a loosely coupled way with a minimal boiler plate code set up. But it had one drawback: it was based on a singleton facade. The 2 side effects of that:

1) It was hard to test because you can’t have a fresh instance for each test

2) Even if separation of concerns between Model / View / controller (let’s call it “vertical separation”) was great, the code base will have too much intimacy between the different parts of your application as it gets bigger almost inevitably (let’s call it lack of ‘Horizontal separation’). In our example of generalizing data sources, the model building engine knew too much about Google Spreadsheet, our first data source.

Enter the multi-core version of Puremvc and its pipe utility. Multicore version of Puremvc framework allows you to have several MVC stacks, called cores, in your application. It is not anymore singleton based. This allows you to really isolate the different functions of your applications. In our case study about data sources, we used multicore as a kind of giant strategy pattern: we encapsulated all the knowledge of a data source (including UI like forms) in a core. We can swap between them at runtime. The shell application knows nothing of the data source except its name and a set of message it can send or receive. The same is true for the data source core.

The sequence looks like this:

• As soon as the shell core needs something from a data source, it sends a notification with the action it wants to perform.
• This notification will be catched by a command that will look if we need to load the data source core
• If the core is already loaded, it will pass the notification to a junction Mediator that will send a message to the data source core (using the pipes utility).

This means our data sources’ cores are completely dynamic. They are only loaded when needed. This means faster initialization when starting up. The long term aim is to allow you, our users, to define data sources’ connectors the same way we do. That is, you register a new data source in Paperboy bime, point to an url where you module is hosted and that’s it. You have a new data source supported in Paperboy bime. It is like in the old world of database connectivity (JDBC, ODBC etc..) but with the power of the new web world and distributed systems: the source file is hosted on only one computer, it is always up to date, no installation needed…

We really feel good with this plug-in architecture because supporting a new data source is now really easy, can be done in parallel, won’t break anything and won’t increase startup time. Moreover, we laid down foundation to let our users define their own custom data sources

Problem : need to distort some screenshots with a 3D effects for the home page.

Possible solutions : photo editor trick, expensive plugin…but wait. Can’t Papervision do the trick ? But I would need to access the file system…hum can’t Adobe Air do the trick ?

Result: One hour later => welcome the image3D utility (I seriously run out of creativity for the name, I know). Drop an image on it, distort it in 3D, and press capture to get a brand new distorted image on your desktop.

Credits to Mickael Ruellan who made the papervision/flex bridge easy.

Playtime is over. Back to Paperboy bime now.

Maybe some background before. Our product is called PaperBoy bime. The aim of paperboybime is to be the decision maker home page. The philosophy is to provide all the tools someone involved in a decision making process should need for making the best decision. The right information at the right time. It lays down on a hype concept called Coportate Performance Management. Here is the definition of Gartner :

“Combination of management methodologies , metrics and IT (application, tools and infrastructure) that enables users to define, monitor and optimize results and outcomes to personal or departement objectives while enabling alignment with strategic objectives across multiple organizational levels (personal, process, group, departemental, corporate or business ecosystem”

Wow. From that, Paperboy bime is organized in three parts, each corresponding to a step in the life cycle of the performance management.

* Planing. what will be my goal for the next time periods ?

* Monitoring. How well i am doing regarding to my forecasts ?

* Analysing. What happened ?

Yesterday, we worked on the analysing part, the ‘analyser’ as we call it.

Analyser, is made of three parts (again) :

* the library where all models and queries are stored and retrieved.

* the model builder where you can define how you want to analyse your business.

* the pivot table where you navigate through your data.

We tackled some long postponed work on the pivot table.

We use Adobe flex for all the user interface. Flex 3 was launched 2 Weeks ago. One of the major change in this release is the fact that all the framework is now open source. Enter your serial and all the pieces of code that were obfuscated before (all the data visualization part ) are now in clear. It is in my opinion a very smart move from Adobe because now it is a blast for developper to use Flex. ‘Be kind with the developper that use your technologies’ is something Microsoft know for a long time, but open sourcing a framework such as Flex (300 000 lines of code) is a new leap in the way software framework are delivered.

From a developper point of view, it means :

* no guess. Even if it breaks encapsulation and other OOP rules, it is often desirable to understand and debug code that you didn’t write. It is the best documentation ever.

* learning curve. The best way to learn is to read code. You have 300 000 of very well written lines of code to start with.

* extensibility. You wonder how they did something in the framework. Look at it!

From a practical point of view, we use in the pivot table a new component called OlapDataGrid that takes a result from an Olap query and display it in a grid. We had to write something that do something similar but for displaying in a chart. We didn’t have the source of the component to look how they did, so we built our own. Yesterday, I finally looked at the source. I learnt at least 3 things to improve our custom component. Love that.

So back to our pivot table, it still misses 4 important features but it will go like that for the first version :

* fitering columns and rows.

* Excel export

* print support

* Drill down