Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Rich internet Application (RIA) Evolution
  2. 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. 3. Definition of RIA“Rich Internet Application is capable of delivering a rich experience to the user. It is the richness of theexperience 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. 4. Market Trend for Adapting RIATwo of the often conflicting desires in IT are the need for rich user interfaces that • Maximize a user‟s productivity • Desire to decentralize computingso 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 atodds because rich client interfaces, until recently, have only been possible in certain limited scenarios in which the businesslogic 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 creatingRIA 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 solutionsZapThink expects spending on each of these areas to increase rapidly over the next five years, exceeding $500 million by2011. 4
  5. 5. Market Trend for Adapting RIA-ExampleApples RIA Platform2008 be the year Apple enters the RIA market. Looking at iTunes, the web presentation layer hasmade 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. Seeingas this platform is cross-platform, widely deployed, and based on WebKit/Quicktime, Apple hasan entry into the RIA market in store for 2008. How, when, or if this will occur is wide open butsomething is cooking here. 5
  6. 6. RIAs HOLD GREAT APPEAL FOR SITE OWNERSThe increasing popularity of Ajax and Flex applications is changing the way companies do businessonline. Why are RIAs so attractive to site owners?· People know them and like them. Fifty-two percent of online consumers have used highlyinteractive applications like Google Maps and Zillow.com. More importantly, the overwhelmingmajority of those who tried RIAs say that rich applications greatly enhance their Webexperience.· They enable tasks that HTML can’t. RIAs give companies a superior alternative to HTMLfor crafting customer interactions.2 That‟s because RIAs provide a range of capabilities — likeimproved data visualization and streamlined processes — that go beyond the limitationsimposed by HTML (see Figure ).· They get results. Firms that measure the business impact of their RIAs say that rich applicationsmeet or exceed their goals (see Figure ). As the RIA success stories of these early adoptersbecome more widely known, site owners at mainstream companies also look to RIAs to boostonline effectiveness.There is a factor that HTML5 can dominate the Flash . There will be no change in Adobe Flex as itis having it’s own MVC framework and connecting remote services facilities like LCDs andBlazeDS. 6
  7. 7. Firms Use RIAs for a wide variety of purposes 7
  8. 8. RIA s meet or Exceed business expectations 8
  9. 9. RIA ClassificationIn 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. 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 problemBrowser 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
  11. 11. RIA Platform Landscape 11
  12. 12. Comparison Matrix of RIAFeature Ajax Adobe Flex OPenLaszlo HTML5Animation Richly supported Richly supported in Flex 4.6 with Supported, Difficult to design Supported through audio and video sparks interactivity through IDE elementsBitmap 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 supportedVideo 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 runtimeStrongly Typed / E4X Complaint Supported in some frameworks, E4x Complaint E4x ComplaintOOP 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. 12License License is not required License is required, trail version Open source, license is not reqd. Open source, license is not available required.
  13. 13. Comparing New RIA PlatformsSpecification AIR Silverlight JavaFxDesktop OS support Windows, Mac OS X Windows, Mac OS X Windows, Solaris, Linux, AppleBrowser support Desktop-based. Uses Flash for Internet Explorer, Firefox, Safari, Internet Explorer, Firefox. browser-based RIAs. OperaVideo 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.263Audio 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 determinedTarget release dates Late 2007 to early 2008 Version 1.0 Q3 2007, version 1.1 Early 2008 early 2008 13
  14. 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 projects 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
  15. 15. 15
  16. 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 components2. Spark and Halo components can be used together3. Use of FXG (Adobe Flash XML Graphics) to create shapes like eclipse, rectangle etc.4. Enhanced States Syntax5. ASDoc to generate documentation for MXML components6. Two-way Data Binding7. New Effects for Components and Graphics8. Support for 3D effects9. Support for CSS namespaces10. Virtualized Layouts and DataGroups11. Support for Vector to restrict to a single type12. RSL linking by default to reduce the application size rather than static linking13. StyleManager for every module14. Support for FTE and TLF text providing new style text15. Support for MXML Graphics runtime layout modifications16. Validation of styles against the theme17. Support for layout mirroring for languages that are written from right to left instead of left to right 16
  17. 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
  18. 18. Client- Server Architecture 18
  19. 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. 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
  21. 21. Architecture 21
  22. 22. The JavaFX platform is designed to enable easy creation and deployment of rich internet applications (RIA) with immersivemedia 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 theweb into an application. The Media Browser RIA builds a scrollable wall that displays images and videos obtained using webservices. 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 calledprofiles, and the elements they contain support various UI needs and platform capabilities specific to their profile. The commonprofile provides classes that are supported on both desktop and mobile devices. In other words, it provides the lowest commondenominator UI for all platforms running on a JVM – be it a Java ME or Java SE JVM. The desktop profile provides moresophisticated 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 planto deploy to a desktop platform or to a common desktop browser can opt to enhance their applications with the API offered in thedesktop profile. • Cross Browser • Cross Platforms • Declarative non verbose language JavaFX 22
  23. 23. JavaFX architectureThe JavaFX 2.0 platform is a rich client platform built on Java technology anddesigned to enable application developers to easily create and deploy richInternet applications (RIAs) that behave consistently across platforms. 23
  24. 24. Flex Data management case study 24
  25. 25. 25
  26. 26. Case Study: Boeing NextGen application Context Role: Boeing client is one of the worlds 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. 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. 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 worlds 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. 29. Questions7) 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 builtfollowing the SOA pattern then it is usually very easy to expose those services out to a new Flex UI. This preserves your existingbusiness 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 todo 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 leaks10. 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 ofmachines hosting several Web sites13. Security model and it‟s brief overviewAns. The Flex security model protects both client and the server. Consider the following two general aspects to security. 29