Thursday, June 28, 2007

Flex and RIA

Flex is the application building framework from Adobe which adds a lot of value in developing application for Rich UI and better user experience. Lets begin with Rich Internet application development.

What is Rich UI?
UI looking like Windows application, Swing application with widgets like Tabbed pane etc. HTML does not provide any standard tags for these complex widgets. There are frameworks – server-side and client side which does the trick.

What are the RIA options present?
If we look into the space of RIA frameworks different names will come into pictures – AJAX frameworks, JSF, Open Lazlo, Flex, Applets.

AJAX frameworks: AJAX frameworks are java-script based frameworks – which uses some java script functions plus some Java script libraries to develop Rich UI. People with HTML/JS skill-set can work with this easily. Cross browser support for all browsers is not present in all the libraries.

JSF: Sun has put a lot thrust behind this so that this becomes a front end framework. Its server-side – which means tag library driven and its HTML. There are frameworks like Jboss seam – which tries to put together UI framework and back-end frameworks together to provide seamless integration between layers.

JSF in action: http://www.irian.at/myfaces/home.jsf

XUL – XML based UI development for Mozilla and Firefox. Do not seem fully supported by IE. IE7 has support of XAML which is Microsoft version of XUL.

Applets and applet based frameworks: There are a few Applets based RIA options like Canoo (http://www.canoo.com/ulc/). Although Applet has features to build RIA applications its biggest disadvantage continues to be the limited availability of the current version of the technology in Web browsers. Lack of Microsoft support is also part of the reason. Compared to Flex the arguments will be XML based UI development in Flex is an easier programming model than purely java code driven layout design.

Java-script Vs Flash?
Why java and .NET became popular – since its platform independent- i.e. the cost of software development goes down. Same reason applies for flash since it provides a programming model for developing web application tier which is browser independent – thus the development and testing becomes less time-consuming for developing cross browser compliant applications. For all browsers Flash players are available which allows one to develop Web applications quickly – since we testing time is less and less error prone programming model where users don’t have to choice of using browser specific java script or CSS in the first place.


Open Lazlo: Flash based. The programming model is similar to Flex (MXML/Action-script) Vs XML-Java-script. It can generate RIA in Flash as well as DHTML.
Couple of arguments which holds against Open Lazlo compared to Flex:
i) IDE support needs improvement.
ii) Flex is backed by Adobe instead of a group of developers.
iii) Flex is enterprise application framework instead of UI only framework.


Is Flex a RIA framework?

The answer is Yes and NO. Yes since it supports RIA development and No because it is much more than that. It has a set of features under data-services where it provides features like server push, polling which adds a lot of values to enterprise applications.

Is Flex free?

For RIA application development - the SDK is free. Yes, if you want to use your own editors and command line features for compiling the MXML to flash then its free.

The Flex SDK which is free and includes the Flex libraries, the compiler (mxmlc), the debugger, and the documentation.
Flex Data Services (FDS), an optional set of server-side components deployed in your J2EE application server. FDS includes a Java RPC service (sample 3), publish/subscribe messaging (samples 6 and 7), and data management services (sample 8). FDS is free for a single-CPU deployment (FDS Express), and is licensed per CPU when deployed on multiple CPUs.
FlexBuilder, an optional IDE for Flex development. Built as an Eclipse plug-in, FlexBuilder includes a design view and a code view, code hinting, visual debugging, etc. FlexBuilder is licensed on a per developer basis.
Optional charting components licensed on a per developer basis.
We can develop and deploy Flex applications entirely for free using the SDK and the IDE of our choice.

However Flex builder is what developers should adopt – for quick design, preview and compilation, debug and bunch of other features which is present. Not expensive ~ 1000$. We have licenses to be used.

The server-side components for Flex data services (in multi-CPU mode) are comparatively expensive and we have licenses for this as well.

Learning Flex: How difficult is it?

Flex is rather new but concepts are not. People with Action script or Java backgrounds with object oriented concepts seem to pick up Flex well. I hear some people say that “Client server days are back” - i.e. there is a good degree of similarity between Client server programming with VB, or Swing applications and Flex UI widgets, containers etc.


Gottcha’s

Is it all golden? Well – its not.

Few browser/platform compatibility issues: We have come across a few differences in behaviors between Safari in Mac and IE - Windows. I will say that’s just one instance. Other than that it was pretty smooth sailing as far as testing goes across browsers.

Support of Test Automation tools:

Limited. Only with QTP which is a commercial software. A lot of the tools don’t recognize the Flex objects. Few open source tools are there but quite primitive in nature.

How to work with QTP 9.1 and Flex 2.0.1?

Please note, earlier versions of Flex is not supported by QTP. Only 9.1 supports Flex automation. For QTP 9.1 and Flex 2.0.1 – here is the steps
http://weblogs.macromedia.com/lin/archives/2007/01/tips_for_config.cfm

Workaround: If not planning to buy or use trial versions for QTP - develop unit test cases for business tier. The UI widgets from Flex are well tested – and thus regression are more expected to be there in the Business Logic tier and for end to end testing we can manage by using manual testing.

Support of Performance engineering tools:

Limited. Only one which works is Silk performer – which is commercial software.
Open source tools do not work for all scenarios – reason Flex allows to communicate with back-end over many protocols - RTMP(s), AMF(s) and HTTP(s). Out of this Server push is done over RTMP and most of tools support HTTP primarily. Silk Performer supports HTTP and AMF.

Adobe lab has a tool for load testing flex applications which tests for data services. http://labs.adobe.com/wiki/index.php/Flex_Stress_Testing_Framework
As most load testing tool vendors have not yet released support for RTMP(s) or the latest version of AMF(s), the Flex Data Services Stress Testing Framework allows Flex developers to load test their applications that use RTMP and AMF3 without needing to use a commercial testing tool.

Different tool vendors are working towards adding support for Flex/Flash applications and expected to release in near future.

Workarounds: Open source tools like Jmeter provides ways for load testing web services. http://dev2dev.bea.com/pub/a/2006/08/jmeter-performance-testing.html
Thus we can expose the middle tier services as Web services and do load testing at the back end tier. Most of the UI is residing in client and don’t add a whole lot of performance overhead. So overall application performance will be – backend performance plus data transfer time.


I have AJAX enabled application – can I use it with Flex?

Flex can be adopted in pieces – Ex: If we have a real time monitoring system needed in an application we can just use Flex for that – no need to re-architect the entire application.

Yes; http://labs.adobe.com/wiki/index.php/Flex-Ajax_Bridge


What happens if I get stuck during development – can I Google and find the answer?

The community is fast growing. There are forums which help to answer questions other than a pretty well documented help documents. I would say there will be some cases we will need to rely on documentation vs quick solutions from the forums. There are code cookbooks which are being growing so overall help is there and growing.

Forums:

FlexCoder Yahoo group
Cflex.net forum
Adobe Forum on Flex – found some useful responsibility.

Flex resources:

http://www.flex.org/
http://labs.adobe.com/flexproductline/ (there is a lot of info in the community links on this page in the flex forums and MXNA aggregator links)
http://www.cflex.net/http://weblogs.macromedia.com/mc/
http://labs.adobe.com/wiki/index.php/
http://www.iterationtwo.com/frameworks.html
http://video.google.com/videoplay?docid=4762944544960468107 (Kevin Lynch's Web 2.0 Conference Presentation announcing Flex 2.0 and Flash 8.5 - Google Video)
A link from a Flex engineer on RIA design considerationshttp://kuwamoto.org/2005/06/08/seven-ideas-for-building-better-rias/These demos with source code samples may provide ideas for some of UI portions of the DAM and approvals modules that will provide views of asset and product thumbnails http://www.quietlyscheming.com/blog/components/fisheye-component/ http://www.quietlyscheming.com/blog/2006/05/09/animated-dragtile-component-01/

With the formal release of Flex 2 Adobe has launched www.flex.org as an entry point for flex resources and blogs from the engineering team. There are also archived breeze sessions from on line seminars this month at http://www.onflex.org/ted/2006/06/adobe-developer-week-sessions.php including one on FDS Flex Data Services and AS 3: ActionScript 3 for Flash Developers.

Here is an article on FDS at http://www.adobe.com/devnet/flex/articles/architecting_rias.html and some FDS messaging related posts at http://www.onflex.org/ted/2006/05/flex-data-services-part-1.php http://www.onflex.org/ted/2006/06/flex-data-services-part-2-messaging.php

Flex components available for downloading at the Adobe exchangehttp://www.adobe.com/cfusion/exchange/index.cfm?extid=1047291&view=sn610#loc=en_us&view=sn100&viewName=Adobe Exchange&extid=1047291

The newly released auto complete component looks like it could be used on form input fields: http://weblogs.macromedia.com/flexteam/

Click below for more:
http://www.adobe.com/cfusion/exchange/index.cfm?extid=1047291&view=sn610#loc=en_us&view=sn611&viewName=Flex Extension&authorid=73322349&page=0&scrollPos=0&subcatid=0&snid=sn611&itemnumber=0&extid=1047291&catid=0

These are some of the types of nice to have features with image views. http://www.richapps.de/?p=38"
Can be explored as time permits.
http://mxdj.sys-con.com/read/255823.htm">Here Here are some more articles on mixing Flash and Flex that may be useful when constructing full client in Flex


Example of using Flash for the login component:
http://flexblog.faratasystems.com/?p=88


Presentation at http://www.jessewarden.com/archives/2006/08/flash_flex_powe.html. Video link at: http://www.jessewarden.com/archives/2006/09/flex_seminar_pr.html as well as interesting blog reading on Flash designing and Flex programming

http://www.amitgupta.info/E41ST/RIA/E41ST.html">http://www.amitgupta.info/E41ST/RIA/E41ST.htmlEnter as guest and use a keyword such as "clinton" to find images of books that match the keyword.

The use of the close button for the details screen which appears after clicking an image allows for more room to view the images.

This demo has the tree component with checkboxes for multiple selection. View the demo at http://www.darronschall.com/weblog/archives/000241.cfm

http://adobedev.adobe.acrobat.com/p71169528/ This presentation is long (57 minutes) but has good tips for designing and constructing Flex apps for responsiveness. Note on slide 14 discusses a Flickr app that caused redundant measurement layout cycles for each image object.

Designing Flex 2 skins:
http://www.adobe.com/devnet/flex/articles/flex_skins.html

1 comment:

Unknown said...

Thanks for mentioning Canoo's UltraLightClient (kind of a thin Swing approach, see this comparison http://www.canoo.com/ulc/home/comparison/swing.html )

We recently published a screencast which offers a quick introduction how to set up a ULC project:
http://canoo.com/blog/2007/06/19/ulc-integration-plugin/

regards,
sandra

(disclaimer: i work for Canoo)