JavaScript: Von einfachen Scripten zu komplexen Anwendungen (Multimediatreff 28)

Vortrag auf dem Multimediatreff 28 in Köln, 2012-12-02
http://multimediatreff.de/

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.

Videomitschnitt und Linksammlung unter:
http://molily.de/mmt28

Transcript

1. JavaScript: Von einfachen Scripten zu komplexen Anwendungen MMT 28 3. Dezember 2011
2. Guten Tag Mathias Schäfer (molily) molily.de Software-Entwickler bei 9elements.com Spezialgebiet JavaScript
3. Worum geht es? Überblick über bewährte Techniken, um JavaScripte zu strukturieren Insbesondere größere clientseitige Anwendungen
4. Themen I. Hintergrund II. Einfache Scripte mit jQuery und Co. III. Erste Strukturierungen IV. Vier Ansätze für komplexe Anwendungen
5. I. JavaScript ist toll!
6. Was ist das Besondere an JavaScript? (technisch) Unkonventionell, da dynamisch und funktional Mächtig und aussdrucksstark Muss verstanden und beherrscht werden Fallstricke und Designfehler
7. Was ist das Besondere an JavaScript? (sozial) Viele Anfänger und Nicht-Fachleute schreiben JavaScript The World’s Most Misunderstood Programming Language (Crockford 2001) … Has Become the World’s Most Popular Programming Language (Crockford 2008)
8. II. Einfache Scripte
9. jQuery Führende Bibliothek für Scripting im Browser Benutzereingaben verarbeiten Das Dokument verändern Daten empfangen und senden
10. jQuery jQuery(document).ready(function ($) { $("#loadmore").click(function () { var href = $(this).attr("href"); $("#content").load(href); }); });
11. Was jQuery gut kann Schneller Einstieg Knapper und verständlicher Code Häufige Aufgaben einfach lösen Ökosystem an Plugins und Fertigscripten
12. Was jQuery nicht leistet jQuery deckt nur einen kleinen Bereich ab jQuery-Code skaliert nicht, wird schlecht lesbar und wartbar jQuery bietet (fast) nichts zur Strukturierung
13. III. Erste Strukturierung
14. Unstrukturierter Code wert = 0; document.getElementById('addieren') .addEventListener('click', erhöhe, false); function erhöhe () { wert += 1; document.getElementById('ausgabe').innerHTML = wert; }
15. Objekt-Literal var 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. Module var 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. Pseudoklassen function 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. 50% sind geschafft Behaviour Layer (Koch 2004, Weakley 2005) Unobtrusive JavaScript (Heilmann 2005) Objekt-Literal (Heilmann 2006) Module-Pattern (Heilmann 2007) Pseudoklassen und prototypische Vererbung
19. IV. JavaScript- Anwendungen
20. Problemstellung Ist JavaScript für größere Webanwendungen geeignet? Nicht ohne weiteres.
22. Moviepilot.com Englischsprachiger Ableger von Moviepilot.de Film-Nachrichten basierend auf dem persönlichen Filmgeschmack Kommende Filmprojekte, Schauspieler, Regisseure und Themen verfolgen
23. Frontend-Technik Backend: Ruby on Rails Frontend: Haml, Sass, CoffeeScript Bibliotheken: jQuery, Underscore, Backbone und Handlebars Models, Views und Controller (MVC) Eine API liefert JSON-Daten
24. 1. Konventionen und Standards
25. Coding-Guidelines JavaScript: The Good Parts (Crockford 2008) Qualität durch Selbstbeschränkung Fallstricke vermeiden
26. JSLint und JSHint Code-Analyse anhand der »Good Parts« Fehler und Warnungen beim Regelverstoß Eingebettet in Editoren und Build-Werkzeugen
27. ECMAScript-Standards ECMAScript 5 (Dezember 2009) Korrekturen, Ergänzungen und Neuerungen für robustere Programme ECMAScript 6 (nahe Zukunft) Eine bessere Sprache zur Entwicklung komplexer Anwendungen und Bibliotheken
28. 2. Metasprachen und Compiler
29. Google Closure Compiler Optimierung und Komprimierung Überprüfen der Google-Coding-Guidelines Anmerkungen zu Datentypen, Parametern, Zugriffsrechten, Klassen usw. Code-Analyse und Warnungen z.B. bei Typänderungen
30. CoffeeScript Metasprache, die nach JavaScript übersetzt wird Bessere Lesbarkeit und Syntaxzucker Verbessert die Produktivität Keine Antwort auf sämtliche JS-Probleme
31. CoffeeScript jQuery(document).ready ($) -> $("#loadmore").click -> href = $(@).attr "href" $("#content").load href
32. Google Web Toolkit Komplettlösung für große Anwendungen Klassenbibliothek mit vorgefertigten UI- Elementen Entwicklung in Java in einer IDE wie Eclipse
33. 3. Design-Pattern
34. Model View Controller Bewährtes Pattern für grafische Benutzeroberflächen Model: Rohdaten und deren Logik View: Darstellung der Daten Controller: Benutzeraktionen auswerten
35. MVC mit Backbone Model: Rohdaten als JSON empfangen, validieren und senden View: Daten mittels Templates rendern, Model beobachten und verändern (Binding) Controller: nicht vorgesehen
36. Publish/Subscribe Auf ein Ereignis in einem Teil der Anwendung sollen verschiedene andere Teile reagieren Ereignis-basierte lose Kopplung: PubSub.publish('login', user) PubSub.subscribe('login', callbackFunction)
37. 4. Modularisierung und Building
38. Build-Werkzeuge Entwicklung: Lesbar und verständlich Produktion: Komprimiert, zusammengefasst, performant YUI Compressor, Google Closure Compiler
39. Module mit RequireJS Asynchronous Module Definition (AMD) basisModul.js: define({ f: 1 }); aufbauModul.js: require(['basisModul'], function (basisModul) { alert(basisModul.f); // 1 })
41. Erkenntnisse JavaScript macht Spaß und lohnt sich JavaScript-Anwendungen sind nicht einfach Man muss sich viel selbst erarbeiten Best Practises für große Anwendungen fehlen Sprache, Bibliotheken und Tools müssen besser werden
42. Empfehlungen Ein komfortables Abstraktionslevel schaffen Strukturen und Konventionen geben Halt Vorhandene Werkzeuge ausschöpfen Metasprachen wie CoffeeScript ausprobieren Gute MVC-Bibliotheken wählen Know-How übertragen und weiterentwickeln
43. Danke! Folien und Links unter molily.de/mmt28