RIA

RIAMohsen Beigi

Salman Namavar

Mostafa Alinaghi pour

WHAT IS RIA ?

DISTRIBUTED PROCESS OVER SERVER AND CLIENT

RICH INTERNET APPLICATIONS

WHAT IS RIA ?SERVER AND CLIENT PROCESSES

SERVER SIDE PROCESS

Executing ScriptsFile management

Database ProcessNetwork Process

CLIENT SIDE PROCESS

Rendering Documents

User InteractionExecuting ScriptsNetwork Process

WHAT IS RIA ?SIMPLE RIA EXAMPLE

ALL PROCESSES ARE IN SERVER SIDE

1

1 REQUEST

2

2 REQUEST

/

3 REQUEST

3

4 REQUEST

=

5 REQUEST

4

WHAT IS RIA ?SIMPLE RIA EXAMPLE

ALL PROCESSES ARE IN CLIENTSIDE

1

0 REQUEST

2 / 3 =4

WHAT IS RIA ?SIMPLE RIA EXAMPLE

DISTRIBUTED PROCESSES

2

0 REQUEST

2 * Sinh(0.1) =

1 REQUEST

2.36253654

WHAT IS RIA ?BEST EXAMPLES

EYE OS GOOGLE INSTANT SEARCH

FACEBOOKGOOGLEANALYTICS

WHAT IS RIA ?RIA REQUIRMENT

SERVER SIDETECHNOLOGIES

CLIENT SIDETECHNOLOGIESAJAX

AJAX

WHAT IS AJAX ?

ASYNCHRONOUS JAVASCRIPT AND XML

LOADING DATA FROM SERVER WITH PARTIAL PAGE REFRESH

JAVASCRIPT HAS THE MAIN ROLE IN THIS COMMUNICATION

WHAT IS AJAX ?AJAX CORE OBJECT

XMLHttpRequest

XMLHttpRequest CONTROLS THE DATA EXCHANGES

IE5 AND IE6 USES AN ActiveXObject INSTEAD OF XMLHttpRequest

WHAT IS AJAX ?XMLHttpRequest

CREATE AN XMLHttpRequest OBJECT

var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

WHAT IS AJAX ?XMLHttpRequest

SEND A REQUEST TO A SERVER

xmlhttp.open("GET",“test.txt",true);xmlhttp.send();

xmlhttp.open(“POST",“test.txt",true);xmlhttp.send(‘page=1&ISBN=2564523652’);

WHAT IS AJAX ?XMLHttpRequest

Server Response

responseText

responseXML

WHAT IS AJAX ?XMLHttpRequest

readyState

0: request not initialized

1: server connection established

2: request received

3: processing request

4: request finished and response is ready

WHAT IS AJAX ?XMLHttpRequest

STATUS

WHAT IS AJAX ?XMLHttpRequest

ASYNCHRONOUS - TRUE OR FALSE?

WHAT IS AJAX ?XMLHttpRequest

GET OR POST ?

SYNCHRONIZATION

SYNCHRONIZATION

THE IMPORTANCE OF SYNCHRONIZATION

SERVER TO CLIENT SYNCHRONIZATION

CLIENT TO SERVER SYNCHRONIZATION

SERVER TO CLIENT SYNCHRONIZATION

RECIVING INFORMATIN IN TIME PERIODS

CHANGES INFORMING

HTTP CHUNKING

SYNCHRONIZATION

HTTP CHUNKING

SYNCHRONIZATION

CLIENT TO SERVER SYNCHRONIZATION

SENDING WITH EVERY CHANGE

GATHERING AND SENDING

SYNCHRONIZATION

PERFORMANCE

PERFORMANCE

GENERAL PERFORMANCE

CLIENT SIDE PERFORMANCE

SERVER SIDE PERFORMANCE

PERFORMANCE

MERGE CSS FILES TO INTO ONE FILE

GENERAL PERFORMANCE

MERGE JAVASCRIPT FILES TO INTO ONE FILEMERGE IMAGES FILES TO INTO ONE FILE

.btn1{ background-image: url(images/icons.png); background-position:0px 0px; width:20px; height:20px}.btn2{ background-image: url(images/icons.png); background-position:50px 85px; width:15px; height:15px}

COMPRESS FILES WITH SERVER COMPRESSIONCACHING IS YOUR FRIENDUSE IP INSTEAD OF URL IF POSSIBLEUSE GET INSTEAD OF POST IF POSSIBLEKEEP YOUR CSS FILE SMALL

.elem1{ margin-top:10px; margin-right:5px; margin-bottom:6px; margin-left:8px}.elem2{ margin: 10px 5px 6px 8px;}

OPTIMIZE YOUR HTML CODE

PERFORMANCECLIENT SIDE PERFORMANCE

CACHE YOUR OBJECTS

<script type="text/javascript"> for (i=0;i<document.images.length;i++) document.images[i].src="blank.gif" </script>

<script type="text/javascript"> var theimages=document.images; for (i=0;i<theimages.length;i++) theimages[i].src="blank.gif“ </script>

CONTROL YOUR INTERVALS AND TIMEOUTSUSE JAVASCRIPT LIBRARIES IF YOU NEEDAVOID USING EVAL OR THE FUNCTION CONSTRUCTOR

function addMethod(object, property, code) { object[property] = new Function(code);} addMethod(myObj, 'methodName', 'this.localVar=foo');

function addMethod(object, property, func) {object[property] = func;}addMethod(myObj, 'methodName', function () { 'this.localVar=foo'; });

PERFORMANCESERVER SIDE PERFORMANCE

PROFILE YOUR CODE TO PINPOINT BOTTLENECKSUPGRADE YOUR VERSION OF LANGUAGEUSE OUTPUT BUFFERINGAVOID DOING SQL QUERIES WITHIN A LOOPKNOW YOUR DBMS FOR BEST QUERY PERFORMANCE

DEBUGGING

DEBUGGING

CLIENT SIDE DEBUGGING

SERVER SIDE DEBUGGING

DEBUGGINGCLIENT SIDE DEBUGGING

FireBug

Chrome Developer Tools

Opera Dragonfly

DEBUGGINGSERVER SIDE DEBUGGING

REAL TIME DEBUGGING

DEBUGGING IN REAL SITUATION

USE IDE LANGUAGE DEBUGGING TOOLS

LOG INTO FILE

SEND DEBUG INFORMATION TO CLIENT SIDE

DEBUGGINGSEND DEBUG INFORMATION TO CLIENT SIDE

FIRE PHP

<?php

include_once ‘inc/FirePHP.php’;

FB::log('Log message'); FB::info('Info message'); FB::warn('Warn message'); FB::error('Error message');?>

CASE STUDY

CASE STUDY

JAVASCRIPT FRAMEWORKS

CLIENT SIDE STORAGES

GOOGLE GEARS

MASHUP

YAHOO PIPES

CASE STUDY

jQuery

Dojo

Prototype

JAVASCRIPT FRAMEWORKS

CASE STUDY

POWER IN SELECTORS

JAVASCRIPT FRAMEWORKS - jQuery

33% USED FOR AJAX APPLICATIONS

FLEXIBLE FOR CREATING PLUGIN

MOBILE COMPATIBLE

CASE STUDY

ASYNCHRONOUS COMMUNICATION

JAVASCRIPT FRAMEWORKS - Dojo

PACKAGING SYSTEM

CLIENT-SIDE DATA STORAGE

SUPPORT FOR ADOBE INTEGRATED RUNTIME

CASE STUDY

IMPROVING JAVASCRIPT CLASS-BASED OBJECT LAKE

JAVASCRIPT FRAMEWORKS - Prototype

45% USED FOR AJAX APPLICATIONS

JSON COMPATIBLE

REFERENCES

GOOGLE

WIKIPEDIA

Ajax Reference – MC Graw Hill

WWW.W3.ORG

SMASHINMAGAZINE.COM

RIA Application - WILEY

WWW.PLAVEB.COM

ENG.MANP@GMAIL.COM