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


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


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

7

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


Concepts
Tricks / approaches / standards for better web
development

10

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>

Separation of concern
<body>
<div style=‘border:1px solid;’>
</form>
</div>
</body>
function doSomething(o) { … }
</script>


Separation of concern …
<body>
Ajax
<div style=‘border:1px solid;’> DHTML Eﬀects
CSS Javascript
</form>
</div>
</body>
HTML
function doSomething(o) { … } Server Side
</script> Data Store


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;http://www.w3.org/TR/html4/strict.dtdquot;>


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


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>

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


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

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


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


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


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*/ }


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


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.


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


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


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


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


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>


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


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


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) { }


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


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.


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 });


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();


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


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


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 = d.style;
e.display = quot;quot;; // make it visible
e.background = quot;#fffquot;;
e.color = quot;#000quot;;
// some more changes to d.style via e


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] );
}
}
• 

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


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


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


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


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


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.


JSON …
•  Not a document format
•  Not a markup language
•  Not a general purpose serialization format
–  It is perfectly suited for the Web and RIA


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


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


JSON …
•  Step 1 : XMLHttpRequest
•  Step 2 : Obtain responseText
•  Step 3 : Parse the responseText

var responseData = eval ( ' ( ' + responseText + ' ) ' );


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


Cross Browser Support
Browser differences are painful

52

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


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


Progressive enhancement
First inspect, then provide

56

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


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


Examples

60

Thank you

61

Basics of Rich Internet Applications

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Basics of Rich Internet Applications

Similar to Basics of Rich Internet Applications (20)

More from Subramanyan Murali

More from Subramanyan Murali (17)

Recently uploaded

Recently uploaded (20)

Basics of Rich Internet Applications