JavaScript: Von einfachen Scripten zu komplexen Anwendungen
Upcoming SlideShare
Loading in...5
×
 

JavaScript: Von einfachen Scripten zu komplexen Anwendungen

on

  • 5,896 views

Folien-Download, Videomitschnitt und Linksammlung unter: ...

Folien-Download, Videomitschnitt und Linksammlung unter:
http://molily.de/mmt28

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.

Statistics

Views

Total Views
5,896
Slideshare-icon Views on SlideShare
2,398
Embed Views
3,498

Actions

Likes
1
Downloads
8
Comments
0

11 Embeds 3,498

http://molily.de 2736
http://blog.moviepilot.de 496
http://www.multimediatreff.de 199
http://learningbyhacking.posterous.com 26
http://translate.googleusercontent.com 14
http://multimediatreff.de 12
http://archiv.multimediatreff.de 11
http://us-w1.rockmelt.com 1
http://www.netvibes.com 1
https://posterous.com 1
http://www.google.de 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript: Von einfachen Scripten zu komplexen Anwendungen JavaScript: Von einfachen Scripten zu komplexen Anwendungen Presentation Transcript

    • 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äufige 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 grafischeBenutzeroberflä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 Definition (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