Flex And AJAX, Friends or Foes?
Many developers will tell you that Flex and Ajax are apples and oranges; compliments to one another that aren’t always in direct competition. While this is certainly true, in the space of rich Internet applications (RIAs), there are still many situations where both technologies provide similar solutions to the same problems. The purpose of this article is to provide a comparison between Flex and AJAX in those situations where they are both relevant to the problem at hand. It is intended to be a living document, and I plan to update it frequently as you add your comments, so please feel free to add your opinions and suggestions!
You may also download this article as a PDF from here: https://anthonyfranco.files.wordpress.com/2007/06/flexandajax.pdf
What Is Flex?
Flex is a free, open-source platform and component library for developing applications that can be deployed on the ubiquitous Flash Player. When you think of Flash, you may think of the Player or the Flash development IDE. Flex is just another way of creating applications to be deployed on the Flash Player. Flex is specifically geared toward building robust, rich Internet applications — internet applications that behave with the same interactivity and engagement as desktop applications. There are two languages in the Flex Framework MXML and ActionScript. ActionScript is a strongly typed ECMA compliant scripting language and MXML is typically used for layout, styling and data binding.
What Is AJAX?
Feature Comparison Matrix
Caveat: AJAX services / tools / libraries / compatibilities and components are morphing everyday. This matrix is designed to compare the most important features of the most robust AJAX frameworks with the Flex framework. It is not meant to be a comprehensive list, and is subject to some interpretation. In addition, since Flex and Flash are irrevocably bound together, many of these comparisons do not make the distinction between Flex, Flash or the Flash Player.
|Why Care?||Animation support allows developers to indicate state change, orientate the user on navigational changes, or to simply entertain & immerse the user.|
|AJAX||Limited support and difficult to author anything but simple linear animations|
|Flash / Flex||Richly supported|
|Why Care?||1) Allows users to alter bitmap
imagery real-time, client side
2) Gives developers flexibility to create image effects, distortions and alterations at runtime
3) Aids in animation support (think motion blurs and distortion effects)
|AJAX||Supported inconsistently in Opera, Firefox and Safari. Can also be achieved through extensive server-side processing and client-server interaction|
|Flash / Flex||Supported natively|
|Why Care?||In some circumstances it is beneficial to render HTML within your application. For example, users might generate complex HTML content for other users to see.|
|Video and Audio Streaming|
|Why Care?||Video is one of the hottest thing on the web right now. You may not think that it matters to you, but keep in mind that most companies decide to augment an application later with some type of video enhancements like video training, corporate communications, or entertainment. Now, more than ever, video is becoming a big part of online communication.|
|AJAX||No native support (user needs a separate plugin like Quicktime, Windows Media Player, or the Flash Plugin to play video in AJAX deployments)|
|Flash / Flex||Supported, video quality is pretty good but needs to improve before widely adopted by media companies. Video and audio capture through user’s installed devices is also supported.|
|Why Care?||The better the development environment, the easier it is to create code quickly and the more developers will adopt the technology.|
|AJAX||Free – Google Toolkit
Free – Echo 2
Free – jsLINB
|Flash / Flex||3 Authoring environments:
$500 Flex Builder
$700 Flash CS3
Free – Any Text Editor
|Why Care?||The runtime is what interprets the code into executable actions to the processor. Inconsistencies, bugs and performance issues in the runtime can seriously degrade the user experience.|
|AJAX||Each browser is required to interpret code individually.|
|Flash / Flex||A single browser plugin provides a single cross browser cross platform runtime|
|Strongly Typed / OOP Language|
|Why Care?||Strongly Typed and Object Oriented Programming methodologies make it easier to create code with larger teams by enforcing certain coding patterns, and metaphors across an entire code-base|
|AJAX||Supported in some frameworks, but still compiles down to a prototype structure. Most libraries do not mix well with one another and can commonly cause conflicts.|
|Flash / Flex||E4X Compliant|
|Why Care?||Vector graphics give designers the ability to create vector based skins and graphics for their applications, making the footprint of the application dramatically smaller. This also gives developers the ability to create complex data visualization components that can dynamically update, animate and redraw without the need for server round-trips.|
|AJAX||Supported through VML in newer releases of IE and limited support with SVG in some of the other browsers|
|Flash / Flex||Supported natively|
|Why Care?||How easy is it to accidentally or nefariously create an application with security holes that threaten your servers or the user’s machine?|
|AJAX||Both AJAX and Flex utilize the browser’s security sandbox to ensure the security of the desktop. Hackers may have an easier time finding security holes in your systems by peering into the source code of your AJAX application while the code geared for the Flash Player is obscured by compilation and can be encrypted.|
|Flash / Flex|
|Why Care?||Accessing the Document Object Model allows an application developer to control the browser itself.|
|Why Care?||Obviously, the ability to connect your application to a services is what building an online application is all about.|
|AJAX||Both AJAX and Flex allow you to communicate using web services, REST, and simple XML. Binary sockets are supported with the Flash Player giving you the ability to communicate very light weight data packets bidirectionally (pull and push)|
|Flash / Flex|
|Search Engine Optimization (SEO)|
|Why Care?||Sometimes, when dealing with RIA technologies SEO is irrelevant. Search engines operate in page based metaphors and some RIAs are dynamic and interactive such that SEO is not appropriate.|
|Flash / Flex||Limited support. SEO is achieved through meta tagging and alternate content publishing.|
|Why Care?||If you applications are targeted for large organizations or government agencies, accessibility is a core critical requirement. Also, isn’t it just the right thing to do?|
|AJAX||Limited, few frameworks claim to have support|
|Flash / Flex||508 compliant – but you must architect the application up-front for accessability|
|Analytics and Behavior Measurement|
|Why Care?||Measurement is the key to understanding the success of your application. It also allows you to understand where you can make incremental improvements to optimize the user experience and help accomplish business goals.|
|AJAX||RIA analytics tools are woefully lagging behind. Omiture, Web trends and Google Analytics all have limited support and poor RIA reporting. EffectiveUI has a set of homegrown tools to properly measure and report user behavior within an RIA.|
|Flash / Flex|
|Why Care?||Large scale, enterprise applications require the ability to test user interactions in an automated way in order to increase testing accuracy while reducing the budget and schedule of quality assurance cycles.|
|AJAX||Many web-page automated testing tools will work fairly seamlessly with simple AJAX implementations.|
|Flash / Flex||Flex components include an automated testing framework that tie into tools like QTP or home-grown solutions.|
|Why Care?||How “locked in” to a proprietary technology are you when choosing the right platform?|
|AJAX||There are many different licensing options for the various AJAX frameworks. Anywhere from open source to commercially licensed.|
|Flash / Flex||Flex and ActionScript are open source. the Flash Virtual Machine (FVM) is not. Adobe has decided to keep the runtime closed to control code versioning, standardization and security.|
|Why Care?||Enables 3rd parties to create tools, plugins, components, etc.|
|Flash / Flex||The Flex components can be extended, and new ones written. The Eclipse based Flex Builder is also significantly extensible.|
AJAX is an incremental path to a better user experience [however] the AJAX path itself forks. Just because a development team has chosen to go with Ajax doesn’t mean that its tool selection effort is complete. There remains the important decision of how many and what type of Ajax frameworks to use. Flex delivers productivity in the long run but takes more time to learn. Adobe is an attractive RIA solution because it combines powerful development tools (Flex) with a near-universal browser plug-in (Flash) that’s designed to simplify RIA deployment. Managers who have concerns about small commercial Ajax providers or support issues with open source Ajax frameworks consider Flex a safe alternative. But there is a downside: To be productive in Flex, developers have to learn two new languages and an extensive runtime framework — something that can take between one and three months to learn.
Jeffrey Hammond, Forrester Research. “AJAX or Flex, How to Select RIA Technologies”
Unfortunately, its not that simple. The differences in how browsers interpret AJAX code is where this discussion gets very complicated, very quickly. AJAX frameworks attempt to obscure browser differences by creating components and libraries that account for browser and operating system inconsistencies. However, these frameworks do not publish ubiquity statistics, making it hard (if not impossible) to make educated compatibility decisions on which framework(s) to choose. In addition, if you need to customize a component, create a new control, or extend a library, you now have to worry about your code being cross-browser compliant. As the sophistication of your AJAX application increases, the potential compatibility issues will increase exponentially.
Developing and testing large applications across browsers and operating systems dramatically increases production costs. This is the primary reason why many firms use AJAX to make incremental improvements and modifications to their online applications, and use Flex for large scale deployments where performance, scalability and user experience are the highest priorities.
The most definitive performance comparison between the 2 platforms was done by James Ward in April, 2007:
James Ward “Ajax and Flex Data Loading Benchmarks”
Earth Measurements (http://www.earthmeasurements.com) is a great example of an augmentation of an already great rich application. Flex overlays work with the underlying Google maps layer to let you measure distance between points on a Google map. A great example of complex, tight, integration between the two technologies.
Google Finance (http://finance.google.com) is a great application for checking out how a certain company is doing financially. For instance, have a look at Microsoft at http://finance.google.com/finance?q=MSFT. Notice how elegant and simple this stock’s performance graph is. It’s easy to see the stock’s value at different levels of detail with zooming and tool tips – all things that are easy to do in Flex/Flash, and difficult if not prohibitively difficult to do in AJAX. But Google also maps landmarks in the stock’s performance to news about the company that may shed light on why the value is taking turns up or down. The news is just text and links, no reason not to use HTML if you already have the expertise and the application makes no more technical demands. The power of Flex/Flash and AJAX interoperability shows through when you click a milestone on the graph or in the news list and the graph and news communicate to highlight a selection from the other. Also, scrolling the graph keeps the news in sync. A great example of each technology in it’s place and working together for a great application.
You’re probably saying to yourself, “Okay, all this information is great. But bottom line it for me. What technology should I use?”. The answer is that it depends (big help, right?) As with any software development process, you need to figure out which technology best solves your specific problems. It may be helpful to talk about what types of applications are suited for each:
– To make incremental usability enhancements to an existing web site.
– For building “widgets” that do not need a team larger than a couple of developers.
Example uses could be navigational elements, simple calculators, and client-side validated forms.
– When you need to develop applications that require a robust, scalable rich Internet application.
– Where you require sophisticated and interactive data visualization.
– When video & audio playback or web camera / microphone capture is a requirement.
– Where you require complex animation or bitmap manipulation.
– When the graphic design is core critical to your business needs.
Example uses could be product configurations, workflow/process/inventory management applications, video conferencing, playback & editing, immersive or entertaining experiences, data visualizations, and management dashboards.
– When SEO and an immersive experience are equally important.
– When neither meet all of your needs (for example: video playback and HTML rendering are both requirements).
Example uses could be WYSIWYG HTML editors, and user generated content portals.
Additionally, in real-wold use, Flex typically requires less coding to build the same or better functionality. The learning curve is higher, but the development times are significantly lower. As one of EffectiveUI’s senior architects, put it:
I really believe that Flex development is faster than AJAX simply because you end up writing less code. The Flash runtime just handles a ton of [stuff] for you. I am technology agnostic (or try to be), but one thing I certainly am is lazy!!! I’m too old to be motivated by caffeine and late nights. So Flex has my vote in the productivity camp. Flex vs. C# feels to me like the same productivity boost that C# vs. C++ did a few years ago.
If you would like to dig deeper on this subject, the articles, blogs and papers below have helped us in creating this article:
Ted Patrick, Inside Yahoo! Interview “AJAX vs Flash” http://www.onflex.org/ted/2006/09/ajax-vs-flash-inside-yahoo_27.php
Pete Cashmore, “Flash, AJAX and Yahoo Maps: Does the Technology Matter?”http://mashable.com/2005/11/03/flash-ajax-and-yahoo-maps-does-the-technology-matter
James Ward, “AJAX and Flex Data Loading Benchmarks”http://www.jamesward.org/wordpress/2007/04/30/ajax-and-flex-data-loading-benchmarks
Jeffrey Hammond, Forrester Research, “Ajax Or Flex?: How To Select RIA Technology” www.forrester.com/go?docid=40989
Ryan Stewart, “The Universal Desktop” http://blogs.zdnet.com/Stewart/?p=216
Flash Player Penetration Statistics http://www.adobe.com/products/player_census/flashplayer/version_penetration.html
AJAX Browser Compatibility Matrix http://www.musingsfrommars.org/2006/06/howre-we-doing-now-ajax-browsers.html
Adobe Flex Product Information http://www.adobe.com/products/flex/productinfo/overview
Mozilla Development Center http://developer.mozilla.org/en/docs/AJAX
Flex and AJAX Bridge http://labs.adobe.com/wiki/index.php/Flex_Framework:FABridge
EffectiveUI’s Website http://www.effectiveui.com
add blog to del.icio.us
add blog to technorati
dig this story
Best treatment of this comparison to date. Anthony, I would like to see a third column: “WPF/Silverlight”
Excellent post. Thanks.
How about OpenLaszlo? It is open source, and allows you to compile the same source code into SWF (just like Flex), or browser specific DHTML (AJAX). The development tools need some work (for example, you can’t set break-points in the runtime debugger). However, it seems to provide the best of both worlds. You write one animation expression, say bouncing a ball over a decaying sigmoid, and see it in both Flash and Dojo !
Pingback: : : knowledge.lapasa.net » Blog Archive » Flex And/Vs. AJAX - A good breakdown by Anthony Franco : : "If you do what you are passionate about everyday, you would have never worked a day in your life." : :
Mahmoud and Douglas…
We debated on bringing in other technologies into this white-paper like OpenLaszlo and Silverlight. EffectiveUI’s customers are primarily Fortune 1000s focused on creating scalable, business focused, engaging, connected applications. Our feeling is that neither of these technologies are mature enough to include in this document, yet. Once there are good, reference-able, large-scale enterprise deployments on OpenLaszlo or Silverlight, we will add them.
WPF/Silverlight has some terrific Video capabilities, and Microsoft has a great product roadmap pulled together. We are carefully evaluating Silverlight as a viable option but we are also cognizant that it is new and untested by the market. Make no mistake, Microsoft is to be taken very seriously in this race.
OpenLaszlo has a great promise “Develop in one code-base and deploy in either the Flash Runtime or in AJAX” … however, when you look under the hood, you find that you are developing to the lowest common denominator for both. For example, you can not leverage the Video Streaming, Drawing APIs or Bitmap Manipulation capabilities of the Flash Player nor the HTML rendering of the browser. Basically, you have to develop to the weaknesses of both platforms, not to the strengths of one or the other. Additionally, if you ever talk to someone who has actually deployed a production application in OpenLaszlo, you will find that (relatively speaking) the learning curve is steep, the documentation sparse, and the community & company support is limited and expensive.
Very Nice! thank you very much for this awesome post!
Very interesting information! Thanks!
While you can receive streaming video from a web cam with Flex, in order to do it you have to have access to a Flash Media Server, which is costly. I find this to be a real limitation.
What is the “free” alternative for streaming video using AJAX? I’m hoping you know something I don’t.
Also, there are plenty of free options for streaming video in flash…
1) Smart Progressive Downloading (this is what YouTube Uses)
4) I’m sure there are more !
Hello from Azerbaijan :)
Good review of Flex and AJAX technologies.
Thanks Anthony, good luck to you!
я считаю: неподражаемо..
[translated from russian:]
I think: inimitably ..