JavaScript: Von einfachen Scripten zu komplexen Anwendungen

JavaScript:Von einfachen Scripten zukomplexen Anwendungen MMT 28 3. Dezember 2011

Guten TagMathias Schäfer (molily)molily.deSoftware-Entwickler bei 9elements.comSpezialgebiet JavaScript

Worum geht es?Überblick über bewährte Techniken, umJavaScripte zu strukturierenInsbesondere größere clientseitigeAnwendungen

ThemenI. HintergrundII. Einfache Scripte mit jQuery und Co.III. Erste StrukturierungenIV. Vier Ansätze für komplexe Anwendungen

I.JavaScript ist toll!

Was ist das Besondere an JavaScript? (technisch)Unkonventionell, da dynamisch und funktionalMächtig und aussdrucksstarkMuss verstanden und beherrscht werdenFallstricke und Designfehler

Was ist das Besondere an JavaScript? (sozial)Viele Anfänger und Nicht-Fachleute schreibenJavaScriptThe World’s Most Misunderstood ProgrammingLanguage (Crockford 2001)… Has Become the World’s Most PopularProgramming Language (Crockford 2008)

II.Einfache Scripte

jQueryFührende Bibliothek für Scripting im BrowserBenutzereingaben verarbeitenDas Dokument verändernDaten empfangen und senden

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

Was jQuery gut kannSchneller EinstiegKnapper und verständlicher CodeHäuﬁge Aufgaben einfach lösenÖkosystem an Plugins und Fertigscripten

Was jQuery nicht leistetjQuery deckt nur einen kleinen Bereich abjQuery-Code skaliert nicht,wird schlecht lesbar und wartbarjQuery bietet (fast) nichts zur Strukturierung

III.Erste Strukturierung

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

Objekt-Literalvar 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; }};

Modulevar 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();

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

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

IV. JavaScript-Anwendungen

Problemstellung Ist JavaScript für größereWebanwendungen geeignet? Nicht ohne weiteres.

Moviepilot.comEnglischsprachiger Ableger von Moviepilot.deFilm-Nachrichten basierend auf dempersönlichen FilmgeschmackKommende Filmprojekte, Schauspieler,Regisseure und Themen verfolgen

Frontend-TechnikBackend: Ruby on RailsFrontend: Haml, Sass, CoffeeScriptBibliotheken: jQuery, Underscore, Backboneund HandlebarsModels,Views und Controller (MVC)Eine API liefert JSON-Daten

1.Konventionen und Standards

Coding-GuidelinesJavaScript:The Good Parts(Crockford 2008)Qualität durchSelbstbeschränkungFallstricke vermeiden

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

ECMAScript-StandardsECMAScript 5 (Dezember 2009)Korrekturen, Ergänzungen und Neuerungen fürrobustere ProgrammeECMAScript 6 (nahe Zukunft)Eine bessere Sprache zur Entwicklungkomplexer Anwendungen und Bibliotheken

2.Metasprachen und Compiler

Google Closure CompilerOptimierung und KomprimierungÜberprüfen der Google-Coding-GuidelinesAnmerkungen zu Datentypen, Parametern,Zugriffsrechten, Klassen usw.Code-Analyse und Warnungen z.B. beiTypänderungen

CoffeeScriptMetasprache, die nach JavaScript übersetzt wirdBessere Lesbarkeit und SyntaxzuckerVerbessert die ProduktivitätKeine Antwort auf sämtliche JS-Probleme

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

Google Web ToolkitKomplettlösung für große AnwendungenKlassenbibliothek mit vorgefertigten UI-ElementenEntwicklung in Java in einer IDE wie Eclipse

3.Design-Pattern

Model View ControllerBewährtes Pattern für graﬁscheBenutzeroberﬂächenModel: Rohdaten und deren LogikView: Darstellung der DatenController: Benutzeraktionen auswerten

MVC mit BackboneModel: Rohdaten als JSON empfangen,validieren und sendenView: Daten mittels Templates rendern,Model beobachten und verändern (Binding)Controller: nicht vorgesehen

Publish/SubscribeAuf ein Ereignis in einem Teil der Anwendungsollen verschiedene andere Teile reagierenEreignis-basierte lose Kopplung:PubSub.publish(login, user)PubSub.subscribe(login, callbackFunction)

4.Modularisierung und Building

Build-WerkzeugeEntwicklung:Lesbar und verständlichProduktion:Komprimiert, zusammengefasst, performantYUI Compressor, Google Closure Compiler

Module mit RequireJSAsynchronous Module Deﬁnition (AMD)basisModul.js:define({ f: 1 });aufbauModul.js:require([basisModul], function (basisModul) { alert(basisModul.f); // 1})

ErkenntnisseJavaScript macht Spaß und lohnt sichJavaScript-Anwendungen sind nicht einfachMan muss sich viel selbst erarbeitenBest Practises für große Anwendungen fehlenSprache, Bibliotheken und Tools müssen besserwerden

EmpfehlungenEin komfortables Abstraktionslevel schaffenStrukturen und Konventionen geben HaltVorhandene Werkzeuge ausschöpfenMetasprachen wie CoffeeScript ausprobierenGute MVC-Bibliotheken wählenKnow-How übertragen und weiterentwickeln

Danke!Folien und Links unter molily.de/mmt28

http://molily.de	943
http://blog.moviepilot.de	403
http://www.multimediatreff.de	199
http://learningbyhacking.posterous.com	26
http://translate.googleusercontent.com	14
http://multimediatreff.de	12
http://archiv.multimediatreff.de	3
http://us-w1.rockmelt.com	1
http://www.netvibes.com	1
https://posterous.com	1

JavaScript: Von einfachen Scripten zu komplexen Anwendungen

by molily on Dec 03, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 1,603

Statistics

JavaScript: Von einfachen Scripten zu komplexen Anwendungen — Presentation Transcript