Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

JavaScript: Von einfachen Scripten zu komplexen Anwendungen

8.001 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
  • If you need your papers to be written and if you are not that kind of person who likes to do researches and analyze something - you should definitely contact these guys! They are awesome ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • If you are looking for customer-oriented academic and research paper writing service try ⇒⇒⇒ WRITE-MY-PAPER.net ⇐⇐⇐ liked them A LOTTT Really nice solutions for the last-day papers
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

×