Module-1

Introduction to Rich Internet Applications (RIA) and JavaScript Enhancements: Definition,

Evolution, Architecture, RIA vs Traditional Web [Link] JavaScript (ES6+): Let/Const,

Arrow functions, Classes, Modules, Promises

Introduction to Rich Internet Applications (RIA) and JavaScript Enhancements: Definition,

The term Rich Internet Application (RIA) is neither standardized nor is referring to a specific technology but
rather states an umbrella term for applications which are intended to fill the gap between common web and
desktop applications. An intuitive flexible graphical user interface allowing user gestures like drag and drop and
the ability to retrieve data from the server asynchronously in the background without interfering with the display
and behavior of the existing page are typical characteris- tics of a RIA.

Rich Internet Applications (RIAs) are web applications that aim to provide a user experience and functionality
comparable to traditional desktop applications, but delivered through a web browser. They offer enhanced
interactivity, responsiveness, and a richer user interface compared to earlier generations of HTML-based web
applications.

What is RIA?

• Rich Internet Applications (RIAs) are web applications that have the features and
functionality of traditional desktop applications.

• RIAs typically provide a “no-refresh” look to the user interface.

• RIA provides HDuX – High Definition User eXperience.

Limitations of HTML based Web Applications

• Process Complexity – Multi step tasks are time consuming and frustrating.

• Data Complexity – HTML based web applications don’t facilitate the

manipulation and visualization of complex data.

• Feedback Complexity – Server based processing limits the scope of an

interactive user experience.

What is special in RIA?

• RIA works in Web.

• RIA appears – never refreshes.

• RIA reduces network traffic.

• RIA is rich.
 • RIA makes it easy.

History of RIA

• The term "rich Internet application" was introduced in a white paper in March 2002 by
Macromedia (now merged into Adobe).

• The concept had existed earlier under names such as:

⮚ Remote Scripting, by Microsoft, circa 1999

⮚ X Internet, by Forrester Research in October 2000

⮚ Rich (Web) clients

⮚ Rich Web application

1.1 The Evolution of Web Applications

The Internet was originally designed for simply transporting documents and infor-
mation. Simple web sites were composed of text documents interconnected
through hyper-links. The main purpose of this static collection of HTML web pages
was to display preformatted text. As the traditional Web relied heavily on a few in-
terface controls, like combo boxes, buttons and forms it offered only a low degree
of interactivity.

Communication with a server in the course of requesting or updating data is

limited to synchronous HTTP calls resulting in a full page refresh. The bulk of
business logic is placed in the middle tier (the server). In typical implementations,
the client elements of traditional browser-based applications are limited to the
interface logic (for example, HTML) with small amounts of script code (such as
JavaScript) for minor data validation and control logic.
Classic web applications are often preferred for the following reasons:

● Standardized tags/scripts are easy to develop.

● No installation or updates necessary.

● Applications are accessible from networked computers.

● Applications can run on different operating systems.

● User interface (UI) is simple and standardized.

Nevertheless, seamless interaction has never been the strong suit of HTML appli- cations. Since a
full-page refresh is usually needed to change any part of the dis- play, the ability of HTML-based
applications to offer responsive feedback needed to deliver a truly seamless experience is limited.
RIAs are designed to enable the Web to evolve beyond the page based, document- centric
metaphor commonly associated with the browser approach. Figure 2 shows the evolution from web
application to RIA and the synergies it combines.

Figure 2: Evolution of Web applications [DBBO07]

A caricature in figure 3 illustrates this RIA evolution in the context of the evolution of humanity.
Architecture of RIA

• Presentation layer - contains UI and presentation logic components

• Business layer - contains business logic, business workflow and business entities
components
• Data layer – Contains data access and service agent components.
• It is common in RIAs to move some of business processing and even the data access
code to the client.
• The client may in fact contain some or all of the functionality of the business and
data layers, depending on the application scenario.
UI components
• Users can interact with the application
• Format data and render data to users
• Acquire and validate data
Application facade
• To combine multiple business operations into single message-based operation
• The facade can be accessed from the presentation layer using a range of
communication technologies.
Data access logic components
 • Abstract the logic needed to access the underlying data stores.
• This centralizes data access functionality, makes it easier to configure and maintain.
Data helpers/utilities
• For centralizing generic data access functionality (managing db connection and
caching data).
• Data source specific helper components can be designed to abstract the complexity
of accessing the db.
• Service Agents – Basic mapping between the format of the data exposed by the
service and the format your application needs.
• Business components – implement the business logic of the application. Implement
business rules and perform business tasks.
• Business workflows – Define and coordinate long running, multistep business
processes. They can be implemented using business process management tools.
• Design considerations
• Choose an appropriate technology based on application requirements.( eg . Windows
Forms, OBA, WPF)
• Separate presentation logic from interface implementation
- Eases maintenance
- Promotes reusability
- Improves testability
• Identify the presentation tasks and presentation flows
- Helps to design each screen and each step-in multi-screen or wizard
Processes.
• Design to provide a suitable and usable interface

- Features like layout, navigation, choice of controls to maximize

accessibility and usability.
• Extract business rules and other tasks not related to the interface.
• Reuse common presentation logic – (Libraries that contain templates, generalized
client- side validation functions and helper classes)
• Loose couple your client from any remote services it uses.
- Use a message-based interface to communicate with services located on separate
 physical tiers.
• Avoid tight coupling to objects in other layers – Use
the abstract base classes or messaging when
communicating with other layers of the application.
• Reduce round trips when accessing remote layers –
Use coarse grained methods and execute them
asynchronously to avoid blocking or freezing the UI.

Differences between a Desktop, Traditional Web Application and RIA

Desktop applications

In contrast to (classic) web applications desktop applications offer the

following ad- vantages:

• Richer user experiences through immediate and accurate feedback.

• No page reloading necessary to see the results of user interaction.
• Support both online and offline working.
• Great variety of flexible and intuitive interface controls.
 On a downside, traditional applications are tethered to your computer.
Often, they are tethered to your operating system, and the file system
the operating system exposes. They require installations that are long
and cumbersome, and almost all the content they generate or consume
is stored locally on the computer, making it difficult to share with others

[Treto08].

Modern JavaScript (ES6+ or ECMAScript 2015 and later versions) introduced significant features
that enhance code readability, maintainability, and functionality. Here are some key applications of
the features mentioned:

1. let and const (Variable Declaration):

● Application: Replacing var for more predictable variable scoping.

o let is used for variables whose values might change. It provides block-scoping,
preventing issues like variable hoisting and accidental reassignments in larger scopes.

Example

var x = 10;

// Here x is 10

let x = 2;

// Here x is 2

// Here x is 10
 o const is used for variables whose values are intended to remain constant after
initialization. This promotes immutability and helps prevent unintended
modifications.

Example
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10

2. Arrow Functions (=>):

● Application: Writing concise and clean function expressions, especially

for callbacks and short, single-expression functions.

o They provide a shorter syntax compared to traditional function

expressions.

o They lexically bind this, meaning this inside an arrow function

refers to the this value of its enclosing scope, simplifying context
handling in object methods and event listeners.

Before Arrow:
Function to compute the product of a and b
let myFunction = function(a, b) {return a * b}

With Arrow
let myFunction = (a, b) => a * b;

Example
// This will not work
let myFunction = (x, y) => { x * y } ;

// This will not work

let myFunction = (x, y) => return x * y ;
// Only this will work
let myFunction = (x, y) => { return x * y };

3. Classes:

● Application: Implementing object-oriented programming paradigms in JavaScript, providing

a more structured way to create objects and manage inheritance.

● Classes offer a syntactic sugar over JavaScript's prototype-based inheritance, making it easier
to define blueprints for objects, constructors, methods, and extend functionality through
inheritance.

● JavaScript Classes are templates for JavaScript Objects.

● Use the keyword class to create a class.

● Always add a method named constructor():

Syntax
class ClassName {
constructor() { ... }
}

Example
class Car {
constructor(name, year) {
[Link] = name;
[Link] = year;
}
}

The example above creates a class named "Car".

The class has two initial properties: "name" and "year".

4. Modules (import/export):

● Application: Organizing code into reusable, self-contained units, improving code

organization and preventing global namespace pollution.
o export allows specific variables, functions, or classes to be made available from a
module.

o import allows other modules to consume these exported members, facilitating

modular development and better dependency management in larger applications.

Why should you use it?

Modules make it easier to organize code into smaller, reusable components.

Modules help to prevent code duplication and reduce the amount of code that needs to be
written.

Modules make it easier to share code between projects and developers.

ES6 Modules

ES6 (ECMAScript 6) introduced a new way to work with modules. In this tutorial, we
will learn about the different ways to use modules in JavaScript, and how to use them in
your projects.

ES6 modules are a way to organize code in JavaScript. They are the modern way to write
code that is more structured and organized. Modules allow us to split our code into
multiple files, and each file can have its own scope. This helps us to keep our code
organized and easier to maintain.

Importing and Exporting Modules

The main way to use modules is to import and export them. We can import a module
from another file, and then use it in our code. We can also export a module from our file,
so that other files can use it.

Let's look at an example. In the code block below, we have two files: [Link] and [Link].
The [Link] file imports the [Link] file, and then uses the add() function from it.

[Link]

[Link]

import add from './[Link]';

[Link](add(1, 2));

In the [Link] file, we have a function called add(). This function takes two numbers and
returns the sum of them. We then export this function, so that it can be used in other files.

[Link]

export function add(a, b) {

return a + b;
}

export function subtract(a, b) {

return a - b;

We can also export multiple functions from a file. In the code block below, we have a file
called [Link] which exports two functions: add() and subtract(). We can then import
these functions into another file, and use them.

[Link]

export const PI = 3.14;

We can also import and export variables. In the code block below, we have a file
called [Link] which exports a variable called PI. We can then import this variable
into another file and use it.

[Link]

export default function add(a, b) {

return a + b;

Default Exports

We can also use default exports. This allows us to export a single value from a file
without having to specify a name for it. In the code block below, we have a file
called [Link] which exports a function called add() as the default export. We can then
import this function into another file and use it.

[Link]

export function add(a, b) {

return a + b;

export function subtract(a, b) {

return a - b;

Named Exports
 We can also use named exports. This allows us to export multiple values from a file, and
specify a name for each one. In the code block below, we have a file called [Link] which
exports two functions: add() and subtract(). We can then import these functions into
another file and use them.

[Link]

export function add(a, b) {

return a + b;

export function subtract(a, b) {

return a - b;

5. Promises:
● Application: Handling asynchronous operations more
effectively and avoiding "callback hell."
o Promises represent the eventual completion (or failure)
of an asynchronous operation and its resulting value.
o They provide a cleaner way to chain asynchronous
operations using .then() for successful outcomes
and .catch() for error handling, improving the
readability and manageability of asynchronous code.
o A JavaScript Promise is an object representing the
completion or failure of an asynchronous operation and
its values.
 o It is a placeholder for a value that may not yet be
available, providing a structured way to handle
asynchronous code.

Promise Syntax
a Promise is an object that represents the eventual completion (or
failure) of an asynchronous operation and its resulting value.

const myPromise
= new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

myResolve(); // when successful

myReject(); // when error
});

// "Consuming Code" (Must wait for a fulfilled

Promise).
[Link](
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Example Using a Promise
const myPromise
= new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love
You !!"); }, 3000);
});

[Link](function(value) {
[Link]("demo").innerHTML =
value;
});