Client-side development 2 - RiWAs

In this blog, I would like to give a  Introduction to the RiWAs in THE CLIENT-SIDE DEVELOPMENT  that we see today and how they are being utilized in our day to day applications.






Rich internet application (RIA)


                 A rich internet application (RIA) is a web application designed to provide the same functions and features that are normally associated with desktop applications. By locating the user interface and related activity and capability on the client side, and by manipulating and operating data on the application server side, RIAs generally divide processing across the Internet / network divide.

An RIA normally runs within a web browser and does not usually require client-side software installation to work. However, with one or more specific browsers, some RIAs can only work properly. Within a special isolated area of the client desktop called a sandbox, most RIAs run their client portions for security purposes. The sandbox limits on the other side of the connection visibility and access to the client's file and operating system to the application server.

 Rich web application (RiWA)
 
                       A rich web application (originally called a Rich Internet Application RIA or Installable Internet Application) is a web application with many desktop application software features, typically delivered via a site-specific browser, a browser plug-in, an independent sandbox, extensive use of JavaScript, or a virtual machine.

The concept is closely related to a single-page application and can provide the user with interactive features such as drag and drop, background menu, editing WYSIWYG, etc. HTML5 is a current standard, supported by all major browsers, for delivering rich web applications.

 Key features of RiWAs

Direct interaction:

 In a traditional page-based Web application, interaction is limited to a small group of standard controls: checkboxes, radio buttons and form fields.
This severely hampers the development of applications that are usable and engaging. An RIA can use a wider range of controls to make the user experience more efficient and better.

Partial-page updating:

Standard HTML-based Web pages are loaded once. If you update something on a page, the change must be sent back to the server, which makes the changes and then resends the entire page. Standard HTML-based Web pages are loaded once. If you update something on a page, the change must be sent back to the server, which makes the changes and then resends the entire page.
With HTTP and HTML, there is no other way to do it. With traditional web-based apps, problems with network connectivity, limitations in processing and other issues require users to wait while the entire page reloads.

Offline use:

When connectivity is unavailable, it might still be possible to use an RIA if the app is designed to retain its state locally on the client machine. (Developments in Web standards have also made it possible for some traditional Web applications to do that.)


 Client Side Scripting / Coding - Client Side Scripting is the type of code that is executed or interpreted by browsers.

 Client Side Scripting is generally viewable by any visitor to a site (from the view menu click on "View Source" to view the source code).
Below are some common Client Side Scripting technologies:

    HTML (HyperText Markup Language)
    CSS (Cascading Style Sheets)
    JavaScript
    Ajax (Asynchronous JavaScript and XML)
    jQuery (JavaScript Framework Library - commonly used in Ajax development)
    MooTools (JavaScript Framework Library - commonly used in Ajax development)
    Dojo Toolkit (JavaScript Framework Library - commonly used in Ajax development)

  Delta Communication Technologies

Delta-Communication is the rich communication model used by the RIA's rich features, for the client-component(s) to communicate with the server-component(s), to exchange only the necessary data set – for a particular feature executed at the time – which is smaller than the size of the traditional communication request / response.
Since the size of the communicated data set is smaller, the communication is completed more quickly, eliminating the pattern of work-wait. 





XHR/AJAX

Ajax is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows web pages and, by extension, web applications, to change content dynamically without the need to reload the entire page.In practice, modern implementations commonly utilize JSON instead of XML.


XMLHttpRequest (XHR) is an API in the form of an object whose methods transfer data between a web browser and a web server. The object is provided by the browser's JavaScript environment. Particularly, retrieval of data from XHR for the purpose of continually modifying a loaded web page is the underlying concept of Ajax design. Despite the name, XHR can be used with protocols other than HTTP and data can be in the form of not only XML,but also JSON, HTML or plain text.

WHATWG maintains an XHR standard as a living document. Ongoing work at the W3C to create a stable specification is based on snapshots of the WHATWG standard.  

 Ajax

The jQuery library includes various methods to send Ajax requests. These methods internally use XMLHttpRequest object of JavaScript. The following table lists all the Ajax methods of jQuery.

jQuery Ajax Methods	Description
ajax()	Sends asynchronous http request to the server.
get()	Sends http GET request to load the data from the server.
Post()	Sends http POST request to submit or load the data to the serve
getJSON()	Sends http GET request to load JSON encoded data from the server.
getScript()	Sends http GET request to load the JavaScript file from the server and then executes it.
load()	Sends http request to load the html or text content from the server and add them to DOM element(s).

 

jQuery ajax() Method

The jQuery ajax() method provides core functionality of Ajax in jQuery. It sends asynchronous HTTP requests to the server.

Syntax:

           $.ajax(url);

           $.ajax(url,[options]);

           Parameter description:

    url: A string URL to which you want to submit or retrieve the data
    options: Configuration options for Ajax request. An options parameter can be specified using JSON format. This parameter is optional.

 

 

Options	Description
accepts	The content type sent in the request header that tells the server what kind of response it will accept in return.
async	By default, all requests are sent asynchronously. Set it false to make it synchronous.
beforeSend	A callback function to be executed before Ajax request is sent.
cache	A boolean indicating browser cache. Default is true. complete      A callback function to be executed when request finishes.
contentType	A string containing a type of content when sending MIME content to the server.Default is "application/x-www-form-urlencoded; charset=UTF-8"
crossDomain	A boolean value indicating whether a request is a cross-domain.
data	A data to be sent to the server. It can be JSON object, string or array.
dataType	The type of data that you're expecting back from the server.
password	A password to be used with XMLHttpRequest in response to an HTTP access authentication request.

                                        Category: Shorthand Methods