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

Ae86e2cc402e0dceb88e7d4fc10cbc85?s=128

Mathias Schäfer (molily)

March 16, 2012
Tweet

Transcript

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

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

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

    strukturieren Insbesondere größere clientseitige Anwendungen
  4. Themen I. Hintergrund II. Einfache Scripte mit jQuery und Co.

    III. Erste Strukturierungen IV. Vier Ansätze für komplexe Anwendungen
  5. I. JavaScript ist toll!

  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
  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)
  8. II. Einfache Scripte

  9. jQuery Führende Bibliothek für Scripting im Browser Benutzereingaben verarbeiten Das

    Dokument verändern Daten empfangen und senden
  10. jQuery jQuery(document).ready(function ($) { $("#loadmore").click(function () { var href =

    $(this).attr("href"); $("#content").load(href); }); });
  11. Was jQuery gut kann Schneller Einstieg Knapper und verständlicher Code

    Häufige Aufgaben einfach lösen Ökosystem an Plugins und Fertigscripten
  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
  13. III. Erste Strukturierung

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

    erhöhe () { wert += 1; document.getElementById('ausgabe').innerHTML = wert; }
  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; } };
  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();
  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();
  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
  19. IV. JavaScript- Anwendungen

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

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

    Filmgeschmack Kommende Filmprojekte, Schauspieler, Regisseure und Themen verfolgen
  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
  24. 1. Konventionen und Standards

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

    Fallstricke vermeiden
  26. JSLint und JSHint Code-Analyse anhand der »Good Parts« Fehler und

    Warnungen beim Regelverstoß Eingebettet in Editoren und Build-Werkzeugen
  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
  28. 2. Metasprachen und Compiler

  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
  30. CoffeeScript Metasprache, die nach JavaScript übersetzt wird Bessere Lesbarkeit und

    Syntaxzucker Verbessert die Produktivität Keine Antwort auf sämtliche JS-Probleme
  31. CoffeeScript jQuery(document).ready ($) -> $("#loadmore").click -> href = $(@).attr "href"

    $("#content").load href
  32. Google Web Toolkit Komplettlösung für große Anwendungen Klassenbibliothek mit vorgefertigten

    UI- Elementen Entwicklung in Java in einer IDE wie Eclipse
  33. 3. Design-Pattern

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

    und deren Logik View: Darstellung der Daten Controller: Benutzeraktionen auswerten
  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
  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)
  37. 4. Modularisierung und Building

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

    Compressor, Google Closure Compiler
  39. Module mit RequireJS Asynchronous Module Definition (AMD) basisModul.js: define({ f:

    1 }); aufbauModul.js: require(['basisModul'], function (basisModul) { alert(basisModul.f); // 1 })
  40. None
  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
  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
  43. Danke! Folien und Links unter molily.de/mmt28