Enterprise JavaScript.
Abendvortrag „JavaScript für Java Enterprise-Entwickler“

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

Roadmap
Grundlagen von JavaScript
Wartbarer Code
KISS-Architekturen
3

JS Grundlagen von JS
Core
4

Primordial Soup
1995 Mocha Netscape Navigator
LiveScript Netscape Navigator
1996 JavaScript 1.0 Sun|Netscape Alliance
JScript Internet Explorer 3.0
ECMAScript ECMA
5

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

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/

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

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

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

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

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

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

Война и миръ
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

Versionen
Java-Script ECMA-Script Firefox Internet Opera Safari Chrome
Explorer
1.5 3 1.0 5.5 - 8 6.0 - 10.0 3.0 - 4.0 1
1.6 E4X 1.5
1.7 2.0
1.8 3.0
1.9 5 4 9 11 5.0 5
5.1 latest 10 11.60 5.1 13
15

These
Nur in einer statisch typisierten Sprache lässt sich
zuverlässiger Code schreiben.
JS kennt keine Typisierung
17

Dynamische Typisierung
18

Typen
19

Basistypen
Basistypen sind
• Zahlen (number)
• Strings (string)
• Boolean (boolean)
• null
• undefined
Diese sind unveränderlich.
20

These
JS ist eine Script-Sprache
Eine strukturierte / objektorientierte Programmierung
ist nicht möglich
22

Objekte
Alle Datentypen außer Basistypen sind Objekte:
• Arrays,
• Funktionen,
• Reguläre Ausdrücke (Funktionen) und
• Objekte selbst
23

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

Method Invocation
var myObject = {
val: 0,
increment: function (inc) {
this.val += inc;
}
};
myObject.increment(1);
myObject.val; // 1
25

JSON
json = {
‘Array : [1, ‘zwei’,Math.PI],
‘Date" : ‘Thu Apr 26 2012 22:45:19 GMT+0200 (CEST) ’,
‘String" : ‘Hello World’,
‘Boolean’ : true,
‘Number’ : 42,
‘RegExp’ : /^(a-ZA-Z)*$/,
‘Binary’ :
‘data:image/png;base64,iVBORw0KGgoAAAAN==’,
‘Reference’ : ‘http://www.holisticon.de/about.rdf’,
‘Object’ : {[...]}
// no functions!
}
26

These
Objektorientierte Programmierung ist nur
klassenbasiert möglich
JS bietet keine Klassen
JS bietet kein eigenes Typsystem
28

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

Constructor
/**
* @Constructor
*/
function Rectangle(width, height) {
this.width = width;
this.height = height;
}
// Benutzung
var myRectangle = new Rectangle(5, 5);
myRectangle.width; // 5
30

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

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

Reflection
Rectangle.prototype.color = "blue";
firstRectangle.color; // blue
firstRectangle.hasOwnProperty("color"); // false
33

Eigenschaften löschen
Rectangle.prototype.color = "blue‚;
firstRectangle.color = "red‚;
firstRectangle.color; // red
delete firstRectangle.color; // true
firstRectangle.color; // blue
34

Konstruktor- & Protoype-Referenz
/**
* Patterns für Vererbung sind über Konstruktor- und
* Prototype-Referenz möglich
*/
// Konstruktor-Referenz
var firstRectangle = new Rectangle(4, 4);
firstRectangle.constructor.name; // Rectangle
var secondRectangle = new firstRectangle.constructor(5, 5);
// Prototype-Referenz
firstRectangle.__proto__ == Rectangle.prototype // Chrome way
firstRectangle.constructor.prototype == Rectangle.prototype // ES3
35

Mixins
function mixin() {
child = {};
for (var arg = 0; arg < arguments.length; arg ++) {
for (var prop in arguments[arg]) {
if (arguments[arg].hasOwnProperty(prop)) {
child[prop] = arguments[arg][prop];
}
}
}
return child;
}
36

Mixins
var wolpertinger = mixin(
{fly : function() {print("fly");}},
{swim: function() {print("swim");}},
{bark: function() {print("bark");}}
)
wolpertinger.bark(); // bark
37

jQuery.extend
// http://api.jquery.com/jQuery.extend/
// Merge the contents of two or more objects together
// into the first object
var wolpertinger = $.extend({}, duck, dog);
38

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

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

Funktionen
Funktionen sind gleichwertig zu Objekten.
Funktionen können als Parameter eine andere Funktion
übergeben und auch als Rückgabewert zurückgegeben
werden.
42

Funktionsliteral
function plus(x, y) {
return x + y; // ansonsten undefined
}
plus(1,2); // 3
43

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

Funktionen als Parameter
http://jsfiddle.net/oochs/EAHTU/
45

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

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

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

Closures
function outherFunction() {
var x = "Hello";
function innerFunction() {
return x;
}
return innerFunction();
}
outherFunction(); // Hello
outherFunction.x; // undefined
49

Scope Chain
50

These
JS kennt keine Packages
Code lässt sich in JS nur schwer organisieren
52

Namespaces
// http://jsfiddle.net/oochs/AA7TV/
var com = {};
com.holisticon = {};
com.holisticon.Person = function(name) {
this.name = name;
}
x = new com.holisticon.Person("Oliver");
console.log(x.name); // Oliver
53

Namespaces
// http://jsfiddle.net/oochs/pECUe/
var com = {
holisticon : {
Person : function(name) {
this.name = name;
}
}
};
x = new com.holisticon.Person("Oliver");
console.log(x.name);
54

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

Common JS
57

Define durch AMD (require.js)
// @see http://freshbrewedcode.com/derekgreer/2011/11/28/getting-started-with-requirejs/
// customerModule
define(function() {
return {
getCustomers: function() { /* do something */ }
}
});
// oderModule
define(function() {
return {
getOrders: function() { /* do something */ }
}
});
58

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

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

JS Wartbarer Code
Core
61

These
JS-Code ist nicht wartbar
Es fehlen Konzepte wie Coding Conventions
Build-Server und automatisierte QS wird in JS selten
verwendet
62

Build-Prozess
Wiederkehrende Aufgaben
automatisieren
Build Script, z.B. bash
Bild:
CC MakerBot Industries
63

Java Enterprise-Umfeld
Plugin-Konzept
wro4j
jsdoctk-plugin
jasmine-maven-plugin
64

Grunt
Grunt is a task-based
command line build tool for
JavaScript projects.
-- https://github.com/cowboy/grunt
65

JS Building Steps
Packaging Linting Testing Doc
66

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

Generated documentation
68

Packaging
69

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

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

Testing mit Jasmine
Based on RSpec and JSpec
No dependencies to any browser
http://pivotal.github.com/jasmine/
72

BDD
Bridge between programmers (code
writers) and domain experts
(spec writers)
Test Case Borders
73

BDD
Test method names should be sentences
Sentence template
keeps test methods focused
74

BDD
„It should do something“
75

Story
A Barkeeper should mix drinks.
76

Acceptance criteria
Given an order with a list of drink names.
A Barkeeper should mix drinks.
Which are on the list.
77

Scenario
Given an order with a wodka lemon.
When a barkeeper receives this order.
Then he should mix and return a wodka lemon drink.
78

Scenario -> Spec
Given(„an order of a wodka lemon“)
It („the barkeeper“)
Should(return [„wodka lemon“]);
79

Spec
describe(„Barkeeper“) {
var order;
beforeEach(function() {
order = new Order([„Wodka Lemon“]);
};
it(„should return a wodka lemon“, function() {
barkeeper.receive(order);
var drinks = barkeeper.mix();
expect(drinks).toEqual([new WodkaLemon ()]);
};
};
80

Spec result is readable, too
Barkeeper
should return a wodka lemon OK
81

Jasmine
Webrunner Ruby
Node.js JSTestDriver
Java / Maven ...
82

Jasmine im Webdriver im Einsatz
83

KISS-Architekturen
85
http://www.sxc.hu/photo/1342145

Pyramide
UI
Business
Logic
Database
Idee: Oliver Zeigermann
86

UI: UI-Bindings
View Model
87

UI: MVC-Frameworks
Controller
View Model
88

UI: View – ViewModel – Model
89

MVC im Browser
90

MVC im Browser
91

TodoMVC
http://addyosmani.github.com/todomvc/
92

93