javascript wash - story of ui development

JavaScript WashStory of a UI Development

M A Hossain Tonuhttp://mahtonu.wordpress.com

Tweets @mahtonuImprosys, Inc

Objective

PhpXperts Seminar 2010

Contents

• JS in Mobile Application Development

• Interactive UI samples

• Open Source JS Libraries

• The High-Performance JS Mantra

• Tools

PhpXperts Seminar 2010

Some Common Issues

• JavaScript != Java

• Client/Server Side JS = YES

• Non-Web-related apps = YES

• OOP Support = YES

• Multi-threading PhpXperts Seminar 2010

Only for web browsers? No

Rhino - Open source JS engine for Java.

Aptana Jaxer - Server side JS

Node.js – Client- Server JS

PhpXperts Seminar 2010

Runs within a host environment

Web browser

Adobe Acrobat

Photoshop

Windows Scripting Host

Yahoo! Widget Engine

and more...

PhpXperts Seminar 2010

JS in Mobile Application Development

Titanium RhoMobile PhoneGap

PhpXperts Seminar 2010

Devices =

Dev. Platform =

Interactive UI using JavaScript

PhpXperts Seminar 2010

Interactive UI using JavaScript

PhpXperts Seminar 2010

Interactive UI using JavaScript

PhpXperts Seminar 2010

Interactive UI using JavaScript

PhpXperts Seminar 2010

Interactive UI using JavaScript

PhpXperts Seminar 2010

PhpXperts Seminar 2010

= Yes

All you need

• JavaScript Libraries

• High Performance JavaScript Mantra

PhpXperts Seminar 2010

Open Source JS Libraries

• General Purpose:– Prototype – jQuery – Yahoo! UI – Dojo – Ext JS

• Task Specific:– Script.aculo.us (Effects)

– moo.fx (Effects)

– $fx() (Animation)

– Rapheal (Vector Graphics)

– Glimmer (Interaction)

PhpXperts Seminar 2010

Why JS Libraries?

• High Performance• Development -> faster• cross-browser

PhpXperts Seminar 2010

High-Performance JavaScript Matters

• Fast apps =

• Slow apps =

• AJAX = responsiveness!!

• User experience = WOW!

PhpXperts Seminar 2010

The High-Performance JS Mantra

• Be Lazy

• Be Responsive

• Be Vigilant

PhpXperts Seminar 2010

The High-Performance JS Mantra

• Be Lazy : Nothing is faster than doing nothing

• Be Responsive

• Be Vigilant

PhpXperts Seminar 2010

Be Lazy: Nothing is faster than doing nothing

• Write less code

• Frequent code releases Frequently re-download

• More code = more to download, execute, maintain, etc

PhpXperts Seminar 2010

Be Lazy: Nothing is faster than doing nothing

• Before:

• After:

PhpXperts Seminar 2010

/*** The dom module provides helper methods for* manipulating Dom elements.* @module dom**/

(function() {var Y = YAHOO.util, // internal shorthand

getStyle, // for load time browser branchingsetStyle, // dittopropertyCache = {}, // for faster hyphen convertsreClassNameCache = {}, // cache regexes for classNamedocument = window.document; // cache for faster lookups

YAHOO.env._id_counter = YAHOO.env._id_counter || 0;

(function(){varB=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.env._id_counter||0;

MINIFY = Good

Be Lazy: Nothing is faster than doing nothing

• Load JS on-demand

• Less HTTP RequestsBefore:

After:

PhpXperts Seminar 2010

<script src="all.js“ type="text/javascript“></script>

<script src="jquery.js"></script><script src="jquery.twitter.js"></script><script src="jquery.cookie.js"></script><script src="myapp.js"></script>

Be Lazy: Nothing is faster than doing nothing

• Draw UI as late as possible

Draw less DOM = faster

Pre-draw hidden UI = No

Cache = Yes

Hidden UI updating = No

PhpXperts Seminar 2010

PhpXperts Seminar 2010

Never pre-draw hidden UI

PhpXperts Seminar 2010

Never pre-draw hidden UI

PhpXperts Seminar 2010

Never pre-draw hidden UI

PhpXperts Seminar 2010

Never pre-draw hidden UI

PhpXperts Seminar 2010

Never pre-draw hidden UI

The High-Performance JS Mantra

• Be Lazy

• Be Responsive: Jump when the user

says jump

• Be Vigilant

PhpXperts Seminar 2010

Be Responsive: Jump when the user says

jump

• Minimize initial load time

CSS at topJS at bottomUI placeholder > “loading”Load in stages

• Yield early and often

do min. work, use setTimeout() to yield

PhpXperts Seminar 2010

Be Responsive: Jump when the user says

jump

PhpXperts Seminar 2010

Load your app in stages

Be Responsive: Jump when the user says

jump

PhpXperts Seminar 2010

Load your app in stages

Be Responsive: Jump when the user says

jump

PhpXperts Seminar 2010

Load your app in stages

Be Responsive: Jump when the user says

jump

PhpXperts Seminar 2010

Load your app in stages

Be Responsive: Jump when the user says

jump

PhpXperts Seminar 2010

Load your app in stages

Be Responsive: Jump when the user says

jump

PhpXperts Seminar 2010

Load your app in stages

Be Responsive: Jump when the user says

jump

PhpXperts Seminar 2010

Load your app in stages

The High-Performance JS Mantra

• Be Lazy

• Be Responsive

• Be Vigilant: Only you can prevent slow web

apps

PhpXperts Seminar 2010

Be Vigilant: Only you can prevent slow web

apps

• Profile like crazyUse firebug’s profiler (Joe Hewitt, you rule! )Use timestamp diffs and alerts

PhpXperts Seminar 2010

Tools

PhpXperts Seminar 2010

Questions

PhpXperts Seminar 2010

References

JavaScript: The World's Most Misunderstood Programming Language

Private Members in JavaScript

Books:

JavaScript: The Good Part by Douglus Crockford

JavaScript: The Definitive Guide (5th Edition) by David Flanagan

jQuery Cheat sheet

Server side JS

PhpXperts Seminar 2010