How to increase performance of Web Apps Using JQuery

Pallab DuttaTwitter:@pallabdutta2007

pallabdutta2007@rediffmail.com

Todays Agend

Discussion on problems of Web developing

Traditional way of solving problems

JQuery advantages over JavaScript

Introduction to JQuery, Basic syntaxesUse of JQuery to eradicate web developers problemsFuture & Beyond

Web is stateless. We use ViewState, Session, Cookie etc to

make it look like stateful Need AJAX based technique to call server

from browser Lot of javascript and server calls make it

hard to maintain Performance impact of Viewstate Dependency of large numbers of 3rd party

libraries

Problems

Code is predefined Easy DOM manipulation Smaller construct. JQuery is designed to make

small JavaScript code. Large support of plugins. Minified version already available. Testing is not necessary (as it is already tested) Cross browser support. Free and Open Source. Adoption of JQuery by Microsoft.

Advantages of JQuery over normal javascript

JQuery is the most outstanding cross-browser JavaScript library compiled for

the ease of client-side scripting of html. To make it short, it’s a “ready to use” JavaScript library that has many visual functions such as popular ease-in, ease-out effects. Because jQuery has tons of impressive effects, it is

often used by web designers to make their designs much lovable and more

elegant.

What is jQuery?

jQuery Syntax Examples jQuery Selectors jQuery Event Functions jQuery Effects jQuery Callback Functions Changing HTML Content jQuery CSS Manipulation jQuery AJAX jQuery Syntax Examples

jQuery Selectors◦ $("*") //All elements.◦ $(this)//Current HTML element◦ $("p")//All <p> elements◦ $("p.intro")//All <p> elements with class="intro"◦ $("p#intro")//All <p> elements with id="intro"◦ $("p#intro:first")//The first <p> element with id="intro"◦ $(".intro")//All elements with class="intro"◦ $("#intro")//The first element with id="intro"◦ $("ul li:first")//The first <li> element of each <ul>◦ $("[href$='.jpg']")//All elements with an href attribute that ends with ".jpg"◦ $("div#intro .head")//All elements with class="head" inside a <div> element

with id="intro"

jQuery Syntax Examples

jQuery Event Functions◦ $(document).ready(function)//Binds a function to the ready

event of a document (when the document is finished loading)◦ $(selector).click(function)//Triggers, or binds a function to the

click event of selected elements◦ $(selector).dblclick(function)//Triggers, or binds a function to

the double click event of selected elements◦ $(selector).focus(function)//Triggers, or binds a function to

the focus event of selected elements◦ $(selector).mouseover(function)//Triggers, or binds a function

to the mouseover event of selected elements

jQuery Syntax Examples

jQuery Effects◦ $(selector).hide()//Hide selected elements◦ $(selector).show()//Show selected elements◦ $(selector).toggle()//Toggle (between hide and show) selected

elements◦ $(selector).slideDown()//Slide-down (show) selected elements◦ $(selector).slideUp()//Slide-up (hide) selected elements◦ $(selector).slideToggle()//Toggle slide-up and slide-down of selected

elements◦ $(selector).fadeIn()//Fade in selected elements◦ $(selector).fadeOut()//Fade out selected elements◦ $(selector).fadeTo()//Fade out selected elements to a given opacity◦ $(selector).animate()//Run a custom animation on selected

elements

jQuery Syntax Examples

jQuery Callback Functions◦ $(selector).hide(speed,callback)

jQuery Syntax Examples

Changing HTML Content◦ $(selector).html(content)//Changes the (inner) HTML of selected elements◦ $(selector).append(content)//Appends content to the (inner) HTML of selected elements◦ $(selector).prepend(content)//"prepends" content to the inside of matching HTML

elements.◦ $(selector).after(content)//Adds HTML after selected elements◦ $(selector).before(content)//inserI HTML content before all matching elements.

jQuery Syntax Examples

jQuery CSS Manipulation◦ $(selector).css(name)//Get the style property value of the first matched element◦ $(selector).css(name,value)//Set the value of one style property for matched elements◦ $(selector).css({properties})//Set multiple style properties for matched elements◦ $(selector).height(value)//Set the height of matched elements◦ $(selector).width(value)//Set the width of matched elements◦ $(selector). addClass()//Adds one or more classes to selected elements◦ $(selector). hasClass()//Checks if any of the selected elements have a specified class◦ $(selector). removeClass()//Removes one or more classes from selected elements◦ $(selector). toggleClass()//Toggles between adding/removing one or more classes from selected

elements

jQuery Syntax Examples

jQuery AJAX◦ $(selector).load(url,data,callback)//Load remote data into selected elements◦ $.ajax(options)//Load remote data into an XMLHttpRequest object

jQuery Syntax Examples

Web development is easy now. Well documented already. Maintainable code as syntax is known to

most of the developers. Pluggable

Use of JQuery to eradicate web developers problems

Web technology is moving towards HTML 5 Rapid technology update with Rich UI. HTML 5 will be standardized in 2014. Large Number of Browsers supports it. JQuery already moving towards this.

WE ALL ON THE RIGHT SHIP

Future and Beyond

Questions (if any)

Thank YouWe appreciate your support