Javascript done right - Open Web Camp III

There is no such thing as the one right way to write Javascript but there is an infinite number of opportunities to do it wrong. Dirk Ginader is showing Best Practices he's been using and constantly developing for many years at Yahoo: A comprehensive set of tips and tricks on how to write Javascript in a maintainable, understandable, accessible, internationalized, extendable and speedy way.

Transcript

1. Dirk Ginader | Yahoo! Inc. Javascript done right @ginader
2. What is “good” Javascript? • From a User Perspective?
3. What is “good” Javascript? • From a User Perspective: – THEY DON’T CARE!* *as long as it works...
4. What is “good” Javascript? • From a Developer Perspective?
5. What is “good” Javascript? • From a Developer Perspective: – understandable – reusable – extensible – optimized – secure – internationalized – optional – accessible
6. Understandable • don’t be “too clever”
7. Understandable • don’t be “too clever”
8. Understandable • not everybody understands: – Ternary: • var d = (x < m) ? 'l' : 'r';
9. Understandable • not everybody understands: – Regex: • ^(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za- z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@ ((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6}$
10. Understandable • not everybody understands: – Shakespeare: • /(bb|[^b]{2})/
11. Understandable • If there’s no good way around cleverness then: – good naming – documentation
12. for more WTF check • http://wtfjs.com
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/
17. Understandable -> Structured • HTML – Markup • CSS – Design • Javascript – Interaction
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
24. Reusable • You don’t use Frameworks? – you should!
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!}
29. Extensible •Extending something out there instead of writing it all over again •Being prepared for demands that are not yet known
30. • Good Development Code != good Production Code • Good for Development: – granular code split over many files •module / config / i18n / init / etc – many comments – examples Optimized for Development
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"
52. thank you :-) • http://ginader.com • http://twitter.com/ginader • http://github.com/ginader/ • http://www.slideshare.net/ginader • http://speakerrate.com/speakers/ 225-ginader