Design patterns and Animation with jQuery

with Paul Bakaus

The desktop.

The greatest UI innovation ever.

Drag & Drop.

What about us?

We are pioneers.

Drag & Drop.

in the web?

Mixed worlds.

Application features everywhere Web 2.0 : Customization and Sharing

No user interface standard No supportive front-end interaction

Whats going on?!

What you will learn in this session

Animations and Effects in Javascript Finding and using front-end design patterns Real world issues and their solutions jQuery UI and jQuery FX

Animation in JavaScript

The web is growing.

HTML (Markup)

The web is growing.

HTML (Markup)

CSS (Presentation)

The web is growing.

HTML (Markup)

CSS (Presentation)

JavaScript (Usability)

The web is growing.

HTML (Markup)

CSS (Presentation)

JavaScript (Usability)

The web is growing.

Where is the animation part?

HTML (Markup)

CSS (Presentation)

JavaScript (Usability)

The web is growing.

Where is the animation part?

?

setInterval / setTimeout

400px

var distance = 400 //Distance in pxvar duration = 2000 //Duration in msvar interval = 13 // The frameratevar step = distance / (duration / interval);setInterval(function() { myEl.style.left += step; }, interval)

setInterval / setTimeout

400px

var distance = 400 //Distance in pxvar duration = 2000 //Duration in msvar interval = 13 // The frameratevar step = distance / (duration / interval);setInterval(function() { myEl.style.left += step; }, interval)

setInterval / setTimeout

400px

var distance = 400 //Distance in pxvar duration = 2000 //Duration in msvar interval = 13 // The frameratevar step = distance / (duration / interval);setInterval(function() { myEl.style.left += step; }, interval)

setInterval / setTimeout

400px

var distance = 400 //Distance in pxvar duration = 2000 //Duration in msvar interval = 13 // The frameratevar step = distance / (duration / interval);setInterval(function() { myEl.style.left += step; }, interval)

setInterval / setTimeout

400px

var distance = 400 //Distance in pxvar duration = 2000 //Duration in msvar interval = 13 // The frameratevar step = distance / (duration / interval);setInterval(function() { myEl.style.left += step; }, interval)

setInterval / setTimeout

400px

var distance = 400 //Distance in pxvar duration = 2000 //Duration in msvar interval = 13 // The frameratevar step = distance / (duration / interval);setInterval(function() { myEl.style.left += step; }, interval)

setInterval / setTimeout

400px

var distance = 400 //Distance in pxvar duration = 2000 //Duration in msvar interval = 13 // The frameratevar step = distance / (duration / interval);setInterval(function() { myEl.style.left += step; }, interval)

Issues

Rounded values setInterval does not necessarily execute

every (interval) ms

Conclusion: setInterval is unreliable.

Self-recalculating method

400px

Create a Date() object upon beginning Create a new Date() object every interval and get

the current offset

Recalculates the step based on this information

Self-recalculating method

400px

Create a Date() object upon beginning Create a new Date() object every interval and get

the current offset

Recalculates the step based on this information

Frontend design patterns

What they are

Answers to common usability issues Solutions for interaction, navigation and

visualisation

Often JavaScript based

Where to find them

Common JavaScript libraries (jQuery, YUI) Real world situations (Desktop)

Accordion.

Accordion.

Drag & Drop.

Drag & Drop.

Collapse & Expand.

Collapse & Expand.

Now the user will be able to see whats going on.

Good.

The real world.

Possible issues

Timing Performance Separation of Markup/Presentation Cross-Browser compatibility

PerformanceUse one timer.

var timer = setInterval(function() {

//Get the current timestamp

var time = (new Date()).getTime();

//Handle everything thats in queue

for(var i=0;i

PerformanceNest your Animations.

Sample elementSample elementSample element

$(div).animate({ top: 200 }, 1000);

PerformanceNest your Animations.

Sample elementSample elementSample element

$(div).animate({ top: 200 }, 1000);

PerformanceNest your Animations.

Sample elementSample elementSample element

$(div.container).animate({ top: 200 }, 1000);

PerformanceAnimate your stylesheets.

Modifying the DOM is slow. Grab a single css rule (div.container a.big) Changing this rule will change all elements,

too.

Browser wars?

The Answers.-or-

Your unfair advantage.

jQuerys animate()

$(div.small).animate({fontSize: 2em,width: 100%,scrollTop: 0

}, slow);

Your unfair advantage.

Animate everything - em, px, % All previous mentioned issues solved Relative animations Intelligent animations (intention detection) Queue control

jQuerys offset()

var o = $(div.small).offset();

A good position.

Absolute offset of every element (left/top) Regardless of block/inline/positioned/non-

positioned

Bullet proof: Hundreds of cross-browser tests

jQuerys Effect Library Many ready-to-use effects Advanced animations

Class/CSS animations Color animations

jQuery Enchant.(Working title)

Ready to use.

$(div.small).hide({ method: scale}, 1000);

Ready to use.

Class animations.

Dont modify styles directly Animate from one class to another

$(div.container).addClass(error, 1000)

Class animations.

Dont modify styles directly Animate from one class to another

Color animations.

Animate from one color to another Regardless of hex, rgb, named colors

$(div.container).animate({ backgroundColor: red })

jQuerys UI Library Ready-to-use patterns Core interaction modules Easily extendable

Ready to use.

$(div.small).draggable(); $(textarea).resizable(); $(ul.mytabs).tabs();

Ready to use.

Ready to use.

Core interaction. Mouse Interaction

Drag & Drop

Sorting

Selections

Keyboard Interaction

Selections

Shortcuts

Navigation

Give it a try!http://ui.jquery.comhttp://fx.jquery.com

http://ui.jquery.comhttp://ui.jquery.comhttp://fx.jquery.comhttp://fx.jquery.com

Thank you for your attention.http://www.paulbakaus.com

http://www.paulbakaus.comhttp://www.paulbakaus.com