Basics of Rich Internet Applications


Published on

The basics to start developing Rich Internet applications.
This presentation talks about some of the important stuff to follow to make the web application both interactive and robust

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Basics of Rich Internet Applications

  1. 1. Basics of Rich Internet Applications Doing things right for the Web 2.0 and beyond Subramanyan Murali Frontend Engineer, YDN Evangelist
  2. 2. Overview •  What is Rich Internet Applications ? •  Benefits •  Do things right from the start •  Separation of Concern –  HTML for Markup •  Semantic Markup –  CSS for Presentation •  Class hierarchies •  Cascading –  Javascript for Behavior •  JS libraries Technical Presentation 2
  3. 3. Overview … –  Ajax for Data interchange –  Using Libraries to add for Effects –  Choose your data Interchange •  Progressive Enhancement Technical Presentation 3
  4. 4. Rich internet Applications 4 Technical Presentation
  5. 5. RIA •  Users are dissatisfied with the capabilities and performance of simple HTML-based Web applications •  Need for desktop type interactions •  Bringing Interactivity & Intuitiveness Into Web Applications •  Adds complexity to design, develop, deploy and debug
  6. 6. Benefits •  Features that WOW the users •  Lot of processing can be off-loaded to the client •  Adoption spreads rapidly and dramatically •  Improved responsiveness •  Platform independence •  Businesses have more reach to their offerings through Rich web applications. •  Deployments costs are minimal Technical Presentation 6
  7. 7. Web development over the years End user expects more from current technologies 7 Technical Presentation
  8. 8. Perspective •  Over the years, there have not been too many radical developments in Web technologies •  User demand and expectations is ever changing •  The browser is a very hostile development environment –  The web browser was never designed for rich applications –  Multiple browsers just adds to complexity •  Web developer needs to a unique mix of engineers and Designers
  9. 9. Perspective … •  Web development standards are not friendly to rich applications development •  But following standards will ensure stability and standard proofing apps Technical Presentation 9
  10. 10. Concepts Tricks / approaches / standards for better web development 10 Technical Presentation
  11. 11. Consider <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=“fonts-min.cssquot; /> <body> <div style=‘border:1px solid;’> <a href=‘#’ onClick=“doSomething(this);” id=‘something’>Click</a> <form name=‘sample’ style=‘font-size:10px;’ > <input type=‘text’ name=‘search’ value=‘type text’ onKeyPress=‘check();’ /> <input type=‘submit’ onclick=“validate(this.form);” /> </form> </div> </body> <script type=‘text/javascript’> function doSomething(o) { … } function validate(f) { … } function check() { … } </script>
  12. 12. Separation of concern <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=“fonts-min.cssquot; /> <body> <div style=‘border:1px solid;’> <a href=‘#’ onClick=“doSomething(this);” id=‘something’>Click</a> <form name=‘sample’ style=‘font-size:10px;’ > <input type=‘text’ name=‘search’ value=‘type text’ onKeyPress=‘check();’ /> <input type=‘submit’ onclick=“validate(this.form);” /> </form> </div> </body> <script type=‘text/javascript’> function doSomething(o) { … } function validate(f) { … } function check() { … } </script> Technical Presentation 12
  13. 13. Separation of concern … <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=“fonts-min.cssquot; /> <body> Ajax  <div style=‘border:1px solid;’> DHTML Effects  <a href=‘#’ onClick=“doSomething(this);” id=‘something’>Click</a> <form name=‘sample’ style=‘font-size:10px;’ > CSS  Javascript  <input type=‘text’ name=‘search’ value=‘type text’ onKeyPress=‘check();’ /> <input type=‘submit’ onclick=“validate(this.form);” /> </form> </div> </body> HTML  <script type=‘text/javascript’> function doSomething(o) { … } Server Side  function validate(f) { … } function check() { … } </script> Data Store  Technical Presentation 13
  14. 14. Markup •  Getting Makrup right is very important •  “HTML Provides a means to describe the structure of text-based information in a document” – W3C •  It’s a good practice to follow strict.dtd <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//EN” quot;;> Technical Presentation 14
  15. 15. Markup … •  Just write markup for what you want at that moment –  Never code markup for the future •  Adding many divs and classes and ids to everything does not make a good markup •  Representing content and establishing structure is a good practice –  Split into Headers, Body, footers, navigation etc –  Use Ids and classes to get that distinction Technical Presentation 15
  16. 16. Markup … <!-- Splitting into Sections --> <div id='container'> <div class='header'> <div class='headertitle'></div> <div class='closelink'> <img src='close.gif' alt='Close link'> </div> </div> <div class='body'>...</div> <div class='footer'></div> </div> Technical Presentation 16
  17. 17. Markup … •  Adding too many DIVs can be termed ‘Divitees’ •  Keep things simple, do not pre estimate number of classes, ids and markup •  Splitting based on semantic meaning of the markup elements is better –  Semantic = Meaning •  Add 'presentation identifiers' for CSS as needed –  Identifiers can be as concise as possible Technical Presentation 17
  18. 18. Markup … <!-- Better way to write --> <div id='container'> <h2>Header title <img src='close.gif' alt='Close link'></h2> <div class='bd'>...</div> <div class='ft'></div> </div> •  This is the same representation of data, but is more semantic Technical Presentation 18
  19. 19. Markup … •  All elements generate a box –  Block-level elements (div, paragraph, list) are formatted as a principal box, and start on a new line –  Inline elements (span, img, strong) appear within context, with no new line •  Inline boxes should not contain block boxes Technical Presentation 19
  20. 20. Markup … padding margin-top Header Text This is Body text. This is Body text. This is Body text. This is Body text. Footer Text margin-bottom padding Technical Presentation 20
  21. 21. Cascading Style Sheets •  Styles specified in CSS cascade from parent •  When a child chooses to over ride a CSS attribute, the last given CSS attribute takes precedence •  CSS attributes can specifically be asked to quot;inheritquot; value from ancestor •  If the parent element has many child elements, the class selector for the parent can be used to define styles for its children Technical Presentation 21
  22. 22. CSS … <div class='test'> <p>This is test para <span>and test span</></p> <h3>This is test heading </h3> <a href=''>Yahoo! Link </a> </div> .test p { /*styles for para tag*/ } .test p span { /*styles for span tag inside para*/ } Technical Presentation 22
  23. 23. CSS … •  Inline boxes cannot have dimensions and some other properties declared •  Floating or absolutely positioning any element makes it a block-level element •  CSS has to be separated out –  Presentation styles •  Colors, font sizes, font families –  Positional Styles •  Floats, Positions, Margins, Paddings Technical Presentation 23
  24. 24. CSS … •  Normal Flow –  Includes normal positioning and relative positioning for block and inline boxes •  Float Model –  In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float •  Absolute Positioning –  In the absolute positioning model, a box is removed from the normal flow entirely and assigned a position with respect to a containing block. This has no impact on later siblings. Technical Presentation 24
  25. 25. CSS … •  Specificity : It is a process used to determine which rules take precedence in CSS when several rules could be applied to the same element in markup •  Specificity calculations aid –  Every id selector (#whatever) = value of 100 –  Every class selector (.whatever) = value of 10 –  Every HTML selector (whatever) = value of 1 –  Add them all up = specificity value •  div p.tree > div p •  body #content .alternative p > div p.tree •  Specificity is irrespective of order Technical Presentation 25
  26. 26. CSS … •  Do not use too many CSS hacks –  Most commonly used hacks will be for the Box model differences –  *css-attribute will make the class visible only to IE browsers •  If you are forced to have many CSS hacks, group all of them together –  Using specificity rules, you can override specific styles •  Float model hacks will be the more commonly used Technical Presentation 26
  27. 27. CSS … •  CSS design can almost never be got right in the first go –  Need to constantly update the CSS •  Hence, never over design your styles –  Code for what you need, trying to make it as generic as possible •  With clean markup and proper CSS design, flexible Web 2.0 layouts is possible –  Will reduce maintenance costs –  Layout changes are simple •  With demanding Web 2.0 applications, namespacing CSS class names can be important Technical Presentation 27
  28. 28. CSS … •  Namespaces can be chosen based on design –  Section names –  Feature –  Style category div.nav-section { } div.nav-link { } div.footer { } •  Do not choose style names that explain what the class does –  Class names should explain what they are meant for Technical Presentation 28
  29. 29. CSS … •  CSS Class nesting can be a powerful aid to your design •  When classes are nested, the styles applied will be a union of the the 2 classes •  Class nesting can make the markup more readable .section { padding: 2px 4px; color: black; } .highlight { border: 1px solid; } <div class=‘section highlight’>Test</div> Technical Presentation 29
  30. 30. Javascript •  Javascript was primarily used for client side validation •  With the demands of Web 2.0, Javascript is the chosen technology for dynamic scripting on the client to create rich internet applications •  Javascript is Object oriented •  All javascript used on the page needs to be closest to the closing HTML tag as possible •  Client side behaviour is programmed using Javascript Technical Presentation 30
  31. 31. Javascript … •  Use a Javascript Library where ever possible –  Libraries are solutions that manage various client side issues centrally –  Cross browser issues are handled by the library •  Do not over design your javascript –  Start simple –  Choose a well known design pattern –  Stick to the design •  Try to reduce the use of Global variables –  In JavaScript the window object is the global scope –  This is the highest scope in the scope chain •  Always namespace your scripts Technical Presentation 31
  32. 32. Javascript … •  Simple Namespacing function validate-text() { } function effects_tween(o) { } function effects_animate() { } •  Object Namespace var myApp = {}; myApp.globals = {}; myApp.methods = {}; myApp.methods.multiply = function(a, b) { } Technical Presentation 32
  33. 33. Javascript … •  Having a object namespace will allow for easier cleanup during page clean-up or garbage collection window.onunload = function(e) { myApp = null; /* All the properties are cleared */ } •  Namespaces also helps for better code organization •  In the web 2.0 world, there is a lot of code mixing around –  Widgets may exist in other pages –  Namespace can ensure you have complete control over your code execution Technical Presentation 33
  34. 34. Javascript … myApp.methods.generate = function ( o ) { }; function generate = function (a, b) { }; •  YUI 2.x uses the YAHOO namespace •  YUI 3.x uses the YUI namespace –  With the change from YAHOO to YUI we are guaranteed not to break backward compatibility. This allows you to use both YUI 2.x and YUI 3.x on the same page without fear of breaking existing code. Technical Presentation 34
  35. 35. Javascript … •  Anonymous functions are used to execute code which only needs to be executed once •  In JavaScript, a function can be used wherever expressions can be used •  A function can be passed as a argument in javascript •  If you don't need to re-use the callback function (name), write the function definition directly foo ( somedata, function( ) { // callback function }); Technical Presentation 35
  36. 36. Javascript … •  When a nested function has access to the scope of it’s parent function, it is called a closure •  In JavaScript, if the interpreter can’t find a variable in it’s current scope, it’ll go up the scope chain and searches the parent scope until it finds the variable function foo(){ var msg = quot;hello worldquot;; function bar(){ alert(msg); }; bar(); }; foo(); Technical Presentation 36
  37. 37. Javascript … •  Inside the scope, the function bar() can be called many times, and each time, it will have access to the variable •  Closure example – Technical Presentation 37
  38. 38. Javascript … •  In DHTML, every time a quot;stylequot; gets changed for a visible element, there is an internal reflow happening in the browser. This can slow up a little bit or can cause unnecessary flicker –  Either make the element display:none and apply all styles ( handling height and width may require element be visible ) –  Or detach the element from the parent node, do all manipulation, and re attach the item to the parent Technical Presentation 38
  39. 39. Javascript … •  Accessing the quot;stylequot; property of the element every time (in the example), we can cache the property accesses to gain a small performance increase: var d = document.getElementById(quot;containerquot;), e =; e.display = quot;quot;; // make it visible e.background = quot;#fffquot;; e.color = quot;#000quot;; // some more changes to via e Technical Presentation 39
  40. 40. Javascript … •  Caching function pointers can give performance improvements •  The global lookup for every iteration can be avoided by rewriting the quot;doMyDutyquot; as: function doMyDuty( collection ) { var i, n = collection.length; var fcn= doStuff; for (i = 0; i < n; i++) { fcn( collection[i] ); } } •  Technical Presentation 40
  41. 41. Ajax •  Ajax must be the last layer in a web application •  Core functionality must never reply on Ajax •  Ajax must be extensively used to enhance functionality which reply on data from the server •  Since Javacsript can take up some business logic, we do not need to rely on server side processing –  Raw data can be processed on the client Technical Presentation 41
  42. 42. Ajax … •  Ajax should be used to enhance user experience, it should not be the only experience •  Progressively enhance the page –  Introduced to subvert the traditional quot;Graceful Degradationquot; development method •  Get more data as and when user requests and cache it on the client •  When Application has to deal with Bandwidth issues •  Provide a Abort operation where ever possible Technical Presentation 42
  43. 43. Ajax … •  Advantages of using Ajax –  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 –  Separation of content, formatting and behaviour Technical Presentation 43
  44. 44. Ajax … •  Disadvantages of using Ajax –  Some User Agents may not support Ajax –  Search Engine Optimization gets a hit if not properly designed •  Search engines crawlers may not be smart enough to navigate the Ajax based pages –  Bad Frontend development can hide the URLs of the link that initiate Ajax calls –  Accessibility of the page can be affected •  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 Technical Presentation 44
  45. 45. Ajax … •  Any client-side changes to the page (using DHTML) are not recorded in the browser's history –  Yahoo! Browser History Manager can help •  Back/forward buttons do not work well with rich applications that use DHTML, they need to be controlled by the developer •  Cross-domain requests –  Using a server side proxy is the most suitable solution Technical Presentation 45
  46. 46. JSON •  JavaScript Object Notation. •  A Data Interchange Format. •  Text-based. •  Light-weight. •  Easy to parse. •  Language Independent. •  A Subset of ECMA-262 ECMAScript Third Edition. Technical Presentation 46
  47. 47. JSON … •  Not a document format •  Not a markup language •  Not a general purpose serialization format –  It is perfectly suited for the Web and RIA Technical Presentation 47
  48. 48. JSON … •  { “key” : value, ... } •  The “key” is a string •  The “value” can be anything - strings, numbers, boolean, objects, arrays or null Technical Presentation 48
  49. 49. JSON … •  MIME type - application/json •  Strictly UNICODE •  Default is UTF-8 •  UTF-16 and UTF-32 are accepted Technical Presentation 49
  50. 50. JSON … •  Step 1 : XMLHttpRequest •  Step 2 : Obtain responseText •  Step 3 : Parse the responseText var responseData = eval ( ' ( ' + responseText + ' ) ' ); Technical Presentation 50
  51. 51. JSON … •  Available in ECMAScript 4th Edition –  JSON: The Fat-Free Alternative to XML - Douglas Crockford - •  New Methods: –  Object.prototype.toJSONString –  String.prototype.parseJSON •  In current versions, it can be used by including ( •  Parse the responseText –  var responseData = JSON.parse(responseText); Technical Presentation 51
  52. 52. Cross Browser Support Browser differences are painful 52 Technical Presentation
  53. 53. Cross Browser … •  Browsers have differences in standards implementation •  Browsers have Bugs •  Developing for multiple browsers can be a daunting task –  Box model differences –  Support differences –  Javascript performance •  Yahoo!s Graded Browser support details out browsers into 3 grades –
  54. 54. Cross Browser • •  Using CSS and Javascript libraries can be really helpful when dealing with cross browser issues •  Working with a strict doctype will ensure that most browsers work in the standards compliant mode Technical Presentation 54
  55. 55. Cross Browser … •  Browsers are not limited to browsers on the computer •  Mobile phones have their own complexities •  With more mobile users, need for rich web applications to run on their respective devices is essential Technical Presentation 55
  56. 56. Progressive enhancement First inspect, then provide 56 Technical Presentation
  57. 57. Progressive Enhancement “Checking if the ice can carry you before stepping on it” –  Christian Heilmann •  Simply means that you test for an improvement before you apply it •  System design and development methodology makes it possible to build in a layered fashion •  Accessibility and Performance are accounted for right at the start •  Layers should be made to be replaceable - swap the HTML layer with an RSS layer and CSS with XSLT
  58. 58. Progressive Enhancement … •  Browser capability testing is done by Nag bars, which retrieve information about the browser prior to sending the actual page •  Progressive enhancement may avoid you the trouble for maintaining different pages for different user agents •  The Interactivity demanded by users and user experience is determined based on the capabilities of devices Technical Presentation 58
  59. 59. Progressive Enhancement … •  Build for C grade •  Test for C grade •  Add style and behavior for A grade •  Test for A grade •  Test in X Grade •  Fix for X Grade if needed Technical Presentation 59
  60. 60. Examples 60 Technical Presentation
  61. 61. Thank you 61 Technical Presentation