Basics of Rich Internet Applications

Basics of Rich Internet Applications Doing things right for the Web 2.0 and beyond Subramanyan Murali Frontend Engineer, YDN Evangelist

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

Overview … –  Ajax for Data interchange –  Using Libraries to add for Effects –  Choose your data Interchange •  Progressive Enhancement Technical Presentation 3

Rich internet Applications 4 Technical Presentation

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

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

Web development over the years End user expects more from current technologies 7 Technical Presentation

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

Perspective … •  Web development standards are not friendly to rich applications development •  But following standards will ensure stability and standard proofing apps Technical Presentation 9

Concepts Tricks / approaches / standards for better web development 10 Technical Presentation

Consider <link rel=\"stylesheet\" type=\"text/css\" href=“fonts-min.css\" /> <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>

Separation of concern <link rel=\"stylesheet\" type=\"text/css\" href=“fonts-min.css\" /> <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

Separation of concern … <link rel=\"stylesheet\" type=\"text/css\" href=“fonts-min.css\" /> <body> Ajax <div style=‘border:1px solid;’> DHTML Eﬀects <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

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 \"-//W3C//DTD HTML 4.01//EN” \"http://www.w3.org/TR/html4/strict.dtd\"> Technical Presentation 14

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

Markup …  <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

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

Markup …  <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

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

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

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 \"inherit\" 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

CSS … <div class='test'> <p>This is test para <span>and test span</></p> <h3>This is test heading </h3> <a href='http://yahoo.com'>Yahoo! Link </a> </div> .test p { /*styles for para tag*/ } .test p span { /*styles for span tag inside para*/ } Technical Presentation 22

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

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

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

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

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

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

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

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

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

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

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

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

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

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 = \"hello world\"; function bar(){ alert(msg); }; bar(); }; foo(); Technical Presentation 36

Javascript … •  Inside the scope, the function bar() can be called many times, and each time, it will have access to the variable •  Closure example –  http://indiahacku.in/subram/dataFetch.js Technical Presentation 37

Javascript … •  In DHTML, every time a \"style\" 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

Javascript … •  Accessing the \"style\" 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(\"container\"), e = d.style; e.display = \"\"; // make it visible e.background = \"#fff\"; e.color = \"#000\"; // some more changes to d.style via e Technical Presentation 39

Javascript … •  Caching function pointers can give performance improvements •  The global lookup for every iteration can be avoided by rewriting the \"doMyDuty\" as: function doMyDuty( collection ) { var i, n = collection.length; var fcn= doStuff; for (i = 0; i < n; i++) { fcn( collection[i] ); } } •  Technical Presentation 40

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

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 \"Graceful Degradation\" 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

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

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

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

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

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

JSON … •  { “key” : value, ... } •  The “key” is a string •  The “value” can be anything - strings, numbers, boolean, objects, arrays or null Technical Presentation 48

JSON … •  MIME type - application/json •  Strictly UNICODE •  Default is UTF-8 •  UTF-16 and UTF-32 are accepted Technical Presentation 49

JSON … •  Step 1 : XMLHttpRequest •  Step 2 : Obtain responseText •  Step 3 : Parse the responseText var responseData = eval ( ' ( ' + responseText + ' ) ' ); Technical Presentation 50

JSON … •  Available in ECMAScript 4th Edition –  JSON: The Fat-Free Alternative to XML - Douglas Crockford - http://www.json.org/fatfree.html •  New Methods: –  Object.prototype.toJSONString –  String.prototype.parseJSON •  In current versions, it can be used by including JSON.org/json2.js (http://www.json.org/js.html) •  Parse the responseText –  var responseData = JSON.parse(responseText); Technical Presentation 51

Cross Browser Support Browser differences are painful 52 Technical Presentation

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 –  http://developer.yahoo.com/yui/articles/gbs/

Cross Browser •  http://www.quirksmode.org/compatibility.html#t01 •  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

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

Progressive enhancement First inspect, then provide 56 Technical Presentation

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

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

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

Examples 60 Technical Presentation

Thank you 61 Technical Presentation

Basics of Rich Internet Applications

0 comments

Notes on slide 1

3 Favorites