javascript wash - story of ui development
DESCRIPTION
JavaScript Wash - Story of UI DevelopmentTRANSCRIPT
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