ECMAScript oder ? - das ist hier die Frage vs... · 17 © Orientation in Objects GmbH ECMAScript vs. TypeScript 33 CODE BETTER (TODAY) app.ts app.js (ECMAScript 5) class Person {name:

1

Orientation in Objects GmbH

Weinheimer Str. 6868309 Mannheim

[email protected]:

ECMAScript oder ?

- das ist hier die Frage -

1.0

ECMAScript vs. TypeScript© Orientation in Objects GmbH

Ihr Sprecher

2

Thorsten Maier

Trainer, Berater, Entwickler

@ThorstenMaier

2

ECMAScript vs. TypeScript© Orientation in Objects GmbH 3

JavaScript hat(te) einen

schlechten Ruf


“Nearly all of the books about

JavaScript are quite awful.”

The World's Most Misunderstood Programming Language

Douglas Crockford2001

“JavaScript has its share

of design errors.”

“The specification is of

extremely poor quality.”

“Most of the people writing in

JavaScript are not programmers.”

“JavaScript has more in

common with functional

languages like Lisp or

Scheme than with C or Java”

3


Alles besser mit ECMAScript?Ein wenig Historie


1995Brendan Eich

Mocha / LiveScript

10 Tage

März 1996Netscape 2.0 / JS 1.0

IE 3.0 / JScript

Juni 1997

ES 1.0

JavaScript JScript ActionScript ES 4

Dez. 2009ES 5

Yahoo, Google, …

Juni 2015ES 2015

JS wird professionell1999

4


ES 52009

7

ES 20152015

JavaScript wird professionell


for (var i = 0; i < 5; i++) {

var text = "Hello " + i;

}console.log(text);

8

for (var i = 0; i < 5; i++) {

let text = "Hello " + i;

}console.log(text);

Block-Scoped Variablen

5


var Company = (function () {function Company(name) {

this.name = name;

}Company.prototype.getName = function () {

return this.name;

};return Company;

}());

9

Klassen

class Company {

constructor(name) {this.name = name;

}getName() {

return this.name;

}}


Vererbung

class Car {

drive() {console.log("Car is driving.");

}}

class Cabrio extends Car {

openTop() {console.log("Top is open.");

}}

-

6


var Person = (function () {

function Person() {

}Person.sayYourSpecies = function () {

console.log("Ich bin ein Mensch");};return Person;

}());Person.sayYourSpecies();

11

Statische Elemente

class Person {

static sayYourSpecies() {

console.log("Ich bin ein Mensch");}

}Person.sayYourSpecies();


Module

-

export const HELLO_WORLD = "Hello World" ;

import { HELLO_WORLD } from ‘./constants.js'

constants.js

index.js

7


var add = function (a, b) {

return a + b;

};

var add = (a, b) => a + b;

Arrow Functions


var name = "Thorsten";

var t = "Hallo " + name + "!";

14

let name = "Thorsten";

let t = `Hallo ${name}!`;

Template Strings

8


function msgAfterTimeout (who, timeout) {return new Promise((resolve, reject) => {

setTimeout(() => resolve( `Hello ${who}!` ), timeout);});

}msgAfterTimeout( "Thorsten" , 2000)

.then(msg => { console.log( `${msg}` )});

-

Promise


ES 2015 - Browser Support

9


var _createClass = function () {

function defineProperties(target, props) {

for (var i = 0; i < props.length; i++) {

var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable

|| false; descriptor.configurable = true;

if ("value" in descriptor) descriptor.writable = true;

Object.defineProperty(target, descriptor.key, descriptor);}

}return function (Constructor, protoProps, staticProps) {

if (protoProps) defineProperties(Constructor.prototype, protoProps);

if (staticProps) defineProperties(Constructor, staticProps);

return Constructor;

};}();function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) {

throw new TypeError("Cannot call a class as a function"); }

}

var Foo = function () {

function Foo() {

_classCallCheck(this, Foo);}

_createClass(Foo, [{key: "bar",value: function bar(x) {

return "foo bar " + x;

}}]);

return Foo;

}();

var foo = new Foo();

console.log(foo.bar("baz"));

class Foo {

bar(x) {return `foo bar ${x}`;

}}const foo = new Foo();

console.log(foo.bar("baz"));

ES 2015

ES 5


Hört sich doch alles nicht schlecht an.

Warum jetzt noch ?

10


Plain scriptsModulesystems

(Babel, …)

Compilers

(TypeScript, Flow, …)

TypeSystems


11


ECMAScript that scales


Statisch typisiertes Superset von ECMAScript

Kompiliert zu ECMAScript

12


2.0Statisches Typsystem

ES 2016** Operator

Array.prototype.includes

ES 5Funktionale

Programmierung

Properties

ES 2017await/async

Shared memory

atomics

…

Block-Scope

Module

Klassen

Generatoren

Promises

Collections

Arrow

functions

…

ES 2015

2.5


Open Source

13


Gute Tool-Unterstützung

Features from future today


CODE COMPLETION

ECMAScript

14


CODE COMPLETION

TypeScript


CODE SMARTER

15


CODE SMARTER

JS Dev Kopfwissen?!

lib.es6.d.ts


Finde den Fehler

CODE SMARTER

16


CODE SMARTER


CODE CONFIDENTLY

17


CODE BETTER (TODAY)

app.ts app.js(ECMAScript 5)

class Person {name: string;

constructor(name: string) {this.name = name;

}

sayHello() {console.log(`Hello my name is

${this.name}!`);}

}

var Person = /** @class */ (function () {function Person(name) {

this.name = name;}Person.prototype.sayHello = function () {

console.log("Hello my name is " + this.name + "!");

};return Person;

}());


CODE BETTER (TODAY)

app.ts app.js(ECMAScript 5)

function sortPersonByName(a: Person[])

{

var result = a.slice(0);

result.sort((x, y) =>

x.name.localeCompare(y.name));

return result;

}

(y.name);

function sortPersonByName(a) {

var result = a.slice(0);

result.sort(function (x, y) {

return x.name.localeCompare(y.name);

});

return result;

}

18


CODE BETTER (TODAY)

ECMAScript 5

async function fetchJson(url) {try {

let request = await fetch(url);let text = await request.text();return JSON.parse(text);

} catch (e) {console.log(`ERROR: ${e.stack}`);

}}

fetchJson('http://example.com/some_file.json').then(obj => console.log(obj));

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {return new (P || (P = Promise))(function (resolve, reject) {function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }step((generator = generator.apply(thisArg, _arguments || [])).next());});};var __generator = (this && this.__generator) || function (thisArg, body) {var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;function verb(n) { return function (v) { return step([n, v]); }; }function step(op) {if (f) throw new TypeError("Generator is already executing.");while (_) try {if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;if (y = 0, t) op = [0, t.value];switch (op[0]) {case 0: case 1: t = op; break;case 4: _.label++; return { value: op[1], done: false };case 5: _.label++; y = op[1]; op = [0]; continue;case 7: op = _.ops.pop(); _.trys.pop(); continue;default:if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }if (t[2]) _.ops.pop();_.trys.pop(); continue;}op = body.call(thisArg, _);} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };}};function fetchJson(url) {return __awaiter(this, void 0, void 0, function () {var request, text, error_1;return __generator(this, function (_a) {switch (_a.label) {case 0:_a.trys.push([0, 3, , 4]);return [4 /*yield*/, fetch(url)];case 1:request = _a.sent();return [4 /*yield*/, request.text()];case 2:text = _a.sent();return [2 /*return*/, JSON.parse(text)];case 3:error_1 = _a.sent();console.log("ERROR: " + error_1.stack);return [3 /*break*/, 4];case 4: return [2 /*return*/];}});});}fetchJson('http://example.com/some_file.json').then(function (obj) { return console.log(obj); });

app.ts


<3

CODE BIGGER

19


ist wie die Schweiz für Frameworks“

Anders Hejlsberg (chief designer of C# and co-designer of TypeScript)

„


2.02.1

2.2

2.4

Aug 2016

Nov 2016

Feb 2017

Apr 2017

Jun 2017

Aug 20172.3

2.56 Releases

in 12 Monaten

seeeehr viele neue Feature

20


Wer hatte schon mal eine NullPointerException?

JavaScript hat „null“ und „undefinded“ ☺


NULL SAFE

21


Details zum Typsystem


function test(s: string | string [] | null | undefined) {if (s) {

s;

} else {

s;

}}

function test(s: string | string [] | null | undefined) {if (s) {

s;

} else {

s;

}}

42

Wann ist s == true?

(parameter) s: string | string[]

(parameter) s: string | null | undefined

22


function test(s: string | string [] | null | undefined) {if (typeof s === "object") {

s;

} else {

s;

}}

function test(s: string | string [] | null | undefined) {if (typeof s === "object") {

s;

} else {

s;

}}

43

Wann ist s === “object”?

(parameter) s: string[] | null

(parameter) s: string | undefined


function test(s: string | string [] | null | undefined) {if (s == undefined) {

s;

} else {

s;

}}

function test(s: string | string [] | null | undefined) {if (s == undefined) {

s;

} else {

s;

}}

44

Wann ist s == “undefined”?

(parameter) s: null | undefined

(parameter) s: string | string[]

23


function test(s: string | string [] | null | undefined) {if (s === undefined) {

s;

} else {

s;

}}

function test(s: string | string [] | null | undefined) {if (s === undefined) {

s;

} else {

s;

}}

45

Wann ist s === “undefined”?

(parameter) s: undefined

(parameter) s: string | string[] | null


type Shape = { kind: "circle", radius: number } |

{ kind: "rectangle", w: number, h: number } |

{ kind: "square", size: number };

function getArea(shape: Shape) {

switch (shape.kind) {

case "circle":

return Math.PI * shape. ** 2;

case "rectangle":

return shape.h * shape.w;

case "square":

return shape.size ** 2;

}

throw new Error("Invalid shape"); }

type Shape = { kind: "circle", radius: number } |

{ kind: "rectangle", w: number, h: number } |

{ kind: "square", size: number };



case "circle":


case "rectangle":


case "square":


}

throw new Error("Invalid shape"); }

46

LITERAL TYPES

24




case "circle":


case "rectangle":


case "square":


}

assertNever(shape);}

function assertNever(obj: never) {throw new Error("Invalid shape");

}



case "circle":


case "rectangle":


case "square":


}

assertNever(shape);}

function assertNever(obj: never) {throw new Error("Invalid shape");

}

47

LITERAL TYPES


TYPES in ECMASCRIPT

{"requires": true,"lockfileVersion": 1,"dependencies": {

"jquery": {"version": "3.2.1"

},"lodash": {

"version": "4.17.4"}

}}

{"requires": true,"lockfileVersion": 1,"dependencies": {

"jquery": {"version": "3.2.1"

},"lodash": {

"version": "4.17.4"}

}}

package.json

25


TYPES in ECMASCRIPT

_.filter("1,2,3".split(",").map(x => parseInt(x)), x => x.);_.filter("1,2,3".split(",").map(x => parseInt(x)), x => x.);

main.js


https://npm-stat.com/charts.html?package=typescript&from=2016-01-01&to=2017-09-30

26


Ist immer die richtige Wahl?


C:\Users\tmaier\myProject> tsc app.ts -w12:20:32 - Compilation complete. Watching for file changes.

COMPILER NOTWENDIG

27


DEBUGGING


import $ from "jquery";

$(function(){ alert('Hello');

});

$(function(){ alert('Hello');

});

npm install --save-dev @types/jquery

TYPDEFINITIONEN FÜR BIBLIOTHEKEN

28


ECMAScript oder ?

Wie immer ☺☺☺☺

It depends!


?

Kurzes Projekt: nein

Sehr einfaches Projekt: nein

Refactoring: ja

Unternehmenskritisch: ja

Hohe Fluktuation: ja

Framework: ja

29



[email protected]

??

? ?

????

Fragen ?



[email protected]

Vielen Dank für Ihre Aufmerksamkeit !

Documents

ECMAScript oder ? - das ist hier die Frage vs... · 17 © Orientation in Objects GmbH ECMAScript vs. TypeScript 33 CODE BETTER (TODAY) app.ts app.js (ECMAScript 5) class Person {name: