ecmascript oder · orientation in objects gmbh weinheimer str. 68 68309 mannheim version:...
Post on 18-Jul-2020
4 Views
Preview:
TRANSCRIPT
Orientation in Objects GmbH
Weinheimer Str. 68
68309 Mannheim
www.oio.de
info@oio.deVersion:
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
ECMAScript vs. TypeScript© Orientation in Objects GmbH 4
“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”
ECMAScript vs. TypeScript© Orientation in Objects GmbH 5
Alles besser mit ECMAScript?Ein wenig Historie
ECMAScript vs. TypeScript© Orientation in Objects GmbH 6
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
ECMAScript vs. TypeScript© Orientation in Objects GmbH
ES 52009
7
ES 20152015
JavaScript wird professionell
ECMAScript vs. TypeScript© Orientation in Objects GmbH
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
ECMAScript vs. TypeScript© Orientation in Objects GmbH
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;}
}
ECMAScript vs. TypeScript© Orientation in Objects GmbH 10
Vererbung
class Car {drive() {
console.log("Car is driving.");}
}
class Cabrio extends Car {
openTop() {console.log("Top is open.");
}}
-
ECMAScript vs. TypeScript© Orientation in Objects GmbH
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();
ECMAScript vs. TypeScript© Orientation in Objects GmbH 12
Module
-
export const HELLO_WORLD = "Hello World";
import { HELLO_WORLD } from ‘./constants.js'
constants.js
index.js
ECMAScript vs. TypeScript© Orientation in Objects GmbH 13
var add = function (a, b) {
return a + b;
};
var add = (a, b) => a + b;
Arrow Functions
ECMAScript vs. TypeScript© Orientation in Objects GmbH
var name = "Thorsten";var t = "Hallo " + name + "!";
14
let name = "Thorsten";let t = `Hallo ${name}!`;
Template Strings
ECMAScript vs. TypeScript© Orientation in Objects GmbH 15
ES 2015 - Browser Support
ECMAScript vs. TypeScript© Orientation in Objects GmbH 16
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
ECMAScript vs. TypeScript© Orientation in Objects GmbH 17
Hört sich doch alles nicht schlecht an.
Warum jetzt noch ?
ECMAScript vs. TypeScript© Orientation in Objects GmbH 18
Plain scriptsModulesystems
(Babel, …)
Compilers
(TypeScript, Flow, …)
TypeSystems
ECMAScript vs. TypeScript© Orientation in Objects GmbH 19
ECMAScript vs. TypeScript© Orientation in Objects GmbH 20
ECMAScript that scales
ECMAScript vs. TypeScript© Orientation in Objects GmbH 21
Statisch typisiertes Superset von ECMAScript
Kompiliert zu ECMAScript
ECMAScript vs. TypeScript© Orientation in Objects GmbH 22
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
ECMAScript vs. TypeScript© Orientation in Objects GmbH 23
CODE COMPLETION
ECMAScript
ECMAScript vs. TypeScript© Orientation in Objects GmbH 24
CODE COMPLETION
TypeScript
ECMAScript vs. TypeScript© Orientation in Objects GmbH 25
CODE SMARTER
ECMAScript vs. TypeScript© Orientation in Objects GmbH 26
CODE SMARTER
JS Dev Kopfwissen?!
lib.es6.d.ts
ECMAScript vs. TypeScript© Orientation in Objects GmbH 27
Finde den Fehler
CODE SMARTER
ECMAScript vs. TypeScript© Orientation in Objects GmbH 28
CODE SMARTER
ECMAScript vs. TypeScript© Orientation in Objects GmbH 29
CODE CONFIDENTLY
ECMAScript vs. TypeScript© Orientation in Objects GmbH 30
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;
}());
ECMAScript vs. TypeScript© Orientation in Objects GmbH 31
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
ECMAScript vs. TypeScript© Orientation in Objects GmbH 32
<3
CODE BIGGER
ECMAScript vs. TypeScript© Orientation in Objects GmbH 33
ist wie die Schweiz für Frameworks“
Anders Hejlsberg (chief designer of C# and co-designer of TypeScript)
„
ECMAScript vs. TypeScript© Orientation in Objects GmbH 34
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
ECMAScript vs. TypeScript© Orientation in Objects GmbH 35
Wer hatte schon mal eine NullPointerException?
JavaScript hat „null“ und „undefined“ ☺
ECMAScript vs. TypeScript© Orientation in Objects GmbH 36
NULL SAFE
ECMAScript vs. TypeScript© Orientation in Objects GmbH 37
Details zum Typsystem
ECMAScript vs. TypeScript© Orientation in Objects GmbH
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
ECMAScript vs. TypeScript© Orientation in Objects GmbH
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
ECMAScript vs. TypeScript© Orientation in Objects GmbH
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[]
ECMAScript vs. TypeScript© Orientation in Objects GmbH
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
ECMAScript vs. TypeScript© Orientation in Objects GmbH 42
TYPES in ECMASCRIPT
{"requires": true,"lockfileVersion": 1,"dependencies": {"jquery": {
"version": "3.2.1"},"lodash": {
"version": "4.17.4"}
}}
package.json
ECMAScript vs. TypeScript© Orientation in Objects GmbH 43
TYPES in ECMASCRIPT
_.filter("1,2,3".split(",").map(x => parseInt(x)), x => x.);
main.js
ECMAScript vs. TypeScript© Orientation in Objects GmbH 44
https://npm-stat.com/charts.html?package=typescript&from=2016-01-01&to=2018-02-28
ECMAScript vs. TypeScript© Orientation in Objects GmbH 45
Ist immer die richtige Wahl?
ECMAScript vs. TypeScript© Orientation in Objects GmbH 46
C:\Users\tmaier\myProject>tsc app.ts -w12:20:32 - Compilation complete. Watching for file changes.
COMPILER NOTWENDIG
ECMAScript vs. TypeScript© Orientation in Objects GmbH 47
DEBUGGING
ECMAScript vs. TypeScript© Orientation in Objects GmbH 48
import $ from "jquery";
$(function(){ alert('Hello');
});
$(function(){ alert('Hello');
});
npm install --save-dev @types/jquery
TYPDEFINITIONEN FÜR BIBLIOTHEKEN
ECMAScript vs. TypeScript© Orientation in Objects GmbH 49
ECMAScript oder ?
Wie immer ☺
It depends!
ECMAScript vs. TypeScript© Orientation in Objects GmbH 50
?
Kurzes Projekt: nein
Sehr einfaches Projekt: nein
Refactoring: ja
Unternehmenskritisch: ja
Hohe Fluktuation: ja
Framework: ja
Orientation in Objects GmbH
Weinheimer Str. 68
68309 Mannheim
www.oio.de
info@oio.de
? ?
??
?Fragen ?
@ThorstenMaier
Orientation in Objects GmbH
Weinheimer Str. 68
68309 Mannheim
www.oio.de
info@oio.de
Vielen Dank für Ihre
Aufmerksamkeit !
top related