Your SlideShare is downloading. ×
Javascript done right - Open Web Camp III
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Javascript done right - Open Web Camp III

7,569
views

Published on

Published in: Technology

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,569
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
37
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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. 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"
    • 51. thank you :-)• http://ginader.com• http://twitter.com/ginader• http://github.com/ginader/• http://www.slideshare.net/ginader• http://speakerrate.com/speakers/ 225-ginader