Farata Systems      

In this brief article I’d like to talk about one of the most important aspects of RIA in general and written in Flex in particular – the initial download process.  You application is considered fast for one of two reasons:
1. Well, it is fast
2. It’s perceived to be fast

Today I’ll cover one of the approaches that we at Farata Systems successfully use in literally every enterprise project – designing any Flex application as a portal. There is one exception: Hello World type applications that don’t have any custom styling. Such simple applications can live in a single swf.

Any serious application is technically a portal that consists of a small and light shell application that appears very fast on the user’s machines and downloads (in a smart way) the RSLs that will be needed for the modules lazy loaded modules.

Needless to say that you must always deploy Flex Framework libraries as signed RSLs, which will allow shaving off a substantial amount of downloadable bytes required by your RIA. Unless you have a virgin computer that never seen Flex app, these RSLs will be stored on the user’s disk in Flash Player’s cache (don’t confuse it with the Web browser’s cache).

Now consider an application that has one light-weight main SWF and 10 modules, seven of which include charts. In other words, they rely on datavisualization.swc. During the application startup the SystemManager reads the list of RSL’s from the SWF and loads them with the help of the class of RSLListLoader.

Without going through the advantages of using the RSLs in general, I’d like to mention the fact that Adobe’s class RSLListLoader simply performs loading of all RSLs listed in the generated SystemManager for each module. This means that if the datavisualization.swc was linked in three modules, SystemManager will download it three times (this is the case when this swc was not signed and cached).

We’ve modified the RSLListLoader a little bit so it’ll avoid downloading duplicate RSLs.

One more suggestion for working with modularized applications that use BlazeDS/LCDS – do not create separate services-config.xml files for each of the module. To avoid conflicts, let them reuse one and only services-config.xml listed with the main SWF of your application. This will also allow you to properly allocate work between developers in your team – each of them can have a small test harness application and test his/her modules without the need for waiting when the other modules are ready.

In the following 7-minute screencast I’ll show you the application that has been built in such a way.

People who will attend our Enterprise Flex symposium in New York City on August 7 and Advanced Flex training in London on September will get a chance to get familiar with these techniques in greater details.

Hope to see you there.
Yakov Fain

A perspective client showed me a Web page from Adobe’s Connect Now. Check this page out before reading further: https://connectnow.acrobat.com/

“Yakov, I want our new application to be like that one. The page comes up really fast and it’s very responsive. Can you create our Flex application for us that will be really, really fast? “

“Yes, I can but it requires planning, and applying special modularization techniques”.

Later on, this client’s Web designer shows a well-done design that has a dashboard as a starting page of that RIA. Several nice-looking charts, some aggregated data from database, some data grids. Looks good.

When I asked her to design another yet light-weight view to serve as a home page of that RIA, she resisted – “I want to have very clean design that shouldn’t have anything that is not relevant for the application.”

“No problem, but in this case your application will come up a lot slower than that Connect Now page. That page, if you remember has almost nothing there”.

“But you said you can do it as fast as Acrobat Connect, aren’t you?”
“Yes, I did, but Acrobat Connect’s main page does not have charts, it doesn’t process thousands of database records, isn’t it?”

But guys at Adobe designed that page in a smart way to make the users happy. It not that important if they’ll have to wait (later) for a couple of seconds when the actual work will have to be done…But it’s L-A-T-E-R. That page is perceived to be fast.

Using a dashboard as a starting view of your application means sending over the wire at least one extra 500Kb+ file: datavisualization.swc . If you are using third party graphic libraries, this belly fat can turn into something closer to one meg or even more.

“But I’ve heard that Flex framework can be cached on the user’s computer”
“True, but this is correct for the users who have already worked with yours or someone else’s Flex application that was deployed with datavisualization library as signed RSL (a SWZ file). But there are always users with virgin computers that won’t have that datavisualization library installed. Remember, you only get one chance to make a first expression!”

That’s why, we recommend designing any Flex application as a portal with a very light main page, that gradually, in the background brings other RSLs while the user enjoys working with the main view.

The other very important thing that some IT developers managers must not forget – it’s the SLA. Yes, it the same old service level agreement. And it must be in writing. For example, “The first view of the RIA should be displayed in under 20 second for a user sitting at the 1Mbps Internet connection.” Now we are talking. If you have it in writing and signed off by the users, no one will blame you for delivering a RIA that “feels kinda slow”.

“Thank you, Yakov. Does your company offer some mentoring or an advanced Flex training classes where our developers can learn all these tricks?”

“Yes, we do. I will be talking about performance and other most important usability features of Flex next week at our two-day Advanced Flex training in Toronto that’ll take place next week. During such events we share lots of tricks and techniques for delivering large but responsive enterprise application. “

I know, this is an outrageous into-the-face infomercial, and hopefully the $100 discount code vzw100 will put a smile back on your face when you’ll enter it at the registration page over here: http://www.eventbrite.com/event/353452185

Can’t make it to Toronto? How about a one day symposium New York City on August 7 http://www.eventbrite.com/event/355645746:

Don’t feel like flying to this great but a little crazy city either?

No problem. We can fly to your city and help you with your Flex project on site.

The choice is yours.

Yakov Fain

During the last several years our company, Farata Systems have architected and developed a number of Flex projects ranging from creating widgets for startups to large applications having two hundred views. Some projects were created from scratch, and we had a luxury to do it our way. In some cases we had to pick up the code left by other developers.

Three years ago Adobe Flex has been completely revamped (I’m referring to Flex 2) and nobody knew about it. But today, the word Flex doesn’t make Java developers angry any longer. Java/Flex projects are considered business as usual. Many enterprise Java developers went through Flex training and are ready to roll up their sleeves…

After spending 10+ years with Java I can easily put myself in the state of mind of Java developers – they often start with selecting the right framework. As a matter of fact, our perspective customers often request to include an item “Flex framework analysis and recommendations” in the agenda of our very first joint meeting. Here’s a typical conversation that takes place during such meetings:

“Yakov, we have a team of experienced Java developers and some of them have exposure to Flex. Which Flex MVC framework do you recommend? By the way, does the ABC framework support XYZ functionality?”
“No, MVC-based frameworks don’t support any additional functionality that doesn’t exist in Flex. Their goal is to rearrange your code and change the way components of your RIA communicate with each other. But why do you need an MVC framework for your project?”
“Well, everyone’s using them. Having a framework makes the project development more structured and organized.”

Is it so?

Most of the Flex MVC frameworks are intrusive and require developers to write more code just to support the life cycle of the framework itself. Usually, they are built on singletons, and this complicates modularization of the RIA. I’ve been writing and speaking against Flex MVC frameworks for years, and if you’d like to read a detailed analysis and comparison of some of them, read the first chapter of the book “Enterprise Development with Flex”.
Last year at MAX ’08 conference, I participated in the panel “The Flex architecture faceoff”. Two out of four panelists (Chafic Kazoun and yours truly) were advocating component-based approach without squeezing a RIA inside any MVC framework. It was a lively discussion, and you can listen to its recording at http://tv.adobe.com/#vi+f15384v1055
At this point you may say, “OK, it’s easy to critique frameworks, but how do you approach development of a new project especially while having a distributed team of developers with minimal exposure to Flex?”
And I’m glad you’ve asked this question.
In this article I’ll try to identify common artifacts that exist in literally every Flex enterprise project. I’ll also highlight major principles and introduce you to a component-based approach that our developers use in almost every project.

Flex to Java Communication Protocols

The role of Java side of RIA is to deal with data: get the data from a DBMS, a Web Service or any other data source and deliver it to the Flex client as quickly as possible. The fastest way of arranging Java-Flex data exchange is AMF or RTMP protocols. The open source AMF protocol is built on top of HTTP and it offers efficient data serialization between Flex and Java. RTMP offers faster socket-based full duplex communication.

If you install an open source server-side component BlazeDS under a servlet container of your choice, or will use Granite Data Services – AMF will be your only option for data transfer. Commercial LiveCycle Data Services ES (LCDS) will give you both RTMP and AMF implementations. LCDS will also offer you an automated way of data synchronization between Flex and Java.
There is a small number of high performing enterprise applications that would really benefit from using RTMP protocol, and beside using LCDS, an open source server Red5 may become the only alternative.

Note. RTMP protocol is also widely used for streaming video, but these applications are out of the scope of this article.

Challenges of Flex/Java enterprise projects

Let’s dissect a typical enterprise application that’s built with Flex on the client and Java on the server. If you are leading such a project, it’ll present the following tasks, needs, haves, and nice to haves:

1. Keep track of changes that the user makes via UI controls and send modified data to the server
2. It’ll have a number of views that will display the data in the form of grids
3. It’ll have a number of views that will contain forms
4. Some views will represent master-detail relations, i.e. selection of a row in a grid has to display the detail information in a form container.
5. The data grid columns will need custom item renderers ranging from centered checkboxes to dropdowns populated with some reference data by making a separate remote call to the server.
6. It would be nice if a form component could have its own data provider similar to the one that List-based controls use.
7. Data forms must be validated and it would be nice to have
a) reusable validators (i.e. two date fields should be able to reuse the same instance or the Validator object)
b) embedded validators, encapsulated in component such as DataGrid.
8. The main view of your application must appear on the user’s screen ASAP even if they have slow Internet connections.
9. The data changes made by one user may need to be automatically synchronized with the server and notification of the changes should be sent to other users potentially looking working with the same data set at the moment. This functionality is supported by Data Management Services in LCDS, but you may want to have the same functionality in open source BlazeDS.
10. If you are building an AIR/BlazeDS application, you need to come up with a custom solution for automatic data synchronization for occasionally connected applications.
11. Printing is an Achilles heel of Flex. You’d like to be able to generate PDF on the client for your Flex/BlazeDS or disconnected AIR applications.
12. Since your modularized application may consist of five-ten-fifteen Flash Builder projects, writing build scripts becomes a project in its own. Can writing script be automated?
13. Your Flex project may need to consume a dozen or more of Java data transfer objects hence you need to develop the same number of ActionScript classes for efficient data serialization. During the project development cycle the structure of these DTOs may change if not daily, then weekly. An automation tool for generation of DTOs can save you some project development time.
14. Some of the views in your application represent CRUD functionality and using code generators or wizards that lower the amount of manual coding is highly desirable.
15. How do I link all these libraries – RSL/Merge-in/External? Should I use Flex SDK as RSL?

Over the years, we at Farata Systems came up with our solutions to all of the items from the above laundry list. At this point every other reader would exclaim, “Finally, here comes the selling part. I knew it!”
Wrong! All of the components implementing the above functionality not only are available for free, but we also open sourced them as Clear Toolkit framework and (see SourceForge at https://sourceforge.net/projects/cleartoolkit/ ).
Now I will write yet another list of solutions that you might want to research further. By the way, even though we call our components a framework, you can use most of them ala cart.

How we deal with challenges of Flex/Java enterprise projects

We’ve created and are happy to share with the community a number of handy classes, tools, and techniques. You can get the code, which has been open sourced, and you can read our books and articles describing how to use them.

I’ll give you quick references that help in finding solutions to the above challenges (I’ll keep the same order and numbering).

1. Clear Toolkit has a library clear.swc, which has a component DataCollection that supports automatic tracking of the user changes. Look at the ChangeObject class – we’ve implemented it similarly to the one in LCDS, but ours can be used with BlazeDS too. If you need to make your updates transactional, use the BatchService class.
2. We use DataCollection (a subclass of ArrayCollection) as a data provider for data grids. Besides keeping tracks of changes, it encapsulates Flex remoting and reduces the amount of manual coding.
3. Research the DataForm component. Read about it in the sample chapter mentioned at the end of this article.
4. DataCollection supports proper updates in Master-Detail scenarios (see http://flexblog.faratasystems.com/?p=407).
5. Read about resources in the sample chapter mentioned at the end of this article.
6. Read about DataForm component in the sample chapter mentioned at the end of this article.
7. Read about Validator component in the sample chapter mentioned at the end of this article.
8. Read about custom preloaders and how to build every application as a mini-portal with a light-weight starting application in Chapter 8 of the upcoming O’Reilly book.
9. Read about DataCollection in general and hierarchical data collections with deep data synchronization in particular (http://flexblog.faratasystems.com/?p=407)
10. Read about the OfflineDataCollection (Chapter 9 of the upcoming book) and see a pre-recorded demo of a sample application that’s using it (http://flexblog.faratasystems.com/?p=394 ).
11. Explore the Clear Toolkit’s package com.farata.printing – it includes extended Flex components that can expose themselves in a format suitable for PDF generation. Read chapter 11 of the upcoming book for more details and samples.
12. An approach and techniques of minimizing the download time is described in Chapter 8 of the upcoming book.
13. Explore our DTO2Fx code generator that comes with Clear Toolikt: https://sourceforge.net/projects/cleartoolkit/files/
14. Read about Clear Data Builder 3.1 that can generate the entire CRUD application based on either SQL or arbitrary Java DTO’s at https://sourceforge.net/projects/cleartoolkit/files/
15. Read chapters 7 and 8 about linking libraries and loading modules in Flex RIA.

Where can I learn more about these solutions?

First, you can read the book Rich Internet Applications (http://riabook.com/) with Adobe Flex and Java that I co-authored with Anatole and Victor, my colleagues at Farata.
Second, you should read an upcoming O’Reilly book Enterprise development with Flex, written by the same authors.
Third, you may explore the source code of Clear Toolkit components and use the tools published at SourceForge.
Fourth, we invite you to enroll in Advanced Flex trainings, seminars and symposiums that we run on a regular basis. During these events we demonstrate most of the techniques mentioned above as well as our latest findings. Find the up-to-date information about such events under the Training section at http://faratasystems.com/
Fifth, read our blog at http://flexblog.faratasystems.com
To get a better feeling about the functionality of some of the extended Flex components, please read the sample chapter of the upcoming book Enterprise development with Flex. O’Reilly decided to publish this chapter as a three-part blog under my name, but I was only one of three co-authors, and all of us are accountable for these texts. Read the sample chapter here:
Part 1. http://www.insideria.com/2009/05/chapter-preview-building-an-en.html
Part 2. http://www.insideria.com/2009/05/building-an-enterprise-framewo.html
Part 3. http://www.insideria.com/2009/05/building-an-enterprise-framewo-1.html

Summary

I just want to give a full credit to my colleagues, excellent software engineers at Farata that work day in and day out on enhancing the functionality of Flex components and decreasing the amount of manual coding required by application programmers. Open sourcing our component have allowed us to bring more people to testing (our big thanks to people who use Clear Toolkit and report issues and make suggestions at Source Forge forums).

We invite Fle and Java developers to become active contributors and submit their version of enhanced components to make Clear Toolkit, a real platform for all who value open source solutions. There are no geniuses that can beat the collective intelligence!

Yakov Fain

Our company, Farata Systems is looking for a senior Flex/Java
developer – we are expanding a our team working on a project at a major
financial company in Jersey City, NJ. Easy commute by public transportation from Manhattan. The rate for the right candidate is $80p/h, corp-to-corp.
No telecommute – work on site only.

If anyone is interested, my contact email is yfain at faratasystems.com.

Thanks,
Yakov Fain