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
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
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
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');?>