Client-side development 2 – RiWAs

As previous, this also based on some parts.

• Introduction to Rich Web-based Applications
• Delta-Communication technologies
• Architecture
• SPDC/AJAX
• Case study

Introduction to Rich Web-based Applications

This is a web application that has lot of characteristics of desktop application software, this is like a site-specific browser, a browser plug-in, an independent sandbox, extensive use of JavaScript, or a virtual machine. This is use as rich communication model such in , Internet of Things related applications, Rich Internet Applications, cloud-based systems, mobile apps, Internet of Things, etc.

•Rich Web-based applications

•Use advanced GUIs

•Use Delta-Communication

•Provide rich user experience

•Most of the web-based applications nowadays are RiWAs

Rich GUIs in RiWAs use Delta-Communication to communicate with the server components

•DC happens behind the GUI

•Eliminates page refreshes

•DC can process asynchronously

•Eliminates page freezing

•DC works faster

•Eliminates the work-wait pattern

What is Delta-communication? Lets move to that part. You will get an idea of following chart.

What Delta-Communication is ?

 Doing business as Clearwave Communications, provides local, long distance, data, and Internet telecommunications services to residences and businesses in Southern Illinois. It provides service plans, which include mobile, dial up and high speed Internet, and telephone systems. The company also operates as a CLEC that owns and manages network equipment.

synchronous and asynchronous communications?

The term synchronous is used to describe a continuous and consistent timed transfer of data blocks. It is a data transfer method in which a continuous stream of data signals is accompanied by timing signals to ensure that the transmitter and the receiver are in step with one another. The data is sent in blocks (called frames or packets) spaced by fixed time intervals.

Asynchronous transmission works in spurts and must insert a start bit before each data character and a stop bit at its termination to inform the receiver where it begins and ends.

The term asynchronous is used to describe the process where transmitted data is encoded with start and stop bits, specifying the beginning and end of each character.

Now lets move on to  different technologies and techniques used to develop the client-side components of the RiWAs.

ASP.NET/ASP.NET MVC
Vendor: Microsoft
Environment: Visual Studio
Language: C#
Output: HTML+JavaScript+AJAX
Example: www.stackoverflow.com

Silverlight
Vendor: Microsoft
Environment: Visual Studio
Language: C#
Output: .NET executable?

Google Web Toolkit
Vendor: Google
Environment: Eclipse
Language: Java
Output: HTML+JavaScript+AJAX
Example: http://www.projectkaiser.com:8080/pk/

Flex
Vendor: Adobe
Output: Flash (.swf file)
Example: http://listen.grooveshark.com/

Adobe AIR
Vendor: Adobe
Output: AIR
Example: http://www.colabolo.com/en/download.html

Ruby on Rails
Vendor: Rails Core Team
Language: Ruby
Output: HTML+JavaScript+AJAX?

Option 6: Java Applets
Vendor: Sun
Environment: Eclipse
Language: Java
Output: Java Applet

OpenLeszlo

Vexi
Vendor: Vexi core team
Environment: Eclipse
Language: XML + JavaScript
Output: Java
Example: Demo on http://vexi.sourceforge.net/

Django
Vendor: Django core team
Language: Python
Output: HTML + JavaScript + AJAX

Simple-Pull-Delta-Communication (SPDC) can be seen as the simplest form of DC

•Used in AJAX

•Single XHR request to the server

•Client-side: Native JS support •Server-side: special technology is not needed

Pollingis used to simulate data-push

•Send XHR requests periodically to the server

•Client-side: Native JS support

•Server-side: special technology is not needed

•Can increase network traffic (less scalable)

•Blank responses can waste resources

Cometis used to simulate data-push

 •Long-lived XHR requests

•Client-side: Native JS support

•Server-side: Need a streaming server. Special technology is not needed, can be implemented with standard web technologies

•Reduce network traffic than polling (more scalable)

•Blank responses are eliminated

Server-Sent-Events (SSE) is used (only) for true data-push

•Similar to Comet, but no client requests

•Client-side: HTML5 provides native JS support

•Server-side: Need a streaming server. Special technology is not needed, can be implemented with standard web technologies

•Reduce network traffic than polling/Comet (more scalable)

•Blank responses and requests are totally eliminated

WebSocket(WS) is bi-directional,

•Supports both data-pull and true data-push

•Client-side: HTML5 provides native JS support Server-side: Need a WS server. Complex.

•Reduce network traffic than polling/Comet/SSE (highly scalable, 10CK is addressed)

There are lot of functions available in jQuery for implementing AJAX.

$.ajax()	Performs an async AJAX request
$.ajaxSetup()	Sets the default values for future AJAX requests
$.ajaxTransport()	Creates an object that handles the actual transmission of Ajax data
$.get()	Loads data from a server using an AJAX HTTP GET request
$.getJSON()	Loads JSON-encoded data from a server using a HTTP GET request
$.post()	Loads data from a server using an AJAX HTTP POST request
ajaxComplete()	Specifies a function to run when the AJAX request completes
ajaxSend()	Specifies a function to run before the AJAX request is sent
ajaxStart()	Specifies a function to run when the first AJAX request begins
ajaxStop()	Specifies a function to run when all AJAX requests have completed
serialize()	Encodes a set of form elements as a string for submission
serializeArray()	Encodes a set of form elements as an array of names and values

So I think you will got a good idea of RiWAs. Will meet in the next article.

REFERNCES

https://www.researchgate.net/publication/326395849_Rich_Web-based_Applications_An_Umbrella_Term_with_a_Definition_and_Taxonomies_for_Development_Techniques_and_Technologies

https://stackoverflow.com/questions/2055430/list-of-rich-web-application-technologies/16803738

https://www.bloomberg.com/asia

https://searchmicroservices.techtarget.com/tip/Synchronous-vs-asynchronous-communication-The-differences

https://www.w3schools.com