Javascript done right

25.369 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
0 Kommentare
4 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
25.369
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
18.190
Aktionen
Geteilt
0
Downloads
28
Kommentare
0
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Javascript done right

  1. 1. Dirk Ginader | Yahoo! Inc. Javascript done right @ginader
  2. 2. Kriterien für “gutes” Javascript • Aus Benutzersicht: – macht die Page-Handhabung leichter – sofort/immer benutzbar (blockt nicht) – ist Barrierefrei – bereichert die Webseite – “stört nicht” – ist nicht zum Selbstzweck – beschleunigt Abläufe – in meiner Sprache
  3. 3. Kriterien für “gutes” Javascript • Aus Entwicklersicht: – verständlich, wartbar, wiederverwendbar, erweiterbar, dokumentiert, optimiert, sicher, performant, sauber getrennt, optional, international, barrierefrei
  4. 4. verständlich • vermeide “zu clevere” Konstrukte
  5. 5. verständlich • nicht jeder versteht: – Ternary: • var d = (x < m) ? 'l' : 'r';
  6. 6. verständlich • nicht jeder versteht: – 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}$
  7. 7. verständlich • nicht jeder versteht: – Shakespeare: • /(bb|[^b]{2})/
  8. 8. verständlich • wenn doch notwendig/sinnvoll dann gute Variablen Namen + Doku!
  9. 9. mehr WTF auf • http://wtfjs.com
  10. 10. Gut Wartbar • Wie schreibst Du Javascript? – jQuery, YUI und Konsorten? – alles von Hand?
  11. 11. Gut Wartbar • Du verwendest und verstehst nur ein Javascript Framework? – Du solltest Javascript lernen! – Verstehe was hinter den Kulissen passiert! – Lerne Fehlermeldungen zu verstehen! – Viele Fehler werden offensichtlich
  12. 12. Gut Wartbar • Du verwendest aus Prinzip keine Javascript Frameworks? – Du solltest!
  13. 13. Gut Wartbar • Javascript Frameworks/Libraries helfen – nicht immer das Rad neu zu erfinden – Code aktuell zu halten – Qualität zu sichern – Modulare Applikationen zu entwerfen anstatt Scripts zu schreiben
  14. 14. Gut Wartbar • “Standing on the Shoulders of Giants” • “Zwerge auf den Schultern von Riesen” • “nanos gigantium humeris insidentes”
  15. 15. Wiederverwendbar • finde patterns • “grösste” gemeinsame Nenner • wenn Du jeden Monat ein neues Dropdown Menü schreibst ist etwas sehr falsch • schreibe EIN Dropdown Menü und entwickele es weiter • mit einheitlichen Schnittstellen
  16. 16. Wiederverwendbar • Open Source != “ich gebe meine kostbaren Ideen umsonst weg” • Open Source == “ich kriege kostenlose Tester, Entwickler, Ruhm und Ehre!” • github ist voll mit großartigem Code • “FORK OFF” - mach es besser! • Ein Plugin für eine Library ist ein super start!
  17. 17. Erweiterbar •Was ist das populärste an jQuery? - DIE PLUGINS! $.fn.extend({ accessibleTabs: function(config) { return this.each(function() { //... } } }); $(".tabs").accessibleTabs();
  18. 18. Erweiterbar • Jedes Modul kann plugins haben! • Formular Validierung 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!}
  19. 19. Erweiterbar •Bestehendes Erweitern anstatt alles noch mal neu schreiben! •Für noch unbekannte Ansprüche gewappnet sein
  20. 20. Dokumentiert • Dokumentation schreiben macht nicht Spass • Code lesen den man vor 5 Jahren geschrieben und nicht dokumentiert hat noch weniger... • Undokumentierten Code lesen den andere geschrieben haben am allerwenigsten...
  21. 21. Dokumentiert • Klare Variablen und Funktionsnamen nutzen: – a = b(c) // Hä? – user = getUserOfProduct(productId) // Ah! • Gute Kommentare – // IE seems to break here... – // dirty hack. This must never go live! – // this works. No idea why. Better don’t touch.
  22. 22. Dokumentiert • Besonders gute Kommentare! – YUI Doc: http://developer.yahoo.com/ yui/yuidoc/ – erzeugt die YUI API Doku automatisch – Einfache Javadoc syntax /** * Kurzer Beschreibungstext * @method methodName * @param {bool} * @returm {type} */
  23. 23. Dokumentiert • YUI Doc jetzt noch schöner dank Carlo & Dana: http://www.yuiblog.com/blog/ 2010/10/01/yuidoc-dana-theme/
  24. 24. Optimiert • Guter Development Code != guter Production Code • Gut für Development: – Code granular auf viele Dateien Verteilt • Modul / config / i18n / init / etc – Viele Kommentare – Beispiele
  25. 25. Optimiert • Guter Development Code != guter Production Code • Gut für Production: – Code kombiniert in wenige bis eine Datei – Kommentare & Whitespace weg – optionale Code-Minification
  26. 26. Optimiert • YUI Compressor http://developer.yahoo.com/yui/ compressor/ • Google Closure Compiler http://code.google.com/closure/ compiler/
  27. 27. Sicher • XSS ist das grösste Sicherheitsproblem • Keine User Eingaben direkt wieder ausgeben • Eingaben filtern! whitelisting nicht blacklisting • Datentypen definieren • traue nichts und niemanden • Sei Paranoid...
  28. 28. Sicher • Caja http://en.wikipedia.org/wiki/ Caja_project • “virtuelle iFrames” • keine direkten Zugriffe auf native Objekte • Übersetzer auf dem Server • YUI3 erste Javascript Library die kompatibel ist
  29. 29. Performant • Caching von DOM-Zugriffen var el = document.getElementById('bla'); • CSS ist viel schneller als Javascript wenn es darum geht den DOM zu ändern el.addClass('bla'); statt el.css({ width:'20px', height:'20px', ... });
  30. 30. Performant • “reflows” vermeiden Bei jeder DOM-Manipulation muss der Browser neu rendern! • Bei Style Änderung von grossen Mengen von Elementen ist CSS Modifikation sogar noch schneller! $('<style type="text/css"> a { color: red; } </ style>').appendTo('head');
  31. 31. Performant • DOM ändern mit: – klassischen DOM Methoden: el = document.getElementById('list'); l1 = document.createElement('li'); t1 = document.createTextNode('hallo 1'); l2 = document.createElement('li'); t2 = document.createTextNode('hallo 2'); l3 = document.createElement('li'); t3 = document.createTextNode('hallo 3'); l1.appendChild(t1); l2.appendChild(t2); l3.appendChild(t3); el.appendChild(t1).appendChild(t2).appendChild(t3);
  32. 32. Performant • DOM ändern mit: – innerHTML: el = document.getElementById('list'); li = '<li>hallo 1</li>'; li += '<li>hallo 2</li>'; li += '<li>hallo 3</li>'; el.innerHTML = li; – Schneller als DOM-Methoden (wegen IE)
  33. 33. Performant • DOM ändern mit: – 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.appendChild(li.join()); – noch schneller weil string concatenation in IE langsam ist
  34. 34. Performant • DOM ändern mit: – 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.appendChild(li.join()); – noch schneller weil auch array.push in IE langsam ist
  35. 35. Performant • DOM ändern mit: – 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); – Noch schneller! Nur ein DOM-Zugriff!
  36. 36. Sauber getrennt • HTML – Markup • CSS – Design • Javascript – Interaktion
  37. 37. Sauber getrennt • CSS für Javascript – <script> document.documentElement.className += ' js'; </script> – <style> .module{ /* ohne JS */ } .js .module{ /* mit JS */ } </style>
  38. 38. Sauber getrennt • HTML für Javascript – Partials mit Mustache Templating für Ajax content – /partials/login_success.html – Hallo {{user_name}} Sie haben sich erfolgreich angemeldet. Ihr Punkte Stand ist {{user_points}} – { user_name : “Spundekäs”, user_points : 123 } – http://mustache.github.com/
  39. 39. Optional • Progressive Enhancement – Basis Funktionalität der Webseite/ Webbapp muss gewährleistet sein auch wenn der Useragent kein Javascript spricht! • Mobile != iPhone (Opera Mini ist No.1!) • Suchmaschinen • Paranoide Sysadmins • Yahoo hat ~1% non-js User • ...
  40. 40. Optional • Basis Seite hat Interaktion dank: – Links – Formulare – Alles wichtige ist sichtbar • Mit Javascript: – Links die die Seite ändern werden zu Buttons – Formulare werden direkt verarbeitet – Info kann versteckt/gezeigt werden
  41. 41. International/Multilingual • UTF-8 • RTL • Wenn möglich Strings aus der HTML-Seite übernehmen • Übersetzungsstandards nutzen – Text {0} mehr text {1} noch mehr text {2} Text {0:currency} mehr text {1:symbol} noch mehr text {2:amount} // {variable:comment}
  42. 42. International/Multilingual • Variabler Satzbau = mehrstufige Übersetzung – T_WELCOME : { en_US:”We welcome {0:user}” de_DE:”Wir heissen {0:user} willkommen” } – getText(‘de_DE’,‘T_WELCOME’,{user:Schoppekopp}) • ISO Standards beachten • HTML in Strings ist nicht ideal aber besser als pseudo code • bold macht Asia Schriften unlesbar
  43. 43. International/Multilingual TRANSLATIONS = { // siehe 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" };
  44. 44. Barrierefrei • Tab Reihenfolge ist entscheidend • mit focus() kann der Nutzer geführt werden • tabindex=-1 macht alles fokussierbar (für Javascript) • Ajax funktioniert aber die Ladezeit muss erklärt werden • Virtual Buffer aktualisieren
  45. 45. Barrierefrei • manche Effekte können die Javascript Version verständlicher/ Barrierefreier machen als ohne – highlight() // yellow fade zur temporären Hervorhebung eines geänderten Bereiches – auf-/zuklappen // mit guter Animation leichter verständlich als hart auf/zu
  46. 46. Barrierefrei • WAI-ARIA – bringt bekannte Desktop- Bedienkonzepte barrierefrei in den Browser – Bringt unsemantischem Markup Semantik bei
  47. 47. Barrierefrei • WAI-ARIA – echte realtime updates • Live Regions – echter Formular Validierungsstatus • aria-required="true" • aria-invalid="true" – echte Dialoge • role="alert"
  48. 48. Danke :-) • http://ginader.de • http://twitter.com/ginader • http://github.com/ginader/ • http://www.slideshare.net/ginader • http://speakerrate.com/speakers/ 225-ginader

×