Rias have distributed process over server and client, this is a presentation in Sadjad universty of mashhad in may 2011

2. RIA SalmanNamavar MostafaAlinaghi pour MohsenBeigi

3. WHAT IS RIA ? RICH INTERNET APPLICATIONS DISTRIBUTED PROCESS OVER SERVER AND CLIENT

4. WHAT IS RIA ? SERVER AND CLIENT PROCESSES SERVER SIDE PROCESS CLIENT SIDE PROCESS Rendering Documents Executing Scripts File management User Interaction Executing Scripts Database Process Network Process Network Process

5. WHAT IS RIA ? SIMPLE RIA EXAMPLE ALL PROCESSES ARE IN SERVER SIDE 1 2 / 3 = 4 1 REQUEST 2 REQUEST 3 REQUEST 4 REQUEST 5 REQUEST

6. WHAT IS RIA ? SIMPLE RIA EXAMPLE ALL PROCESSES ARE IN CLIENTSIDE 1 2 / 3 = 4 0 REQUEST

7. WHAT IS RIA ? SIMPLE RIA EXAMPLE DISTRIBUTED PROCESSES 2 2 * Sinh(0.1) = 2.36253654 0 REQUEST 1 REQUEST

8. WHAT IS RIA ? BEST EXAMPLES FACEBOOK GOOGLE ANALYTICS GOOGLE INSTANT SEARCH EYE OS

9. WHAT IS RIA ? RIA REQUIRMENT CLIENT SIDE TECHNOLOGIES SERVER SIDE TECHNOLOGIES AJAX

10. AJAX

11. WHAT IS AJAX ? ASYNCHRONOUS JAVASCRIPT AND XML LOADING DATA FROM SERVER WITH PARTIAL PAGE REFRESH JAVASCRIPT HAS THE MAIN ROLE IN THIS COMMUNICATION

12. WHAT IS AJAX ? AJAX CORE OBJECT XMLHttpRequest XMLHttpRequest CONTROLS THE DATA EXCHANGES IE5 AND IE6 USES AN ActiveXObject INSTEAD OF XMLHttpRequest

13. WHAT IS AJAX ? XMLHttpRequest CREATE AN XMLHttpRequest OBJECT varxmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

14. 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’);

15. WHAT IS AJAX ? XMLHttpRequest Server Response responseText responseXML

16. 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

17. WHAT IS AJAX ? XMLHttpRequest STATUS

18. WHAT IS AJAX ? XMLHttpRequest ASYNCHRONOUS - TRUE OR FALSE?

19. WHAT IS AJAX ? XMLHttpRequest GET OR POST ?

20. SYNCHRONIZATION

21. SYNCHRONIZATION THE IMPORTANCE OF SYNCHRONIZATION SERVER TO CLIENT SYNCHRONIZATION CLIENT TO SERVER SYNCHRONIZATION

22. SYNCHRONIZATION SERVER TO CLIENT SYNCHRONIZATION RECIVING INFORMATIN IN TIME PERIODS CHANGES INFORMING HTTP CHUNKING

23. SYNCHRONIZATION HTTP CHUNKING

24. SYNCHRONIZATION CLIENT TO SERVER SYNCHRONIZATION SENDING WITH EVERY CHANGE GATHERING AND SENDING

25. PERFORMANCE

26. PERFORMANCE GENERAL PERFORMANCE CLIENT SIDE PERFORMANCE SERVER SIDE PERFORMANCE

27. PERFORMANCE GENERAL PERFORMANCE MERGE CSS FILES TO INTO ONE FILE MERGE JAVASCRIPT FILES TO INTO ONE FILE MERGE 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 } .elem1 { margin-top:10px; margin-right:5px; margin-bottom:6px; margin-left:8px } .elem2 { margin: 10px 5px 6px 8px; } CACHING IS YOUR FRIEND USE IP INSTEAD OF URL IF POSSIBLE USE GET INSTEAD OF POST IF POSSIBLE KEEP YOUR CSS FILE SMALL OPTIMIZE YOUR HTML CODE COMPRESS FILES WITH SERVER COMPRESSION

28. PERFORMANCE CLIENT SIDE PERFORMANCE <script type="text/javascript"> for (i=0;i<document.images.length;i++) document.images[i].src="blank.gif" </script> <script type="text/javascript"> vartheimages=document.images; for (i=0;i<theimages.length;i++) theimages[i].src="blank.gif“ </script> 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'; }); CACHE YOUR OBJECTS CONTROL YOUR INTERVALS AND TIMEOUTS USE JAVASCRIPT LIBRARIES IF YOU NEED AVOID USING EVAL OR THE FUNCTION CONSTRUCTOR

29. PERFORMANCE SERVER SIDE PERFORMANCE PROFILE YOUR CODE TO PINPOINT BOTTLENECKS UPGRADE YOUR VERSION OF LANGUAGE USE OUTPUT BUFFERING AVOID DOING SQL QUERIES WITHIN A LOOP KNOW YOUR DBMS FOR BEST QUERY PERFORMANCE

30. DEBUGGING

31. DEBUGGING CLIENT SIDE DEBUGGING SERVER SIDE DEBUGGING

32. DEBUGGING CLIENT SIDE DEBUGGING FireBug Chrome Developer Tools Opera Dragonfly

33. DEBUGGING SERVER SIDE DEBUGGING REAL TIME DEBUGGING USE IDE LANGUAGE DEBUGGING TOOLS DEBUGGING IN REAL SITUATION LOG INTO FILE SEND DEBUG INFORMATION TO CLIENT SIDE

34. DEBUGGING SEND 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');?>

35. CASE STUDY

36. CASE STUDY JAVASCRIPT FRAMEWORKS CLIENT SIDE STORAGES GOOGLE GEARS MASHUP YAHOO PIPES

37. CASE STUDY JAVASCRIPT FRAMEWORKS jQuery Dojo Prototype

38. CASE STUDY JAVASCRIPT FRAMEWORKS - jQuery POWER IN SELECTORS 33% USED FOR AJAX APPLICATIONS FLEXIBLE FOR CREATING PLUGIN MOBILE COMPATIBLE

39. CASE STUDY JAVASCRIPT FRAMEWORKS - Dojo ASYNCHRONOUS COMMUNICATION PACKAGING SYSTEM CLIENT-SIDE DATA STORAGE SUPPORT FOR ADOBE INTEGRATED RUNTIME

40. CASE STUDY JAVASCRIPT FRAMEWORKS - Prototype IMPROVING JAVASCRIPT CLASS-BASED OBJECT LAKE 45% USED FOR AJAX APPLICATIONS JSON COMPATIBLE

41. REFERENCES GOOGLE SMASHINMAGAZINE.COM Ajax Reference – MC Graw Hill WWW.PLAVEB.COM ENG.MANP@GMAIL.COM WWW.W3.ORG RIA Application - WILEY WIKIPEDIA