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

Ae86e2cc402e0dceb88e7d4fc10cbc85?s=128

Mathias Schäfer (molily)

March 16, 2012
Tweet

Transcript

  1. 3.

    Worum geht es? Überblick über bewährte Techniken, um JavaScripte zu

    strukturieren Insbesondere größere clientseitige Anwendungen
  2. 4.

    Themen I. Hintergrund II. Einfache Scripte mit jQuery und Co.

    III. Erste Strukturierungen IV. Vier Ansätze für komplexe Anwendungen
  3. 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
  4. 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)
  5. 10.
  6. 11.

    Was jQuery gut kann Schneller Einstieg Knapper und verständlicher Code

    Häufige Aufgaben einfach lösen Ökosystem an Plugins und Fertigscripten
  7. 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
  8. 14.

    Unstrukturierter Code wert = 0; document.getElementById('addieren') .addEventListener('click', erhöhe, false); function

    erhöhe () { wert += 1; document.getElementById('ausgabe').innerHTML = wert; }
  9. 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; } };
  10. 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();
  11. 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();
  12. 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
  13. 21.
  14. 22.

    Moviepilot.com Englischsprachiger Ableger von Moviepilot.de Film-Nachrichten basierend auf dem persönlichen

    Filmgeschmack Kommende Filmprojekte, Schauspieler, Regisseure und Themen verfolgen
  15. 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
  16. 26.

    JSLint und JSHint Code-Analyse anhand der »Good Parts« Fehler und

    Warnungen beim Regelverstoß Eingebettet in Editoren und Build-Werkzeugen
  17. 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
  18. 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
  19. 30.

    CoffeeScript Metasprache, die nach JavaScript übersetzt wird Bessere Lesbarkeit und

    Syntaxzucker Verbessert die Produktivität Keine Antwort auf sämtliche JS-Probleme
  20. 32.
  21. 34.

    Model View Controller Bewährtes Pattern für grafische Benutzeroberflächen Model: Rohdaten

    und deren Logik View: Darstellung der Daten Controller: Benutzeraktionen auswerten
  22. 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
  23. 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)
  24. 39.

    Module mit RequireJS Asynchronous Module Definition (AMD) basisModul.js: define({ f:

    1 }); aufbauModul.js: require(['basisModul'], function (basisModul) { alert(basisModul.f); // 1 })
  25. 40.
  26. 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
  27. 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