Am 2. Dezember habe ich beim Multimediatreff 28 – Webtechnologien – HTML5, CSS3 & Co den Vortrag JavaScript: Von einfachen Scripten zu komplexen Anwendungen gehalten. Hier können Sie die Vortragsfolien herunterladen und Linkliste zu den angesprochenen Themen.

Vortragsankündigung

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.

Folien herunterladen

JavaScript: Von einfachen Scripten zu komplexen Anwendungen (PDF)

Videomitschnitt

Korrekturen

Bastian Sackermann hat mich freundlicherweise darauf aufmerksam gemacht, dass im jQuery-Beispielcode auf der Folie 10 etwas fehlt. Das Szenario ist ein Link zu einer Folgeseite z.B. im Rahmen einer Blätternavigation. Das Script fügt dem Link JavaScript-Funktionalität hinzu, sodass das Linkziel per Ajax im Hintergrund geladen und die Serverrückgabe ins Dokument eingefügt wird. Damit das klappt und nicht das Linkziel auf gewöhnliche Weise angesurft wird, fehlte das Unterdrücken der Standardaktion z.B. mit event.preventDefault(). Der korrigierte Code:

jQuery(document).ready(function ($) {

  $("#loadmore").click(function (event) {
    event.preventDefault();

    var href = $(this).attr("href");

    $("#content").load(href);

  });

});

Linksammlung

Einleitendes

• 9elements – mein Arbeitgeber
• JavaScript ist Toll! – das Motto habe ich dem lesenswerten Blog von Struppi entlehnt
• The World’s Most Misunderstood Programming Language – Douglas Crockfords berühmter Essay aus dem Jahr 2001
• …Has Become the World’s Most Popular Programming Language – Folgeartikel aus dem Jahr 2008
• jQuery – die bekannte und verbreitete JavaScript/DOM-Bibliothek

Objekt-Literal

• Show love to the object literal – Christian Heilmann 2006
• Einfache Module mit dem Objekt-Literal – in meiner JavaScript-Einführung

Module-Pattern

• Kapselung mit privatem Funktions-Scope – in meiner JavaScript-Einführung
• A JavaScript Module Pattern – Eric Miraglia 2007

Revealing Module Pattern

• Again with the Module Pattern – reveal something to the world – Christian Heilmann 2007
• Das Revealing Module Pattern: Kapselung plus öffentliche Schnittstelle – in meiner JavaScript-Einführung
• JavaScript Module Pattern: In-Depth – Ben Cherry 2010

Pseudoklassen

• Classical Inheritance in JavaScript – Douglas Crockford
• Organisation von JavaScripten: Konstruktoren, Prototypen und Instanzen – in meiner JavaScript-Einführung
• Pseudoklassische Vererbung in JavaScript – Artikel von mir
• Klass: a utility for creating expressive classes in JavaScript – kleine Bibliothek für pseudoklassische Vererbung, aus der Ender-Bibliothekenfamilie
• Inheritance Patterns in JavaScript – Übersicht über Vererbungstechniken

Sinnvolle JavaScript-Anwendung: Behaviour Layer und Unobtrusive JavaScript

• The Behavior Layer – Grundlagenartikel von Peter-Paul Koch aus dem Jahr 2004
• Separating behavior and structure – dito
• Basic webstandards Workshop – propagiert das Layer-Prinzip, Russ Weakley 2005
• Unobtrusive Javascript – Tutorial von Christian Heilmann
• Der sinnvolle Einsatz von JavaScript: Mögliche Modelle und Theorien für den JavaScript-Einsatz – ein Übersichtsartikel von mir aus dem Jahr 2005

Beispielanwendung Moviepilot

• Moviepilot.de – bekannte deutschsprachige Site
• Moviepilot.com – englischsprachige JavaScript-Webanwendung, an der 9elements mitentwickelt hat
• Ruby on Rails – serverseitiges Webframework, das die Grundlage für Moviepilot.com bereitstellt
• CoffeeScript – die Metasprache, in der wir JavaScript schreiben
• Handlebars – Templating-Bibliothek
• Underscore – JavaScript-Bibliothek u.a. für komfortable funktionale und objektorientierte Programmierung
• Backbone – kleines MVC-Framework, das bei Moviepilot.com im Einsatz ist

The Good Parts

• Grundpfeiler der fortgeschrittenen JavaScript-Programmierung – in meiner JavaScript-Einführung
• JavaScript: The Good Parts – Buch von Douglas Crockford
• JSHint – Tool zur Qualitätskontrolle von Douglas Crockford
• JSLint – Konfigurierbare Community-Variante von JSLint

ECMAScript 5 & 6

• ECMAScript5-Standard – inoffizielle, aber zugängliche HTML-Version
• ECMAScript-Wiki – Wiki der TC-39-Arbeitsgruppe
• ECMAScript Edition 6 Drafts – aktuelle Version des kommenden Standards
• Brendan Eich – Der JavaScript-Erfinder bloggt über die Weiterentwicklung
• A Minute With Brendan – Podcast von Brendan Eich
• FalsyValues. Dmitry Soshnikov - ECMAScript 6 – Vortragsfolien zu ES6
• Dave Herman: The Future of JavaScript – Mitschnitt eines Vortrags über ES6
• The future of JavaScript – die zugehörigen Folien

Google Closure Compiler

• Google Closure Compiler – Werkzeug zum Komprimieren, Optimieren und zur Qualitätskontrolle
• Annotating JavaScript for the Closure Compiler – Anweisungen für den Compiler
• How to Use Closure Linter – Qualitätskontrolle mit dem Closure Linter
• Google JavaScript Style Guide – Die Regeln für JavaScript-Code bei Google

CoffeeScript

• CoffeeScript – populäre Metasprache, die nach JavaScript kompiliert
• The Little Book on CoffeeScript
• My JSConf.US Presentation – Brendan Eich über CoffeeScript und ECMAScript 6
• List of languages that compile to JS – Sammlung weiterer Metasprachen

Google Web Toolkit und weitere Metasprachen

• Google Web Toolkit – ausgereiftes Framework zur JavaScript-Anwendungsentwicklung
• Cappucino & Objective-J – weiteres umfangreiches GUI-Framework
• Traceur – Metasprache/Compiler für ES6-Features
• Dart – Programmiersprache für »structured code«, kann nach JavaScript kompiliert werden

MVC-Bibliotheken

• 20 JavaScript Frameworks Worth Checking Out – Übersicht über mittlere und größere MVC-Bibliotheken
• MVC Todo apps for JavaScriptMVC, SproutCore, Backbone.js, Spine.js, YUILibrary, Knockout.js and more – eine einfache Beispielanwendung mit vielen Bibliotheken umgesetzt
• Backbone – kleines MVC-Framework
• Spine – Backbone-Alternative mit ähnliches Schwerpunkten, aber anderer Umsetzung
• Knockout – MVC-Framework mit deklarativem Binding
• JavaScripMVC – modulares, umfangreicheres Anwendungs-Framework
• Allgemeine größere Frameworks für JavaScript-Webanwendungen: Yahoo YUI, Dojo Toolkit, ExtJS

Publish/Subscribe

• Publish/Subscribe pattern – Wikipedia
• Loose Coupling with the pubsub Plugin – Videotutorial von Rebecca Murphey
• Understanding the Publish/Subscribe Pattern for Greater JavaScript Scalability – Addy Osmani

Build-Tools

• Google Closure Compiler – Werkzeug zum Zusammenfassen, Komprimieren und Optimieren
• YUI Compressor – Zusammenfassen und Komprimieren von JS und CSS
• RequireJS – Bibliothek für Modularisierung

Allgemeine Links zu JavaScript-Webanwendungen

• Rebecca Murphey, Adventures in JavaScript Development – Blogs einer Expertin auf dem Gebiet
• On jQuery & Large Applications – Rebecca Murphey
• Lessons from a Rewrite – Vortragsmitschnitt von Rebecca Murphey
• Lessons from a Rewrite – die zugehörigen Folien
• Patterns For Large-Scale JavaScript Application Architecture – Übersicht/Sammlung von unzähligen Pattern von Addy Osmani
• Building Large-Scale jQuery Applications – Linksammlung mit Fokus auf jQuery-Tools