Internet System Architecture

Contents
• 2 tier Client – Server Architecture
• N tier Client – Server Architecture
– Comparison of Mobile, Web and Rich Internet Applications
• Evolution of Internet Applications
• Importance of RIAs in E-Learning
• Rich Internet Applications
• Modeling Approaches & Categories of RIAs
• RIA Concerns: Design, Frameworks and Deployment
• Real World Examples : YouTube, A9, Gmail
 Objectives
• To recall the basic client server architecture.
• To compare and contrast the architectural designs of Web-
based, Mobile-based and Rich Internet Applications.
• To analyze the evolution of internet applications.
• To recognize the importance of RIAs in E-Learning.
• To outline the basic concepts of RIA.
• To generalize the RIA features based on real world examples.
 Client-Server Architecture
• Client - server architecture is also called 2-tier architecture.
• A client is talking to a server which performs some services on
behalf of the client.
 3 Tier Architecture
• Typically split into a presentation or GUI tier, an application
logic tier, and a data tier.
• The presentation or GUI tier contains the user interface of the
application.
• The application logic tier makes all the application decisions.
This is where the "business logic" is located.
• The data tier stores the data used in the application.
 3 Tier Architecture - Examples
• Web Application : A Web application is an application that
can be accessed by the users through a Web browser or a
specialized user agent.
• Mobile Application: A mobile app is a software application
developed specifically for use on small, wireless computing
devices, such as smartphones and tablets, rather than
desktop or laptop computers.
• Rich Internet Application: Applications that are deployed over
the Web, this type of applications combines features and
functionality of Web applications and desktop applications.
3 Tier Architecture – Web application
• The presentation tier
consists of HTML, CSS
and JavaScript
• The application logic tier/
business layer runs on a
web server in form of
Java Servlets, JSP,
ASP.NET, PHP, Ruby,
Python etc.
• The data tier consists of a
database of some kind
(mysql, postgresql, a
noSQL database etc.).
Web Application Architecture [5]
3 Tier Architecture – Mobile application
• A mobile application generally
contains user interface
components in the presentation
layer, and perhaps may include
presentation logic components.
• The business layer, if it exists,
will usually contain business
logic components, any business
workflow and business entity
components that are required
by the application.
• The data layer will usually
include data access and service
agent components.

Mobile Application Architecture [7]

3 Tier Architecture- Rich Internet
Applications (RIA)
• The presentation
layer usually contains
UI and presentation
logic components.
• The business layer
usually contains
business logic,
business workflow
and business entities
components.
• The data layer usually
contains data access
and service agent
components.

Rich Internet Application Architecture [6]

Evolution of Internet Applications

Evolution of Internet Applications [3]

 3 Tier Architecture- Rich Internet
Applications (RIA)
• Rich Internet Applications (RIAs) are 3rd generation web
applications, which use data that can be processed both by
the server and the client.
• Furthermore, the data exchange takes place in an
asynchronous way so that the client stays responsive while
continuously recalculating or updating parts of the user
interface.
• They are cross-browser, cross-platform and they almost
comparable to features and functionalities of a desktop
application.
• On the client, RIAs provide a similar look-and-feel as desktop
applications and the word "rich" means particularly the
difference to the earlier generation of web applications.
 3 Tier Architecture- Rich Internet
Applications (RIA)
• RIAs are basically characterized by a variety of interactive
operating controls, the possibility of on-/offline use of the
application, and the transparent usage of the client and server
computing power and of the network connection.
• RIA architectures correspond to so-called fat clients.
Conversely, so-called thin clients characterize traditional web
applications.
• Advantages of RIA
– Offers rich and engaging viewing experience
– Improves user satisfaction and increases productivity
– RIAs run in a web browser so they do not require software
installation.
 Traditional Web Applications & RIA
Parameter Traditional Web Applications RIA
Assets It is Text-Based(text & mage) It is Interaction-Based (video,
audio & graphics)
User Experience Focused on clients’ expectation Focused more on user centred
and designers’ creativity. design
Functionality Web pages Most of them can act more like a
desktop application
Client Thin client Fat Client

Communication Synchronous Asynchronous

Security More secure Less secure

Search Engine Fully indexed Difficulty in indexing

Optimization
 3 Tier Architecture- Rich Internet
Applications (RIA) - Example
Yahoo! Maps is a traditional web-based application while
Google Maps is regarded as a RIA. [1]
 3 Tier Architecture- Rich Internet Applications (RIA) -
Example

Yahoo! Maps Google Maps

• To move locations in Yahoo! • On Google Maps, users can

Maps, users have to click navigate a map in any
one of eight arrow buttons direction by dragging it.
around the map. • The page remains the same,
• Every time a user clicks a only a portion of the page is
button, a page is refreshed, refreshed.
and a new map is loaded.
 Importance of RIAs in E-Learning
1. Maximizes the reach: The student can access information and
courses from any location.
2. Cross Browser & Cross Platform: The student can receive
information from wherever he is and without needing previous software
installations.
3. High level of interactivity: Ease of use and the capacity of
attracting the student’s attention are essential in the success of
elearning systems. By building courses more attractive to the student,
retention is achieved and with this the courses are successfully
completed by the student.
4. User Experience: Audio, video, images and texts can be used in order
to improve the contents of e-learning applications; it improves the
student’s experience.
5. Availability: RIAs are compatible with mobile workflow, enabling users
to work both online and offline.
RIA- Distinguishing Characteristics
• The basic characteristics are partial page reload, drag & drop
facilities, short response time and multimedia animations.
• Based on these characteristics, different functionalities such
as live validation, auto completion, periodic refresh, and
even rich text editors can be offered to the RIA user.
• The distinguishing characteristics of RIAs are related to
technological features used to build this kind of web
applications.
• These features are
– data distribution
– distribution of page computation
– client server communication
– enhanced user interface behavior.
 Data Distribution
• In traditional web applications, data resides on the server.
• In RIA applications data can be distributed between both,
server and client.
• The developer can decide about the distribution and even
design an application that may temporarily be used
irrespective of the server.
• Therefore, a RIA can use the client’s persistent and volatile
content. Data can be manipulated on the client, and finally
sent to the server once the operation has been completed .
• Advantages: offline usage validation and preparation of data
on client side.
• Disadvantages: data replication, policies for allocation and
consistency of data.
 Distribution of Page Computation
• In traditional web applications, there is only one controller at
the server side, which orchestrates the computation of the
page. At each user interaction, the whole page is computed by
scratch and reloaded.
• In RIAs a second controller at client side is introduced that is
responsible for the computation and refreshment of a
portion of a page.
• Data processing which includes complex operations can be
executed both at client and server side.
• Advantages: live validation, offline usage, page rearrangement
and display morphing.
• Disadvantages: client requires additional data.
 Client-Server Communication
• In RIAs, mechanisms to minimize data transfers are introduced
which move interaction and presentation layers from the
server to the client.
• Conversely to web applications, RIAs use both synchronous
and asynchronous communications. Pull and push
communication capabilities are available.
• Distribution of data and functionality across client and server
broadens the features of the produced events as they can be
originated, detected, notified, and processed in a variety of
ways.
• Advantages: partial page refreshment, page rearrangement,
display morphing.
• Disadvantages: incremented development efforts.
Enhanced User Interface Behavior
• RIAs offer enhanced interface behaviors and improved user
interactions (e.g. multimedia support, animations and drag &
drop).
• The main advantages of the enhanced user interface behavior
are:
– operation as single page applications (increases
responsiveness)
– avoid unnecessary refreshments of the whole page
– allow progressive presentation loading when needed
• The disadvantages of more sophisticated interface behavior:
– performance problems
– browser incompatibilities
 Modeling Approaches for RIAs
• Web Engineering is defined as the process for creating, implanting
and maintaining Web systems of high quality [9]. This discipline has
emerged recently, with the aim to handle all the aspects of the
development of complex Web systems [10].
• In a model-driven or model-based approach, a model language
which provides model elements model the distinguishing features of
RIAs.
• Depending on the level of abstraction, there are different type of
model elements.
– At business level : draft representation of the features that the RIA will provide
to the user, i.e. the facilities the user will perceive.
– At design level : details on how user interaction and the client-server
communication will occur.
– At code level: the technologies used need to be specified in detail.
• Table 1 summarizes different web engineering methodologies for
RIAs.
Methodology Description
HDM (Hypertext Design •Extension to the ER model.
Model) [11] •First model proposed for modeling
hypertexts.
OOHDM (Object Oriented •Widely accepted for the development of Web
Hypermedia Design applications.
Model) [12] •It is a direct descendant of HDM and is based
on OO concepts.
UWE (UML-Based Web •Based on UML and OO model.
Engineering)[14] •This methodology has been later extended
with a new process model, UWE-R.
OO-H (Object Oriented •Recent methodology derived from the OO
Hypermedia) [13] approaches.
•It defines a conceptual model based on UML
and extends it.
Pattern Libraries [19] •New patterns created to express the rich
interaction of Ajax style applications
Table 1 : Web Engineering Methodologies
Methodology Description
OOWS ( Object Oriented Web •Proposes to create an interaction model to
Solutions) [16] address RIA features
RUX [18] •Combines modelling of the presentational
aspects of RIAs with an existing method for
designing web applications
•Transforms UWE presentation model to a RUX
abstract interface model (AIM), and is then
enriched with typical RIA user interface actions.
ADRIA[17] •Focuses on the design of events triggered by
user interactions.
OOH4RIA [15] •Extends the OOH method by introducing new
model elements for modelling two additional
models: the presentation and the orchestration
models of RIAs, which complement the OO-H
models for domain and the navigation of a RIA.

Table 1 : Web Engineering Methodologies

 Modeling Approaches for RIAs
Summarizing the 4 types of modelling approaches as:
1. The extension of an already existing method with RIA features for
modeling, additional transformations, and specific generation
mechanisms (OOH4RIA, OOHDM, UWE-R and WebML).
2. Combination of a method for the development of web applications with
a method for user interfaces design and generation( e.g. RUX combined
with WebML and UWE).
3. A new method for designing and implementing RIAs (e.g. the ADRIA
approach).
4. Pattern-based approach as the design recommendations based on best
practices, e.g. library proposed by Scott [19] or Mahemoff and the UML-
based patterns proposed by UWE(used to describe the behavior of RIA
features) [20] .
 Categories of RIAs
RIAs are categorized as follows based on [2]:
1. Runtime environment
2. Distribution of the RIA
3. Resources of the client and the server
4. Navigation structure
5. Safety & security issues
 Categories of RIAs
Based on Runtime Environment
• Script-based framework is used if bandwidth is the most important aspect
of an application.
– Google Maps! uses AJAX to asynchronously load images while panning.
– Google Suggest! uses AJAX to fetch matching search queries based upon
what is partially written.
• Plugin-based frameworks are used for applications which requires direct
manipulation of graphics, dealing with vector graphics, performing multi-
threaded computations, extensive support for media (audio/video).
– Google uses Adobe Flex for search engine indexing of flash content.
 Categories of RIAs
Based on Resources of the client and the server
• Computationally intensive – RIA involves more computations
• Video card intensive – RIA supports video & playback
• Memory intensive – RIA requires more storage facilities

Based on Navigation structure

• Complex operations are performed at the client-side.
• Complex operations are distributed between the Business Logic of the client
and the server-side, (e.g., to validate some form fields on the client and
others on the server-side).
[Distribution of complex operations determines the navigation structure.
Complex operations include such as data navigation/filtering/sorting with
multiple criteria, domain-specific operations, and local validation of data ]
 Categories of RIAs
Based on distribution of the RIA
• Only online – The RIA applications are available online only.
• Offline – The RIA applications also includes one of its feature as offline
availability. Example: YouTube is a RIA available offline.
Based on Security
• RIAs restricted to the Java security sandbox
• RIAs request permission to access resources outside the sandbox.
[Sandbox - RIA implementations have higher security by default and therefore
may not have access to all resources on a machine, such as cameras and
hardware video acceleration. Access to the local file system is limited.
Local storage is available, but there is a maximum limit.]
 Design Considerations
• Four phases characterizing RIAs
are analyzed data modeling,
business logic modeling,
presentation modeling and
communication modeling.
• Scenario: In a RIA it is common to
store persistent and volatile content also
on the client (e.g., the shopping cart in
an e-commerce application or a
calendar of appointments could be
stored locally on the client), to
manipulate it (e.g. add, delete or modify
ordered items or appointments) and to
send the manipulated content to the
server once the whole operation has
been completed. RIA Design Concerns [8]
 Design Considerations - Data Modeling
• Issue: The storage of data at the client side involves additional mechanisms
to guarantee the data model integrity and data security apart from content
distribution and content persistence.
• Solution:
– The distributed data design is specified on the basis of data distribution
between the client and the server(data granularity consistency level) and
the duration(persistence of the data).
– Three data granularity consistency levels (at field level, at tuple level and
at packet level) and Four levels of persistence (Non-persistent at the
client side, Persistent at the client side, Non-persistent at the server side
and Persistent at the server side).
– Non-persistent at the client side: data are available at runtime, but are
lost when the user leaves the application (data in the runtime variables).
– Persistent at the client side: data remain stored on the client, even if the
user leaves the execution of the application.(files, databases, shared
objects).
Design Considerations - Data Modeling
– Non-persistent at the server side: data reside on the server while the
user is connected and disappear when the user leaves the execution
of the application (server-side session variables).
– Persistent at the server side: data reside durably on the server,
independently of whether the user leaves the application or not
(example: files, databases, shared objects).
Guidelines
1. Initially, the designer define a conceptual data model without taking into
account the level of persistence of the data by using approaches based
on UML classes or ER diagrams.
2. The designer then refines the data model by specifying the level of
persistence of the data and the data granularity, according to the
application necessities.
3. While choosing a storage method, data security needs to be considered
as sensitive data can be kept only on the server.
 RIA Frameworks
Framework Features
Microsoft Silverlight Offline access. Includes a Media player which provides smooth
streaming for live and on-demand true HD video.
Example: NASA’s website uses Silverlight to show a Photosynth
3D model of their Mars rover.
Adobe Flex Runtime environment “Flex builder” (based on eclipse) supports
drag & drop to create GUIs.
Example: eBay
JavaFX Can be used on the desktop, within a browser and on mobile
phones.
Example: LoadUI is an API load testing solution. With a visual,
drag-and-drop interface, it allows you to create, configure and
redistribute your Load Tests interactively and in real-time.
AJAX User experience is dynamic and continuous(asynchronous).
Real-time interaction between random web visitors .
Example: Gabbly, Live Chat for Any Website

RIA Frameworks & Features

 Deployment Considerations
• In a distributed RIA deployment, the presentation logic is on
the client; the business layer can be on the client, on the
server, or shared across the client and server; and the data
layer resides on the Web server or application server.
• Typically, you will move some of your business logic ﴾and
even, perhaps, some of the data access logic﴿ to the client to
maximize performance. In this case, your business and data
access layers will tend to extend across the client and the
application server.
 Deployment Considerations
1. Design your RIA as separate modules that can be
downloaded individually and cached to allow replacement of
one module instead of the whole application.
2. Version your application and components so that you can
detect the versions that clients are running.
3. Because RIA implementations copy or move presentation
logic to the client, a distributed architecture is the most
likely scenario for deployment.
 Deployment Considerations
4. Load Balancing: When you deploy
your application on multiple
servers, you can use load
balancing to distribute RIA client
requests to different servers. This
improves response times,
increases resource utilization, and
maximizes throughput. Avoid
server affinity. Server affinity
occurs when all requests from a
particular client must be handled
by the same server. It is most
often introduced by using locally
updatable caches or in‐process or
local session state stores.

Load Balancing
 YouTube as RIA
 Enhanced user interface behavior
• Internal windows are resizable using split panes and links. This
allows users to adjust page layouts without refreshing pages.
 Data distribution
• Video Serving: Each video hosted by a mini-cluster. Each video is
served by more than one machine.
• Use 5 or 6 data centers plus the CDN (Content Delivery Network).
• Images are replicated to different data centers using BigTable.
• Servers use the lighttpd web server for video streaming.
 Distribution of Page Computation
• YouTube videos are available offline.
 Client Server communication
• NetScalar is used for load balancing and caching static content.
• Application server communicates to various databases and other
information sources to get all the data and formats the html page.
 A9 as RIA
 Enhanced user interface behavior
• One of the first companies to develop a “drag & drop” feature
using JavaScript. To bookmark search results, for example, users
can drag and drop a title to the bookmark folder.
• Internal windows are resizable using split panes and links. This
allows users to adjust page layouts without refreshing pages.
 Client Server communication
• It searches asynchronously, meaning that it handles search
requests on the back end while users are performing other tasks.
 Distribution of Page Computation
• When the search engine finds the results, they are displayed on
the same page.
 A9 as RIA
 Data distribution
• Cloud search is offered through “near real-time indexing” on
content uploaded into the service.
• Indexes for the searches are stored in main memory by the A9
search engine to boost the performance on searches, and the
service is completely managed by Amazon.
• It includes hardware provisioning, setup, configuration, patching
and data partitioning to boost search results.
 Reference
[1]Noda, Tom, and Shawn Helwig. "Rich internet applications." Technical
Comparison and Case Studies of AJAX, Flash, and Java based RIA UW E-
Business-Consortium Opinion Papers (2005).
[2] Busch, Marianne, and Nora Koch. "Rich Internet Applications. State-of-the-
Art. "Ludwig-Maximilians-Universitat Munchen, Munchen, Germany,
Rep 902 (2009).
[3] Brijesh Deb, Sunil G. Bannur and Shaurabh Bharti. “Rich Internet
Applications (RIA) Opportunities and Challenges for Enterprises”, Building
Tomorrow’s Enterprise, Jan 2007.
[4] Giner Alor-Hernández, Viviana Yarel Rosales-Morales, Luis Omar Colombo-
Mendoza. “Frameworks, Methodologies, and Tools for Developing Rich
Internet Applications”, Advances in Web Technologies and Engineering
(AWTE) Book Series, September, 2014.
[5] Chapter 21:Designing Web Applications, Microsoft Application Architecture
Guide, 2nd Edition, October 2009.
[6] Chapter 23:Designing Rich Internet Applications, Microsoft Application
Architecture Guide, 2nd Edition, October 2009.
 Reference
[7] Chapter 24:Designing Mobile Applications, Microsoft Application
Architecture Guide, 2nd Edition, October 2009.
[8] Preciado, J.C.; Linaje, M.; Comai, S.; Sanchez-Figueroa, F., "Designing Rich
Internet Applications with Web Engineering Methodologies," in Web Site
Evolution, 2007. WSE 2007. 9th IEEE International Workshop on , vol., no.,
pp.23-30, 5-6 Oct. 2007.
[9] Murugesan, S. and Deshpande, Y, ICSE'99 workshop on Web Engineering,
21st international conference on Software Engineering, IEEE Computer
Society Press, Los Angeles,1999, pp. 693 – 694, ISBN:1-58113-074-0.
[10] Dart S. A., Configuration management: the missing link in Web Engineering,
Artech House, 2000, ISBN:1-58053- 098-2.
[11] Garzotto F., Paolini P. and Schwabe, D., “HDM: a model-based approach to
hypertext application design”, ACM Transactions on Information Systems,
ACM Press, 1993, vol. 11 is. 1 pp. 1 - 26, ISSN:1046-8188.
[12] Schwabe, D., Rossi, G. and Barbosa, S., “Systematic Hypermedia Design
with OOHDM”, 7th ACM International Conference on Hypertext, ACM Press,
Washington, 1996, pp. 116 - 128, ISBN:0-89791-778-2.
 Reference
[13] Gómez J. and Cachero C., “OO-H Method: extending UML to model web
interfaces”, Information modeling for internet applications, Idea Group
Publishing, 2003, ISBN:1-591-40050-3.
[14] Koch, Nora, et al. "UML-based web engineering." Web Engineering:
Modelling and Implementing Web Applications. Springer London, 2008.
157-191.
[15] Meliá, M., Gómez, J., Pérez, S. and Díaz, O.: Architectural and
technological variability in Rich Internet Applications. IEEE Internet
Computing Journal, 14, 24—32 (2010).
[16] Pastor, Oscar, Joan Fons, and Vicente Pelechano. "Oows: A method to
develop web applications from web-oriented conceptual
models." International Workshop on Web Oriented Software Technology
(IWWOST). 2003.
[17] Peter Dolog, Jan Stage. Designing Interaction Spaces for Rich Internet
Applications with UML. Proc. 7th Int. Conf. on Web Engineering (ICWE’07).
LNCS 4607, Springer-Verlag, pp.358-363, 2007.
 Reference
[18] Preciado, Juan Carlos, et al. "Designing rich internet applications
combining uwe and rux-method." Web Engineering, 2008. ICWE'08. Eighth
International Conference on. IEEE, 2008.
[19] Scott, Bill. "RIA Patterns." Best Practices for Common Patterns of Rich
Interaction http://www. uxmatters. com/mt/archives/2007/03/, Last
visited(2009): 10-02.
[20] Michael Mahemoff. Ajax Design Patterns, O’Reilly, 2006.