ECMAScript oder · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: [email protected] ECMAScript oder ? - das ist hier die Frage -

Orientation in Objects GmbH

Weinheimer Str. 68

68309 Mannheim

www.oio.de

[email protected]:

ECMAScript oder ?

- das ist hier die Frage -

1.1

ECMAScript vs. TypeScript© Orientation in Objects GmbH

Ihr Sprecher

2

Thorsten Maier

Trainer, Berater, Entwickler

SchwerpunkteArchitektur

ProzesseQualitätssicherung

@ThorstenMaier

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”


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


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


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.");

}}

-


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


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


ES 2015 - Browser Support


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 ?


Plain scriptsModulesystems

(Babel, …)

Compilers

(TypeScript, Flow, …)

TypeSystems



ECMAScript that scales


Statisch typisiertes Superset von ECMAScript

Kompiliert zu ECMAScript


2.0Statisches Typsystem

ES 2016** Operator

Array.prototype.includes

ES 5Funktionale

ProgrammierungProperties

ES 2017await/async

Shared memoryatomics

…

Block-ScopeModuleKlassen

GeneratorenPromises

CollectionsArrow

functions…

ES 2015

2.5


CODE COMPLETION

ECMAScript


CODE COMPLETION

TypeScript


CODE SMARTER


CODE SMARTER

JS Dev Kopfwissen?!

lib.es6.d.ts


Finde den Fehler

CODE SMARTER


CODE SMARTER


CODE CONFIDENTLY


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)

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


ist wie die Schweiz für Frameworks“

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

„


2.0

Aug 2016

2.1

Nov 2016

2.2

Feb 2017

2.4

Jun 2017

Apr 2017

2.3 Aug 2017

2.5

7 Releases

in 14 Monaten

seeeehr viele neue Feature

Okt 2017

2.6


Wer hatte schon mal eine NullPointerException?

JavaScript hat „null“ und „undefined“ ☺


NULL SAFE


Details zum Typsystem


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

s;

} else {

s;

}}

38

Wann ist s == true?

(parameter) s: string | string[]

(parameter) s: string | null | undefined


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

s;

} else {

s;

}}

39

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;

}}

40

Wann ist s == “undefined”?

(parameter) s: null | undefined

(parameter) s: string | string[]


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"); }

41

LITERAL TYPES


TYPES in ECMASCRIPT

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

"version": "3.2.1"},"lodash": {

"version": "4.17.4"}

}}

package.json


TYPES in ECMASCRIPT

_.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=2018-02-28


Ist immer die richtige Wahl?


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

COMPILER NOTWENDIG


DEBUGGING


import $ from "jquery";

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

});

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

});

npm install --save-dev @types/jquery

TYPDEFINITIONEN FÜR BIBLIOTHEKEN


ECMAScript oder ?

Wie immer ☺

It depends!


?

Kurzes Projekt: nein

Sehr einfaches Projekt: nein

Refactoring: ja

Unternehmenskritisch: ja

Hohe Fluktuation: ja

Framework: ja


Weinheimer Str. 68

68309 Mannheim

www.oio.de

[email protected]

? ?

??

?Fragen ?

@ThorstenMaier


Weinheimer Str. 68

68309 Mannheim

www.oio.de

[email protected]

Vielen Dank für Ihre

Aufmerksamkeit !

Documents

ECMAScript oder · Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim Version: [email protected] ECMAScript oder ? - das ist hier die Frage -