JavaScript: Von einfachen Scripten zu komplexen Anwendungen (Multimediatreff 28)

Vortrag auf dem Multimediatreff 28 in Köln, 2012-12-02
http://multimediatreff.de/

JavaScript hat sich von einer beschränkten Scriptsprache zu einer mächtigen Sprache entwickelt, in der umfangreiche clientseitige Anwendungen geschrieben werden. Doch der Sprung von einfachem DOM-Scripting mit Hilfsmittel wie jQuery zu komplexen Anwendungen ist schwierig und verlangt Know-How. Der Vortrag gibt einen Einblick in aktuelle Konzepte und Techniken, die Struktur in die Entwicklung von JavaScript-Anwendungen bringen.

Videomitschnitt und Linksammlung unter:
http://molily.de/mmt28

Transcript

1. JavaScript:
   Von einfachen Scripten zu
   komplexen Anwendungen
   MMT 28
   3. Dezember 2011
   

   View Slide

2. Guten Tag
   Mathias Schäfer (molily)
   molily.de
   Software-Entwickler bei 9elements.com
   Spezialgebiet JavaScript
   

   View Slide

3. Worum geht es?
   Überblick über bewährte Techniken, um
   JavaScripte zu strukturieren
   Insbesondere größere clientseitige
   Anwendungen
   

   View Slide

4. Themen
   I. Hintergrund
   II. Einfache Scripte mit jQuery und Co.
   III. Erste Strukturierungen
   IV. Vier Ansätze für komplexe Anwendungen
   

   View Slide

5. I.
   JavaScript ist toll!
   

   View Slide

6. Was ist das Besondere an
   JavaScript? (technisch)
   Unkonventionell, da dynamisch und funktional
   Mächtig und aussdrucksstark
   Muss verstanden und beherrscht werden
   Fallstricke und Designfehler
   

   View Slide

7. Was ist das Besondere an
   JavaScript? (sozial)
   Viele Anfänger und Nicht-Fachleute schreiben
   JavaScript
   The World’s Most Misunderstood Programming
   Language (Crockford 2001)
   … Has Become the World’s Most Popular
   Programming Language (Crockford 2008)
   

   View Slide

8. II.
   Einfache Scripte
   

   View Slide

9. jQuery
   Führende Bibliothek für Scripting im Browser
   Benutzereingaben verarbeiten
   Das Dokument verändern
   Daten empfangen und senden
   

   View Slide

10. jQuery
    jQuery(document).ready(function ($) {
    $("#loadmore").click(function () {
    var href = $(this).attr("href");
    $("#content").load(href);
    });
    });
    

    View Slide

11. Was jQuery gut kann
    Schneller Einstieg
    Knapper und verständlicher Code
    Häufige Aufgaben einfach lösen
    Ökosystem an Plugins und Fertigscripten
    

    View Slide

12. Was jQuery nicht leistet
    jQuery deckt nur einen kleinen Bereich ab
    jQuery-Code skaliert nicht,
    wird schlecht lesbar und wartbar
    jQuery bietet (fast) nichts zur Strukturierung
    

    View Slide

13. III.
    Erste Strukturierung
    

    View Slide

14. Unstrukturierter Code
    wert = 0;
    document.getElementById('addieren')
    .addEventListener('click', erhöhe, false);
    function erhöhe () {
    wert += 1;
    document.getElementById('ausgabe').innerHTML = wert;
    }
    

    View Slide

15. Objekt-Literal
    var Zähler = {
    buttonId : 'addieren',
    ausgabeId : 'ausgabe',
    wert : 0,
    init : function () {
    var button = document.getElementById(this.buttonId);
    button.addEventListener('click', this.erhöhe, false);
    },
    erhöhe: function () {
    Zähler.wert += 1;
    document.getElementById(this.ausgabeId).innerHTML =
    Zähler.wert;
    }
    };
    

    View Slide

16. Module
    var Zähler = (function () {
    var buttonId = 'addieren',
    ausgabeId = 'ausgabe',
    wert = 0;
    function init () {
    var button = document.getElementById(buttonId);
    button.addEventListener('click', erhöhe, false);
    }
    function erhöhe () {
    wert += 1;
    document.getElementById(ausgabeId).innerHTML = wert;
    }
    init();
    return { erhöhe: erhöhe };
    })();
    Zähler.erhöhe();
    

    View Slide

17. Pseudoklassen
    function Auto (name) {
    this.name = name;
    }
    Auto.prototype.fahre = function () {
    alert(this.name + ' macht brumm!');
    };
    var käfer = new Auto('Käfer');
    käfer.fahre();
    

    View Slide

18. 50% sind geschafft
    Behaviour Layer (Koch 2004, Weakley 2005)
    Unobtrusive JavaScript (Heilmann 2005)
    Objekt-Literal (Heilmann 2006)
    Module-Pattern (Heilmann 2007)
    Pseudoklassen und prototypische Vererbung
    

    View Slide

19. IV.
    JavaScript-
    Anwendungen
    

    View Slide

20. Problemstellung
    Ist JavaScript für größere
    Webanwendungen geeignet?
    Nicht ohne weiteres.
    

    View Slide

21. View Slide

22. Moviepilot.com
    Englischsprachiger Ableger von Moviepilot.de
    Film-Nachrichten basierend auf dem
    persönlichen Filmgeschmack
    Kommende Filmprojekte, Schauspieler,
    Regisseure und Themen verfolgen
    

    View Slide

23. Frontend-Technik
    Backend: Ruby on Rails
    Frontend: Haml, Sass, CoffeeScript
    Bibliotheken: jQuery, Underscore, Backbone
    und Handlebars
    Models, Views und Controller (MVC)
    Eine API liefert JSON-Daten
    

    View Slide

24. 1.
    Konventionen und
    Standards
    

    View Slide

25. Coding-Guidelines
    JavaScript: The Good Parts
    (Crockford 2008)
    Qualität durch
    Selbstbeschränkung
    Fallstricke vermeiden
    

    View Slide

26. JSLint und JSHint
    Code-Analyse anhand der »Good Parts«
    Fehler und Warnungen beim Regelverstoß
    Eingebettet in Editoren und Build-Werkzeugen
    

    View Slide

27. ECMAScript-Standards
    ECMAScript 5 (Dezember 2009)
    Korrekturen, Ergänzungen und Neuerungen für
    robustere Programme
    ECMAScript 6 (nahe Zukunft)
    Eine bessere Sprache zur Entwicklung
    komplexer Anwendungen und Bibliotheken
    

    View Slide

28. 2.
    Metasprachen und
    Compiler
    

    View Slide

29. Google Closure Compiler
    Optimierung und Komprimierung
    Überprüfen der Google-Coding-Guidelines
    Anmerkungen zu Datentypen, Parametern,
    Zugriffsrechten, Klassen usw.
    Code-Analyse und Warnungen z.B. bei
    Typänderungen
    

    View Slide

30. CoffeeScript
    Metasprache, die nach JavaScript übersetzt wird
    Bessere Lesbarkeit und Syntaxzucker
    Verbessert die Produktivität
    Keine Antwort auf sämtliche JS-Probleme
    

    View Slide

31. CoffeeScript
    jQuery(document).ready ($) ->
    $("#loadmore").click ->
    href = $(@).attr "href"
    $("#content").load href
    

    View Slide

32. Google Web Toolkit
    Komplettlösung für große Anwendungen
    Klassenbibliothek mit vorgefertigten UI-
    Elementen
    Entwicklung in Java in einer IDE wie Eclipse
    

    View Slide

33. 3.
    Design-Pattern
    

    View Slide

34. Model View Controller
    Bewährtes Pattern für grafische
    Benutzeroberflächen
    Model: Rohdaten und deren Logik
    View: Darstellung der Daten
    Controller: Benutzeraktionen auswerten
    

    View Slide

35. MVC mit Backbone
    Model: Rohdaten als JSON empfangen,
    validieren und senden
    View: Daten mittels Templates rendern,
    Model beobachten und verändern (Binding)
    Controller: nicht vorgesehen
    

    View Slide

36. Publish/Subscribe
    Auf ein Ereignis in einem Teil der Anwendung
    sollen verschiedene andere Teile reagieren
    Ereignis-basierte lose Kopplung:
    PubSub.publish('login', user)
    PubSub.subscribe('login', callbackFunction)
    

    View Slide

37. 4.
    Modularisierung und
    Building
    

    View Slide

38. Build-Werkzeuge
    Entwicklung:
    Lesbar und verständlich
    Produktion:
    Komprimiert, zusammengefasst, performant
    YUI Compressor, Google Closure Compiler
    

    View Slide

39. Module mit RequireJS
    Asynchronous Module Definition (AMD)
    basisModul.js:
    define({ f: 1 });
    aufbauModul.js:
    require(['basisModul'], function (basisModul) {
    alert(basisModul.f); // 1
    })
    

    View Slide

40. View Slide

41. Erkenntnisse
    JavaScript macht Spaß und lohnt sich
    JavaScript-Anwendungen sind nicht einfach
    Man muss sich viel selbst erarbeiten
    Best Practises für große Anwendungen fehlen
    Sprache, Bibliotheken und Tools müssen besser
    werden
    

    View Slide

42. Empfehlungen
    Ein komfortables Abstraktionslevel schaffen
    Strukturen und Konventionen geben Halt
    Vorhandene Werkzeuge ausschöpfen
    Metasprachen wie CoffeeScript ausprobieren
    Gute MVC-Bibliotheken wählen
    Know-How übertragen und weiterentwickeln
    

    View Slide

43. Danke!
    Folien und Links unter
    molily.de/mmt28
    

    View Slide