13. Understandable -> Documented
• Writing Docs isn’t fun
• Reading Code you wrote 5 years ago
and didn’t document is worse...
• Reading undocumented code
someone else wrote even more so...
14. Understandable -> Documented
• use clear variable and function
names:
– a = b(c) // Whut?
– user = getUserOfProduct(productId) // Alright!
• good comments
– // IE seems to break here...
– // dirty hack. This must never go live!
– // this works. No idea why. Better don’t touch.
15. Understandable -> Documented
• exceptionally good comments:
– YUI Doc: http://developer.yahoo.com/
yui/yuidoc/
– creates the YUI API Dos automatically
– simple Javadoc syntax
/**
* short description
* @method methodName
* @param {bool}
* @returm {type}
*/
16. Understandable -> Documented
• YUI Doc now even prettier thanks to
Carlo & Dana:
http://www.yuiblog.com/blog/
2010/10/01/yuidoc-dana-theme/
18. Understandable -> Structured
• CSS for Javascript
– <script>
document.documentElement.className += ' js';
</script>
<style>
.module{
/* with JS */
}
.js .module{
/* without JS */
}
</style>
19. Understandable -> Structured
• HTML for Javascript
– Mustache Templating Partials for
Ajax content
– /partials/login_success.html
– Hello {{user_name}}
You have sucesfully registered
Your currently have {{user_points}} points
– {
user_name : “dude”,
user_points : 123
}
– http://mustache.github.com/
20. Reusable
• find patterns
• largest common denominator
• when you’re writing a new
dropdown menu every month
something is very wrong...
• write ONE dropdown menu and keep
making it better
21. Reusable
• open source != “I’m giving it away
for free”
• open source == “I get free testers,
co-developers, fame and fortune”
• github is full of excellent code
• “FORK OFF” - make it better!
• a plugin for an existing library is a
great start
22. Reusable
• How do you write Javascript?
– jQuery, YUI and alike?
– all “pure”?
23. Reusable
• You’re using and understand just
one Javascript Framework?
– learn Javascript!
– look under the hood
– understand Errors
25. Reusable
• Javascript Frameworks/Libraries
help to
– not reinvent the wheel all over again
– keep Code fresh
– secure quality
– write modular applications rather than
“scripts”
26. Reusable
• “Standing on the Shoulders of
Giants”
• “Zwerge auf den Schultern von
Riesen”
• “nanos gigantium humeris
insidentes”
27. Extensible
•What is the most popular about jQuery?
- THE PLUGINS!
$.fn.extend({
accessibleTabs: function(config) {
return this.each(function() {
//...
}
}
});
$(".tabs").accessibleTabs();
28. Extensible
• Everything can have plugins!
• Tiny Form Validation script:
addValidator : function(name,func){
this.validators[name] = func;
}
this.addValidator('isText',function(el){
var filter = /^[a-zA-Z ]+$/;
return filter.test(el.get('value'));
});
if( !this.validators['isText'](el) ){ //error!}
30. Optimized for Development
• Good Development Code != good
Production Code
• Good for Development:
– granular code split over many files
• module / config / i18n / init / etc
– many comments
– examples
31. Optimized for Production
• Good Development Code != good
Production Code
• Good for Production:
– code combined into as few files as
possible
– comments and whitespace removed
– optional code-minification
32. Optimized for Production
• YUI Compressor
http://developer.yahoo.com/yui/
compressor/
• Google Closure Compiler
http://code.google.com/closure/
compiler/
33. Optimized for Performance
• Caching of DOM-accesses
var el = document.getElementById('bla');
• CSS is MUCH faster than JS when it’s
about changing the DOM
el.addClass('bla');
instead of
el.css({
width:'20px',
height:'20px',
...
});
34. Optimized for Performance
• reduce “reflows”
after every DOM-manipulation the
Browser needs to rerender!
• Changing CSS is usually faster than
changing the DOM
$('<style type="text/css"> a { color: red; } </
style>').appendTo('head');
35. Optimized for Performance
• changing the DOM using:
– classic DOM Methods:
el = document.getElementById('list');
l1 = document.createElement('li');
t1 = document.createTextNode('hello 1');
l2 = document.createElement('li');
t2 = document.createTextNode('hello 2');
l3 = document.createElement('li');
t3 = document.createTextNode('hello 3');
l1.appendChild(t1);
l2.appendChild(t2);
l3.appendChild(t3);
el.appendChild(t1).appendChild(t2).appendChild(t3);
36. Optimized for Performance
• changing the DOM using:
– innerHTML:
el = document.getElementById('list');
li = '<li>hallo 1</li>';
li += '<li>hallo 2</li>';
li += '<li>hallo 3</li>';
el.innerHTML = li;
– faster than DOM-Methods (thanks to IE)
37. Optimized for Performance
• changing the DOM using:
– innerHTML:
el = document.getElementById('list');
li = [];
li.push('<li>hallo 1</li>');
li.push('<li>hallo 2</li>');
li.push('<li>hallo 3</li>');
el.innerHTML = li.join('');
– even faster because string
concatenation in IE is slow
38. Optimized for Performance
• changing the DOM using:
– innerHTML:
el = document.getElementById('list');
li = [];
li[0] = '<li>hallo 1</li>';
li[1] = '<li>hallo 2</li>';
li[2] = '<li>hallo 3</li>';
el.innerHTML = li.join('');
– even faster as also array.push is slow
in IE...
39. Optimized for Performance
• changing the DOM using:
– DOM Fragment:
l = document.getElementById('list');
f = document.createDocumentFragment();
l1 = document.createElement('li');
t1 = document.createTextNode('hallo 1');
...
l1.appendChild(t1);
l2.appendChild(t2);
l3.appendChild(t3);
f.appendChild(l1).appendChild(l2).appendChild(l3);
el.appendChild(f);
– Even faster! Just 1 DOM access!
40. Secure
• XSS is a massive security issue
• never echo user inputs
• filter inputs!
whitelisting not blacklisting
• define data types
• trust nothing and nobody
• be paranoid...
41. Secure
• Caja
http://en.wikipedia.org/wiki/
Caja_project
• “virtual iFrames”
• no direct access to native objects
• Transpiler on the Server
• YUI3 1st Javascript Library being
compatible
42. International/Multilingual
• UTF-8
• RTL/Bidi
• If possible reuse strings that are in
the HTML already
• Use standards
– Text {0} more text {1} yet more text {2}
Text {0:currency} more text {1:symbol} even
more text {2:amount} // {variable:comment}
43. International/Multilingual
• Variable sentence structure requires
multi step translation
– T_WELCOME : {
en_US:”We welcome {0:user}”
de_DE:”Wir heissen {0:user} willkommen”
}
– getText(‘de_DE’,‘T_WELCOME’,{user:”Dude”})
• check ISO Standards
• HTML in Strings isn’t ideal but
better than pseudo code
• bold = asian symbols unreadable
44. International/Multilingual
TRANSLATIONS = { // check http://internationalisationtips.com
O: "{market} open",
OT: "{market} open in {timePeriod}",
OE: "{market} open early",
OET: "{market} open early in {timePeriod}",
OER: "{market} open early for {reason}",
OERT: "{market} open early for {reason} in {timePeriod}",
OL: "{market} open late",
OLT: "{market} open late in {timePeriod}",
OLR: "{market} open late for {reason}",
OLRT: "{market} open late for {reason} in {timePeriod}",
C: "{market} close",
CT: "{market} close in {timePeriod}",
CE: "{market} close early",
CET: "{market} close early in {timePeriod}",
CER: "{market} close early for {reason}",
CERT: "{market} close early for {reason} in {timePeriod}",
CL: "{market} close late",
CLT: "{market} close late in {timePeriod}",
CLR: "{market} close late for {reason}",
CLRT: "{market} close late for {reason} in {timePeriod}",
X: "{market} closed"
};
45. Optional
• Progressive Enhancement
– Base functionality of the site needs to
be available even though the user
agent does not understand Javascript
– Mobile != iPhone (Opera Mini is No.1!)
• Search Machines
• Paranoid Sysadmins
• Y! has ~1% non-js Users -> Millions!
• ...
46. Optional
• base page has interaction thanks to:
– Links
– Forms
– (+ everything important is visible!)
• With Javascript:
– Links that update the page become
Buttons
– Forms are being processed instantly
– Infos can be hidden and shown
47. Accessible
• Tab order is super important
• using focus() we can direct the user
• tabindex=-1 makes everything
focusable (for Javascript)
• Ajax works but mind the load time
• update Virtual Buffer
48. Accessible
• some Effects can make the JS
Version more accessible
– yellow fade to temporary highlight
what changed
– animated open close is easier to
understand than a hard show/hide
49. Accessible
• WAI-ARIA
– maps UI Elements that are well known
on the Desktop to Elements in the
Browser
– teaches meaning to non-semantic
markup
50. Accessible
• WAI-ARIA
– proper realtime updates
• Live Regions
– real Form Validation state
• aria-required="true"
• aria-invalid="true"
– real Dialogs
• role="alert"
