Javascript done right

Dirk Ginader | Yahoo! Inc. Javascript done right @ginader

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

Kriterien für “gutes” Javascript • Aus Entwicklersicht: – verständlich, wartbar, wiederverwendbar, erweiterbar, dokumentiert, optimiert, sicher, performant, sauber getrennt, optional, international, barrierefrei

verständlich • vermeide “zu clevere” Konstrukte

verständlich • nicht jeder versteht: – Ternary: • var d = (x < m) ? 'l' : 'r';

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}$

verständlich • nicht jeder versteht: – Shakespeare: • /(bb|[^b]{2})/

verständlich • wenn doch notwendig/sinnvoll dann gute Variablen Namen + Doku!

mehr WTF auf • http://wtfjs.com

Gut Wartbar • Wie schreibst Du Javascript? – jQuery, YUI und Konsorten? – alles von Hand?

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

Gut Wartbar • Du verwendest aus Prinzip keine Javascript Frameworks? – Du solltest!

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

Gut Wartbar • “Standing on the Shoulders of Giants” • “Zwerge auf den Schultern von Riesen” • “nanos gigantium humeris insidentes”

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

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!

Erweiterbar •Was ist das populärste an jQuery? - DIE PLUGINS! $.fn.extend({ accessibleTabs: function(config) { return this.each(function() { //... } } }); $(".tabs").accessibleTabs();

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!}

Erweiterbar •Bestehendes Erweitern anstatt alles noch mal neu schreiben! •Für noch unbekannte Ansprüche gewappnet sein

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...

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.

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} */

Dokumentiert • YUI Doc jetzt noch schöner dank Carlo & Dana: http://www.yuiblog.com/blog/ 2010/10/01/yuidoc-dana-theme/

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

Optimiert • Guter Development Code != guter Production Code • Gut für Production: – Code kombiniert in wenige bis eine Datei – Kommentare & Whitespace weg – optionale Code-Minification

Optimiert • YUI Compressor http://developer.yahoo.com/yui/ compressor/ • Google Closure Compiler http://code.google.com/closure/ compiler/

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...

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

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', ... });

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');

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);

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)

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

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

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!

Sauber getrennt • HTML – Markup • CSS – Design • Javascript – Interaktion

Sauber getrennt • CSS für Javascript – <script> document.documentElement.className += ' js'; </script> – <style> .module{ /* ohne JS */ } .js .module{ /* mit JS */ } </style>

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/

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 • ...

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

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}

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

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" };

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

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

Barrierefrei • WAI-ARIA – bringt bekannte Desktop- Bedienkonzepte barrierefrei in den Browser – Bringt unsemantischem Markup Semantik bei

Barrierefrei • WAI-ARIA – echte realtime updates • Live Regions – echter Formular Validierungsstatus • aria-required="true" • aria-invalid="true" – echte Dialoge • role="alert"

Danke :-) • http://ginader.de • http://twitter.com/ginader • http://github.com/ginader/ • http://www.slideshare.net/ginader • http://speakerrate.com/speakers/ 225-ginader

http://blog.ginader.de	4377
http://jendryschik.de	53
http://www.webkrauts.de	39
http://localhost:8888	38
http://static.slidesharecdn.com	7
http://www.blog.ginader.de	6
http://relaunch.jendryschik.de	5
http://lanyrd.com	4
http://www.techgig.com	3
http://coderwall.com	2
http://feeds.feedburner.com	2
http://wk7.textformer.com	2
http://www.ngo-online.de HTTP	1
http://translate.googleusercontent.com	1
http://www.netzartist.de	1

Javascript done right

by Dirk Ginader on Oct 13, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

15 Embeds 4,541

Statistics

Javascript done right — Presentation Transcript