SlideShare ist ein Scribd-Unternehmen logo
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"
Javascript done right
Danke :-)

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

Weitere ähnliche Inhalte

Was ist angesagt?

HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
Mayflower GmbH
 
Webentwicklung für das IPhone
Webentwicklung für das IPhoneWebentwicklung für das IPhone
Webentwicklung für das IPhone
reinhardh
 
Einstieg in Xpath für SEO (Campixx2021)
Einstieg in Xpath für SEO (Campixx2021)Einstieg in Xpath für SEO (Campixx2021)
Einstieg in Xpath für SEO (Campixx2021)
Sebastian Adler
 
Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
Michael Kollmannsberger
 
I thought you were my friend!
I thought you were my friend!I thought you were my friend!
I thought you were my friend!
Mario Heiderich
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
Alexander Schmidt
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
Christian Heilmann
 
Yes zu NoSQL mit MongoDB für .NET-Entwickler
Yes zu NoSQL mit MongoDB für .NET-EntwicklerYes zu NoSQL mit MongoDB für .NET-Entwickler
Yes zu NoSQL mit MongoDB für .NET-Entwickler
Gregor Biswanger
 
Die Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur WebentwicklungDie Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur Webentwicklung
Jens Grochtdreis
 
Verteilte Anwendungen bei Azure mit Docker und Kubernetes
Verteilte Anwendungen bei Azure mit Docker und KubernetesVerteilte Anwendungen bei Azure mit Docker und Kubernetes
Verteilte Anwendungen bei Azure mit Docker und Kubernetes
Gregor Biswanger
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
jan_mindmatters
 
Fanstatic pycon.de 2012
Fanstatic pycon.de 2012Fanstatic pycon.de 2012
Fanstatic pycon.de 2012
Daniel Havlik
 
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)
Java Usergroup Berlin-Brandenburg
 
Sh optifind praesentation_20130311
Sh optifind praesentation_20130311Sh optifind praesentation_20130311
Sh optifind praesentation_20130311
Stefan Moises
 
node.js
node.jsnode.js
Developing UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und ArgumenteDeveloping UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und Argumente
Developing UXD
 
Powerful mostly unknown Javascript-Features
Powerful mostly unknown Javascript-FeaturesPowerful mostly unknown Javascript-Features
Powerful mostly unknown Javascript-Features
Sascha Hameister
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
Patrick Lauke
 
Webapplikationen mit Node.js
Webapplikationen mit Node.jsWebapplikationen mit Node.js
Webapplikationen mit Node.js
Sebastian Springer
 

Was ist angesagt? (20)

HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
Webentwicklung für das IPhone
Webentwicklung für das IPhoneWebentwicklung für das IPhone
Webentwicklung für das IPhone
 
Einstieg in Xpath für SEO (Campixx2021)
Einstieg in Xpath für SEO (Campixx2021)Einstieg in Xpath für SEO (Campixx2021)
Einstieg in Xpath für SEO (Campixx2021)
 
Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
 
I thought you were my friend!
I thought you were my friend!I thought you were my friend!
I thought you were my friend!
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
 
Daisy
DaisyDaisy
Daisy
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
 
Yes zu NoSQL mit MongoDB für .NET-Entwickler
Yes zu NoSQL mit MongoDB für .NET-EntwicklerYes zu NoSQL mit MongoDB für .NET-Entwickler
Yes zu NoSQL mit MongoDB für .NET-Entwickler
 
Die Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur WebentwicklungDie Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur Webentwicklung
 
Verteilte Anwendungen bei Azure mit Docker und Kubernetes
Verteilte Anwendungen bei Azure mit Docker und KubernetesVerteilte Anwendungen bei Azure mit Docker und Kubernetes
Verteilte Anwendungen bei Azure mit Docker und Kubernetes
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
 
Fanstatic pycon.de 2012
Fanstatic pycon.de 2012Fanstatic pycon.de 2012
Fanstatic pycon.de 2012
 
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)
 
Sh optifind praesentation_20130311
Sh optifind praesentation_20130311Sh optifind praesentation_20130311
Sh optifind praesentation_20130311
 
node.js
node.jsnode.js
node.js
 
Developing UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und ArgumenteDeveloping UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und Argumente
 
Powerful mostly unknown Javascript-Features
Powerful mostly unknown Javascript-FeaturesPowerful mostly unknown Javascript-Features
Powerful mostly unknown Javascript-Features
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Webapplikationen mit Node.js
Webapplikationen mit Node.jsWebapplikationen mit Node.js
Webapplikationen mit Node.js
 

Andere mochten auch

Accessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIAAccessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIA
Dirk Ginader
 
The 5 Layers of Web Accessibility
The 5 Layers of Web AccessibilityThe 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
Dirk Ginader
 
Urlaub im Hotel Raunerhof in Schladming, Österreich in Ski amadé - direkt neb...
Urlaub im Hotel Raunerhof in Schladming, Österreich in Ski amadé - direkt neb...Urlaub im Hotel Raunerhof in Schladming, Österreich in Ski amadé - direkt neb...
Urlaub im Hotel Raunerhof in Schladming, Österreich in Ski amadé - direkt neb...
Hotel Gut Raunerhof
 
Business Model Course Day 2 (in German)
Business Model Course Day 2 (in German)Business Model Course Day 2 (in German)
Business Model Course Day 2 (in German)
Alexander Osterwalder
 
Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices
Five Mistakes to Avoid in Creating User Interfaces for Mobile DevicesFive Mistakes to Avoid in Creating User Interfaces for Mobile Devices
Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices
Altoros
 
Five Tools to Know About When Developing Software for Social Networks
Five Tools to Know About When Developing Software for Social NetworksFive Tools to Know About When Developing Software for Social Networks
Five Tools to Know About When Developing Software for Social Networks
Altoros
 
Five Ways To Measure Your Programmers Performance
Five Ways To Measure Your Programmers PerformanceFive Ways To Measure Your Programmers Performance
Five Ways To Measure Your Programmers Performance
Altoros
 
Soergel oa week-2014-lightning
Soergel oa week-2014-lightningSoergel oa week-2014-lightning
Soergel oa week-2014-lightning
David Soergel
 
US Investors: From Early Stage to Series A
US Investors: From Early Stage to Series AUS Investors: From Early Stage to Series A
US Investors: From Early Stage to Series A
David Shen
 
Wireframes - a brief overview
Wireframes - a brief overviewWireframes - a brief overview
Wireframes - a brief overview
Jenni Leder
 
1.9. el uso de can y can't, oraciones y preguntas con este verbo
1.9.  el uso de can y can't, oraciones y preguntas con este verbo1.9.  el uso de can y can't, oraciones y preguntas con este verbo
1.9. el uso de can y can't, oraciones y preguntas con este verbo
Alberto Carranza Garcia
 
Ubuntu 16.04 LTS Security Features
Ubuntu 16.04 LTS Security FeaturesUbuntu 16.04 LTS Security Features
Ubuntu 16.04 LTS Security Features
Dustin Kirkland
 
Projecte final
Projecte finalProjecte final
Projecte final
fgruas1
 
Artículo Científico Compresor A/C
Artículo Científico Compresor A/CArtículo Científico Compresor A/C
Artículo Científico Compresor A/C
Cristian González Jurado
 
Les productores
Les productoresLes productores
Les productores
lidiam
 
m20 Estudios
m20 Estudiosm20 Estudios
m20 Estudios
rljmaster
 
Website Optimierungen
Website OptimierungenWebsite Optimierungen
Website Optimierungen
guest5d1fb2
 
Leben durch Podcasting - Die Metaebene
Leben durch Podcasting - Die MetaebeneLeben durch Podcasting - Die Metaebene
Leben durch Podcasting - Die Metaebene
niche11
 
U4 enchúfate indicaciones5to
U4 enchúfate indicaciones5toU4 enchúfate indicaciones5to
U4 enchúfate indicaciones5to
SofiaVR
 

Andere mochten auch (20)

Accessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIAAccessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIA
 
The 5 Layers of Web Accessibility
The 5 Layers of Web AccessibilityThe 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
 
Urlaub im Hotel Raunerhof in Schladming, Österreich in Ski amadé - direkt neb...
Urlaub im Hotel Raunerhof in Schladming, Österreich in Ski amadé - direkt neb...Urlaub im Hotel Raunerhof in Schladming, Österreich in Ski amadé - direkt neb...
Urlaub im Hotel Raunerhof in Schladming, Österreich in Ski amadé - direkt neb...
 
Business Model Course Day 2 (in German)
Business Model Course Day 2 (in German)Business Model Course Day 2 (in German)
Business Model Course Day 2 (in German)
 
Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices
Five Mistakes to Avoid in Creating User Interfaces for Mobile DevicesFive Mistakes to Avoid in Creating User Interfaces for Mobile Devices
Five Mistakes to Avoid in Creating User Interfaces for Mobile Devices
 
Five Tools to Know About When Developing Software for Social Networks
Five Tools to Know About When Developing Software for Social NetworksFive Tools to Know About When Developing Software for Social Networks
Five Tools to Know About When Developing Software for Social Networks
 
Five Ways To Measure Your Programmers Performance
Five Ways To Measure Your Programmers PerformanceFive Ways To Measure Your Programmers Performance
Five Ways To Measure Your Programmers Performance
 
Soergel oa week-2014-lightning
Soergel oa week-2014-lightningSoergel oa week-2014-lightning
Soergel oa week-2014-lightning
 
US Investors: From Early Stage to Series A
US Investors: From Early Stage to Series AUS Investors: From Early Stage to Series A
US Investors: From Early Stage to Series A
 
Wireframes - a brief overview
Wireframes - a brief overviewWireframes - a brief overview
Wireframes - a brief overview
 
1.9. el uso de can y can't, oraciones y preguntas con este verbo
1.9.  el uso de can y can't, oraciones y preguntas con este verbo1.9.  el uso de can y can't, oraciones y preguntas con este verbo
1.9. el uso de can y can't, oraciones y preguntas con este verbo
 
Ubuntu 16.04 LTS Security Features
Ubuntu 16.04 LTS Security FeaturesUbuntu 16.04 LTS Security Features
Ubuntu 16.04 LTS Security Features
 
Projecte final
Projecte finalProjecte final
Projecte final
 
Artículo Científico Compresor A/C
Artículo Científico Compresor A/CArtículo Científico Compresor A/C
Artículo Científico Compresor A/C
 
Les productores
Les productoresLes productores
Les productores
 
m20 Estudios
m20 Estudiosm20 Estudios
m20 Estudios
 
Website Optimierungen
Website OptimierungenWebsite Optimierungen
Website Optimierungen
 
Leben durch Podcasting - Die Metaebene
Leben durch Podcasting - Die MetaebeneLeben durch Podcasting - Die Metaebene
Leben durch Podcasting - Die Metaebene
 
Símbols pneumàtics
Símbols pneumàticsSímbols pneumàtics
Símbols pneumàtics
 
U4 enchúfate indicaciones5to
U4 enchúfate indicaciones5toU4 enchúfate indicaciones5to
U4 enchúfate indicaciones5to
 

Ähnlich wie Javascript done right

JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013
Oliver Zeigermann
 
Moderner Webentwicklungs-Workflow
Moderner Webentwicklungs-WorkflowModerner Webentwicklungs-Workflow
Moderner Webentwicklungs-Workflow
PLUSPOL interactive GbR
 
WordPress Grundlagen Kurs
WordPress Grundlagen KursWordPress Grundlagen Kurs
WordPress Grundlagen Kurs
Benjamin Hartwich
 
Perl Renaissance Reloaded
Perl Renaissance ReloadedPerl Renaissance Reloaded
Perl Renaissance Reloaded
Gregor Goldbach
 
Web Workers - Das Arbeitstier Browser
Web Workers - Das Arbeitstier BrowserWeb Workers - Das Arbeitstier Browser
Web Workers - Das Arbeitstier Browser
Sebastian Bauer
 
Joomlaplatform deutsch
Joomlaplatform deutschJoomlaplatform deutsch
Joomlaplatform deutsch
Robert Deutz
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Alexander Schmidt
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
Jonathan Weiß
 
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - KölnTipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
Viktor Vogel
 
IntelliJ für Flex
IntelliJ für FlexIntelliJ für Flex
IntelliJ für Flex
Simon Tiffert
 
Agile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit RailsAgile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit Rails
Hussein Morsy
 
XUG Muc 4: Word &lt;> XML
XUG Muc 4: Word &lt;> XMLXUG Muc 4: Word &lt;> XML
XUG Muc 4: Word &lt;> XML
Christina Fürbaß
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
Ulrich Schmidt
 
XHTML
XHTMLXHTML
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
Jens Grochtdreis
 
OSMC 2014: Icinga Web 2 kann mehr | Thomas Gelf
OSMC 2014: Icinga Web 2 kann mehr | Thomas GelfOSMC 2014: Icinga Web 2 kann mehr | Thomas Gelf
OSMC 2014: Icinga Web 2 kann mehr | Thomas Gelf
NETWAYS
 
TYPO3 Translations
TYPO3 Translations TYPO3 Translations
TYPO3 Translations
Marcus Schwemer
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
Jens Grochtdreis
 
Zentrale Dokumentengenerierung mit dem Open XML SDK
Zentrale Dokumentengenerierung mit dem Open XML SDKZentrale Dokumentengenerierung mit dem Open XML SDK
Zentrale Dokumentengenerierung mit dem Open XML SDK
André Krämer
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Andreas Wissel
 

Ähnlich wie Javascript done right (20)

JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013
 
Moderner Webentwicklungs-Workflow
Moderner Webentwicklungs-WorkflowModerner Webentwicklungs-Workflow
Moderner Webentwicklungs-Workflow
 
WordPress Grundlagen Kurs
WordPress Grundlagen KursWordPress Grundlagen Kurs
WordPress Grundlagen Kurs
 
Perl Renaissance Reloaded
Perl Renaissance ReloadedPerl Renaissance Reloaded
Perl Renaissance Reloaded
 
Web Workers - Das Arbeitstier Browser
Web Workers - Das Arbeitstier BrowserWeb Workers - Das Arbeitstier Browser
Web Workers - Das Arbeitstier Browser
 
Joomlaplatform deutsch
Joomlaplatform deutschJoomlaplatform deutsch
Joomlaplatform deutsch
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - KölnTipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
 
IntelliJ für Flex
IntelliJ für FlexIntelliJ für Flex
IntelliJ für Flex
 
Agile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit RailsAgile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit Rails
 
XUG Muc 4: Word &lt;> XML
XUG Muc 4: Word &lt;> XMLXUG Muc 4: Word &lt;> XML
XUG Muc 4: Word &lt;> XML
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
XHTML
XHTMLXHTML
XHTML
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
 
OSMC 2014: Icinga Web 2 kann mehr | Thomas Gelf
OSMC 2014: Icinga Web 2 kann mehr | Thomas GelfOSMC 2014: Icinga Web 2 kann mehr | Thomas Gelf
OSMC 2014: Icinga Web 2 kann mehr | Thomas Gelf
 
TYPO3 Translations
TYPO3 Translations TYPO3 Translations
TYPO3 Translations
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
 
Zentrale Dokumentengenerierung mit dem Open XML SDK
Zentrale Dokumentengenerierung mit dem Open XML SDKZentrale Dokumentengenerierung mit dem Open XML SDK
Zentrale Dokumentengenerierung mit dem Open XML SDK
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 

Mehr von Dirk Ginader

Making your Angular.js Application accessible
Making your Angular.js Application accessibleMaking your Angular.js Application accessible
Making your Angular.js Application accessible
Dirk Ginader
 
Teach your Browser new tricks
Teach your Browser new tricksTeach your Browser new tricks
Teach your Browser new tricks
Dirk Ginader
 
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Dirk Ginader
 
Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!
Dirk Ginader
 
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev toolsHTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
Dirk Ginader
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Dirk Ginader
 
Javascript done right - Open Web Camp III
Javascript done right - Open Web Camp IIIJavascript done right - Open Web Camp III
Javascript done right - Open Web Camp III
Dirk Ginader
 
The accessibility features of Yahoo! Finance
The accessibility features of Yahoo! FinanceThe accessibility features of Yahoo! Finance
The accessibility features of Yahoo! Finance
Dirk Ginader
 
the 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp IIthe 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp II
Dirk Ginader
 
Das Web Als Datenbank Mit Yql Und Pipes
Das Web Als Datenbank Mit Yql Und PipesDas Web Als Datenbank Mit Yql Und Pipes
Das Web Als Datenbank Mit Yql Und Pipes
Dirk Ginader
 
Die 5 Ebenen Barriererfreier Web Entwicklung
Die 5 Ebenen Barriererfreier Web EntwicklungDie 5 Ebenen Barriererfreier Web Entwicklung
Die 5 Ebenen Barriererfreier Web Entwicklung
Dirk Ginader
 
Avoiding common Accessibility mistakes
Avoiding common Accessibility mistakesAvoiding common Accessibility mistakes
Avoiding common Accessibility mistakes
Dirk Ginader
 
Accessible Javascript using Frameworks - Barcamp London 5
Accessible Javascript using Frameworks - Barcamp London 5Accessible Javascript using Frameworks - Barcamp London 5
Accessible Javascript using Frameworks - Barcamp London 5
Dirk Ginader
 
Accessible Javascript mit Frameworks - Best of Accessibility 2008
Accessible Javascript mit Frameworks - Best of Accessibility 2008Accessible Javascript mit Frameworks - Best of Accessibility 2008
Accessible Javascript mit Frameworks - Best of Accessibility 2008
Dirk Ginader
 
Accessible Javascript - Barcamp Brighton 2
Accessible Javascript - Barcamp Brighton 2Accessible Javascript - Barcamp Brighton 2
Accessible Javascript - Barcamp Brighton 2
Dirk Ginader
 

Mehr von Dirk Ginader (15)

Making your Angular.js Application accessible
Making your Angular.js Application accessibleMaking your Angular.js Application accessible
Making your Angular.js Application accessible
 
Teach your Browser new tricks
Teach your Browser new tricksTeach your Browser new tricks
Teach your Browser new tricks
 
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
 
Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!
 
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev toolsHTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
 
Javascript done right - Open Web Camp III
Javascript done right - Open Web Camp IIIJavascript done right - Open Web Camp III
Javascript done right - Open Web Camp III
 
The accessibility features of Yahoo! Finance
The accessibility features of Yahoo! FinanceThe accessibility features of Yahoo! Finance
The accessibility features of Yahoo! Finance
 
the 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp IIthe 5 layers of web accessibility - Open Web Camp II
the 5 layers of web accessibility - Open Web Camp II
 
Das Web Als Datenbank Mit Yql Und Pipes
Das Web Als Datenbank Mit Yql Und PipesDas Web Als Datenbank Mit Yql Und Pipes
Das Web Als Datenbank Mit Yql Und Pipes
 
Die 5 Ebenen Barriererfreier Web Entwicklung
Die 5 Ebenen Barriererfreier Web EntwicklungDie 5 Ebenen Barriererfreier Web Entwicklung
Die 5 Ebenen Barriererfreier Web Entwicklung
 
Avoiding common Accessibility mistakes
Avoiding common Accessibility mistakesAvoiding common Accessibility mistakes
Avoiding common Accessibility mistakes
 
Accessible Javascript using Frameworks - Barcamp London 5
Accessible Javascript using Frameworks - Barcamp London 5Accessible Javascript using Frameworks - Barcamp London 5
Accessible Javascript using Frameworks - Barcamp London 5
 
Accessible Javascript mit Frameworks - Best of Accessibility 2008
Accessible Javascript mit Frameworks - Best of Accessibility 2008Accessible Javascript mit Frameworks - Best of Accessibility 2008
Accessible Javascript mit Frameworks - Best of Accessibility 2008
 
Accessible Javascript - Barcamp Brighton 2
Accessible Javascript - Barcamp Brighton 2Accessible Javascript - Barcamp Brighton 2
Accessible Javascript - Barcamp Brighton 2
 

Javascript done right

  • 1. Dirk Ginader | Yahoo! Inc. Javascript done right @ginader
  • 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. Kriterien für “gutes” Javascript • Aus Entwicklersicht: – verständlich, wartbar, wiederverwendbar, erweiterbar, dokumentiert, optimiert, sicher, performant, sauber getrennt, optional, international, barrierefrei
  • 4. verständlich • vermeide “zu clevere” Konstrukte
  • 5. verständlich • nicht jeder versteht: – Ternary: • var d = (x < m) ? 'l' : 'r';
  • 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. verständlich • nicht jeder versteht: – Shakespeare: • /(bb|[^b]{2})/
  • 8. verständlich • wenn doch notwendig/sinnvoll dann gute Variablen Namen + Doku!
  • 9. mehr WTF auf • http://wtfjs.com
  • 10. Gut Wartbar • Wie schreibst Du Javascript? – jQuery, YUI und Konsorten? – alles von Hand?
  • 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. Gut Wartbar • Du verwendest aus Prinzip keine Javascript Frameworks? – Du solltest!
  • 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. Gut Wartbar • “Standing on the Shoulders of Giants” • “Zwerge auf den Schultern von Riesen” • “nanos gigantium humeris insidentes”
  • 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. 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. Erweiterbar •Was ist das populärste an jQuery? - DIE PLUGINS! $.fn.extend({ accessibleTabs: function(config) { return this.each(function() { //... } } }); $(".tabs").accessibleTabs();
  • 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. Erweiterbar •Bestehendes Erweitern anstatt alles noch mal neu schreiben! •Für noch unbekannte Ansprüche gewappnet sein
  • 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. 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. 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. Dokumentiert • YUI Doc jetzt noch schöner dank Carlo & Dana: http://www.yuiblog.com/blog/ 2010/10/01/yuidoc-dana-theme/
  • 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. 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. Optimiert • YUI Compressor http://developer.yahoo.com/yui/ compressor/ • Google Closure Compiler http://code.google.com/closure/ compiler/
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Sauber getrennt • HTML – Markup • CSS – Design • Javascript – Interaktion
  • 37. Sauber getrennt • CSS für Javascript – <script> document.documentElement.className += ' js'; </script> – <style> .module{ /* ohne JS */ } .js .module{ /* mit JS */ } </style>
  • 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. 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. 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. 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. 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. 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. 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. 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. Barrierefrei • WAI-ARIA – bringt bekannte Desktop- Bedienkonzepte barrierefrei in den Browser – Bringt unsemantischem Markup Semantik bei
  • 47. Barrierefrei • WAI-ARIA – echte realtime updates • Live Regions – echter Formular Validierungsstatus • aria-required="true" • aria-invalid="true" – echte Dialoge • role="alert"
  • 49. Danke :-) • http://ginader.de • http://twitter.com/ginader • http://github.com/ginader/ • http://www.slideshare.net/ginader • http://speakerrate.com/speakers/ 225-ginader