Advantages And Disadvantages Ajax And Flex Flash Computer Science Essay

Advantages And Disadvantages Ajax And Flex Flash Computer Science Essay Ajax and Adobes Flash Flex are both used to create dynamic and interactive web applications. Both are platform independent i.e. contents will render the same across different platforms and permits for interface animation. There are many similarities between the two. However, there are considerable differences as well. Say for example, Flash is animation format software that allows for fast download of animation files in a resizable format in order to facilitate files be downloaded over a regular modem connection. Flash creates better interactivity by encoding information in smaller files. Flex technologies developed by Macromedia (now acquired by Adobe) aimed to build Rich Internet Applications (RIAs). On the other hand Ajax is more of a methodology to create RIAs. To create more responsive and interactive web applications, Ajax uses a combination of DHTML, XHTML or XML, CSS, and DOM (Direct Object Model) with XMLHttpRequest and JavaScript. Ajax functions transparently i.e. facilitate behind the scene communication between the server and browser. This report discusses both Ajax and Flash/Flex technology as they battle in making Rich Internet Application(s). Both Ajax and Flex can execute similar functions. However, there are few advantages and disadvantages to both refer to Table-1 for comparisons. 2. What is Ajax? Ajax is a set of technologies which allows a website to be very responsive. Most importantly Ajax supports asynchronous communication and also partial refresh of a web page. Here Partial refresh means; when an interaction event is invoked, for e.g. when a user enters information into a form on a web page and clicks a Submit Button. The server processes the keyed information and returns a partial response specific to the data it receives (See Figure-2). Notably, the server does not transmit back an entire page, compared to the traditional web application which is Click, Wait, and Refresh (See Figure-1), instead, only part of the page is updated. The web application that uses Ajax is events and data driven, where as conventional web applications are driven by pages. Full page refresh Synchronous Time Client click à ¢Ã¢â€š ¬Ã‚ ¦.waità ¢Ã¢â€š ¬Ã‚ ¦..refresh click à ¢Ã¢â€š ¬Ã‚ ¦.waità ¢Ã¢â€š ¬Ã‚ ¦..refresh click Server Data transfer Data transfer Server-side processing Server-side processing Figure-1: Classic Web Application Model Synchronous Communication Partial UI updates Client Time Server Asynchronous Data transfer Data transfer Server-side Processing Server-side Processing Browser UI Ajax Engine User events UI updates Figure-2: Ajax Model Partial UI updates and Asynchronous Communication 2.1. Ajax Asynchronous Asynchronous means after sending data to the server, a client can continue to perform other things whilst the server continues to do its processing in the background. Such as, a user can continue to move the mouse over a map in google website and notice a smooth, uninterrupted change in the display. Compared to the traditional, synchronous, approach here the clients do not have to wait for a response from the server before continuing. Figure 1 and Figure-2 illustrates a Classical vs Ajax web application interaction. An additional significant feature of Ajax-enabled sites is that when an event is triggered, responses from Ajax are not restricted to submitting data in a form or clicking on a link. An Ajax response can be triggered in various number of ways such as moving a mouse over to a particular area on a web page, entering part of an entry in a text field, or dragging a map around with a cursor in Google Map etc. With these cool dynamic interactions among the user and the web page excels web applications nearer to what users experience in rich desktop applications. 2.2. Ajax Technologies at a glance The technologies included in Ajax are as follows: Cascading Style Sheets (CSS) a markup language designed for defining a page presentation style, such as colors and fonts etc. JavaScript a scripting language. XMLHttpRequest is one element of JavaScript technology that is the key to Ajax. It is an object which facilitates to exchange data between the client and the server respectively. Document Object Model (DOM) presents a logical view of a web page in a tree structure. XML the format for transmitting inform from the web server to the client. Nevertheless, other formats such as HTML, plain text or JavaScript Object Notation (JSON) can also be used. Like other web applications, Ajax-enabled web application uses markup languages such as HTML or XHTML to present web pages. Java Server Pages (JSP) as server-side technology can be used to generate web pages. Moreover, server side application systems play an important role in processing Ajax applications. Server side application system such Java2EE, which includes support for user identity management, data validation, and persistence, fits very well with the Ajax methodology Ed Ort (2006). Figure-3: illustrates how all these technologies work collectively to handle a user action. 2.3. Ajax Architecture Browser Client XMLHttpRequest XMLHttpRequest Callback ( ) User Interface Server-side Systems Web and / XML Server Data Stores 1 23 3 4 5 6 HTML + CSS data JavaScript call HTTP Request XML Data JavaScript call HTML CSS Data Data Exchange Figure-3: How Ajax Technologies Handle a User Action A user generates an event on the client (such as entering data to a text field or click a button). This results in a JavaScript function call. an XMLHttpRequest object on the client side is created and configured with a requested parameter and specifies a JavaScript technology callback ( ) function. The XMLHttpRequest object makes an asynchronous HTTP request to the web server. The web server processes the request and returns an XML document that contains the result. The XMLHttpRequest object calls the callback ( ) function, it receives the data and processes the result. The HTML DOM is updated. 2.4. Ajax and Server-Side Java Technologies The technologies that are included in Ajax are either client technologies such as JavaScript technology, or like XML are relevant to the interchange of data between the client and server. The request to the server that the XMLHttpRequest object makes is an HTTP request to the server, handling an Ajax request is similar to handling an HTTP request from a conventional web application. Hence, any server technology can be used to handle the request, including server-side Java technologies such as servlets, JSP and Java Server Faces (JSF) technology. Java Server Faces technology and other Java EE technologies that include support for data validation, user identity management, and persistence, are particularly well-suited for Ajax. For example, a servlet can be used to process a request, manage state for the client, access enterprise resources, and generate the XML for the response. Or a custom Java Server Faces components can be created to handle server-side processing as well as encapsulate the JavaScript technology and CSS for client-side processing. In fact, a library of Ajax-enabled custom Java Server Faces components are already available as part of the Java Blueprints Solutions Catalogue. 3. Flex/Flash 3.1. Background Adobe Flash Professional Multi-Media authoring program developed in 1996 by Macromedia and was acquired by Adobe in 2006. Flash is used to create content for the Adobe engagement Platform. One of the Flashs greatest strength is ease of development. They are very well-liked for creating HTML applications and are hence very significant to web development. Often assist to automate tasks, making web programming and usability faster. For adding animation and interactivity to a web site Flash is one of a well known method. However, it is currently contributions toward developing RIAs (Rich Internet Applications). The release of Adobe Flex technology directly responds to RIA development. Flex is precisely where Flash meets with Ajax. Both technologies aim towards creating RIAs. Flex mechanism is on the presentation level of an RIA. It is a vendor specific product which means it is not free and requires purchase. 4. Comparison between Ajax and Flex Flex is rendered through Flash Player while Ajax is renders through a browser. Flash Player plug-in required for browsers. Plug-ins allows users to supplement web applications with other programs to perform specified functions. However, Ajax does not require the downloading of applications as JavaScript is natively supported by modern browsers. It simply accesses the Web as they are requested. Ajax requires more program writing and coding, provides full CSS and DHTML (dynamic HTML) support. Flex/Flash application platforms are browser and platform independent. In Ajax applications, the browser is the platform. Table-1 illustrates the comparisons on features between Ajax and Flash. Table-1: Comparisons on features between Ajax and Flex/Flash Features Ajax Flex/Flash Audio Supported through external plug-ins (Media Player). Support embedded flash audio. Dynamically load audio. Browser Integration JavaScript natively supported by modern browsers. Flash player plug-in is required. Compatibility Issues Major compatibility differences between browser versions. Minor variations between versions of Flash. CSS Full Support. Limited Support. Programming Model JavaScript. ActionScript. Video Supported through external plug-ins (Media Player). Dynamically load FLV video files or embedded videos. Text Powerful layout capabilities. Text API mimics some HTML functionality. XML Full Support. MXML Not supported natively by JavaScript. Vector Graphics No. Full Support. 4.1. Key Difference The following are key differences on developing Ajax and Flex based online applications: Free and Proprietary One of the biggest features of Ajax is that there are many freely available useful tools online. There is no need for additional IDE in Ajax, as the major components of this technique simply need leveraging. On the other hand Flex is a proprietary tool so developers have to spend a bit to use this development format. A paid tool assures functioning tool to developers. Supports for freely available may not be available. Learning Requirement Flex is already popular to various developers particularly those who have already worked with Flash. Combine this fact with the available platform; developers can expect implementation of Flex based application faster. Ajax, on the other hand, will require more from their developers. Those who wanted to create the application manually, without the assistance of frameworks, will find the task of creating Ajax based applications difficult. This is the reason why Frameworks and libraries are created. Data vs. Looks although each development form can be used for data and its looks, Ajax is more proficient in handling and manipulating data. As an online application, various functions, variables and objects are available and they are simply created to manipulate data. Flex on the other hand, is very useful in creating great looking websites. The reason for this expertise is from that fact that it traces its roots from Flash. 4.2. Advantages and Disadvantages of Ajax and Flex/Flash Advantages Disadvantages Ajax Decrease in bandwidth use. Complex. Requires more coding. Flex/Flash Adobe MXML and Flex allows the integration of internet applications through a variety of desktop functions. Flex has the advantage of Flash player being installed on over 90% of browsers. Support for webcam and microphone. Present information in a visually rich interface. Asynchronous Video and audio integration with the Flex API is very simple and straightforward Flex might not handle lots of records easily. Flex does not read or write files to end-users computer. This is a restriction of Flash Player. More CPU usage. Lack of support for multi-threading. ActionScript is a lot heavier compared to JavaScript. No DOM Model Binary Sockets, cross-domain Access Policy Local Storage JavaScript/ActionScript Integration, E4X Flash Vector graphics APIs Rich components Object model access Data-stores, backend processing, legacy systems Web and/or XML server Browser Client User Interface Ajax Engine JavaScript call HTML + CSS data Server-Side Systems Conclusions This paper has presented an overview of the AJAX technique for developing interactive web applications. Ideas of how to introduce the AJAX approach in teaching web development and examples for lab sessions have been suggested. Incorporating popular technologies into the computing courses appears to motivate the students and in the same time it helps them understand better fundamental theoretical concepts. The AJAX technology requires relatively little new knowledge and can be easily included in teaching web development by focusing on specific parts of existing technologies and demonstrating appropriate applications. The challenge is the constant need of updating the material and selecting relevant examples and tools. However, the experience of learning new technologies and related applications has been rewarding and exciting. The material presented here could be used as an example of embedding emerging technologies in the computing curriculum through existing modules. Although JavaScript has been developed into greater heights, ActionScript is continuously being developed by Adobe. Today, ActionScript could be easily compared to JavaScript as each of these RIA (Rich Internet Application) programming languages has their own advantages and disadvantages. Depending on the need of the developers, they should be able to select which programming language to select.