Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Mathias Schäfer (molily)

March 16, 2012
Tweet

More Decks by Mathias Schäfer (molily)

Other Decks in Programming

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