Um Bilder und Grafiken "bereinigte" Version des Vortrags bei der JUG Ostfalen.
Nahezu jede große Website – egal ob das Backend in Java, PHP, Ruby oder Python programmiert wurde – verwendet im Browser JavaScript als Sprache. Software-Artefakte, die in JavaScript erstellt wurden, werde zunehmend wichtiger, da Logik in letzter Zeit tendenziell wieder vom Server zurück in den Browser wandert. JavaScript-Entwicklung ist im Alltag des Enterprise-Entwicklers angekommen. Teils muss er als Backend-Entwickler JavaScript-Code überarbeiten, der z.B. von einer Webagentur erstellt wurde, teils muss er auch selbst JavaScript-Artefakte erzeugen oder ein ganzes Framework oder eine Library in JavaScript schreiben oder pflegen.Der erste Teil des Vortrags richtet sich an Enterprise-Enwickler (meist mit einem Java-EE-Hintergrund), die sich für JavaScript interessieren, sich schnell darin einarbeiten wollen und Tipps suchen, dieses Ziel zu erreichen. Dabei werden einige Grundlagen der Sprache vorgestellt. Dieser Teil des Vortrags soll eher Lust auf Mehr machen als fundamentales Wissen in aller Tiefe zu vermitteln.Enterprise-Entwicklung ist in der Regel Teamarbeit. Eine große Codebasis mus wartbar bleiben. Im zweiten Teil des Vortrags werden Techniken und Tools vorgestellt, die dabei helfen können, eine geeignete Codequalität zu erreichen und zu wahren
2. Holisticon AG
"Die Holisticon AG ist eine Management-
und IT-Beratung mit Sitz in Hamburg. Mit
einem ganzheitlichen Beratungsansatz
unterstützen wir unsere Kunden in ihren
Entwicklungsprojekten auf technischer,
taktischer wie auch strategischer Ebene."
2
6. Brendan Eich
Scheme im Web-Browser
HTML scripting language
make it look like Java
made it look like C and AWK
Mistakes (some recapitulating LISP) were frozen early
Inhalt: http://de.slideshare.net/BrendanEich/splash-9915475
Bild: Mozilla Digital Memory Bank, Object #135, 19 May 2006, http://mozillamemory.org/detailview.php?id=135
6
7. Design goals
Copy/paste snippets of code into HTML
Tolerate “minor” errors (e.g., missing semicolons)
Simplified event handling
onlick, onmouseover
inspired by HyperCard
Pick a few hard-working, powerful primitives
First class functions for procedural abstraction
(AWK more than Scheme)
Objects everywhere, prototype-based
(Self, but only one parent per object)
Leave all else out!
7
Bild: Some rights reserved by superfluity, http://www.flickr.com/photos/equanimity/
8. 1980er Jahre: Xerox PARC & Sun Microsystems
Ziel: mehr Freiheit als bei OO-Sprachen wie Smalltalk
Wenige Konstrukte:
• Slots
• Traits
• Prototypen
• keine Typen und Klassen
8
Bild: Some rights reserved, Mike Knell, Palo Alto, California. Old Xerox PARC site, http://commons.wikimedia.org/wiki/File:No-longer-Xerox_PARC.jpg
9. Self: The Power of Simplicity
Keine Unterscheidung zwischen
• dem Verhalten eines Objekts (Methoden einer Klasse)
• dem Zustand des Objekts (Eigenschaften einer Klasse)
Ein Objekt besteht aus Slots.
• Slots haben einen Namen.
• Slots können Methoden oder Attribute aufnehmen.
9
Bild: Some rights reserved, Mike Knell, Palo Alto, California. Old Xerox PARC site, http://commons.wikimedia.org/wiki/File:No-longer-Xerox_PARC.jpg
10. Self: The Power of Simplicity
Objekterzeugung ohne Klassen.
Neue Objekte erzeugen durch das Klonen existierender
Objekte.
Objekten können zur Laufzeit Slots hinzugefügt werden.
10
Bild: Some rights reserved, Mike Knell, Palo Alto, California. Old Xerox PARC site, http://commons.wikimedia.org/wiki/File:No-longer-Xerox_PARC.jpg
11. Self: The Power of Simplicity
Einzelne Slots können an einen „Parent“ delegieren,
indem sie den Slot nicht überschreiben.
Trait-Objekte sind abgespeckte Implementierungen
(Mixins).
11
Bild: Some rights reserved, Mike Knell, Palo Alto, California. Old Xerox PARC site, http://commons.wikimedia.org/wiki/File:No-longer-Xerox_PARC.jpg
12. Scheme: minimalistic LISP
Comic: XKCD, http://xkcd.com/224/
Bild: NASA Goddard Photo and Video, http://commons.wikimedia.org/wiki/File:Hubble%27s_Wide_View_of_%27Mystic_Mountain%27_in_Infrared.jpg
Das Grundprinzip von Scheme ist es, eine Sprache nicht
dadurch mächtig werden zu lassen, indem man immer
mehr Features hinzufügt, sondern indem man
Einschränkungen entfernt.
Es gab Scheme-Implementierungen von JavaScript. 12
13. Java vs. JavaScript
„Why two programming languages?“
Answer: division of labor, specialization
Java for high-priced components/widgets
(applet/plugin model)
JavaScript for mass market web designers
(glue code between components,
scripting of Java Applets,
form validation, image rollovers,)
In the last decade Java has almost disappeared on the
client side of the Web
Inhalt: http://de.slideshare.net/BrendanEich/splash-9915475 13
Bild: Martin Kliehm from Frankfurt am Main, Germany, http://commons.wikimedia.org/wiki/File:Brendan-Eich-20080310.jpg
14. Война и миръ
ES3 (2000) Netscape Navigator 6,
Firefox 1.0,
Internet Explorer 5.5-8
(functions expressions, RegExp, try-catch-finally, switch, do-while)
ES4 (2008) ActionScript 2-3 in Adobe Flash
Project Harmony wird gestartet
ES5 (2010) Firefox 4
Internet Explorer 9/10
WebKit
(strict mode, neues Objektmodell, bessere Arrays, API-Verbesserungen)
ES6 aka ES.Next
aka Harmony
(Block Scopes, Modules, optional Arguments, Classes)
Bild: Deutsches Bundesarchiv (German Federal Archive), Bild 183-14059-0018 14
http://commons.wikimedia.org/wiki/File:Bundesarchiv_Bild_183-14059-0018,_Berlin,_Oberbefehlshaber_der_vier_Verb%C3%BCndeten.jpg
20. Basistypen
Basistypen sind
• Zahlen (number)
• Strings (string)
• Boolean (boolean)
• null
• undefined
Diese sind unveränderlich.
20
21.
22. These
JS ist eine Script-Sprache
Eine strukturierte / objektorientierte Programmierung
ist nicht möglich
22
23. Objekte
Alle Datentypen außer Basistypen sind Objekte:
• Arrays,
• Funktionen,
• Reguläre Ausdrücke (Funktionen) und
• Objekte selbst
23
24. Object
// Objects map keys (string) to values (properties):
var obj = new Object();
// there is an Object literal
var myCar = {
‘brand’: ‘Ferrari’,
‘color’: ‘red’,
‘drive’: function() {....}
};
24
28. These
Objektorientierte Programmierung ist nur
klassenbasiert möglich
JS bietet keine Klassen
JS bietet kein eigenes Typsystem
28
29. Prototypen
Objekte werden über das new-Keyword und eine
Konstruktor-Funktion gebildet.
Konstruktor-Funktionen beginnen per Konvention mit
einem Großbuchstaben (im Ggs. zu „normalen“
Funktionen).
29
31. Das new-Keyword
Wird die new-Anweisung vergessen, dann wird die
Funktion nicht als Konstruktor-Funktion aufgerufen.
Es steht dann kein neues Objekt als this-Objekt zur
Verfügung.
Das this-Objekt ist dann beispielsweise das globale
Objekt.
Das heißt, die Funktion wird die übergebenen Parameter
dem globalen Objekt zuweisen.
31
32. Prototype erweitern
// zwei Rechtecke erzeugen
var firstRectangle = new Rectangle(5, 5);
var secondRectangle = new Rectangle(10,10);
// den Prototypen _aller_ Rechtecke erweitern
Rectangle.prototype.color = "blue";
firstRectangle.color; // blue
32
39. Duck Typing
Wenn ein Objekt aussieht wie eine Ente
und sich verhält wie eine Ente, dann ist es
auch eine Ente.
(Und wenn es nicht aussieht wie eine
Ente, dann lässt es sich zur Laufzeit so
erweitern, dass es aussieht wie eine Ente.)
39
40. ES5, ES6 und TypeScript
Mit ES5 wurde eine neue Objekt-Erzeugung (mit
Vererbung von Objekten) eingeführt.
ES6 wird voraussichtlich Klassen bringen.
Auch in ES3 lässt sich Vererbung (über Patterns)
implementieren.
Wem diese Patterns zu unbequem sind, kann eine Meta-
Sprache wie TypeScript verwenden, die voraussichtlich
evtl. kompatibel zu ES6 sein wird, aber zu ES3 kompiliert.
40
41.
42. Funktionen
Funktionen sind gleichwertig zu Objekten.
Funktionen können als Parameter eine andere Funktion
übergeben und auch als Rückgabewert zurückgegeben
werden.
42
44. Funktionen als Parameter
// http://jsfiddle.net/oochs/EAHTU/
// Sortiere ein Array mit einer anonymen Funktion als Sortiervorschrift
var numbers = [27, 2, 10, 4];
var lexicalySortedNumbers = [10,2,27,4];
var sortedNumbers = [2,4,10,27];
numbers.sort();
console.log(String(numbers) !== String(sortedNumbers)); // ouch!
console.log(String(numbers) === String(lexicalySortedNumbers));
// übergebe der sort-funktion eine Funktion als Parameter
numbers.sort(function(a, b) {
return a-b;
});
console.log(String(numbers) === String(sortedNumbers));
44
46. Scoping (this)
Auf den aktuellen Kontext greift man über „this“ zu
• globaler Namensraum bei Funktionsaufruf
• Objekt-Namensraum bei Konstruktor-Funktion
• Objekt-Namensraum bei Methodenaufruf
• Aufrufer-Objekt bei Events (im Browser)
// http://jsfiddle.net/u9GCa/
• definierbarer Namensraum durch call und apply
46
47. Function
x = 23;
function plus(a, b) {
return this.x + a + b;
}
console.log(plus(1, 1)); // 25
console.log(plus.call({x : "Hello"}, 1, 1)); // Hello11
console.log(plus.apply({x: 42}, [1, 1])); // 44
// -- http://jsfiddle.net/oochs/VD5UU/
47
48. Closures = Code + Scope
Eine Funktion wird stets in einem
Funktionsgeltungsbereich ausgeführt.
Der Funktionsgeltungsbereich gilt auch, wenn in einer
Funktion eine weitere, innere Funktion definiert wird.
Diese Funktion hat dann Zugriff auf die Variablen der
äußeren Funktion.
Ausnahmen sind hier this und der Bonusparameter
arguments, da diese Parameter von jeder Funktion selbst
überschrieben werden.
48
49. Closures
function outherFunction() {
var x = "Hello";
function innerFunction() {
return x;
}
return innerFunction();
}
outherFunction(); // Hello
outherFunction.x; // undefined
49
56. These
Über Packages hinaus muss Code in Libraries und Moduln
gepflegt werden
In Java existieren dafür JARs, OSGI-Module und
demnächst das standardisierte Java Module System
Die Unterstützung von JS dafür ist mangelhaft
56
59. Require durch AMD (require.js)
// @see http://freshbrewedcode.com/derekgreer/2011/11/28/getting-started-with-requirejs/
require(["customerModule", "orderModule"], function(c, o) {
var customers = c.getCustomers();
// do something with customers ...
var orders = o.getOrders();
// do something with orders ...
});
59
60. Fazit
JS wurde als Script-Sprache für den Browser entwickelt
Wurzeln sind nicht Java (sondern exotische
Sprachen, deren Konzepte niemand kennt)
JS ist dynamisch typisiert
JS ist objektorientiert
JS ist funktional
Packages lassen sich über Objekte nachbilden
Für Module existieren etablierte Ansätze
60
67. Documentation
JSDocToolkit - JsDoc Toolkit is an application, written in
JavaScript, for automatically generating template-
formatted, multi-page HTML (or XML, JSON, or any other
text-based) documentation from commented JavaScript
source code.
67
70. JSLint
JSLint - ... Will hurt your feelings. It takes a JavaScript
source and scans it. If it finds a problem, it returns a
message describing the problem and an approximate
location within the source. The problem is not
necessarily a syntax error, although it often is.
-- http:/www.jslint.com/lint.html
-- http:/code.google.com/p/jslint4java/
70
71. JSHint
JSHint is a community-driven tool to detect errors and
potential problems in JavaScript code and to enforce
your team's coding conventions.
-- http://www.jshint.com/
71
72. Testing mit Jasmine
Based on RSpec and JSpec
No dependencies to any browser
http://pivotal.github.com/jasmine/
72
73. BDD
Bridge between programmers (code
writers) and domain experts
(spec writers)
Test Case Borders
73
74. BDD
Test method names should be sentences
Sentence template
keeps test methods focused
74