Oliver Zeigermann / @DJCordhose
Online version at: http://djcordhose.github.io/serious-javascript/slides/jax.html
Die Untersuchung ist Gegenstand dieser Session
So sieht eine moderne 08/15 Webanwendung aus
Erzeugt mit http://yeoman.io/
Untersuchung der Frage: Haben JavaScript-Projekte keine Struktur und sind Chaos?
yo webapp
Untersuchung der Frage: Erfordern JavaScript-Projekte in jedem Fall eine polyglotte Programmierung?
var http = require('http');
function handleRequest (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}
http.createServer(handleRequest).listen(1337);
Starten
node server.js
var BigDecimal = Java.type('java.math.BigDecimal');
function calculatePercentage(amount, percentage) {
var result = new BigDecimal(amount).multiply(
new BigDecimal(percentage)).divide(new BigDecimal('100'),
2, BigDecimal.ROUND_HALF_EVEN);
return result.toPlainString();
}
Ja, das ist JavaScript-Code
Untersuchung der Fragen: Sind JavaScript-Projekte von Anfang an unwartbar und können nur im kleinen Rahmen funktionieren?
Typen werden über Konstruktor-Funktionen definiert
/** @constructor */
function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
};
var olli = new Person('Olli');
olli.getName() === 'Olli';
var person = {};
(function () {
// Constructor
function Person(name) {
this.name = name;
}
// Factory
function create(name) {
return new Person(name);
}
// Export der Factory-Methode
person.createPerson = create;
})();
var olli = person.createPerson('Olli');
/**
*
* @interface
*/
function HasName() { }
/**
* @returns {string}
*/
HasName.prototype.getName = function() {};
/**
*
* @param name {string}
* @param alter {number}
* @param geschlecht {string=}
* @constructor
* @implements {HasName}
*/
function Person(name, alter, geschlecht) {
this.name = name;
this.alter = alter;
this.geschlecht = geschlecht;
}
interface HasName {
getName(): string;
}
class Person implements HasName {
constructor(private name: string, private alter: number,
private geschlecht: string = 'F') {
}
getName() {
return this.name;
}
}
var olli: HasName = new Person('Olli', 43);
function olli() {
console.log("aha")
func();
variable = 10;
var myVar;
10 == "10";
if (true) console.log('Yo');
}
Untersuchung der Frage: Sind JavaScript-Projekte allein schon wegen der Ablaufumgebung (Browser) der Horror?
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<div id="log"></div>
<script>
var element = document.getElementById("log");
element.innerHTML = "<h1>Hello World</h1>";
</script>
</body>
</html>
Run
<!DOCTYPE html>
<html>
<head>
<title>Hello World jQuery!</title>
<body>
<div id="log"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#log").html("<h1>Hello World</h1>");
});
</script>
</body>
</html>
Run
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="HelloController">
<input ng-model="greeting">
<p>{{greeting}}, World!</p>
</body>
</html>
function HelloController($scope) {
$scope.greeting = 'Hello';
}
Run
Ext.application({
name: 'Hello World',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Hello World',
html : 'Hello!'
}
]
});
}
});
Run