The document discusses Rich Internet Applications (RIAs), defining RIAs and outlining their key characteristics and classifications. It then provides comparisons of different RIA platforms such as Ajax, Adobe Flex, OpenLaszlo, and HTML5, examining features such as animation, video support, licensing, and more. The document also includes a case study on using Flex for data management in a Boeing NextGen application.
2. Agenda
Definition of RIA
Market Trend for Adapting RIA
RIAs HOLD GREAT APPEAL FOR SITE OWNERS
RIA Classification
Comparison matrix of RIA
RIA Case study
2
3. Definition of RIA
“Rich Internet Application is capable of delivering a rich experience to the user. It is the richness of the
experience that is often enhanced by making software that is more natural , more Connected, more alive,
more interactive, and more responsive”
- James Ward, Principal Developer Evangelist at Heroku
RIA is a multimedia web application, combining:
Richness of information
Richness of views
Richness of interactivity
Rich user experience:
Emphasis on visualization and direct manipulation
Shallow page hierarchy
3
4. Market Trend for Adapting RIA
Two of the often conflicting desires in IT are the need for rich user interfaces that
• Maximize a user‟s productivity
• Desire to decentralize computing
so that a user can gain access to the widest base of IT assets at the lowest possible cost on the other. These two forces are at
odds because rich client interfaces, until recently, have only been possible in certain limited scenarios in which the business
logic and computing resources were combined with the interface.
The market for RIA solutions consists of three submarkets focused on
1) Delivering RIA components 2) Environments 3) Extensions to IDE suites.
Creating content for Flash Player is becoming a very large market and building new development paradigms for creating
RIA experiences.
A set of six key business applications motivating overall RIA spending:
• web applications
• high-transaction and event-driven Internet applications,
• next-generation portals
• enhanced business intelligence solutions
• application modernization
• peer-to-peer or mash up solutions
ZapThink expects spending on each of these areas to increase rapidly over the next five years, exceeding $500 million by
2011.
4
5. Market Trend for Adapting RIA
-Example
Apple's RIA Platform
2008 be the year Apple enters the RIA market. Looking at iTunes, the web presentation layer has
made some amazing changes and added very rich controls. The advanced UI controls, sliders,
coverflow, menuing, image/data loading are really impressive and are all mark-up driven. Seeing
as this platform is cross-platform, widely deployed, and based on WebKit/Quicktime, Apple has
an entry into the RIA market in store for 2008. How, when, or if this will occur is wide open but
something is cooking here.
5
6. RIAs HOLD GREAT APPEAL FOR SITE OWNERS
The increasing popularity of Ajax and Flex applications is changing the way companies do business
online. Why are RIAs so attractive to site owners?
· People know them and like them. Fifty-two percent of online consumers have used highly
interactive applications like Google Maps and Zillow.com. More importantly, the overwhelming
majority of those who tried RIAs say that rich applications greatly enhance their Web
experience.
· They enable tasks that HTML can’t. RIAs give companies a superior alternative to HTML
for crafting customer interactions.2 That‟s because RIAs provide a range of capabilities — like
improved data visualization and streamlined processes — that go beyond the limitations
imposed by HTML (see Figure ).
· They get results. Firms that measure the business impact of their RIAs say that rich applications
meet or exceed their goals (see Figure ). As the RIA success stories of these early adopters
become more widely known, site owners at mainstream companies also look to RIAs to boost
online effectiveness.
There is a factor that HTML5 can dominate the Flash . There will be no change in Adobe Flex as it
is having it’s own MVC framework and connecting remote services facilities like LCDs and
BlazeDS.
6
9. RIA Classification
In the recent Evolution of the Rich Internet Application Market report, we identified a
classification system by which organizations can classify the richness of its applications
according to three axes:
• Richness of Internet Capabilities
The extent to which the application or technology
leverages the full functionality of the Internet .
enhanced business intelligence solutions
• Richness of User Interface
The extent to which the application or technology
delivers interactive, deep, and broad user interface
(UI) capabilities.
• Richness of Client Capabilities
The extent to which the application offers client
computing capabilities that utilize the local
machine power, such as storing information locally,
using local memory and disk storage, and shifting
processing power to the desktop from the server.
9
10. RIA Platforms
Technology: HTML + CSS + JavaScript+ Ajax
Upside: RIAs install and execute automatically, if the client‟s browser has JavaScript
enabled
Downside: Cross-browser support and testing can be a problem
Browser
Technology: Silverlight
Upside: Ability to run across operating systems
as a browser-based solution and minimizes cross-browser testing issue
Downside: Users may not be willing to
update plug-ins or wait for a lengthy install process to
complete if they don‟t already have the latest version
Player
Technology: AIR and JavaFX
Upside: Desktop-based solutions provide full access to local file systems
and the ability to persist information
Downside: They add deployment and maintenance headaches
Desktop
10
12. Comparison Matrix of RIA
Feature Ajax Adobe Flex OPenLaszlo HTML5
Animation Richly supported Richly supported in Flex 4.6 with Supported, Difficult to design Supported through audio and video
sparks interactivity through IDE elements
Bitmap Manipulation Supported natively Supported inconsistently in Supported natively Supported
Opera, Firefox and Safari.
Can also be achieved
through extensive server side
processing and client server
interaction.
HTML Rendering Limited support Fully supported Supports DHTML also Fully supported
Video and Audio streaming Supported, video quality is pretty No native support (user Supports multimedia, designed for Supports multimedia
good but needs to improve before needs a separate plugin like multimedia developers.
widely adopted by media Quicktime, Windows Media
companies. Player, or the Flash Plugin
Video and audio capture to play video in AJAX deployments)
through user’s installed devices is
also supported.
Cross browser support A single browser plugin provides Each browser is required to a single cross browser cross a single cross browser
a single cross browser cross interpret code individually. platform runtime provides data.
platform runtime
Strongly Typed / E4X Complaint Supported in some frameworks, E4x Complaint E4x Complaint
OOP Language (ECMAScript for XML , E4X makes but still compiles (ECMAScript for XML ) (ECMAScript for XML )
it easy to utilize XML structured down to a prototype
data and reduce code complexity structure. Most libraries do
as well as create less coupling not mix well with one another
between code and external data). and can commonly
cause conflicts.
12
License License is not required License is required, trail version Open source, license is not reqd. Open source, license is not
available required.
13. Comparing New RIA Platforms
Specification AIR Silverlight JavaFx
Desktop OS support Windows, Mac OS X Windows, Mac OS X Windows, Solaris, Linux, Apple
Browser support Desktop-based. Uses Flash for Internet Explorer, Firefox, Safari, Internet Explorer, Firefox.
browser-based RIAs. Opera
Video Codec support H.263, ON2 VP6 VC-1 (up to 720p), WMV (7-9) With Java Media
Framework:AVI, MPEG-1, QT,
H.261, H.263
Audio codec support MP3, Nelly Moser8 WMA (7-9), MP31.38 AIFF, AU, AVI. With Java Media
Framework: GSM, MIDI, MP2,
MP3, QT, RMF, WAV.
Support Download size 8MB to 9MB 1.38 MB to 10.3 MB 7.1MB *
(min/max)
Pricing and licensing Free: closed source Free: closed source Open source: license to be
determined
Target release dates Late 2007 to early 2008 Version 1.0 Q3 2007, version 1.1 Early 2008
early 2008
13
14. Adobe Flex
Flex applications are built on top of the native Flash Player APIs like vector graphics, bitmap manipulation, and networking
(which are based on the browser networking stack). The Flex framework adds reusable components like date pickers, data
grids, charts, etc. Compiling a Flex application resulted in a SWF file which is the binary byte code format for the Flash
Player. Contained in the SWF file is the byte code for the Flex framework code and a project's custom code. The Flex
compiler optimizes the byte code so that only classes which are used go into the SWF file.
There are a number of options for building backend infrastructure for Flex Applications. To take advantage of the high
performance AMF data transfer protocol, there are official Adobe products like LiveCycle Data Services, as well as
numerous open source projects like Granite Data Services. Using AMF removes the unnecessary steps of converting data to
text (SOAP, RESTful, etc), transferring it, and then converting it back to data. AMF also allows type information to be
preserved across the wire.
• Adobe
• Frame based animation
• ActionScript3
• Open Source Tools
Adobe Flex
14
16. Flex 4 features:
Flex 4 delivers wide variety of new and enhanced features. Here is a list of some important features.
1. New flex 4 components are spark based which are built on top of the existing flex 3 halo components
2. Spark and Halo components can be used together
3. Use of FXG (Adobe Flash XML Graphics) to create shapes like eclipse, rectangle etc.
4. Enhanced States Syntax
5. ASDoc to generate documentation for MXML components
6. Two-way Data Binding
7. New Effects for Components and Graphics
8. Support for 3D effects
9. Support for CSS namespaces
10. Virtualized Layouts and DataGroups
11. Support for Vector to restrict to a single type
12. RSL linking by default to reduce the application size rather than static linking
13. StyleManager for every module
14. Support for FTE and TLF text providing new style text
15. Support for MXML Graphics runtime layout modifications
16. Validation of styles against the theme
17. Support for layout mirroring for languages that are written from right to left instead of left to right
16
17. OpenLaszlo
OpenLaszlo is an open source platform for the development and delivery of rich Internet applications. It is released under the
Open Source Initiative-certified Common Public License (CPL).
The OpenLaszlo platform consists of the LZX programming language and the OpenLaszlo Server:
LZX is an XML and JavaScript description language similar in spirit to XUL, MXML, and XAML. LZX enables a declarative, text-
based development process that supports rapid prototyping and software development best practices. It is designed to be
familiar to traditional web application developers who are familiar with HTML and Javascript.
The OpenLaszlo Server is a Java servlet that compiles LZX applications into executable binaries for targeted run-time
environments.
Deployment
Laszlo applications can be deployed as traditional Java servlets, which are compiled and returned to the browser dynamically.
This method requires that the web server is also running the OpenLaszlo server.
Alternatively, Laszlo applications can be compiled from LZX into DHTML or a binary SWF file, and loaded statically into an
existing web page. This method is known as SOLO deployment. Applications deployed in this manner lack some functionality of
servlet-contained files, such as the ability to consume SOAP web services and Java RPC remote procedure calls.
• Open Source
• XML Based
• Flash and DHTML/AJAX
17
19. OpenLaszlo features
OpenLaszlo 3.4 includes new capabilities for audio and video:
• streaming Flash video (flv) over http
• two-way audio-video streaming with Flash Media Server or Red 5
• camera and microphone support
Streaming audio and video in .flv and .mp3 formats are rendered in the specialized <videoview<>. (More
limited audio and visual capabilities can be obtained by attaching audio and visual sources as resources to
regular <view>s.)
OpenLaszlo video APIs give you access to the full functionality of media players such as the Flash Media
Server and the Red5 media player. When your OpenLaszlo program is connected to a media server over a
Real Time Media Protocol connection, you can not only receive and play audio and video (in mp3 and flv
formats), you can also record your own audio and video locally and send it to the server, where it can be
stored or shared in real time with other client programs.
19
20. AJAX IS AN INCREMENTAL PATH TO A BETTER USER EXPERIENCE
Ajax helps shops meet time-to-market needs. Developers with existing Web skills find that adopting Ajax
involves a shift in design patterns, not a wholesale change in programming language or development tools.
When insurance lead provider InsureMe made a decision to use RIA for an insurance quoting application, it
chose Ajax.2 Why? Because going with Ajax had minimal impact on its productivity, and time-to-market was
vital on their project.
Ajax favors gradual re-factoring of existing Web apps. Ajax is based on open and standard languages like
JavaScript and XML. This makes it easy for developers to integrate Ajax widgets into existing Web
applications that are written in HTML, DHTML, or server side JavaScript.3 This approach is especially useful
when an existing application UI would benefit from targeted tweaks,
when release cycles are short, or when it is impractical to do extensive A/B testing with users.
Ajax can deliver speedy performance. Vendors of commercial Ajax frameworks like Backbase and JackBe
invest considerable resources tuning their Ajax frameworks for speed. The result? Commercial Ajax clients
have tiny footprints and download to browsers so quickly that there‟s no perceptible lag in app performance.
Some open source Ajax tool kits share this trait, but
others approach the size of Adobe‟s Flash and have equally long install times.
It’s easy to choose the wrong Ajax framework. There are dozens of popular Ajax frameworks, and they are
not created equal. Developers might want to cut a check based solely on a framework‟s rich widget set or
light-speed performance, but architects will need to validate that the framework supports corporate
standards for security, accessibility, service integration, and
data access.
Cross-browser compatibility issues increase testing costs for Ajax. Testing costs increase in direct
proportion to the number of browser platforms and versions to be supported. However, using a commercial
Ajax framework can mitigate these costs, as the framework vendor incurs the cost of cross-browser testing.
20
22. The JavaFX platform is designed to enable easy creation and deployment of rich internet applications (RIA) with immersive
media and content. The JavaFX platform ensures that RIAs look and behave consistently across diverse form factors and devices.
JavaFX platform to demonstrate how easy it is to provide an immersive experience by bringing rich multimedia content from the
web into an application. The Media Browser RIA builds a scrollable wall that displays images and videos obtained using web
services. It also provides animation effects, such as zooming, and supports keyboard navigation.
.
The current JavaFX API is divided into two categories of API elements: common and desktop. These categories are called
profiles, and the elements they contain support various UI needs and platform capabilities specific to their profile. The common
profile provides classes that are supported on both desktop and mobile devices. In other words, it provides the lowest common
denominator UI for all platforms running on a JVM – be it a Java ME or Java SE JVM. The desktop profile provides more
sophisticated capability in support of larger and more feature-rich platforms.
To create applications that will port across all form factors, developers should keep to the common profile. Developers who plan
to deploy to a desktop platform or to a common desktop browser can opt to enhance their applications with the API offered in the
desktop profile.
• Cross Browser
• Cross Platforms
• Declarative non verbose language
JavaFX
22
23. JavaFX architecture
The JavaFX 2.0 platform is a rich client platform built on Java technology and
designed to enable application developers to easily create and deploy rich
Internet applications (RIAs) that behave consistently across platforms.
23
26. Case Study: Boeing NextGen application
Context Role:
Boeing client is one of the world's leading airplane services . Developing Flex based Serve Central application
Aims to develop a Serve Central application with front end as
Flex and back end as web services.
Key Challenges Solution
Few configuration needs to be done irrespective of which
We need to develop a Serve Central front end application which in service is used for the connection between Blazeds server
turn connect to remote services i.e., web services. Building a and java application, below given configurations are
front end for RIA application is easier with Adobe‟s Flex mandatory before starting with the actual application
development
technology but the ways of communication between Flex 3
Configuring the Blazeds server Project in Eclipse IDE
and Java business middle tier components will not suffice to
Configuring the Flex Project in Flex Builder IDE
business requirements. Create a Flex project
Configure J2EE server
Drivers:
Adobe‟s data services namely, LCDS (Lifecycle data service) can be Technology
used to interact with Flex and Java as back end via Remote Creating Client Application (Flex)
services. Combine the flex application with remote services
Using BlazeDS or LCDS we can easily integrate a rich Flex based UI using Cairngorm framework, which supports
with the advanced capabilities of a Java enterprise application. MVC and connect to remote services.
26
27. Case Study: Flex Google Map application
Context Role:
Aims at sharing the performance issue faced when plotting The key benefit delivered to the customer was a better
polygons in Google map embedded in a FLEX application performing Map application that loaded large number
and the methods incorporated to overcome the same. of data in quick time (the time the user can afford to
wait)
Solution
Key Challenges
To start with we had split the data (6000+ stores) across several
XMLs, each having 200 stores. We ended up with 30 XMLs to be The following code converted the array „arr‟ (an array of
read and the data plotted on the graph. objects of type String) to an array of objects of type LatLng:
The limitation with respect to using Google Map Flash API is that var myarray:Array = arr.map(toLatLng);
there is no direct way of converting the XML data into LatLng form where „toLatLng‟ is a callback function that does the
recognized by Google. Hence we had to parse each of the polygon conversion.
points to convert it into LatLng object so that Google API can plot
the polygons.
Drivers:
Technology
The solution to the problem was to directly convert the polygon points
represented in the XML into LatLng objects without looping through The key to the solution is the Array.map () method that
each point. allows the conversion of type of its members to another
type.
27
28. Questions
1) Users Need to Install Something New to Run Flex Applications.
Ans. Flash Player 9 is required for Flex 2 & Flex 3. The Flash Player 9 runtime is currently installed on 94% of the
world's computers.
2) Can we implement Desktop application with Flex.
Ans. For desktop applications, Adobe has made their new desktop runtime called Adobe AIR
3) Flash is for Designers, Video, and Annoyances.
Ans. Traditionally Flash content was built with the timeline based tool for designers. Flex is the developer toolset for
building Flash based content / applications. Designers and developers can work together by sharing assets between
the two tools. Flex adds a comprehensive component base.
4) Flex is Not for Enterprise / Business Applications?
Ans. There are numerous examples of enterprise applications being developed with Adobe Flex, including work at:
Workday, SAP, Salesforce, and Business Objects.
5) Flex is Expensive?
Ans. The free SDK includes everything a developer needs to build RIAs that work the same on any browser or
operating system. Part of the free Flex SDK is an extensive set of components which are extensible, skinable, and
accessible. You can see many of these components in the Flex Component Explorer:
http://www.adobe.com/devnet/flex/samples/code_explorer/
Flex Builder is an optional plugin for Eclipse which makes developing applications with the free Flex SDK more
efficient. It includes features like integrated debugging, design view, and code completion.
The Flex Builder pricing has changed in quite a few ways recently. Flex Builder is now free for Students and Faculty.
The price for the vanilla Flex Builder, without the charting components, has been reduced to better balance the tiered
pricing for Flex Builder.
6) Flex is hard to learn?
Ans. The tool support is very good too with Flex Builder. You get the familiar surroundings of Eclipse and you are off
and running without many problems.
28
29. Questions
7) With Flex, I Will Need to Rebuild My Entire Application?
Ans. Since Flex applications are just the UI piece of an application the back-end usually stays the same. If your back-end was built
following the SOA pattern then it is usually very easy to expose those services out to a new Flex UI. This preserves your existing
business logic whether it is in EJBs, Spring services, POJOs, etc.
8) Flex Breaks Normal Browser Functionality, Like the Back Button?
Ans. In Flex, back button support is built in and easily customizable so this was never an issue. Flex also provides an easy way to
do hashmark urls (or named anchors), so the url changes as application state changes.
9. How do you do profiling for Flex applications?
Ans. Flex has features to profile the data and identify memory leaks
10. Does this support built in framework?
Ans. Yes it supports Cairngorm framework, which is an MVC framework.
11 . Does Adobe Flex support multilingual?
Ans. Yes. Flex supports Localization and Internationalization using Resource bundle.
12. Does Adobe Flex support load balancing?
Ans. FLEX is a new scalable “locality aware” solution for achieving both load balancing and efficient memory usage on a cluster of
machines hosting several Web sites
13. Security model and it‟s brief overview
Ans. The Flex security model protects both client and the server. Consider the following two general aspects to security.
29