Vorlesungsfolien Web Engineering II

Transcript

1. JavaScript Intro Web Engineering II Christian Liebel @christianliebel M.Sc.
2. 1. Language 2. Comments 3. Variables 4. Literals 5. Property Access Expressions 6. Property Assignment 7. Operators 8. Functions 9. Prototypen 10.Control Structures 11. Promises 12. Modules 13. TypeScript Agenda Web Engineering II JavaScript Intro
3. History Created as “LiveScript” in 1995 by Brendan Eich Purpose: Dynamic form validation, Java applet communication (Netscape Communicator 2.0) To profit from Java’s popularity, LiveScript was renamed to JavaScript (there are no technical relations whatsoever) Language Web Engineering II JavaScript Intro
4. Properties Multiparadigm (object-oriented, functional, procedural) Typing - Weak: Allows implicit type conversions - Dynamic: Type checks during runtime - Duck Typing: Type is not determined by class, but by object shape (methods, properties) Language Web Engineering II JavaScript Intro
5. Data Types Primitives Boolean (true/false) Number (IEEE 754, “double”) BigInt (arbitrarily large integer) String (Unicode) Null (no value) Undefined (not defined) Symbol (unique atomic value) Object Language Web Engineering II JavaScript Intro
6. Standardization Ecma International Technical Committee 39 – ECMAScript ECMAScript 262 Time-based Release Schedule Current version: ECMAScript 2020 Language Web Engineering II JavaScript Intro
7. The most simple language construct Explains/documents code // Line comment /* Block comment, multi-line */ Comments Web Engineering II JavaScript Intro
8. JSDoc /** * Multiplies two numbers. * @param {number} a factor * @param {number} b factor */ function multiply(a, b) { return a * b; } Comments Web Engineering II JavaScript Intro
9. Declaration Symbolic name for a value // Declared with let let x; // Assign values via “=” x = 3; let y = 4; Note: The return value of an assignment (without declaration) is the value itself! Variables Web Engineering II JavaScript Intro
10. Declaration // Declared with const const z = 5; z = 6; // TypeError: Assignment to constant variable. Be careful: Only the assignment is constant! Variables Web Engineering II JavaScript Intro
11. Evaluation Symbolic name for a value // Evaluate values by specifying the variable name let y = 3; y; // 3 Variables Web Engineering II JavaScript Intro
12. Types Variables have no type declaration However, you should avoid assigning different types if possible let y; y = 3; y = 'Peter'; Variables Web Engineering II JavaScript Intro
13. $ node > let x; > x; // Result? > x = 3; > x = 'Peter'; > x; // Result? > const y = 4; > y = 5; > y; // Result? Variables LAB #1 Web Engineering II JavaScript Intro
14. $ node > let x; > x; // undefined > x = 3; > x = 'Peter'; > x; // 'Peter' > const y = 4; > y = 5; // TypeError > y; // 4 Variables LAB #1 Web Engineering II JavaScript Intro
15. Why no var? var x = 3; if (true) { var x = 4; } x; // ? let x = 3; if (true) { let x = 4; } x; // ? Variables Web Engineering II JavaScript Intro
16. Why no var? var x = 3; if (true) { var x = 4; } x; // 4 let x = 3; if (true) { // block scoped let x = 4; } x; // 3 Variables Web Engineering II JavaScript Intro
17. Basic // Numbers 12 1.2 1_234_567.89 // BigInt 10_000_000_000_000_000n // Boolean true false // Null null // Strings "x" 'x' `x` // Regular Expressions /[0-9]x/ Literals Web Engineering II JavaScript Intro
18. Complex // Object initializer {} { a: 3, b: "test" } { "a": 3, "b": "test" } Properties “a” and “b” are called keys “3” and “test” are called values Literals Web Engineering II JavaScript Intro
19. Complex // Array initializer [] [1, 2, 3] [ 1, 2, 3, ] “1”, “2”, “3” are called elements Literals Web Engineering II JavaScript Intro
20. Define… - an array - containing two objects - each defining - a name - an age Literals LAB #2 Web Engineering II JavaScript Intro
21. [{ name: 'Peter', age: 17 }, { name: 'Astrid', age: 31 }] Literals LAB #2 Web Engineering II JavaScript Intro
22. Template Strings // Strings "x" 'x' `x ${expression}` `1+3 is ${1+3}` // Logging your name to the console const name = 'Alfred'; console.log(`Your name is ${name}`); Literals Web Engineering II JavaScript Intro
23. Elements const persons = [{ name: 'Peter', age: 17 }, { name: 'Astrid', age: 31 }]; // How to get Astrid? Property Access Expressions Web Engineering II JavaScript Intro
24. Elements const persons = [{ name: 'Peter', age: 17 }, { name: 'Astrid', age: 31 }]; // Square bracket notation persons[1]; // { name: 'Astrid', age: 31 } // (Destructuring assignment) const [, astrid] = persons; astrid; // { name: 'Astrid', age: 31 } Property Access Expressions Web Engineering II JavaScript Intro
25. Properties const astrid = { name: 'Astrid', age: 31 }; // How to get the name? Property Access Expressions Web Engineering II JavaScript Intro
26. Properties const astrid = { name: 'Astrid', age: 31 }; // Dot notation astrid.name; // 'Astrid' // Square bracket notation astrid['name']; // 'Astrid' // (Destructuring assignment) const { name } = astrid; name; // 'Astrid' Property Access Expressions Why would you want to use this? Web Engineering II JavaScript Intro
27. Properties // Programmatic access const key = 'name'; astrid[key]; // Names not allowed as an identifier const astrid = { "foo.bar": 3, "!": 4 } astrid['foo.bar']; // 3 astrid['!']; // 4 Property Access Expressions Web Engineering II JavaScript Intro
28. const persons = [{ name: 'Peter', age: 17 }, { name: 'Astrid', age: 31 }]; 1. Get Peter and store as variable “p” using square bracket notation 2. Get his age from the variable using dot notation 3. Get Peter using a destructuring assignment 4. Get Astrid’s name by only using the square bracket notation Property Access Expressions LAB #3 Web Engineering II JavaScript Intro
29. const persons = [{ name: 'Peter', age: 17 }, { name: 'Astrid', age: 31 }]; 1. Get Peter and store as variable using square bracket notation const peter = persons[0]; 2. Get his age from the variable using dot notation peter.age; 3. Get Peter using a destructuring assignment const [ peter ] = persons; 4. Get Astrid’s name by only using the square bracket notation persons[1]['name']; Property Access Expressions LAB #3 Web Engineering II JavaScript Intro
30. undefined // Accessing properties that do not exist return undefined const object = { a: 3 } object.b; // undefined object.b.x; // TypeError: Cannot read property 'x' of undefined You cannot read properties from null or undefined! Be careful: undefined is not a reserved keyword! Property Access Expressions Web Engineering II JavaScript Intro
31. Updating Properties const astrid = { name: 'Astrid', age: 31 }; astrid.age = 32; astrid['age'] = 32; Property Assignment Web Engineering II JavaScript Intro
32. Creating Properties const astrid = { name: 'Astrid', age: 31 }; astrid.lastName = 'Müller'; astrid['!'] = 3.14159; Property Assignment Web Engineering II JavaScript Intro
33. (Deleting Properties) const astrid = { name: 'Astrid', age: 31 }; delete astrid.age; astrid; // { name: "Astrid" } Property Assignment But wait. This is const? Web Engineering II JavaScript Intro
34. Const objects const astrid = { name: 'Astrid', age: 31 }; astrid.age = 32; astrid['!'] = 3.14159; const does not mean that the object is immutable! Only the reference to the object is immutable, i.e. astrid can’t be redefined to point to a different object. Properties can be updated, created or deleted. delete astrid.age; Property Assignment Web Engineering II JavaScript Intro
35. Arrays const alphabet = ['a', 'p']; // Update property alphabet[1] = 'b'; // Add property alphabet[2] = 'c'; alphabet[25] = 'z'; Property Assignment Web Engineering II JavaScript Intro
36. > const persons = []; > persons; 1. Add a new (empty) object literal as the first element of the persons array 2. Update the object literal to have a name property set to Peter 3. Update the name property to contain Astrid instead Property Assignment LAB #4 Web Engineering II JavaScript Intro
37. > const persons = []; > persons; 1. Add a new (empty) object literal as the first element of the persons array persons[0] = {}; 2. Update the object literal to have a name property set to Peter persons[0].name = 'Peter'; 3. Update the name property to contain Astrid instead persons[0].name = 'Astrid'; Property Assignment LAB #4 Web Engineering II JavaScript Intro
38. Basic Maths // Add 3 + 2 // Subtract 5 - 2 // Multiply 3 * 7 // Divide 25 / 5 // Remainder 10 % 4 Operators Web Engineering II JavaScript Intro
39. Shorthand Operators // Add let i = 0; i += 3; // 3 // Subtract let i = 5; i -= 2; // 3 // Multiply let i = 2; i *= 3; // 6 // Divide let i = 25; i /= 5; // 5 Operators Web Engineering II JavaScript Intro
40. Shorthand Operators // Increment let i = 0; let j = i++; // i = 1, j = 0 // Decrement let i = 5; let j = i--; // i = 4, j = 5 // Increment let i = 0; let j = ++i; // i = 1, j = 1 // Decrement let i = 5; let j = --i; // i = 4, j = 4 Operators Web Engineering II JavaScript Intro
41. // String Concatenation "Ha" + "llo!" // "Hallo!" // Bitshifting 1 << 2 // 4 // Number conversion +"3" // 3 Operators Web Engineering II JavaScript Intro
42. > const point = { x: 1, y: 20 }; > const delta = { x: 3, y: -9 }; You received two objects, one describing the original mouse position, the other an object that describes how far the mouse was moved. What’s the new x and y position of the mouse? const newPoint = { /* … */ }; Operators LAB #5 Web Engineering II JavaScript Intro
43. > const point = { x: 1, y: 20 }; > const delta = { x: 3, y: -9 }; You received two objects, one describing the original mouse position, the other an object that describes how far the mouse was moved. What’s the new x and y position of the mouse? const newPoint = {x: point.x + delta.x, y: point.y + delta.y}; // { x: 4, y: 11 } Operators LAB #5 Web Engineering II JavaScript Intro
44. Relational // Greater than 4 > 3 // Greater than or equal to 4 >= 3 // Less than 4 < 3 // Less than or equal to 4 <= 3 Operators Web Engineering II JavaScript Intro
45. Equality // Equality 3 == 3 // Inequality 4 != 3 Operators Web Engineering II JavaScript Intro
46. Abstract Equality In your node REPL console, try the following: > 3 == 3 > "3" == 3 > [1] == 1 > 1 == true > 100 == true > NaN == NaN What’s the result? What did you expect? Operators LAB #6 Web Engineering II JavaScript Intro
47. Strict vs. Abstract Equality Operators https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons Web Engineering II JavaScript Intro
48. Strict vs. Abstract Equality Operators https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons Web Engineering II JavaScript Intro
49. Strict Equality In your node REPL console, try the following: > 3 === 3 > "3" === 3 > [1] === 1 > 1 === true > 100 === true > NaN === NaN What’s the result? What did you expect? Operators LAB #7 Web Engineering II JavaScript Intro
50. Logical // AND 3 === 3 && 2 === 2 // OR false || !false Operators Web Engineering II JavaScript Intro
51. Inversion // Inversion !true !false !!true !!false !!"" !!"test" !!0 !!1 !!NaN !!null !!undefined Operators LAB #8 Web Engineering II JavaScript Intro
52. Truthy vs. Falsy The following values evaluate to false: - false - 0 - null - undefined - NaN - "" (empty string) All other values evaluate to true. Operators Web Engineering II JavaScript Intro
53. function add(x, y) { return x + y; } function boom() { throw new Error('boom'); } - Can have a name - Can have parameters - Can return a result (or undefined) - Can throw errors Functions Web Engineering II JavaScript Intro
54. First-Class Citizens const add = function (x, y) { return x + y; }; add(1, 3); // 4 const person = {name: 'Peter'}; person.greet = function () { return `Hallo ${this.name}`; } person.greet(); // 'Hallo Peter' Can be used in any context, e.g. as object methods (greet) Functions Web Engineering II JavaScript Intro
55. Constructor Functions function Person(name) { this.name = name; } const peter = new Person('Peter'); peter.name; // 'Peter' The only functions that may have an uppercase identifier (important convention) Instances can be created via new Functions Web Engineering II JavaScript Intro
56. Classes (Syntactic Sugar Over C’tor Functions) function Person(name) { this.name = name; } const peter = new Person('Peter'); peter.name; // 'Peter' class Person { constructor(name) { this.name = name; } } const peter = new Person('Peter'); peter.name; // 'Peter' Functions Web Engineering II JavaScript Intro
57. this The this context may vary depending on usage: - Global Context - Instance creation via new - Context of the caller - Virtually any value the function was bound to or called with This can cause problems. Functions Web Engineering II JavaScript Intro
58. this function test() { this.name = 'Alfred'; return { getName: function () { return this.name; } } } test().getName(); // ??? Functions LAB #9 Web Engineering II JavaScript Intro
59. this function test() { this.name = 'Alfred'; return { getName: function () { return this.name; } } } test().getName(); // undefined Functions LAB #9 Web Engineering II JavaScript Intro
60. Fat Arrow Functions // Classic form const fn1 = function(y) { return y; }; fn1(1); // 1 // Shorthand form const fn2 = y => y; fn2(1); // 1 Functions Web Engineering II JavaScript Intro
61. Fat Arrow Functions () => console.log('xyz'); a => console.log(a); (a, b) => a + b; (a, b) => { const c = 123; return a + b + c; } () => ({ a: 123 }) No parameters = parentheses Single parameter = no parentheses Implicit return Curly braces = custom return/throw Return object = parentheses around curly braces Functions Web Engineering II JavaScript Intro
62. Fat Arrow Functions function test() { this.name = 'Alfred'; return { getName: () => this.name }; } test().getName(); // ??? Functions LAB #10 Web Engineering II JavaScript Intro
63. Fat Arrow Functions function test() { this.name = 'Alfred'; return { getName: () => this.name }; } test().getName(); // Alfred this context is maintained Functions LAB #10 Web Engineering II JavaScript Intro
64. Higher-Order Functions As JavaScript functions are first-class citizens, they can… return functions function getMultiplier(multiplier) { return x => x * multiplier; } getMultiplier(10)(3); // 30 Functions Closure Web Engineering II JavaScript Intro
65. Higher-Order Functions As JavaScript functions are first-class citizens, they can… take other functions as arguments (e.g. callbacks) requestData(data => /* … */); [1, 2, 3].filter(value => value >= 2); Functions Web Engineering II JavaScript Intro
66. Higher-Order Functions What do these higher-order array functions do? [1, 2, 3].forEach(elm => console.log(elm)); [1, 2, 3].map(elm => elm * 2); [1, 2, 3].filter(elm => elm >= 2); [1, 2, 3].reduce((acc, curr) => acc + curr); Functions LAB #11 Web Engineering II JavaScript Intro
67. Higher-Order Functions What do these higher-order array functions do? [1, 2, 3].forEach(elm => console.log(elm)); // Iteration [1, 2, 3].map(elm => elm * 2); // Manipulation [1, 2, 3].filter(elm => elm >= 2); // Filtering [1, 2, 3].reduce((acc, curr) => acc + curr); // Accumulation Functions LAB #11 Web Engineering II JavaScript Intro
68. Closure function getGreeter() { const greet = 'Hi '; return function(name) { console.log(greet + name); } } const greeter = getGreeter(); greeter('Tom'); // ??? Functions Web Engineering II JavaScript Intro
69. Closure function getGreeter() { const greet = 'Hi '; return function(name) { console.log(greet + name); } } const greeter = getGreeter(); greeter('Tom'); // "Hi Tom" Inner function can access variables from outer scope Closure = function + enclosing context (during creation) greet is hidden inside after creation (“private”) Functions Web Engineering II JavaScript Intro
70. Closure function getGreeter(greet) { return function(name) { console.log(greet + name); } } const greeter1 = getGreeter('Hi '); const greeter2 = getGreeter('Yo '); // Let them greet… Functions Web Engineering II JavaScript Intro LAB #12
71. Generator Functions function* generator(number) { yield 1; yield 10 * number; } const gen = generator(10); console.log(gen.next().value); // 1 console.log(gen.next().value); // 100 Functions Web Engineering II JavaScript Intro
72. Prototypes Web Engineering II JavaScript Intro function Person(name) { this.name = name; } /* * How to add a shared instance method? */ const alfred = new Person('Alfred');
73. Prototypes Web Engineering II JavaScript Intro function Person(name) { this.name = name; } Person.prototype.sayHello = function () { console.log(`Hi, call me ${this.name}`); }; const alfred = new Person('Alfred'); alfred.sayHello();
74. Inheritance Prototypes Web Engineering II JavaScript Intro function Person() { this.walk = () => console.log('I can walk.'); } function Student() { Person.call(this); this.drink = () => console.log('I can drink.'); } Student.prototype = Object.create(Person.prototype); Student.prototype.constructor = Student;
75. Inheritance function Person() { this.walk = () => console.log('I can walk.'); } function Student() { Person.call(this); this.drink = () => console.log('I can drink.'); } Student.prototype = Object.create(Person.prototype); Student.prototype.constructor = Student; const student = new Student(); student.drink(); student.walk(); student instanceof Student student instanceof Person student.__proto__ student.__proto__.__proto__.… Prototypes Web Engineering II JavaScript Intro LAB #13
76. Inheritance Chain Object.prototype Date.prototype Array.prototype Person.prototype Student.prototype Prototypes Web Engineering II JavaScript Intro
77. Inheritance Prototypes Web Engineering II JavaScript Intro class Person { walk() { console.log('I can walk.'); } } class Student extends Person { constructor() { super(); } drink() { console.log('I can drink.'); } }
78. Inheritance class Person { walk() { console.log('I can walk.'); } } class Student extends Person { constructor() { super(); } drink() { console.log('I can drink.'); } } const student = new Student(); student.drink(); student.walk(); student instanceof Student student instanceof Person student.__proto__ student.__proto__.__proto__.… Prototypes Web Engineering II JavaScript Intro LAB #14
79. Takeaways Prototypes Web Engineering II JavaScript Intro JavaScript inheritance is based on prototypes New class/extends keywords and constructor/super calls are only syntactical sugar over prototypes Prefer classes
80. if if (condition) { // do x } else if (condition2) { // do y } else { // do z } Control Structures Web Engineering II JavaScript Intro
81. switch switch (value) { case 1: // do something break; case 2: // do a different thing break; default: // do default; } Control Structures Web Engineering II JavaScript Intro
82. for for (let i = 0; i < 50; i++) { // do 50-times… } Control Structures Web Engineering II JavaScript Intro
83. for const obj = { a: 1, b: 2 }; for (let x in obj) { // for each property in obj } Object.keys(obj) .forEach(x => /* … */) (nur für eigene Eigenschaften) const arr = [1, 2, 3]; for (let x of arr) { // for each element of arr } arr.forEach(x => /* … */); Control Structures Web Engineering II JavaScript Intro
84. do…while let n = 0; do { console.log(n); n++; } while (n < 2); Control Structures Web Engineering II JavaScript Intro
85. while let n = 0; while (n < 2) { console.log(n); n++; // break; // continue; } Control Structures Web Engineering II JavaScript Intro
86. try…catch try { throw new Error('boom'); } catch (err) { console.log('Caught ' + err); } Control Structures Web Engineering II JavaScript Intro
87. Automatic Semicolon Insertion (ASI) return; { a: 3 }; Be careful: JavaScript automatically inserts semicolons in some cases. Hence, it’s convention to always place braces in the same line. Control Structures Web Engineering II JavaScript Intro
88. Callbacks Promises Web Engineering II JavaScript Intro httpService.get('https://example.com/customers', customers => { // I know my customers now! }, err => { // Something bad has happened! }); Well-known model for handling asynchronous operations “When the operation is done, call this function.”
89. Callbacks Promises Web Engineering II JavaScript Intro httpService.get('https://example.com/customers', customers => { inputService.ask('Welchen Kunden löschen?', customers, selection => { httpService.delete(`https://example.com/items/${selection}`, () => { alert(`Kunde ${selection} erfolgreich gelöscht!`); }); }); });
90. “Pyramid of Doom” Promises Web Engineering II JavaScript Intro httpService.get('https://example.com/customers', customers => { inputService.ask('Welchen Kunden löschen?', customers, selection => { httpService.delete(`https://example.com/items/${selection}`, () => { alert(`Kunde ${selection} erfolgreich gelöscht!`); }); }); });
91. “Callback Hell” Promises Web Engineering II JavaScript Intro httpService.get('https://example.com/customers', customers => { inputService.ask('Welchen Kunden löschen?', customers, selection => { httpService.delete(`https://example.com/items/${selection}`, () => { alert(`Kunde ${selection} erfolgreich gelöscht!`); }, err => { console.error(`Could not delete ${selection}!`); }); console.log(`Successfully triggered deletion of ${selection}!`); }); }, err => { console.error(`Could not fetch list! ${err}`); });
92. Callbacks 2.0 Promises Web Engineering II JavaScript Intro A Promise represents a future value (resolved asynchronously) (In the future) the operation can either succeed or it can fail Promises can be composed in an easy manner
93. Terminology Promises Web Engineering II JavaScript Intro State Operation… Pending is in progress Fulfilled was successfully completed Rejected has failed Settled is either fulfilled or rejected
94. Composition Promises Web Engineering II JavaScript Intro time à long-running operation rejected fulfilled short op. rejected fulfilled fulfilled long-running operation rejected fulfilled fulfilled unhandled promise rejection
95. Chaining Promises Web Engineering II JavaScript Intro Handler Promise… then has resolved (+value) catch has failed (+error) finally (ES 2018) has settled
96. Usage httpService.get('https://example.com/customers') .then(customers => { return inputService.ask('Welchen Kunden löschen?', customers); }, err => { console.error(`Could not fetch list! ${err}`); }).then(selection => { console.log(`Successfully triggered deletion of ${selection}!`); return httpService.delete(`https://example.com/items/${selection}`); }).then(() => { alert('Successfully deleted!'); }, err => { console.error('Unable to delete.'); }); JavaScript Intro Web Engineering II Promises
97. Convenience Methods Promises Web Engineering II JavaScript Intro State Operation… Promise.all([p1, p2, p3]) resolves when all inner promises have been resolved Promise.race([p1, p2, p3]) resolves/rejects when the first inner promise resolves/rejects Promise.reject(new Error('boom')) wrap synchronous value in immediately rejected promise Promise.resolve({ result: 123 }) wrap synchronous value in immediately resolved promise
98. Error Handling Promise.resolve(true) .then(value => { return Promise.reject('boom'); }).then(() => { // This then block is only called if the previous op. was successful }).catch(err => { // This catch block catches any previous error, otherwise it's skipped // If it doesn’t reject, execution continues with the next then block return 'test'; }).then(value => { throw new Error(value); // What’s value here? }).finally(() => { // Must appear at last. Doesn’t get value/error, can’t manipulate result }); JavaScript Intro Web Engineering II Promises
99. Please try in a browser! StarWars API: https://swapi.dev Fetch a single character, planet or starship of your choice! fetch('https://swapi.dev/…') fetch returns a promise wrapping the response. This has a json method for converting the response to JSON (again returns a promise): response.json() alert(`Hello I am ${obj.name}`); Promises Web Engineering II JavaScript Intro LAB #15
100. Please try in a browser! fetch('https://swapi.dev/api/planets/1') .then(response => response.json()) .then(planet => alert(`Hello my name is ${planet.name}`)); Promises Web Engineering II JavaScript Intro LAB #15
101. Now, add error handling (i.e. in case the network is down) Promises Web Engineering II JavaScript Intro LAB #16
102. fetch('https://swapi.co/api/planets/1') .then(response => response.json()) .then(planet => alert(`Hello my name is ${planet.name}`)) .catch(err => alert(`Oh no: ${err}`)); Promises Web Engineering II JavaScript Intro LAB #16
103. async/await (ES 2017) Promises Web Engineering II JavaScript Intro Syntactial sugar over then & catch for using it in a synchronous manner async function getPlanet() { try { const response = await fetch('https://swapi.dev/api/planets/1/'); const planet = await response.json(); alert(`Hello my name is ${planet.name}`); } catch (err) { alert(`Oh no: ${err}`); } } getPlanet();
104. Custom Promise Promises Web Engineering II JavaScript Intro const x = new Promise((resolve, reject) => { setTimeout(() => resolve(), 3000); });
105. Possible problems Promises Web Engineering II JavaScript Intro • Not cancellable • Promise chain is only executed once (can only emit a single value) • Eager, i.e. is executed immediately without checking if somebody is actually interested in the return value • No operators for high-level flow composition • Unhandled promise rejections will terminate Node.js process in the future • Solution: Observables (“Callbacks 3.0”) à Angular
106. Modules Web Engineering II JavaScript Intro Concept: split up your codebase into functional modules instead of one large monolith Often: packages/namespaces/assemblies/… In JavaScript: 1 file = 1 module Introduced in ES 2015 Note: There are different other module systems around (e.g. CommonJS)
107. import/export keywords Modules Web Engineering II JavaScript Intro export: make a member publicly accessible import: consume a member from another file
108. import/export keywords Modules Web Engineering II JavaScript Intro // math.js export function add(a, b) { return a + b; } export function cube(x) { return x ** 3; } // calculator.js import { add } from 'math'; console.log(add(1, 3)); // 4
109. Exports Modules Web Engineering II JavaScript Intro // Named exports export const productName = 'Windows'; // var, let function greet() { console.log('Hi!') }; export { greet as pi, greet }; // Default export (only one per script) export default function cube(x) { return x ** 3 }; export default greet; // Re-exports export * from 'other-file'; export { sum } from 'math';
110. Imports Modules Web Engineering II JavaScript Intro // Named exports import * as math from 'math'; import { test, apple as egg } from 'file'; // Default export (only one per script) import cube from 'cube'; // Side-effect import import 'other-file';
111. CommonJS Modules Web Engineering II JavaScript Intro (Legacy/different) module system, e.g. used by Node.js import ≈ require export ≈ module.exports // cube.js module.exports = function (x) { return x ** 3; } // calculator.js const cube = require('./cube'); cube(3); // 27
112. CommonJS Modules Web Engineering II JavaScript Intro const cube1 = require('./cube'); // ./cube.js const cube2 = require('cube'); // node_modules/cube/index.js Be careful: Node.js and many module bundlers (SystemJS, Webpack) use a dot-slash to distinguish between npm modules (Node.js package manager) and files on the file system. Omitting the file extension is recommended (e.g. when using source-to- source compilers such as TypeScript à Angular)
113. Open VS Code & create a new folder Modules Web Engineering II JavaScript Intro LAB #16 Node <9 Node 9+ Create cube.js and calculator.js Create cube.mjs and calculator.mjs In cube.js, provide a cube function and assign it to module.exports In cube.mjs, provide a cube function as the default export In calculator.js, consume the cube function by require('./cube') In calculator.mjs, consume the cube function by importing it Test your app by running node calculator.js Test your app by running node --experimental-modules calculator.mjs
114. Benefit: Structuring your JavaScript codebase Modules Web Engineering II JavaScript Intro src/ models/ customer.js contract.js calculation/ prices.js taxes.js main/ app.js
115. Designed by Anders Hejlsberg (C#, Delphi) Superset of JavaScript (all valid JS is valid TS) Opt-in static typing TypeScript Compiler is a source-to-source transpiler (target: JavaScript of a given version) Additionally, TypeScript allows you to use (some) Stage 3 features and transpiles them to code understandable by older JavaScript engines (downlevel support). JavaScript Intro Web Engineering II TypeScript
116. Principle TypeScript Web Engineering II JavaScript Intro // JavaScript (= valid TypeScript) function addExtension(value) { const suffix = ".exe"; return "${value}${suffix}"; } // TypeScript (opt-in typing) function addExtension(value: string): string { const suffix: string = ".exe"; return "${value}${suffix}"; }
117. ECMAScript Feature Stages JavaScript Intro Web Engineering II TypeScript 0 1 2 3 4 STRAWMAN PROPOSAL DRAFT CANDIDATE FINISHED
118. https://jskatas.org/ (Bereich „ECMAScript 6“) - Block scope / `let` declaration - Block scope / `const` declaration - Object literal / basics - Destructuring / array - Destructuring / object - Class / creation - Template Strings / basics - Arrow functions / basics - Arrow functions / function binding - Generator / creation - Generator / yield expressions - Promise/creation - Promise/chaining `then()` - Promise/the API - Promise/promise.catch() Bonus Exercises Web Engineering II JavaScript Intro
119. - https://pouchdb.com/2015/05/18/we-have-a-problem-with- promises.html - https://learnjavascript.online/ Bonus Exercises Web Engineering II JavaScript Intro
120. Node.js Web Engineering II Christian Liebel @christianliebel M.Sc.
121. Alternatives Pivotal Spring ASP.NET Core Node.js Web Engineering II Node.js
122. 1. General/History 2. Node.js Package Manager 3. Simple HTTP server 4. SPA Architecture 5. NestJS 6. Logging 7. AuthZ/AuthN 8. Socket.io 9. Database Access Agenda Web Engineering II Node.js
123. 1. General/History Node.js Web Engineering II
124. Server-side runtime platform for JavaScript applications Focus on performance (event-driven programming, non-blocking infrastructure for scaling) Based on Google’s JavaScript engine V8 (node-chakracore runs on Microsoft’s Chakra Core engine) Can access native interfaces (e.g. file system, devices) in contrast to the browser Node.js Web Engineering II Node.js
125. Architecture http://www.ateam-oracle.com/wp-content/uploads/2015/08/NodeJS.png (abgerufen: 17.4.2018) Node.js Web Engineering II Node.js Storage Async
126. History LiveWire Pro Web (1996) First server-side JavaScript runtime provided by Netscape Node.js (2009) Presented by Ryan Dahl at JSConf EU 2009 JavaScript on the Server Web Engineering II Node.js
127. History Isomorphic (2011) Ability of JavaScript apps to run on both the server and the client Isomorphic JavaScript (2013) Future of web apps, same source is used to render on server/client Universal JavaScript (2015) JavaScript that is able to run in any environment JavaScript on the Server Web Engineering II Node.js
128. 2. Node.js Package Manager Node.js Web Engineering II
129. Purpose Node.js has its own package manager called Node.js Package Manager (npm) Packages can be downloaded from a registry (default: https://registry.npmjs.org) npmjs.org is the largest software marketplace in the world npm packages typically cover a very small functionality (e.g. left-pad) npm makes it very easy to turn your app into a package as well “There’s an npm module for that!” Node.js Web Engineering II Node.js Package Manager
130. Release Schedule April: Even-numbered versions (v10, v12, v14) October: Odd-numbered versions (v11, v13, v15) Even-numbered versions are typically covered by long-term support (LTS) for a period of 18 months After that, the version will enter maintenance support for another 12 months Hence: Even-numbered versions are supported for approx. 3 years, which make them a good choice for server environments https://github.com/nodejs/Release Node.js Web Engineering II Node.js
131. npm init – Create Packages Interactively creates a new package.json by asking a couple of questions This file specifies - name, version, description of your package - entry point of your package - license, author of the package - package dependencies - run scripts - and more… Node.js Web Engineering II Node.js Package Manager
132. npm init – Create Packages Run npm init in the directory where your module files are placed and answer the questions. Node.js Web Engineering II Node.js Package Manager LAB #17
133. npm install – Installing Packages Packages and their dependencies are retrieved from the package registry (typically https://registry.npmjs.org) Node.js packages are placed in a folder called node_modules The package manager has two modes: • Global mode (installs packages to a user-level directory): npm i -g @angular/cli • Local mode (installs packages to the current scope): npm i left-pad npm install installs package dependencies from package.json Node.js Web Engineering II Node.js Package Manager
134. npm install – Installing Packages Run npm i left-pad What has been changed in your package.json? Node.js Web Engineering II Node.js Package Manager LAB #18
135. npm install – Installing Packages Run npm i left-pad What has been changed in your package.json? - New entry dependencies - package name & version number with caret (^) Node.js Web Engineering II Node.js Package Manager LAB #18
136. Dependency Types 1. dependencies: required dependencies 2. devDependencies: dependencies required during development time only (i.e. command-line tools, source-to-source transpilers) 3. peerDependencies: required to be installed by a dependant package 4. optionalDependencies: do not have to be installed Node.js Web Engineering II Node.js Package Manager
137. Semantic Versioning Given MAJOR.MINOR.PATCH, increment the… - MAJOR version when a breaking change is introduced - MINOR version when a backwards-compatible feature is introduced - PATCH when a backwards-compatible bugfix is introduced Plus: Additional labels (e.g. 3.0.0-beta.2+20180413011233) Exception: Major version zero (0.x.y), anything may change anytime. https://semver.org Node.js Web Engineering II Node.js Package Manager
138. Version Ranges Floating Patch (tilde) "~2.1.3" à 2.1.3, 2.1.4, … but not 2.2.0 "2.1.x" Floating Minor (caret, default) "^2.1.3" à 2.1.3, 2.6.4, … but not 3.0.0 "2.x" Node.js Web Engineering II Node.js Package Manager
139. Version Ranges Complex Range ">=2.1.3“ "^3.0.0 || 5.0.0 – 6.1.2“ Version Pinning "2.1.3" à this version only Node.js Web Engineering II Node.js Package Manager
140. npx Executes a command (i.e. binary) from local node_modules, a central cache or after installing it Convenient alternative to npm i –g in some cases npx cowsay -s "Yo" Node.js Web Engineering II Node.js Package Manager LAB #19
141. npm outdated – Installing Packages Checking for outdated packages Node.js Web Engineering II Node.js Package Manager
142. npm update – Updates Packages Updates installed top-level packages, respecting semVer npm update –-dev also processes devDependencies npm update –g updates globally installed packages Node.js Web Engineering II Node.js Package Manager
143. package-lock.json The package-lock.json keeps track of the actually installed package versions in your repository. This allows time travelling through the repository’s history (i.e. when switching back in time, the exact same package versions get installed that were in use back then) In addition, it ensures that both developer and build server use the same package versions. Node.js Web Engineering II Node.js Package Manager
144. npm publish – Publishing Packages Makes your package accessible on the registry (npmjs.org by default) Requires prior login via npm login "private": true prevents accidental publication publishConfig allows specifying a set of whitelisted (private) registries Node.js Web Engineering II Node.js Package Manager
145. npm run – Run scripts package.json can define serveral run scripts for common tasks (e.g. running tests, building the application, deployments) The run scripts are defined in the scripts object: "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, Special scripts: start (npm start), test (npm test) Node.js Web Engineering II Node.js Package Manager
146. npm run – Run scripts prepublish postinstall postversion pretest poststart These scripts are automatically run by Node.js after/before the operation. Node.js Web Engineering II Node.js Package Manager
147. 3. Simple HTTP Server Node.js Web Engineering II
148. Preparations Install Postman https://www.getpostman.com/ Node.js Web Engineering II Simple HTTP Server LAB #20
149. Joining forces… - Functions as first-class citizens - Fat arrow functions - Object literals - Modules Node.js Web Engineering II Simple HTTP Server
150. Event Emitter Node.js makes use of the Event Emitter pattern This pattern clearly separates events and event listeners and turns out to be more practical than callbacks Event emitters can emit multiple events over time http.request(options, response => { response.on("data", data => console.log(data)); }); Node.js Web Engineering II Simple HTTP Server
151. const { createServer } = require('http'); const server = createServer(); server.on('request', (req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.write('Hello world!'); res.end(); }); server.listen(8080); Node.js Web Engineering II Simple HTTP Server
152. Use Postman to send a GET request to http://localhost:8080 Node.js Web Engineering II Simple HTTP Server LAB #21
153. 4. SPA Architecture Node.js Web Engineering II
154. Node.js Web Engineering II SPA Architecture Server- Logik Web API Push Service Web API DBs HTML, JS, CSS, Assets Webserver Webbrowser SPA Client- Logik View HTML/CSS View HTML/CSS View HTML/CSS HTTPS WebSockets HTTPS HTTPS
155. Authentication Node.js Web Engineering II Web APIs https://support.riverbed.com/bin/support/static/oc1r4qa2pks6172bsj6fte42p4/html/dhatalm0otk q7neeb7h9e9dl8j/sh_ex_4.6_ug/sh_ex_4.6_ug/images/GL3-access_code_client.png (abgerufen: 17.4.2018)
156. REST REpresentational State Transfer Dissertation by Roy Fielding (HTTP protocol editor) in 2000 Architectural Styles and the Design of Network-based Software Architectures Client-server communication RESTful APIs are stateless Resource representation in XML, HTML, JSON, … https://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm Node.js Web Engineering II Web APIs
157. Resources Anything that can be named Identified via Uniform Resource Identifiers (URI), or, more specifically, Uniform Resource Locators (URL) HTTP Verbs define way of access Node.js Web Engineering II Web APIs
158. Uniform Resource Locators https://astrid@passwort:www.example.com:8080/search.html?q=test&page=2#description Node.js Web Engineering II Web APIs Scheme User Password Host name Port Path Query string Fragment
159. HTTP Verbs Verb Action GET Access a resource (read-only). POST Creates a new child resource. PUT Updates a given resource. DELETE Deletes a resource. HEAD Checks if the given resource exists. OPTIONS Determines which verbs can be executed on a given resource. Node.js Web Engineering II Web APIs
160. HTTP Verbs Which HTTP verbs are - idempotent (i.e. can be called several times without different outcomes)? - safe (i.e. don’t modify resources)? GET / POST / PUT / DELETE / OPTIONS / HEAD Node.js Web Engineering II Web APIs LAB #22
161. HTTP Verbs Which HTTP verbs are - idempotent (i.e. can be called several times without different outcomes)? GET, PUT, DELETE, OPTIONS, HEAD - safe (i.e. don’t modify resources)? GET, OPTIONS, HEAD GET / POST / PUT / DELETE / OPTIONS / HEAD Node.js Web Engineering II Web APIs LAB #22
162. Accessing REST Resources GET /books GET /books/978-3-8362-6494-5 POST /books PUT /books/978-3-8362-6494-5 DELETE /books/978-3-8362-6494-5 Node.js Web Engineering II Web APIs
163. Content Negotiation Client communicates format (Accept), charset (Accept-Charset), encoding (Accept-Encoding) and language (Accept-Language) via HTTP headers If the server can fulfill the request, it responds with the given format/charset/encoding/language. e.g. https://example.com/people/alfred Same resource, different representations (JSON, XML, etc.) Node.js Web Engineering II Web APIs
164. HATEOAS Hypermedia as the Engine of Application State https://en.wikipedia.org/wiki/HATEOAS Node.js Web Engineering II Web APIs LAB #23
165. HATEOAS Functionality & navigation is entirely defined by the responses Node.js Web Engineering II Web APIs LAB #23 GET /accounts/12345 HTTP/1.1 Host: bank.example.com Accept: application/xml ... HTTP/1.1 200 OK Content-Type: application/xml Content-Length: ... <?xml version="1.0"?> <account> <account_number>12345</account_number> <balance currency="usd">100.00</balance> <link rel="deposit" href="https://bank.example.com/accounts/12345?deposit=12345" /> <link rel="withdraw" href="https://bank.example.com/accounts/12345?withdraw=12345" /> <link rel="transfer" href="https://bank.example.com/accounts/12345?transfer=2345" /> <link rel="close" href="https://bank.example.com/accounts/12345?status=close" /> </account>
166. Frameworks Express: https://expressjs.com/ NestJS: http://docs.nestjs.com/ Node.js Web Engineering II Web APIs with Node.js LAB #24
167. Frameworks Express: Full-fledged web framework for all kinds of web applications including RESTful APIs https://expressjs.com/ NestJS: Framework for building efficient, scalable Node.js server-side applications. Under the hood, Nest makes use of Express. https://docs.nestjs.com/ https://docs.nestjs.com/techniques/performance Node.js Web Engineering II Web APIs with Node.js LAB #24
168. 5. NestJS Node.js Web Engineering II
169. Overview Framework for building efficient, scalable Node.js server applications Combines Node.js + TypeScript NestJS uses Express or Fastify (http/2) under the hood Includes a command-line interface for scaffolding/running/building NestJS backends Heavily borrows from Angular’s architecture (e.g. controllers, pipes, guards, interceptors, dependency injection and more) Node.js Web Engineering II NestJS
170. Setup npm i -g @nestjs/cli nest new project-name # choose npm as package manager cd project-name npm start Postman: GET http://localhost:3000 Git missing? Download it at: https://git-scm.org Node.js Web Engineering II NestJS LAB #25
171. Decorators Provided by TypeScript Add metadata to a symbol @Controller('greet') export class AppController { @Get(':name') getHello(@Param('name') name): string { return `Hallo ${name}!`; } } Node.js Web Engineering II NestJS
172. Controllers A simple JavaScript class Takes care of request/response handling @Controller('greet') export class GreetController { @Get('hello') getHello(): string { return 'Hello!'; } } Node.js Web Engineering II NestJS
173. Routing Routing controls which controller (method) receives which requests e.g. GET /greet/hello @Controller('greet') export class GreetController { @Get('hello') getHello(): string { return 'Hello!'; } } Node.js Web Engineering II NestJS
174. Routing Routes can be parameterized, parameters start with a colon e.g. GET /greet/Alfred @Controller('greet') export class GreetController { @Get(':name') getHello(@Param('name') name): string { return `Hello ${name}!`; } } Node.js Web Engineering II NestJS
175. Routes @Controller('greet') export class AppController { @Get(':name') getHello(@Param('name') name): string { return `Hello ${name}!`; } } Node.js Web Engineering II NestJS LAB #26
176. Usage Use Postman to send a request to http://localhost:3000/greet/Alfred Node.js Web Engineering II NestJS LAB #27
177. Versioned Routes const routes: Routes = [ { path: '/v1', module: V1Module }, { path: '/v2', module: V2Module } ]; @Module({ imports: [ RouterModule.forRoutes(routes), V1Module, V2Module ], }) export class ApplicationModule {} https://github.com/shekohex/nest-router Node.js Web Engineering II NestJS
178. Error Handling RESTful APIs communicate errors by using HTTP status codes: - 1xx: Information - 2xx: Successful - 3xx: Redirect - 4xx: Client Error - 5xx: Server Error Node.js Web Engineering II NestJS
179. Error Handling // Pass response & status code throw new HttpException('Forbidden', HttpStatus.FORBIDDEN); // Response objects are serialized throw new HttpException({ text: '403' }, HttpStatus.FORBIDDEN); // Shorthand exceptions throw new ImATeapotException(); Node.js Web Engineering II NestJS
180. Error Handling Add a new POST endpoint for greet/:name. For now, this endpoint should always fail. Use an error that is suitable for communicating that there was a conflict (see https://en.wikipedia.org/wiki/List_of_HTTP_status_codes) Test the endpoint using Postman. Node.js Web Engineering II NestJS LAB #28
181. Craft an API A TODO item has three properties: - id (number, optional for creation) - name (string) - done (boolean) { "id": 0, "name": "Wäsche waschen", "done": true } nest generate class todo Node.js Web Engineering II NestJS LAB #29
182. Craft an API: nest generate controller todos - Fetching all TODOs (GET /todos) - 200 OK + array - Fetching a single TODO (GET /todos/123) - 200 OK + object if it exists or 404 Not Found if it does not exist - Creating new TODOs (POST /todos + object without ID) - 201 Created + created object including ID! - Updates a TODO (PUT /todos/123 + object) - 204 No Content - Deletes a TODO (DELETE /todos/123) - 204 No Content Node.js Web Engineering II NestJS LAB #29
183. nest generate service todos Node.js Web Engineering II
184. Craft an API Use a Map for storing the items and a numeric ID. - Use an auto-incremented ID - map.set(id, elm) sets the element with the given ID - map.get(id) returns/accesses the element with the given ID - map.delete(id) removes the element with the given ID - Array.from(map.values()) returns all elements Node.js Web Engineering II NestJS LAB #29
185. 6. Logging Node.js Web Engineering II
186. Configuration const app = await NestFactory.create(ApplicationModule, { logger: false, }); await app.listen(3000); Node.js Web Engineering II Logging
187. @Controller('greet') export class GreetController { private readonly _logger = new Logger('Greet'); @Get() get() { this._logger.log('Foo'); } } Node.js Web Engineering II Logging LAB #30
188. 7. AuthZ/AuthN Node.js Web Engineering II
189. Authn primarily deals with user identity: who is this person? Is she who she says she is? There are a large number of systems that handle this “checkpoint” level of identity and access management and help to reduce the number of credentials that a user needs to provide, often through single sign-on (or SSO). (https://www.cyberark.com/blog/distinguishing-authn-and-authz/, abgerufen 06.05.2018) Node.js Web Engineering II AuthN
190. Authz answers a different set questions, for example: what should this user or system be allowed to access (authz can manage service-to- service as well as user-to-service permissioning)? An authz platform might determine if a user is a developer, and then grant his/her permission to push source code to a Git repository, but prohibit the user from directly changing the software deployed into the production environment. (https://www.cyberark.com/blog/distinguishing-authn-and-authz/, abgerufen 06.05.2018) Node.js Web Engineering II AuthZ
191. Node.js Web Engineering II The Problem…
192. bob:passwort123 Node.js Web Engineering II The Problem…
193. The combination of username and password rarely expires Leaking the password may break other accounts as well Node.js Web Engineering II The Problem…
194. Token-Based Authentication (TBA) Tokens that authorize the user, but expire at some point in the future Leaking the token does not leak the password Allows other means of authentication (Single sign-on, passwordless logins, etc.) Node.js Web Engineering II The Solution…
195. Open Authorization Open protocol for API authorization Version 2 was established in 2012 RFC 6749: “The OAuth 2.0 Authorization Framework” Designed with cross-platform applications and living room devices in mind Node.js Web Engineering II OAuth 2.0
196. Roles Resource Owner Entity that posesses certain protected resources. Resource Server Server storing protected resources (i.e. data). Client Application that wants to access resources from the resource server. Authorization Server Authenticates the resource owner and provides access tokens for a certain scope. Can be identical to the resource server. Node.js Web Engineering II OAuth 2.0
197. Tokens Access Token Allows access to resources (short-lived). Refresh Token Allows reissuing a new access token (long-lived). Node.js Web Engineering II OAuth 2.0
198. Resources Profile Data API Access Node.js Web Engineering II OAuth 2.0
199. Scopes Can be used to limit the type of access (and thus the token’s power) to a resource, e.g. by introducing read-only or read/write permissions Node.js Web Engineering II OAuth 2.0
200. Consent https://api.slack.com/docs/oauth-scopes (abgerufen am 07.05.2018) Node.js Web Engineering II OAuth 2.0
201. Flows 1. Authorization Code Grant 2. Implicit Grant 3. Resource Owner Password Credentials Grant 4. Client Credentials Grant Node.js Web Engineering II OAuth 2.0
202. Flows Name an example for this flow (which app type could make use of it?) Describe how this flow technically works (any special requirements?) Explain the scenario and the sequence diagram Can refresh tokens be issued? (Why?/Why not?) Are there known vulnerabilities? liebel.io/oauthflow Node.js Web Engineering II OAuth 2.0 LAB #31
203. Authorization Code Grant Node.js Web Engineering II OAuth 2.0 http://www.bubblecode.net/en/2016/01/22/understanding-oauth2/ (abgerufen am 08.05.2018) when Client is a server-side or native mobile app
204. Implicit Grant Node.js Web Engineering II OAuth 2.0 http://www.bubblecode.net/en/2016/01/22/understanding-oauth2/ (abgerufen am 08.05.2018) when application is a client-side web app
205. SOP Same-Origin Policy Origin: Protocol + host name + port number Security feature that protects scripts or other content from accessing sensitive data and/or state Node.js Web Engineering II OAuth 2.0
206. SOP Reference: https://example.com/index.html a) https://example.com:8080/index.html b) http://example.com/index.html c) https://example.com/images/index.html d) https://www.example.com/index.html e) https://username@password:example.com/index.html f) https://example.com/ g) https://example.com/sitemap.xml Node.js Web Engineering II OAuth 2.0 LAB #32
207. CORS Cross-Origin Resource Sharing Feature for protecting end users Requests sent to a different origin have to contain a Access-Control- Allow-Origin header that whitelists the origin where the request originated from Node.js Web Engineering II OAuth 2.0
208. CORS & NestJS const app = await NestFactory.create(ApplicationModule, { cors: true }); const app = await NestFactory.create(ApplicationModule, { cors: { maxAge: 5, origin: ['http://api.myapp.com', 'http://web.myapp.com'], allowedHeaders: ['API-Token'], exposedHeaders: ['API-Token-Expiry'] }}); Node.js Web Engineering II OAuth 2.0
209. Resource Owner Password Credentials Grant Node.js Web Engineering II OAuth 2.0 http://www.bubblecode.net/en/2016/01/22/understanding-oauth2/ (abgerufen am 08.05.2018) when client is absolutely trusted
210. Client Credentials Grant Node.js Web Engineering II OAuth 2.0 http://www.bubblecode.net/en/2016/01/22/understanding-oauth2/ (abgerufen am 08.05.2018) when client is resource owner
211. On-line service for identity management (Authentication as a Service) Implements OAuth 2.0 and OIDC Management UI Open an account at: https://auth0.com Please create a new application. Node.js Web Engineering II Auth0 LAB #33
212. JSON Web Token Open standard Established in 2015 RFC 7519 Securely transmit information between parties as a JSON object Encoded in base64 Can be verified and trusted because it is digitally signed But: Data is not encrypted! Node.js Web Engineering II JWT
213. JSON Web Token eyJhbGciOiJSUzI1NiIsImtpZCI6IjFlOWdkazcifQ.ewogImlzcyI6ICJodHRw Oi8vc2VydmVyLmV4YW1wbGUuY29tIiwKICJzdWIiOiAiMjQ4Mjg5NzYxMDAxIiw KICJhdWQiOiAiczZCaGRSa3F0MyIsCiAibm9uY2UiOiAibi0wUzZfV3pBMk1qIi wKICJleHAiOiAxMzExMjgxOTcwLAogImlhdCI6IDEzMTEyODA5NzAKfQ.ggW8hZ 1EuVLuxNuuIJKX_V8a_OMXzR0EHR9R6jgdqrOOF4daGU96Sr_P6qJp6IcmD3HP9 9Obi1PRs-cwh3LO-p146waJ8IhehcwL7F09JdijmBqkvPeB2T9CJNqeGpe- gccMg4vfKjkM8FcGvnzZUN4_KSP0aAp1tOJ1zZwgjxqGByKHiOtX7TpdQyHE5lc MiKPXfEIQILVq0pc_E2DzL7emopWoaoZTF_m0_N0YzFC6g6EJbOEoRoSK5hoDal rcvRYLSrQAZZKflyuVCyixEoV9GfNQC3_osjzw2PAithfubEEBLuVVk4XUVrWOL rLl0nx7RkKU8NXNHq-rvKMzqg Node.js Web Engineering II JWT
214. JSON Web Token eyJhbGciOiJSUzI1NiIsImtpZCI6IjFlOWdkazcifQ.ewogImlzcyI6ICJodHRw Oi8vc2VydmVyLmV4YW1wbGUuY29tIiwKICJzdWIiOiAiMjQ4Mjg5NzYxMDAxIiw KICJhdWQiOiAiczZCaGRSa3F0MyIsCiAibm9uY2UiOiAibi0wUzZfV3pBMk1qIi wKICJleHAiOiAxMzExMjgxOTcwLAogImlhdCI6IDEzMTEyODA5NzAKfQ.ggW8hZ 1EuVLuxNuuIJKX_V8a_OMXzR0EHR9R6jgdqrOOF4daGU96Sr_P6qJp6IcmD3HP9 9Obi1PRs-cwh3LO-p146waJ8IhehcwL7F09JdijmBqkvPeB2T9CJNqeGpe- gccMg4vfKjkM8FcGvnzZUN4_KSP0aAp1tOJ1zZwgjxqGByKHiOtX7TpdQyHE5lc MiKPXfEIQILVq0pc_E2DzL7emopWoaoZTF_m0_N0YzFC6g6EJbOEoRoSK5hoDal rcvRYLSrQAZZKflyuVCyixEoV9GfNQC3_osjzw2PAithfubEEBLuVVk4XUVrWOL rLl0nx7RkKU8NXNHq-rvKMzqg Node.js Web Engineering II JWT Header Payload Signature
215. Claims Name-value pairs included in the token’s payload JWT claims iss – entity that issued this token (issuer) sub – authorized subject aud – audience the token is intended for exp – when does the token expire? nbf – when does the token validity start? (not before) Node.js Web Engineering II JWT
216. Node.js Web Engineering II Token Validation
217. JWK & JWKS JSON Web Key (JWK) A JSON object that represents a cryptographic key. The members of the object represent properties of the key, including its value. JSON Web Key Set (JWKS) A JSON object that represents a set of JWKs. The JSON object MUST have a keys member, which is an array of JWKs. Node.js Web Engineering II Token Validation
218. Middleware export class AuthenticationMiddleware implements NestMiddleware { use(req, res, next) { jwt({ secret: expressJwtSecret({ cache: true, rateLimit: true, jwksRequestsPerMinute: 5, jwksUri: 'https://${DOMAIN}/.well-known/jwks.json', }), audience: 'http://localhost:3000', issuer: 'https://${DOMAIN}/', algorithm: 'RS256', } … Node.js Web Engineering II JWT & NestJS
219. Middleware Update your API to make use of the JWT middleware. https://liebel.io/nestauth Section “Defining a Nest.js Middleware” Node.js Web Engineering II JWT & NestJS LAB #34
220. Usage The middleware provides the token’s claims in req.user Node.js Web Engineering II JWT & NestJS
221. Usage Update your implementation to serve different todos per user. Node.js Web Engineering II JWT & NestJS LAB #35
222. Identity Layer based on OAuth 2.0 for authentication Scopes: openid + profile, email, address, phone User information is enclosed as claims in an ID token Node.js Web Engineering II OpenID Connect
223. Do not implement this yourself!! Use active, reviewed open-source projects instead. Node.js Web Engineering II Warning!
224. 8. Socket.io Node.js Web Engineering II
225. General Implementation of “hollywood principle” (don’t call us, we call you) Different transport methods: HTTP Long Polling, WebSockets (based on what’s available on the target platform) https://socket.io Node.js Web Engineering II Socket.io
226. NestJS npm i --save @nestjs/websockets @nestjs/platform-socket.io npm i --save-dev @types/socket.io @WebSocketGateway() export class EventsGateway { @WebSocketServer() server: Server; } https://docs.nestjs.com/websockets/gateways Node.js Web Engineering II Socket.io
227. Usage const socket = require('socket.io-client')('http://localhost'); socket.on('connect', () => /* TODO */)); socket.on('event', data => /* TODO */); socket.on('disconnect', () => /* TODO */)); Node.js Web Engineering II Socket.io
228. 9. Database Access Node.js Web Engineering II
229. e.g. using Sequelize const Sequelize = require('sequelize'); const sequelize = new Sequelize('database', 'username', 'password', { host: 'localhost', dialect: 'mysql'|'sqlite'|'postgres'|'mssql', pool: { max: 5, min: 0, acquire: 30000, idle: 10000 }, operatorsAliases: false }); Node.js Web Engineering II Database Access
230. e.g. using Sequelize const User = sequelize.define('user', { username: Sequelize.STRING, birthday: Sequelize.DATE }); sequelize.sync() .then(() => User.create({ username: 'janedoe', birthday: new Date(1980, 6, 20) })) .then(jane => console.log(jane.toJSON())); Node.js Web Engineering II Database Access
231. - npm i –g learnyounode - learnyounode - https://github.com/workshopper/learnyounode Bonus Exercises Web Engineering II Node.js
232. Angular Web Engineering II Christian Liebel @christianliebel M.Sc.
233. Alternatives React Vue.js Angular Kickstart Angular
234. 1. What is Angular? Kickstart Angular
235. SPA Framework Cross- Platform Platform- agnostic Open- source What is Angular? Kickstart Angular
236. Single-Page Application Framework Angular Server- Logik Web API Push Service Web API DBs HTML, JS, CSS, Assets Webserver Webbrowser SPA Client- Logik View HTML/CSS View HTML/CSS View HTML/CSS HTTPS WebSockets HTTPS HTTPS Kickstart Angular
237. Application Segmentation UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) Angular Kickstart Angular
238. Cross-Platform Support Angular JS HTML CSS .ipa .exe .app ELF .apk .appx Single-Page Web Application Cordova Electron Kickstart Angular
239. Platform-agnostic Angular Angular App Application Layer Rendering Layer Web Worker Server Browser NativeScript … Kickstart Angular
240. Release Schedule Time-based release schedule (6 months) • March/April: even version • September/October: odd version Deprecation Policy • Compatibility to previous major version (1 year) • Long-Term Supported Version (critical fixes/security patches only) • 6.x (Oct 2018–19, 1.5 years in total) Angular Kickstart Angular
241. 2. Why SPA? Kickstart Angular
242. Properties • Fat clients (i.e., load everything they need to run during bootstrap) • A change of the view does not lead to a server-side page navigation Single-Page Web Applications (SPA) Kickstart Angular
243. Advantages • Very performant • Works offline • No special server requirements (i.e., serving static files is sufficient) Disadvantages • Some logic (i.e., computation- intensive) can only be run on a server (connection required) • Logic is transfered to the client (code can’t be kept secret) Single-Page Web Application (SPA) Kickstart Angular
244. 3. Angular CLI Kickstart Angular
245. Features Bootstrapping ng new <PROJECT_NAME> Scaffolding ng generate <SCHEMATIC> <NAME> Angular CLI Kickstart Angular
246. Features Unit Testing ng test End-to-End Testing ng e2e Angular CLI Kickstart Angular
247. Features Development Server ng serve Build Process ng build Angular CLI Kickstart Angular
248. Features Add Angular Libraries ng add Update App and Dependencies ng update Angular CLI Kickstart Angular
249. Features Linter (Static Code Analysis) ng lint Documentation ng doc component Angular CLI Kickstart Angular
250. 1. Please update your installation of the Angular CLI: npm i -g @angular/cli 2. Please create a new Angular CLI project: ng new todoApp 3. Run the following command and navigate to http://localhost:4200: ng serve Angular CLI LAB #36 Kickstart Angular
251. 4. Modules Kickstart Angular
252. Horizontal Application Segmentation UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) Modules Kickstart Angular
253. Angular Building Blocks UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) Modules Components Directives Pipes High-Level Services Low-Level Services Kickstart Angular
254. @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Modules Components Directives Pipes Modules Services Kickstart Angular
255. Dependency Tree AppModule TodoModule CommonModule BookModule CommonModule TicketModule ShopModule EditorModule Modules Kickstart Angular
256. 5. Bindings Kickstart Angular
257. UI references a property on the component instance that should be interpolated Or: UI references a method on the component instance that should be called on a certain event Automatically updates UI when the model is updated Keeps presentation and model in sync Data Binding Kickstart Angular
258. public void btnCalc_click() { lblVal.Text = value1 + value2; } btnCalc lblVal Kickstart Angular
259. {{ Moustache Syntax Kickstart Angular
260. Das Ergebnis ist <strong>{{ value1 + value2 }}</strong>. Handlebars Kickstart Angular
261. In your freshly created project, navigate to src/app/app.component.html and try the following bindings: 1. {{ 'hallo' }} 2. {{ 3 }} 3. {{ 17 + 4 }} 4. {{ '<div>Does this work?</div>' }} 5. {{ alert('boom') }} Bindings LAB #37 Kickstart Angular
262. Component view (HTML) {{ value }} Component logic (TS) @Component(/* … */) export class AppComponent { public value = 'Hello!'; } Bindings Kickstart Angular
263. Component view (HTML) {{ value }} Component logic (TS) @Component(/* … */) export class AppComponent { public value = 'Hello!'; } Bindings LAB #38 Kickstart Angular
264. [ ] ( ) More Bindings Kickstart Angular
265. Pass data in Bind to a certain property of a DOM node or component/directive Property Binding [ ] Kickstart Angular
266. 1. Declare a new field “color” on your component instance and initialize it with a CSS color value (e.g., hotpink) 2. Create a new div element in the AppComponent’s HTML template 3. Bind the value of the field to the background color of the div element Hint: [style.backgroundColor] Property Binding LAB #39 Kickstart Angular
267. <div [style.backgroundColor]="color">Test</div> Property Binding LAB #39 Kickstart Angular
268. Get data out Bind to a certain event of a DOM node or component/directive Event Binding ( ) Kickstart Angular
269. 1. Implement a new method “onClick” on the component instance (it opens an alert box: alert('Hello!')) 2. Create a new button element in the AppComponent’s HTML template 3. Bind the click event of the button to the onClick method Hint: (click)="onClick()" 4. Implement a new method “onMouseMove” on the component instance (it logs to the console) 5. Bind the mousemove event of the button to onMouseMove Event Binding LAB #40 Kickstart Angular
270. public onClick(): void { alert('Hello!'); } public onMouseMove(): void { console.log('Hello!'); } <button (click)="onClick()" (mousemove)="onMouseMove()">Click me.</button> Event Binding LAB #40 Kickstart Angular
271. Magic value: $event Contains the event arguments <div (click)="onClick($event)"></div> Event Binding ( ) Kickstart Angular
272. Adjust the implementations of onClick and onMouseMove to print the coordinates of the mouse (instead of printing Hello!) <button (click)="onClick($event)"></button> Hint: public onClick(event: MouseEvent): void {} Event Binding LAB #41 Kickstart Angular
273. public onClick(event: MouseEvent): void { alert(event.clientX); } public onMouseMove(event: MouseEvent): void { console.log(event.clientX); } <button (click)="onClick($event)" (mousemove)="onMouseMove($event)">Click me.</button> Event Binding LAB #41 Kickstart Angular
274. 6. Pipes Kickstart Angular
275. UI-related Re-usable Manipulate binding values for the view without changing the underlying value (one-way) {{ value | pipe }} UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) Kickstart Angular
276. Principle Pipes Value Pipe Transformed Value Kickstart Angular
277. Principle Pipes Hello! UppercasePipe HELLO! Kickstart Angular
278. Built-in Pipes • uppercase • lowercase • date • number • percent • currency • json Pipes Kickstart Angular
279. Parameters Pipes can also have parameters delimited by a colon {{ value | number:'0.3' }} Pipes Kickstart Angular
280. Built-in Pipes 1. Adjust your value binding from lab #38 to be printed as UPPERCASE. 2. Add a new numeric field to your AppComponent. Bind this field to the template using the pipes: • Percent • Currency • Number (showing five decimal places) Example: {{ value | number:'0.3' }} Pipes LAB #42 Kickstart Angular
281. Built-in Pipes {{ value | uppercase }} à HELLO! {{ number | percent }} à 300% {{ number | currency }} à $3.00 {{ number | number:'0.5' }} à 3.00000 Pipes LAB #42 Kickstart Angular
282. Custom Pipes Create a new pipe: ng generate pipe yell (or: ng g p yell) 1. Which files have been created by the CLI? 2. What is their purpose? Pipes LAB #43 Kickstart Angular
283. Parts Files Purpose yell.pipe.ts Pipe class implementation yell.pipe.spec.ts Unit test Pipes LAB #43 Please also note the update of the AppModule. Kickstart Angular
284. Custom Pipes Implement the yell pipe as follows: • The yell pipe should suffix the bound value with three exclamation marks. • The developer can optionally pass an argument to override the suffix. {{ value | yell }} à Hello!!!! {{ value | yell:'???' }} à Hello!??? Pipes LAB #44 Kickstart Angular
285. 7. Components Kickstart Angular
286. UI-related Re-usable Custom DOM element HTML Template <app-todo></app-todo> UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) Kickstart Angular
287. Principle Components Input 1 Component Output A Input 2 Output B Input 1 Component Kickstart Angular
288. Create a new component: ng generate component todo (or: ng g c todo) 1. Which files have been created by the CLI? 2. What is their purpose? Components LAB #45 Kickstart Angular
289. Parts Files Purpose todo.component.html HTML template todo.component.ts Component class implementation todo.component.css Stylesheet todo.component.spec.ts Unit Test Components LAB #45 Please also note the update of the AppModule. Kickstart Angular
290. @Component({ selector: 'app-todo', templateUrl: './todo.component.html', //template: '<strong>inline template</strong>', styleUrls: ['./todo.component.css'] }) export class TodoComponent { } Components Kickstart Angular
291. Use your freshly created component in the AppComponent. Components LAB #46 Kickstart Angular
292. <app-todo></app-todo> @Component({ selector: 'app-todo', templateUrl: './todo.component.html', styleUrls: ['./todo.component.css'] }) export class AppComponent { } Components LAB #46 Kickstart Angular
293. 8. Input/Output Kickstart Angular
294. Bindings for component state/events [ ] ( ) Input/Output Kickstart Angular
295. We want to pass arbitrary data to components: <app-todo [todo]="todo"></app-todo> Input Kickstart Angular
296. Component Perspective <app-todo [todo]="todo"></app-todo> @Input() public todo; @Input('todo') public todoX; Input Kickstart Angular
297. 1. Extend your TodoComponent with an Input field called todo. 2. Add a new myTodo field to the AppComponent which holds a todo object { name: "Wash clothes", done: false, id: 3 } 3. Pass the myTodo object to the todo component from the AppComponent’s template. 4. In the TodoComponent’s template, bind the value of the todo field using the JSON pipe. Input LAB #47 Kickstart Angular
298. We want to get informed about custom events: <app-todo (done)="onDone()"></app-todo> Output Kickstart Angular
299. Component Perspective <app-todo (done)="onDone($event)"></app-todo> @Output() public done = new EventEmitter<any>(); // done.emit(todo); @Output('done') public doneEmitter = new EventEmitter<any>(); Output Kickstart Angular
300. 1. Extend your TodoComponent with an Output called done. 2. Add a button to your TodoComponent and an event binding for the click event of this button. When the button is clicked, emit the done event. Pass the current todo object as the event argument. 3. In the AppComponent’s template, bind to the done event and log the finalized item to the console. @Output() public done = new EventEmitter<any>(); // done.emit(todo); Output LAB #47 Kickstart Angular
301. 9. HostListener/HostBinding Kickstart Angular
302. <app-todo [style.backgroundColor]="color"></app-todo> @Component({ selector: 'app-todo', /* … */ }) export class TodoComponent { @HostBinding('style.backgroundColor') public color = 'hotpink'; } Angular Kickstart HostBinding
303. <app-todo (click)="onClick()"></app-todo> @Component({ selector: 'app-todo', /* … */ }) export class TodoComponent { @HostListener('click') public onClick() {} } Angular Kickstart HostListener
304. Another feature is the “class” property binding: “class.foo” can be bound to a boolean value. If the value is truthy, the class is set. If the value is falsy, the class is removed. 1. Add a HostListener that listens for any click on the host element. 2. Introduce a new boolean field called doneState. 3. Assign a HostBinding to it which sets the done class. 4. The click handler method should toggle the underlying field. 5. Bonus: Adjust the component’s CSS to strikethrough all the text inside the component when the done class is set. HostBinding/HostListener LAB #48 Kickstart Angular
305. 10. Directives Kickstart Angular
306. UI-related Re-usable Manipulate styling or behaviour of a DOM element Or: Manipulate DOM structure (not covered here) <app-todo myDirective></app-todo> UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) Kickstart Angular
307. Create a new component: ng generate directive test (or: ng g d test) 1. Which files have been created by the CLI? 2. What is their purpose? Directives LAB #49 Kickstart Angular
308. Parts Files Purpose test.directive.ts Directive class implementation test.directive.spec.ts Unit Test Directives LAB #49 Please also note the update of the AppModule. Kickstart Angular
309. Create a directive that takes a color as an input binding. The directive should set the color of the host element (using a host binding). Angular Kickstart Directives LAB #50
310. Create another directive that adds a click handler to the elements where it’s placed on. Whenever the item is clicked, log a message to the console. Angular Kickstart Directives LAB #50
311. 11. Dependency Injection Kickstart Angular
312. Goal - DI container is aware of environment - Sets up dependencies accordingly - Low Coupling, High Cohesion Angular Kickstart Dependency Injection DI Container My Calculation Mock TaxCalc Germany TaxCalc ELSTER
313. Dependency Tree - Angular Dependency Injection is type-based - Only classes can be used as providers and injectables, as interfaces vanish during TypeScript transpilation - Alternative for non-class dependencies: InjectionTokens - Classes have to be marked as @Injectable if they want to request dependencies - Dependencies can be requested by simply using them as a constructor parameter Angular Kickstart Angular DI
314. Self-Register as an Application-wide Singleton @Injectable({ providedIn: 'root' }) export class TaxCalculation {} Angular Kickstart Angular DI RootInjector Module Component Module Component Module Component Component
315. Consuming Dependencies @Injectable() export class MyCalculation { constructor(taxCalc: TaxCalculation) {} } Throws an error if dependency cannot be resolved! Angular Kickstart Angular DI
316. 12. Services Kickstart Angular
317. Not UI-related Re-usable Contain common (domain-specific) logic Contain infrastructure (non-domain-specific) code UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) Kickstart Angular
318. Create a new service: ng generate service todo (or: ng g s todo) 1. Which files have been created by the CLI? 2. What is their purpose? 3. (How) are they provided in the DI container? Services LAB #51 Kickstart Angular
319. Parts Files Purpose todo.service.ts Service class implementation todo.service.spec.ts Unit Test Services LAB #51 Kickstart Angular
320. Preparation 1. Create a new Todo model class: ng generate class todo 2. Add the properties: - name (string) - done (boolean) - id (number, optional) Services LAB #52 Kickstart Angular
321. Service API In your TodoService, add the following methods: - create(todo: Todo): Todo - get(todoId: number): Todo - getAll(): Todo[] - update(todo: Todo): void - delete(todoId: number): void Add a very basic, synchronous implementation for getAll, get and create. Services LAB #53 Kickstart Angular
322. Service Usage - Inject your TodoService into the AppComponent (imports!) - Log the list of todos to the console Services LAB #54 Kickstart Angular
323. 13. Structural Directives Kickstart Angular
324. UI-related Re-usable Manipulate DOM structure <app-todo *myDirective></app-todo> UI-related components (BookModule) UI-related components (TodoModule) Logic/ infrastructure components (BookModule) Logic/ infrastructure components (TodoModule) Kickstart Angular
325. Conditionally Include Node in DOM <button (click)="toggle()">Toggle</button> <div *ngIf="show"> I’m visible! </div> Angular Kickstart *ngIf LAB #55
326. Multiple conditions <div [ngSwitch]="user.language"> <div *ngSwitchCase="DE">Hallo, {{ user.name }}!</div> <div *ngSwitchCase="ES">¡Hola, {{ user.name }}!</div> <div *ngSwitchDefault>Hello, {{ user.name }}!</div> </div> Angular Kickstart *ngSwitchCase <div> <div>¡Hola, {{ user.name }}!</div> </div>
327. Removes Artificial Nodes From Rendering <ng-container [ngSwitch]="user.language"> <div *ngSwitchCase="DE">Hallo, {{ user.name }}!</div> <div *ngSwitchCase="ES">¡Hola, {{ user.name }}!</div> <div *ngSwitchDefault>Hello, {{ user.name }}!</div> </ng-container> Angular Kickstart ng-container <div>¡Hola, {{ user.name }}!</div>
328. Repeat DOM Node <ul> <li *ngFor="let todo of todos">{{ todo.name }}</li> </ul> Angular Kickstart *ngFor
329. Repeat DOM Node <ul> <li>Wash my clothes</li> <li>Tidy up the room</li> <li>Mine bitcoin</li> </ul> Angular Kickstart *ngFor [ "Wash my clothes" "Tidy up the room" "Mine bitcoin" ]
330. Display TODOs In the AppComponent - introduce a new field todos and assign the return value of todoService.getAll() to it - bind this field to the view using the *ngFor structural directive and an unordered list (<ul>) with one list item (<li>) for each todo <li *ngFor="let todo of todos"></li> Angular Kickstart *ngFor LAB #56
331. Do not use an unordered list, but iterate over your TodoComponent (app-todo) instead and pass the todo via the todo property binding. Adjust the template of TodoComponent to include: - A checkbox (input) to show the “done” state - A label to show the “name” text <label> <input type="checkbox" [checked]="todo.done"> {{ todo.name }} </label> Angular Kickstart Refactoring Step LAB #57
332. <label> <input type="checkbox" [checked]="todo.done"> {{ todo.name }} </label> Angular Kickstart Refactoring Step LAB #57
333. 14. Observables & RxJS Kickstart Angular
334. Motivation Obviously, not all use cases can be solved synchronously When we are using our Node.js-based TODO API, this will be an asynchronous task (due to network roundtrip) For a fast and fluid user experience, everything that could potentially take longer than 16ms (=> 60 fps) should be done asynchronously! Angular Kickstart Observables
335. Motivation Callback Promise Observable Execution Eager Eager Lazy Values Multiple Single Multiple Cancellable No No* Yes Composable No Yes Yes Angular Kickstart Observables https://angular.de/artikel/angular2-observables/
336. “Data over Time” https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 (abgerufen am 23.05.2018) Angular Kickstart Observables
337. Reactive https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 (abgerufen am 23.05.2018) Angular Kickstart Observables
338. Originally known as Reactive Extensions for .NET Open-Source Published for JavaScript, Java, … High-Level Flow Composition Provides an Observable implementation Provides operators (map, throttle, …) Angular Kickstart RxJS
339. Upgrade Synchronous Values to an Observable of(value) à Promise.resolve(value) throwError(err) à Promise.reject(err) Angular Kickstart Observables
340. Service API Adjust your TodoService to now return Observables and upgrade the synchronous value in getAll() to an Observable (via of()). - create(todo: Todo): Observable<Todo> - get(todoId: number): Observable<Todo> - getAll(): Observable<Todo[]> - update(todo: Todo): Observable<void> - delete(todoId: number): Observable<void> Observables LAB #60 Kickstart Angular
341. Subscribe public todos: Todo[]; this.todos = todoService.getAll(); todoService.getAll().subscribe(todos => this.todos = todos); Angular Kickstart Observables
342. Subscribe public todos: Todo[]; this.todos = todoService.getAll(); todoService.getAll().subscribe(todos => this.todos = todos); Angular Kickstart Observables LAB #61
343. Unsubscribe private subscription: Subscription; this.subscription = someHotObservable.subscribe(); public ngOnDestroy(): void { this.subscription.unsubscribe(); } Angular Kickstart Observables
344. 15. HttpClient Kickstart Angular
345. Infrastructure service provided by Angular’s @angular/core/http package. Allows setting up HTTP Requests using a TypeScript-friendly interface: - get(url) - post(url, data) - put(url, data) - delete(url) Angular Kickstart HttpClient
346. https://auth0.com/docs/quickstart/spa/angular/01-login https://auth0.com/docs/quickstart/spa/angular/02-calling-an-api Angular Kickstart HttpClient LAB #62
347. Add a constructor to TodoService and request an instance of HttpClient Use HTTP requests instead of returning synchronous data Angular Kickstart HttpClient LAB #63