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 Anwend...
I.JavaScript ist toll!
Was ist das Besondere an     JavaScript? (technisch)Unkonventionell, da dynamisch und funktionalMächtig und aussdrucksstar...
Was ist das Besondere an      JavaScript? (sozial)Viele Anfänger und Nicht-Fachleute schreibenJavaScriptThe World’s Most M...
II.Einfache Scripte
jQueryFührende Bibliothek für Scripting im BrowserBenutzereingaben verarbeitenDas Dokument verändernDaten empfangen und se...
jQueryjQuery(document).ready(function ($) {  $("#loadmore").click(function () {    var href = $(this).attr("href");    $("...
Was jQuery gut kannSchneller EinstiegKnapper und verständlicher CodeHäufige Aufgaben einfach lösenÖkosystem an Plugins und ...
Was jQuery nicht leistetjQuery deckt nur einen kleinen Bereich abjQuery-Code skaliert nicht,wird schlecht lesbar und wartb...
III.Erste Strukturierung
Unstrukturierter Codewert = 0;document.getElementById(addieren)  .addEventListener(click, erhöhe, false);function erhöhe (...
Objekt-Literalvar Zähler = {     buttonId : addieren,     ausgabeId : ausgabe,     wert : 0,     init : function () {     ...
Modulevar Zähler = (function () {  var buttonId = addieren,      ausgabeId = ausgabe,      wert = 0;  function init () {  ...
Pseudoklassenfunction Auto (name) {  this.name = name;}Auto.prototype.fahre = function () {   alert(this.name +  macht bru...
50% sind geschafftBehaviour Layer (Koch 2004, Weakley 2005)Unobtrusive JavaScript (Heilmann 2005)Objekt-Literal (Heilmann ...
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 FilmgeschmackKomm...
Frontend-TechnikBackend: Ruby on RailsFrontend: Haml, Sass, CoffeeScriptBibliotheken: jQuery, Underscore, Backboneund Hand...
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 Bui...
ECMAScript-StandardsECMAScript 5 (Dezember 2009)Korrekturen, Ergänzungen und Neuerungen fürrobustere ProgrammeECMAScript 6...
2.Metasprachen und   Compiler
Google Closure CompilerOptimierung und KomprimierungÜberprüfen der Google-Coding-GuidelinesAnmerkungen zu Datentypen, Para...
CoffeeScriptMetasprache, die nach JavaScript übersetzt wirdBessere Lesbarkeit und SyntaxzuckerVerbessert die Produktivität...
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...
3.Design-Pattern
Model View ControllerBewährtes Pattern für grafischeBenutzeroberflächenModel: Rohdaten und deren LogikView: Darstellung der ...
MVC mit BackboneModel: Rohdaten als JSON empfangen,validieren und sendenView: Daten mittels Templates rendern,Model beobac...
Publish/SubscribeAuf ein Ereignis in einem Teil der Anwendungsollen verschiedene andere Teile reagierenEreignis-basierte l...
4.Modularisierung und     Building
Build-WerkzeugeEntwicklung:Lesbar und verständlichProduktion:Komprimiert, zusammengefasst, performantYUI Compressor, Googl...
Module mit RequireJSAsynchronous Module Definition (AMD)basisModul.js:define({ f: 1 });aufbauModul.js:require([basisModul],...
ErkenntnisseJavaScript macht Spaß und lohnt sichJavaScript-Anwendungen sind nicht einfachMan muss sich viel selbst erarbei...
EmpfehlungenEin komfortables Abstraktionslevel schaffenStrukturen und Konventionen geben HaltVorhandene Werkzeuge ausschöp...
Danke!Folien und Links unter   molily.de/mmt28
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
Upcoming SlideShare
Loading in...5
×

JavaScript: Von einfachen Scripten zu komplexen Anwendungen

5,939

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,939
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

JavaScript: Von einfachen Scripten zu komplexen Anwendungen

  1. 1. JavaScript:Von einfachen Scripten zukomplexen Anwendungen MMT 28 3. Dezember 2011
  2. 2. Guten TagMathias Schäfer (molily)molily.deSoftware-Entwickler bei 9elements.comSpezialgebiet JavaScript
  3. 3. Worum geht es?Überblick über bewährte Techniken, umJavaScripte zu strukturierenInsbesondere größere clientseitigeAnwendungen
  4. 4. ThemenI. HintergrundII. Einfache Scripte mit jQuery und Co.III. Erste StrukturierungenIV. Vier Ansätze für komplexe Anwendungen
  5. 5. I.JavaScript ist toll!
  6. 6. Was ist das Besondere an JavaScript? (technisch)Unkonventionell, da dynamisch und funktionalMächtig und aussdrucksstarkMuss verstanden und beherrscht werdenFallstricke und Designfehler
  7. 7. 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)
  8. 8. II.Einfache Scripte
  9. 9. jQueryFührende Bibliothek für Scripting im BrowserBenutzereingaben verarbeitenDas Dokument verändernDaten empfangen und senden
  10. 10. jQueryjQuery(document).ready(function ($) { $("#loadmore").click(function () { var href = $(this).attr("href"); $("#content").load(href); });});
  11. 11. Was jQuery gut kannSchneller EinstiegKnapper und verständlicher CodeHäufige Aufgaben einfach lösenÖkosystem an Plugins und Fertigscripten
  12. 12. Was jQuery nicht leistetjQuery deckt nur einen kleinen Bereich abjQuery-Code skaliert nicht,wird schlecht lesbar und wartbarjQuery bietet (fast) nichts zur Strukturierung
  13. 13. III.Erste Strukturierung
  14. 14. Unstrukturierter Codewert = 0;document.getElementById(addieren) .addEventListener(click, erhöhe, false);function erhöhe () { wert += 1; document.getElementById(ausgabe).innerHTML = wert;}
  15. 15. 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; }};
  16. 16. 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();
  17. 17. 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();
  18. 18. 50% sind geschafftBehaviour Layer (Koch 2004, Weakley 2005)Unobtrusive JavaScript (Heilmann 2005)Objekt-Literal (Heilmann 2006)Module-Pattern (Heilmann 2007)Pseudoklassen und prototypische Vererbung
  19. 19. IV. JavaScript-Anwendungen
  20. 20. Problemstellung Ist JavaScript für größereWebanwendungen geeignet? Nicht ohne weiteres.
  21. 21. Moviepilot.comEnglischsprachiger Ableger von Moviepilot.deFilm-Nachrichten basierend auf dempersönlichen FilmgeschmackKommende Filmprojekte, Schauspieler,Regisseure und Themen verfolgen
  22. 22. Frontend-TechnikBackend: Ruby on RailsFrontend: Haml, Sass, CoffeeScriptBibliotheken: jQuery, Underscore, Backboneund HandlebarsModels,Views und Controller (MVC)Eine API liefert JSON-Daten
  23. 23. 1.Konventionen und Standards
  24. 24. Coding-GuidelinesJavaScript:The Good Parts(Crockford 2008)Qualität durchSelbstbeschränkungFallstricke vermeiden
  25. 25. JSLint und JSHintCode-Analyse anhand der »Good Parts«Fehler und Warnungen beim RegelverstoßEingebettet in Editoren und Build-Werkzeugen
  26. 26. ECMAScript-StandardsECMAScript 5 (Dezember 2009)Korrekturen, Ergänzungen und Neuerungen fürrobustere ProgrammeECMAScript 6 (nahe Zukunft)Eine bessere Sprache zur Entwicklungkomplexer Anwendungen und Bibliotheken
  27. 27. 2.Metasprachen und Compiler
  28. 28. 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
  29. 29. CoffeeScriptMetasprache, die nach JavaScript übersetzt wirdBessere Lesbarkeit und SyntaxzuckerVerbessert die ProduktivitätKeine Antwort auf sämtliche JS-Probleme
  30. 30. CoffeeScriptjQuery(document).ready ($) -> $("#loadmore").click -> href = $(@).attr "href" $("#content").load href
  31. 31. Google Web ToolkitKomplettlösung für große AnwendungenKlassenbibliothek mit vorgefertigten UI-ElementenEntwicklung in Java in einer IDE wie Eclipse
  32. 32. 3.Design-Pattern
  33. 33. Model View ControllerBewährtes Pattern für grafischeBenutzeroberflächenModel: Rohdaten und deren LogikView: Darstellung der DatenController: Benutzeraktionen auswerten
  34. 34. MVC mit BackboneModel: Rohdaten als JSON empfangen,validieren und sendenView: Daten mittels Templates rendern,Model beobachten und verändern (Binding)Controller: nicht vorgesehen
  35. 35. Publish/SubscribeAuf ein Ereignis in einem Teil der Anwendungsollen verschiedene andere Teile reagierenEreignis-basierte lose Kopplung:PubSub.publish(login, user)PubSub.subscribe(login, callbackFunction)
  36. 36. 4.Modularisierung und Building
  37. 37. Build-WerkzeugeEntwicklung:Lesbar und verständlichProduktion:Komprimiert, zusammengefasst, performantYUI Compressor, Google Closure Compiler
  38. 38. Module mit RequireJSAsynchronous Module Definition (AMD)basisModul.js:define({ f: 1 });aufbauModul.js:require([basisModul], function (basisModul) { alert(basisModul.f); // 1})
  39. 39. 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
  40. 40. EmpfehlungenEin komfortables Abstraktionslevel schaffenStrukturen und Konventionen geben HaltVorhandene Werkzeuge ausschöpfenMetasprachen wie CoffeeScript ausprobierenGute MVC-Bibliotheken wählenKnow-How übertragen und weiterentwickeln
  41. 41. Danke!Folien und Links unter molily.de/mmt28
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×