ria
DESCRIPTION
Rias have distributed process over server and client, this is a presentation in Sadjad universty of mashhad in may 2011TRANSCRIPT
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
WIKIPEDIA
Ajax Reference – MC Graw Hill
WWW.W3.ORG
SMASHINMAGAZINE.COM
RIA Application - WILEY
WWW.PLAVEB.COM