Early generation of Rich Internet Application (RIA) technologies fulfill the requirement of RIA through plug-in solutions, and browser specific extension provides attractive solution of running native like application as a client to web backend, but fragmentation of the technologies and nonstandard implementation have hindered their wide adoption. Introduction of HTML5 and CSS3 implementation in all the major browsers recently has changed the RIA landscape. Now we have a technology stack that is controlled by a standard body, and widely implemented in mainstream browsers as a base to create RIA applications. Other than the control and standardization, this technology stacks are also exceed the original definition of RIA. As a result, the market sees a flood of browser based RIA that doing things previously can only be done by native applications. This paper describes our own experience in implementing a RIA application based on HTML5, CSS3 and Javascript and highlight how these technologies have exceeded the old RIA definition.

1. Rich Internet Application
(RIA) New Dimension With
HTML5, CSS3 and
Javascript Technology
Shamsul Anuar Abdul Wahid /Department of ICT
MIMOS Berhad
Malaysia
shamsul.wahid@mimos.my
Zee Kum Khoon / Department of ICT
MIMOS Berhad
Malaysia
kk.zee@mimos.my

2. What is required in Rich Internet
Application?
Visual
Continuity
Dynamic Data
Retrieval
Personalization
Multimedia

3. RIA Technologies
Plug In
Technology
Web 2.0
Application
Full
Javascript
based RIA

4. Web 2.0 RIA Application Reference
• World Wide Web as target platform
• Browser Implementation
– Issues
Lively Kernel
• Postback
• Offline Capability
• Same origin policy
• Limited Persistence Connection
• Interoperability and compatibility
• Javascript as the programming language for
web

5. Architecture
Client Layer
Browser
Stage
HTML/CSS3
Javascript
Presenting information and
interpreting user commands
Render stage execution code
Workspace for the
presentation layer
Knockout.JS Structuring the web content
View
View Model
Model
Persistence.JS
Local Storage
and presenting information
Structuring the web
application and provide
persistence data storage
Non-volatile data storage in
the web browser

6. Lesson Learnt
• Persistence Local Storage
• Single Page Application Concept
• Dynamic Data Retrieval Synchronization
• Asynchronous Communication Methods

7. New Technologies
• Asynchronous Servers
• Back End as a Service
• Javascript engine / code generators /
optimization

8. Acknowledgement
My acknowledgement goes to all the Staff
Engineer in MIMOS for their openness to share
their view and knowledge in particular to web
technologies.
Thank You!