JavaScript Wash - Story of UI Development

JavaScript Wash
Story of a UI Development
M A Hossain Tonu
http://mahtonu.wordpress.com
Tweets @mahtonu
Improsys, Inc

Objective
PhpXperts Seminar 2010

Contents
• JS in Mobile Application Development
• Interactive UI samples
• Open Source JS Libraries
• The High-Performance JS Mantra
• Tools

Some Common Issues
• JavaScript != Java
• Client/Server Side JS = YES
• Non-Web-related apps = YES
• OOP Support = YES
• Multi-threading 

Only for web browsers? No
Rhino - Open source JS engine for Java.
Aptana Jaxer - Server side JS
Node.js – Client- Server JS

Runs within a host environment
Web browser
Adobe Acrobat
Photoshop
Windows Scripting Host
Yahoo! Widget Engine
and more...

JS in Mobile Application Development
Titanium RhoMobile
PhoneGap
Devices =
Dev. Platform =

Interactive UI using JavaScript

All you need
• JavaScript Libraries
• High Performance JavaScript
Mantra

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

High-Performance JavaScript Matters
• Fast apps = 
• Slow apps = 
• AJAX = responsiveness!!
• User experience = WOW!

The High-Performance JS
Mantra
• Be Lazy
• Be Responsive
• Be Vigilant

The High-Performance JS Mantra
• Be Lazy : Nothing is faster than doing nothing
• Be Responsive
• Be Vigilant

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

• Before:
• After:
/**
* The dom module provides helper methods for
* manipulating Dom elements.
* @module dom
*
*/
(function() {
var Y = YAHOO.util, // internal shorthand
getStyle, // for load time browser branching
setStyle, // ditto
propertyCache = {}, // for faster hyphen converts
reClassNameCache = {}, // cache regexes for className
document = window.document; // cache for faster lookups
YAHOO.env._id_counter = YAHOO.env._id_counter || 0;
(function(){var
B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.en
v._id_counter||0;
MINIFY = Good

• Load JS on-demand
• Less HTTP Requests
Before:
After:
<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>

• Draw UI as late as possible
Draw less DOM = faster
Pre-draw hidden UI = No
Cache = Yes
Hidden UI updating = No

Never pre-draw hidden UI

• Be Lazy
• Be Responsive: Jump when the user says
jump
• Be Vigilant

Be Responsive: Jump when the user says jump
• Minimize initial load time
CSS at top
JS at bottom
UI placeholder > “loading”
Load in stages
• Yield early and often
do min. work, use setTimeout() to yield

Be Responsive: Jump when the user says jump
Load your app in stages

• Be Lazy
• Be Responsive
• Be Vigilant: Only you can prevent slow web apps

Be Vigilant: Only you can prevent slow web apps
• Profile like crazy
Use firebug’s profiler (Joe Hewitt, you rule! )
Use timestamp diffs and alerts

Questions

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

JavaScript Wash - Story of UI Development

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (12)

Andere mochten auch

Andere mochten auch (12)

Ähnlich wie JavaScript Wash - Story of UI Development

Ähnlich wie JavaScript Wash - Story of UI Development (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

JavaScript Wash - Story of UI Development

Hinweis der Redaktion