Jax2013 JavaScript für Java-Entwickler

transcript

Oliver Zeigermann | http://zeigermann.eu

Schmerzfreies JavaScript für Java-Entwickler

Donnerstag, 25. April 13

Umfrage zum Start

Wer glaubt das?

1. JavaScript ist eine schlechte Sprache

2. Es ist gut für meine Karriere, JavaScript zu beherrschen

Themen

• Hello World

• Grundlagen JavaScript

• Aufklärung gängiger Vorurteile

• Tools und Frameworks

• Diskussion

Hello World

Hello World #1<!DOCTYPE html><html><head> <script> alert("Hello World"); </script></head><body></body></html>

Hello World #2<!DOCTYPE html><html><body> <div id="log"></div> <script> var element = document.

getElementById("log"); element.innerHTML =

"<h1>Hello World</h1>"; </script></body></html>

Hello World #3

node -e "console.log('Hello World');"

Hello World #4

Grundlagen

Sprach-Konzepte• Alles (bis auf Primitive) ist ein Objekt

• Alle Objekte sind "mutable"

• Funktionen sind Bürger erster Klasse

• Sind Objekte

• Können Daten enthalten

• Machen Scopes und Closures

• Protoypische Vererbung

Objektvar map = {olli: 'Huhu', zweites$Feld: 1,

$: "Auch sowas geht!"};map.$;map["zweites$Feld"];map.hund = "Ganz neu geht auch";map.f = function() { return "Aha!" };

for (var entry in map) { console.log(entry + ":" + map[entry]);}

Arrays

var array = ["a", "b", "c"];array[1] = 20;array instanceof Object;array.push(4);array.splice(1, 2);

for (var entry in array) { console.log(entry + ":" + array[entry]);}

Funktionenvar f1 = function(p1, p2) { return p1 + p2;}var result1 = f1(1,2);result1 === 3;

function f2() { console.log("Called!");}var result2 = f2();result2 === undefined;

Scopes

(function () { var achso = "Ich bin weg";})();

console.log(achso); // ReferenceError

Vorurteile

Die gängigsten Vorurteile• JavaScript hat keine Typen

• In JavaScript kann man keine Klassen und keine Vererbung ausdrücken

• Module und Kapselung sind nicht möglich

• Es ist sehr leicht, versehentlich globale Variablen zu erzeugen

• JavaScript nervt nur und hat keine coolen Sprachfeatures

Vorurteil: JavaScript hat keine Typen

Typentypeof "String" === "string";

typeof 1 === "number";typeof 1.0 === "number";

typeof true === "boolean";

typeof {} === "object";

typeof function() {} === "function";

Vorurteil: In JavaScript kann man keine Klassen und keine Vererbung ausdrücken

Klassen: Gebrauch

var olli = new Person("Olli", 42);

olli instanceof Person;

olli.sayHello("Oma");// => Olli says hello to Oma

Klassen: Definitionfunction Person(name, age) { this.name = name; this.age = age;}

Person.prototype.sayHello = function(name) {

console.log( this.name + " says hello to " + name);

Vererbungfunction Customer(id, name, age) { // super constructor Person.call(this, name, age); this.id = id;}

// extendsCustomer.prototype = Object.create(Person.prototype);Customer.prototype.constructor = Customer;

Vorurteil: Module und Kapselung sind

nicht möglich

Kapselungvar Module = {};(function() { function InternalStuff() {...} function Person(name, age) { // uses class InternalStuff } Module.Person = Person;})();

var olli = new Module.Person("Olli", 42);Module.InternalStuff === undefined;

Wie die Kapselung funktioniert: Closures

Closures frei nach Douglas Crockford

Eine innere Funktion hat immer Zugriff auf alle Variablen und Parameter ihrer äußeren Funktion,

auch wenn diese äußere Funktion bereits beendet ist

Vorurteil: Es ist sehr leicht, versehentlich globale

Variablen zu erzeugen

Strict Mode

"use strict";

(function (param) { var value = 10; // error: no accidental setting of // global variable vaule = value + param; return value;}());

Vorurteil: JavaScript nervt nur und hat keine coolen Sprachfeatures

Closures seit ES5 vs. Java8var array = [1, 2, 3];array.forEach(function(e){ console.log(e);});

array.filter(function(e){ return e > 2;});

array.map(function(e){ return e + 100;});

Mehr Vorurteile

• Es gibt keinen Standard, jeder Browser implementiert seinen eigenen Dialekt

• JavaScript ist langsam

• JavaScript ist wie CSS und HTML für Designer, nicht für richtige Entwickler

Tools und Frameworks

Entwicklungsumgebungen

• WebStorm

• Chrome Dev-Tools

• vi / emacs / TextMate /Sublime Text / etc. gehen natürlich auch

Live-Demo WebStorm

Frameworks• jQuery

• Twitter Bootstrap

• Jasmine

• Ext JS

• AngularJS

• TodoMVC

• Standard-JavaScript-Bibliothek

• Fast überall zu finden

• Adressiert Probleme bei der Programmierung des DOMs

• Flexible Trennung von View und Logik

• Auch für Erweiterung klassischer Webanwendungen

jQuery

$(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); }); });

Testen mit Jasminedescribe("Calculator"

... it("principle" ....expect(principle). toEqual(199990);

);...);

Twitter Bootstrap: Responsive Layout

<h1>Hello, world!</h1>

<a class="btn btn-primary">Learn more »</a>

</div>

<h2>Heading</h2>

Business-Anwendungen mit Ext JS

AngularJS

• Motto: HTML enhanced for web apps!

• Wie würde HTML aussehen, wenn es für Anwendungen entwickelt worden wäre?

Hello World AngularJS<!doctype html><html ng-app> <head> <script src="lib/angular.min.js"> </script> </head> <body> <input ng-model="name"> <p>Hello {{name}}!</p> </body></html>

TodoMVC

http://todomvc.com/Donnerstag, 25. April 13

Bonus-Vorurteil

JavaScript ist nicht gut geeignet für große, langlebige Projekte

Hauptgrund: Fehlende statische Typisierung

Live-Demo TypeScript

Zusammenfassung• Viele Vorurteile gegenüber JavaScript beruhen

auf Missverständnissen

• Strukturgebende Elemente (Klassen, Module) sind in JavaScript über Patterns möglich

• JavaScript hat coole Sprachfeatures

• Es gibt mächtige Werkzeuge und Frameworks

• TypeScript erleichtert Entwicklung im großen Stil

Umfrage zum Abschluss

Wer glaubt das nun?

1. JavaScript ist eine schlechte Sprache

2. Es ist gut für meine Karriere, JavaScript zu beherrschen

Fragen / Diskussion

Oliver Zeigermannhttp://zeigermann.eu

Jax2013 JavaScript für Java-Entwickler

Documents