Asynchronous JavaScript
Rich AJAX Interactions and data inter-change basics




                                          ...
Overview
•    What is Asynchronous ?
•    Applications on Web 2.0
•    Think Layers
•    Data interchange
•    Why Ajax ? ...
Synchronous Execution
   Start-stop-start-stop nature
Synchronous operation
•  Start-stop-start-stop nature of interaction
•  The web by default is Synchronous
•  Communication...
Synchronous operation …

     Activity                            Activity                       Activity




            ...
Synchronous operation …

  User Activity                            User Activity                       User Activity



C...
Asynchronous Execution
Go with the flow, think about consequences when
                      they arise
Asynchronous operation
•    User activity is continuous
•    Operation will not wait for response
•    Chances of Race con...
Asynchronous operation …

Client                                        User Activity




                                ...
Asynchronous operation …
•  Communication between processes is buffered
   using buffers of unlimited size
•  The sender n...
Rich web applications
  Applications on the Web 2.0
Ajax is a broad term
•  Any DHTML application is termed as Ajax
   applications
•  Is no longer an acronym
•  Most rich we...
Caching
•  Any repetitive action can be cached
     –  Style calculation for a DOM element
     –  DOM tree structure
    ...
Ajax application




Technical Presentation   14
Asynchronous HTTP Request
•  XHR for short is an API to transfer data to and
   fro between the client (User Agent) and th...
Asynchronous HTTP Request …
•  Usual steps in Ajax web applications
     –  Create an XMLHttpRequest object
     –  Make a...
Some code
callBackObj = {
        success : handleSuccess,
        failure  : handleFailure,
        argument : [argument1...
Scope of execution
•  Maintaining scope is very important
var callback = {
   success : handleSuccess,
   failure : handle...
Client side power
•  Client machines are powerful
•  Lot of processing can be done on client
     –  Sorting tables
     –...
Application layers
Layer enhancements endlessly
Tier based architecture
•  We follow this practice on server side
   development
  –  DB layer
  –  Processing Layer
  –  ...
Tier based architecture …
•  CSS for styles / presentation
•  Javascript validation and DHTML effects
     –  DHTML widget...
Why layer
•  Programming effort to produce the data is the
   same, programming effort to format the data
   varies across...
Data Interchange
                          Load less, add on later




 24
Technical Presentation
Same origin Policy




Cross-domain requests are Denied
    due to security implications
Data formats
•  Web 2.0 popularized the use of JSON as a
   popular data interchange
•  XML has been a popular data interc...
JSON



 “JSON is a subset of the object literal notation of
       JavaScript. Since JSON is a subset of
   JavaScript, i...
JSON
•  Lightweight
•  Key value pair based
•  Easy to parse
•  JSON.org provides a json2.js JSON parser for
   client
•  ...
JSON

var myJSONObject = {quot;bindingsquot;: [
     {quot;ircEventquot;: quot;PRIVMSGquot;, quot;methodquot;: quot;newURI...
XDR
•  Cross Domain Request
•  XMLHTTPRequest has same origin policy
   restriction
•  Future browsers may support an XDR ...
How to do XDR ?
•  The most common way is to use a server side
   proxy


           Client calls same    Remote URL as 
 ...
How to do XDR ? …
•  Use a Dynamic script node
•  This can be used only with services which
   provide a callback option
•...
Dynamic script node based fetch

{
…
scr = document.createElement(quot;scriptquot;);
scr.type=quot;text/javascript”;
scr.i...
XDR data fetch
•  YUI get utility provides for this




Technical Presentation     34
Why Ajax ? When Ajax ?
     Ajax is an enhancement not a core functionality




 35
Technical Presentation
Why?
•  Rich User Interface
  –  User can be more engaged
  –  User need not load the page everytime to get new
     infor...
Do more with less
•  Separation of content, formatting and behaviour
•  Initial load time can come down
•  Fetch only the ...
Impacts
•  Some User Agents may not support Ajax
•  Search Engine Optimisation gets a hit if not
   properly designed
•  S...
Impacts …
•  Problem for users that assume GET requests do
   not change the state of an application
     –  Confuses Robo...
Impacts …
•  Back/forward buttons do not work well with rich
   applications that use DHTML, they need to be
   controlled...
Too much richness isn’t good
 Always be aware of what your web application can
     do and what your web application shoul...
Always Remember
•  Ajax ( in most cases ) has to be used to enhance
   the page, never use Ajax for a core functionality
•...
Thank you
Upcoming SlideShare
Loading in …5
×

Asynchronous Javascript and Rich Internet Aplications

2,276 views

Published on

Asynchronous development in javascript can be a very powerful development paradigm. Ajax applications make use of this paradigm. This presentation will provide an insight about the important things to consider while creating Rich Internet applications

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,276
On SlideShare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
37
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Asynchronous Javascript and Rich Internet Aplications

  1. 1. Asynchronous JavaScript Rich AJAX Interactions and data inter-change basics Subramanyan Murali Yahoo! Frontend Engineer, YDN Evangelist
  2. 2. Overview •  What is Asynchronous ? •  Applications on Web 2.0 •  Think Layers •  Data interchange •  Why Ajax ? When Ajax ? Technical Presentation 2
  3. 3. Synchronous Execution Start-stop-start-stop nature
  4. 4. Synchronous operation •  Start-stop-start-stop nature of interaction •  The web by default is Synchronous •  Communication between processes is un- buffered, and processes wait until the interaction between them has been completed •  Process will wait till conformation to go ahead is got Technical Presentation 4
  5. 5. Synchronous operation … Activity Activity Activity Communication Communication System Processing System Processing Technical Presentation 5
  6. 6. Synchronous operation … User Activity User Activity User Activity Client Time Data Transmission Data Transmission Data Processing Data Processing Server Technical Presentation 6
  7. 7. Asynchronous Execution Go with the flow, think about consequences when they arise
  8. 8. Asynchronous operation •  User activity is continuous •  Operation will not wait for response •  Chances of Race conditions •  Good model for GUI applications –  Data Fetch is independent of data render •  Interaction between concepts have to deal with smaller data packets Technical Presentation 8
  9. 9. Asynchronous operation … Client User Activity Data nse nse Data po po Re Re Res Res ques ques Ajax Data Data t t Client Client Processing Processing Time Data Transmission Data Transmission Server System Processing System Processing Technical Presentation 9
  10. 10. Asynchronous operation … •  Communication between processes is buffered using buffers of unlimited size •  The sender never waits after sending data •  Responses needs to be tracked •  On the web, if the wait time for response is not handled properly, it might lead to multiple requests by the user Technical Presentation 10
  11. 11. Rich web applications Applications on the Web 2.0
  12. 12. Ajax is a broad term •  Any DHTML application is termed as Ajax applications •  Is no longer an acronym •  Most rich web applications have some sort of asynchronous behavior •  Business logic is off loaded to the client •  Heavy DOM manipulation Technical Presentation 12
  13. 13. Caching •  Any repetitive action can be cached –  Style calculation for a DOM element –  DOM tree structure –  JSON data –  Remote response data •  Caching can improve overall user experience •  Simple Caching is cheap on the Browser Technical Presentation 13
  14. 14. Ajax application Technical Presentation 14
  15. 15. Asynchronous HTTP Request •  XHR for short is an API to transfer data to and fro between the client (User Agent) and the server (Web server) over HTTP –  XHR is an abbreviation for XML Http Request •  The data interchange need not be just XML –  Popular Data interchange formats are JSON, XML, Plain Text and CSV Technical Presentation 15
  16. 16. Asynchronous HTTP Request … •  Usual steps in Ajax web applications –  Create an XMLHttpRequest object –  Make a HTTP request to the server –  Register your callback function for handling the response –  Handle the response, check for return status –  Parse the response on success, display result Technical Presentation 16
  17. 17. Some code callBackObj = { success : handleSuccess, failure : handleFailure, argument : [argument1, argument2, argument3], cache : false }; var xhr = YAHOO.util.Connect.asyncRequest(quot;GETquot;, url, callBackObj); if (!xhr) { // User agent does not support XHR } …… function handleSuccess(o) { / * o.tId, o.status, o.getResponseHeader[ ], o.responseText, o.argument */ } Technical Presentation 17
  18. 18. Scope of execution •  Maintaining scope is very important var callback = { success : handleSuccess, failure : handleFailure, scope : scopeObject }; •  Further processing after response needs to happen on the same object that initiated it Technical Presentation 18
  19. 19. Client side power •  Client machines are powerful •  Lot of processing can be done on client –  Sorting tables –  Pre-fetching Images –  Client side data store •  YUI data source –  Better visualizations •  Vector graphics capabilities Technical Presentation 19
  20. 20. Application layers Layer enhancements endlessly
  21. 21. Tier based architecture •  We follow this practice on server side development –  DB layer –  Processing Layer –  Interface layer •  Core functionality in base layer •  Functionality and Style added as layers •  Separation of Concern
  22. 22. Tier based architecture … •  CSS for styles / presentation •  Javascript validation and DHTML effects –  DHTML widgets to improve usability •  XHR calls to reduce network transfers and improve application responsiveness •  Each layer is added unobtrusively Technical Presentation 22
  23. 23. Why layer •  Programming effort to produce the data is the same, programming effort to format the data varies across formats •  Different data formats require different processing capabilities on client and server. •  Will make code more extensible for the future Technical Presentation 23
  24. 24. Data Interchange Load less, add on later 24 Technical Presentation
  25. 25. Same origin Policy Cross-domain requests are Denied due to security implications
  26. 26. Data formats •  Web 2.0 popularized the use of JSON as a popular data interchange •  XML has been a popular data interchange •  Many Web 2.0 applications exchange HTML data which is JSON encoded –  Yahoo! home page •  CSV is also supported by the YUI data source widget Technical Presentation 26
  27. 27. JSON “JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss” - Doulas Crockford Technical Presentation 27
  28. 28. JSON •  Lightweight •  Key value pair based •  Easy to parse •  JSON.org provides a json2.js JSON parser for client •  All popular languages have JSON parsers –  All listed in JSON.org •  Interchange is a string Technical Presentation 28
  29. 29. JSON var myJSONObject = {quot;bindingsquot;: [ {quot;ircEventquot;: quot;PRIVMSGquot;, quot;methodquot;: quot;newURIquot;, quot;regexquot;: quot;^http://.*quot;}, {quot;ircEventquot;: quot;PRIVMSGquot;, quot;methodquot;: quot;deleteURIquot;, quot;regexquot;: quot;^delete.*quot;}, {quot;ircEventquot;: quot;PRIVMSGquot;, quot;methodquot;: quot;randomURIquot;, quot;regexquot;: quot;^random.*quot;} ] }; myJSONObject.bindings[0].method; // dot notation myJSONObject[“bindings”][0][“method”]; // Array literal notation var myJSONtext = “{‘test’: 5, ‘test2’: 10}”; var myObject = eval('(' + myJSONtext + ')'); // Using json2.js var myObject = JSON.parse (myJSONtext); Technical Presentation 29
  30. 30. XDR •  Cross Domain Request •  XMLHTTPRequest has same origin policy restriction •  Future browsers may support an XDR object –  IE and Firefox are close to making a release Technical Presentation 30
  31. 31. How to do XDR ? •  The most common way is to use a server side proxy Client calls same  Remote URL as  origin URI  parameter  Same origin  Remote URL  Proxy  response  Technical Presentation 31
  32. 32. How to do XDR ? … •  Use a Dynamic script node •  This can be used only with services which provide a callback option •  Relies on the fact that script node is attached globally and can call a global function •  Usually the data passed across in JSON and hence the method is called JSONP response services –  JSON with padding Technical Presentation 32
  33. 33. Dynamic script node based fetch { … scr = document.createElement(quot;scriptquot;); scr.type=quot;text/javascript”; scr.id = id; scr.src = “http://xyz.com/query=abc&callback=handleResponse”; … document.body.appendChild(scr); // or can be appended to HEAD } function handleResponse(o) { // o is the data you respond from server } Technical Presentation 33
  34. 34. XDR data fetch •  YUI get utility provides for this Technical Presentation 34
  35. 35. Why Ajax ? When Ajax ? Ajax is an enhancement not a core functionality 35 Technical Presentation
  36. 36. Why? •  Rich User Interface –  User can be more engaged –  User need not load the page everytime to get new information •  Snappier Response Time •  Lesser content can be loaded the first time •  Lower Bandwidth Usage –  No page reloading –  Only data specific to user request can be loaded
  37. 37. Do more with less •  Separation of content, formatting and behaviour •  Initial load time can come down •  Fetch only the data you need, not what your users may need Technical Presentation 37
  38. 38. Impacts •  Some User Agents may not support Ajax •  Search Engine Optimisation gets a hit if not properly designed •  Search engines may not be smart enough to navigate the Ajax based pages –  Bad Frontend development can hide the urls of the link that initiate Ajax call –  Accessibility of the page can be affected Technical Presentation 38
  39. 39. Impacts … •  Problem for users that assume GET requests do not change the state of an application –  Confuses Robots, Spiders –  Shows Bad Design – Designer does not know the difference between GET & POST requests •  Any client-side changes to the page (using DHTML) are not recorded in the browser's history –  Yahoo! Browser History Manager saves the day !! :-) Technical Presentation 39
  40. 40. Impacts … •  Back/forward buttons do not work well with rich applications that use DHTML, they need to be controlled by the developer Technical Presentation 40
  41. 41. Too much richness isn’t good Always be aware of what your web application can do and what your web application should do 41 Technical Presentation
  42. 42. Always Remember •  Ajax ( in most cases ) has to be used to enhance the page, never use Ajax for a core functionality •  Display an indicator/progress of what is happening behind the scenes •  Have a timeout for the transaction, do not try to process the request indefinitely •  If possible have an option of the user aborting the transaction (equivalent of the quot;stopquot; button in the browser) Technical Presentation 42
  43. 43. Thank you

×