12
Sep
06

Dear AJAX…with love, Flex

So I continue to be asked Flex or AJAX…AJAX or Flex…here’s a list of why Flex is a better solution for enterprise level applications…not brochure-ware sites or small RIA widgets added to a site, but a full-blown RIA…feel free to agree, disagree, or fill in what’s missing.
  • The Flash Platform provides a true application platform as a virtual machine that’s browser / platform independent, including a JIT compiler and strong typing. AJAX applications are subject to browser inconsistencies and leverage the browser as the application platform, something it was never intended to be used for. The performance implications of running a complex AJAX application are subject to the browsers ability to interpret JS and determine the type at runtime — is it a string, a number, an object? — whereas ActionScript 3 (AS) eliminates type look-up because it’s strongly typed and compiled into bytecode rendered by the Flash Player VM — this facilitates better responsiveness in your application.In addition to the performance benefits is the Flash Platform’s browser / platform independence — you want your application to look and act a certain way and code it once, then go with Flex (or even Flash for that matter) — if you’re into writing several different versions JS / CSS in order to achieve this, then you want AJAX. Until browser’s start to follow standards, the closed, Flash Platform is the only answer for consistent UIs and actions on multiple platforms and browsers.
  • FDS (Flex Data Services) provides the ability to perform data push from the server in the form of pub / sub messaging; there’s a Java adapter that allows Flex clients to subscribe to JMS topics and additional adapters can be written to subscribe to legacy / other messaging systems. In addition, FDS provides data synchronization, an API that abstracts the action of capturing all the data deltas on the client and persisting them to the server, thus enabling developers to focus more on the application and business logic. FDS allows provides data paging for large data sets and handles temporary disconnects transparently to the developer.A direct implementation of push simply isn’t possible in an AJAX application, but can be simulated by forcing the client application to poll the server every <n> seconds — however, this increases network traffic and puts additional strain on the application server. While I forgot to mention that a form of push is possible for ajax with Comet, Alessandro Alinone pointed me to another server-side component called Lightstreamer:

    …Lightstreamer Server is a general push server (designed for maximum scalability), that can be used to deliver real-time data *both* to Ajax/Comet clients and Flash/Flex clients. For example, there are some banks that have chosen to rely on a single push server (Lightstreamer) to stream data at the same time to: AJAX clients, Flex clients and .NET clients. Currently the integration between Lightstreamer and Flash/Flex is performed through a JavaScript gateway. You can see a demo here. But soon a native Flash/Flex integration library will be released too.

  • AJAX typically requires some type of data transformation in the middle layer and client side, adding an unnecessary performance overhead on both sides of the wire, eg:
    1. Client makes an asynchronous HTTP request for data
    2. Request is mapped to a servlet / JSP that uses JDBC to query your database
    3. Data is transformed into an XML doc (or JSON) and sent as an HTTP response (transformation 1)
    4. Client receives the XML and must parse it into useable data (transformation 2)
    Flex can make calls directly to the back-end by invoking methods on Java objects, like POJOs or EJBs. These objects are transparently serialized and deserialized by the FDS application, mapping your client-side ActionScript objects to your back-end Java VOs, DTOs, or whatever other pattern(s) your architecture enlists; the developer is just left to expose the java objects to the flex client via a couple thin lines of xml in remoting-config.xml. For example:
    <destination id="myBizDelegate">
        <properties>
            <source>myWebApp.myBizDelegate</source>
            <scope>application</scope>
        </properties>
    </destination>
    where myWebApp is the package for the Java object myBizDelegate.java. In addition, you can tell FDS you specifically want to map an AS object to a Java object in your ActionScript object with the following meta data in myVO.as:
    [RemoteClass(alias="myWebApp.myVO")]
    In this case, my Flex client is directly invoking methods on my Java biz delegate myBizDelegate and returns a Java value object myVO, which is now deserialized into the ActionScript object, myVO.
  • Flex provides an elegant and familiar programming model with MXML as the declarative presentation layer and ActionScript as the application / business logic in a true class-based, strongly typed programming language with a similar feel to Java — this makes Flex development an easy transition for traditional enterprise developers who are familiar with (for example) JSP / Java development. AJAX is a mesh of several client side technologies: CSS, DHTML, and manipulation of the DOM with JavaScript, and requires extensive, expert knowledge of each. There are some DHTML / AJAX toolkits that attempt at abstracting the details of AJAX development, but most are still in their infancy and haven’t been proven in production environments or follow standards, and often lack documentation.
  • The Flex Framework provides a rich, robust, and extensible set of UI components that facilitate rapid UI development with MXML, the declarative presentation layer. Furthermore, MXML is simply an abstraction to ActionScript (MXML is compiled to it’s complimentary AS objects under the covers — it’s analogous to what JSTL is for Java), enabling developers to create complex, custom components with a blend of MXML and AS. The following illustrates how the same end result can be accomplished with MXML or AS:MXML:
    <mx:TabNavigator width="200" height="200">
        <mx:Vbox title="Tab 0" />
        <mx:Vbox title="Tab 1" />
    </mx:TabNavigator>

    ActionScript:

    // create a tab widget and set properties on it
    var tabNavigator:TabNavigator = new TabNavigator();
    tabNavigator.width = 200;
    tabNavigator.height = 200;
    
    // create first child container
    var a:Vbox = new VBox();
    a.label = "Tab 0";
    
    // create second child container
    var b:Vbox = new VBox();
    b.label = "Tab 1";
    
    // add containers to tab widget
    tabNavigator.addChild(a);
    tabNavigator.addChild(b);

    This flexibility not only provides a certain degree of elegance, but also offers the unique ability to write complex components entirely in AS and then actually implement them through a simple MXML tag. It’s extremely powerful.

  • Flex Builder 2 provides a powerful and extensible IDE built on top of Eclipse. Developers can can expect the same debugging tools as the Java flavor of Eclipse, as Flex Builder’s debugging suite leverages the Eclipse debugging framework — inspect variables, watches and breakpoints — you can even configure the IDE to enable full end to end debugging of your Flex to Java to Flex application, etc. AJAX IDEs are starting to pop up as Eclipse plugins as well, but are in their infancy and still don’t offer the same level of debugging and standard tools a typical application developer expects.
  • Standards and best practices for Flex exist in the form of client-side microarchitectures, a unit testing framework, core AS3 libraries, and a documentation generator similar to JavaDoc:
    1. Cairngorm
    2. ARP
    3. FlexUnit
    4. AS3 Libraries
    5. ASDoc
    6. FAB (Flex AJAX Bridge)

    At current, best practices, standards, and additional developer tools are a major drawback to using AJAX as an enterprise level solution, as again, it’s still in it’s infancy.

  • One final point — with Flex and FDS, you’re not pigeon holed into a solution — if needed, Flex and FDS integrate nicely with AJAX via a the FAB. This is typically used when creating mashups with existing applications but also allows developers to create components from either solution and still make them communicate.
Like I said when I started this post, feel free to add, subtract, rip, agree, etc…
After writing this, I found two additional posts with similar thoughts:
Advertisements

3 Responses to “Dear AJAX…with love, Flex”


  1. August 5, 2011 at 11:42 pm

    53. obviously like your web site but you need to check the spelling on quite a few of your posts. Many of them are rife with spelling issues and I find it very bothersome to tell the truth nevertheless I will definitely come back again.

  2. June 11, 2012 at 10:05 am

    Bilgisayar kursları istanbul. Ankara web tasarım kursları.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: