JS Application Development Part 1 - ES 2015 / Redux

Slide 1

Slide 1 text

CLIENT APPLICATION DEVELOPMENT André König sitegeist media solutions GmbH Part 1

Slide 2

Slide 2 text

The road ahead ....

Slide 3

Slide 3 text

Eine brandneue Programmiersprache ECMAScript-Features im MySysmex Projekt Das ungeliebte Kind: Der Build-Prozess Kleiner Exkurs. Warum ist dieser Prozess überhaupt notwendig? "It's all about state handling" Einblick in das State-Handling mit Redux – dem sogenannten predictable state container für JavaScript-basierte Applikationen. Dieser Part behandelt die Basic-Prinzipien von Redux. Part 1

Slide 4

Slide 4 text

Advanced Redux Fortgeschrittene Aspekte im Redux-Kontext. Handling von Seiteneﬀekten mittels Redux Sagas, etc. Part 2 React Einstieg in die View-Layer Implementierung, die innerhalb des MySysmex Projektes eingesetzt wird.

Slide 5

Slide 5 text

Part 3 My Sysmex Technischer Einblick in die Struktur des MySysmex Projektes.

Slide 6

Slide 6 text

Eine brandneue Programmiersprache

Slide 7

Slide 7 text

WOW! WOW! JavaScript JavaScript sieht nun wie eine sieht nun wie eine richtige richtige Programmier- Programmier- sprache aus. sprache aus. – Leute

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Variables and Scoping Classes Destructuring Modules Arrow Functions Default Values Object Spread Generators* Template Strings Spread Operator

Slide 10

Slide 10 text

Variablen und Scoping

Slide 11

Slide 11 text

// Good ol' ES5-Variablen var foo = 'bar'; // Problem: Variablen "Hoisting" var zoo = 'baz'; function doSomething() { console.log(zoo); // undefined var zoo = 'haha ...'; } doSomething();

Slide 12

Slide 12 text

// `let` hilft gegen das Hoisting von Variablen console.log(zoo); // Uncaught TypeError zoo is undefined let zoo = 'haha ...';

Slide 13

Slide 13 text

// `const` const foo = 'bar'; foo = 'zoo'; // Uncaught TypeError: Assignment to constant variable. // // ABER!!!! // // Dies gilt nur für primitive Datentypen (string, number, boolean) nicht // für den "Inhalt" von Objekten (object, array). // const person = { name: 'André König' }; person.name = 'Hans Wurst'; // Erlaubt person = {foo: 'bar'}; // Uncaught TypeError: Assignment to constant variable.

Slide 14

Slide 14 text

const

Slide 15

Slide 15 text

Destructuring

Slide 16

Slide 16 text

// // ES5 // // // Objekte // var person = { name: 'André König', age: 30 }; var name = person.name; var age = person.age; console.log(name); // André König console.log(age); // 30 // // Arrays // var randomNumbers = [10, 9, 1, 2, 5]; var ten = randomNumbers[0]; var nine = randomNumbers[1];

Slide 17

Slide 17 text

// // Object destructuring // const person = { name: 'André König', age: 30 }; const {name, age} = person; console.log(name); // André König console.log(age); // 30 // Aliasing const {name: daName} = person; console.log(daName); // André König // // Array destructuring // const randomNumbers = [10, 9, 1, 2, 5]; const [ten, nine] = randomNumbers; console.log(ten); // 10 console.log(nine); // 9

Slide 18

Slide 18 text

Default Values

Slide 19

Slide 19 text

// // ES5 // function doSomething(a, b, c) { b = b || 'ein B'; c = c || 'ein C'; console.log(a, b, c); } doSomething('ein A');

Slide 20

Slide 20 text

// // Default Values in ES2015 // function doSomething(a, b = 'ein B', c = 'ein C') { console.log(a, b, c); } doSomething('ein A');

Slide 21

Slide 21 text

Template Strings

Slide 22

Slide 22 text

// // ES5 // const firstName = 'André'; const lastName = 'König'; console.log('Seems like your name is ' + firstName + ' ' + lastName);

Slide 23

Slide 23 text

// // ES2015 // const firstName = 'André'; const lastName = 'König'; console.log(`Seems like your name is ${firstName} ${lastName}`); function onePlus(something) { return 1 + something; } console.log(`Look ma, a calculation ${onePlus(1)}!`);

Slide 24

Slide 24 text

Classes

Slide 25

Slide 25 text

// // ES5 // // Base "class" function Wheeler() {} // The car "class" function Car(color) { Wheeler.call(this); this.color = color; } Car.prototype = Object.create(Wheeler.prototype); Car.prototype.moep = function moep() { console.log('Moep!!! I\'m a ' + this.color + ' car.'); }; var car = new Car('red'); car.moep();

Slide 26

Slide 26 text

// // ES2015 // // Base "class" class Wheeler { } // The car "class" class Car extends Wheeler { constructor(color) { super(); this.color = color; } moep() { console.log('Moep!!! I\'m a ' + this.color + ' car.'); } } const car = new Car('red'); car.moep();

Slide 27

Slide 27 text

Arrow Functions

Slide 28

Slide 28 text

// // ES5 // function Car() { this.name = 'Smart'; } Car.prototype.doSomething = function doSomething() { var self = this; http.get('/get-ps', function onResponse(ps) { var message = 'A ' + self.name + ' with ' + ps + ' PS'; console.log(message); }); };

Slide 29

Slide 29 text

// // ES2015 // class Car { constructor() { this.name = 'Smart'; } doSomething() { http.get('/get-ps', (ps) => { const message = `A ${this.name} with ${ps} PS`; console.log(message); }); } }

Slide 30

Slide 30 text

// // ES2015 // const filter = (anArray) => { return anArray.filter((item) => { return item === 'foo'; }); }; const items = ['zoo', 'bar', 'foo']; const result = filter(items); // ['foo']

Slide 31

Slide 31 text

// Kürzer const filter = anArray => anArray.filter(item => item === 'foo' ); const items = ['zoo', 'bar', 'foo']; const result = filter(items); // ['foo'] 1 1 Runde Klammern können bei einem Argument entfernt werden 2 2 Beinhaltet der Funktionsrumpf nur eine Anweisung, so kann auf die geschweiften Klammern sowie das return Statement verzichtet werden.

Slide 32

Slide 32 text

Modules

Slide 33

Slide 33 text

// // ES5 // window.sitegeist = window.sitegeist || {}; window.sitegeist.MyModule = (function () { var doSomething = function doSomething() { console.log('I\'m doing something.'); }; return { doSomething: doSomething }; })(); var myModule = window.sitegeist.MyModule; myModule.doSomething();

Slide 34

Slide 34 text

// // ES2015 // // // MyModule.js // const doSomething = () => console.log(`I'm doing something.`); export { doSomething }; // // App.js // import {doSomething} from './MyModule'; doSomething();

Slide 35

Slide 35 text

// // ES2015 // // // Car.js (with default export) // class Car { // ... } export default Car; // // App.js // import Car from './Car'; const car = new Car();

Slide 36

Slide 36 text

Spread Operator

Slide 37

Slide 37 text

// // ES5 // var arr0 = ['green', 'red']; var arr1 = ['yellow', 'blue']; var result = [].concat(arr0, arr1, ['black', 'gray']);

Slide 38

Slide 38 text

// // ES2015 // const arr0 = ['green', 'red']; const arr1 = ['yellow', 'blue']; const result = [...arr0, ...arr1, 'black', 'gray'];

Slide 39

Slide 39 text

Object Spread* ES****-Feature (noch nicht abschließend speziﬁziert)

Slide 40

Slide 40 text

// // ES5 // function copy(person) { var result = {}; Object.keys(person).forEach(function (key) { result[key] = person[key]; }); return result; } var person = { name: 'André König', age: 20 }; var copiedPerson = copy(person); console.log(person === copiedPerson); // false

Slide 41

Slide 41 text

// // ES2015 // var person = { name: 'André König', age: 20 }; var copiedPerson = Object.assign({}, person); console.log(person === copiedPerson); // false

Slide 42

Slide 42 text

// // ES**** – Object Spread // var person = { name: 'André König', age: 20 }; var copiedPerson = { ...person }; console.log(person === copiedPerson); // false

Slide 43

Slide 43 text

Generators* * in Part 2

Slide 44

Slide 44 text

Recap

Slide 45

Slide 45 text

Variables and Scoping Classes Destructuring Modules Arrow Functions Default Values Object Spread Generators* Template Strings Spread Operator

Slide 46

Slide 46 text

Das ungeliebte Kind: Der Build-Prozess

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Warum?

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

gulp Grunt npm scripts webpack rollup browserify ... Babel

Slide 51

Slide 51 text

yajsmbt yet another JavaScript mind-blowing technology

Slide 52

Slide 52 text

Transpiler Bundler

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Warum webpack?

Slide 55

Slide 55 text

// // ES2015 // import styles from './MyComponent.css'; const Component = () =>

Foo

; export default Component;

Slide 56

Slide 56 text

It's all about the state

Slide 57

Slide 57 text

UI State

Slide 58

Slide 58 text

User äußert die Intention sich auszuloggen.

Slide 59

Slide 59 text

UI State User klickt auf den Logout-Button User wird ausgeloggt und der Status angepasst. 1 2 View aktualisieren 3

Slide 60

Slide 60 text

Ein Kreislauf

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

UI Action Creator Store Reducers

Slide 63

Slide 63 text

UI Der "View-Layer" – Interface zum User

Slide 64

Slide 64 text

Action Creators Formalisieren die Intention des Users in ein einheitliches "Action-Format" {type: 'THE_ACTION_TYPE', payload: {}}

Slide 65

Slide 65 text

Store "Hält den Application-State"

Slide 66

Slide 66 text

Reducers "Berechnen" den neuen State basierend auf einer Action y = f(x) Pure Function! const state = reducer(currentState, action);

Slide 67

Slide 67 text

UI Action Creator Store Reducers 1 click 2 dispatch(action) 3 (currentState, action) 4 newState 5 state

Slide 68

Slide 68 text

Genug!!

Slide 69

Slide 69 text

Resources Repository https://git.sitegeist.de/koenig/workshop-spa ES2015 https://github.com/lukehoban/es6features Redux http://redux.js.org https://code-cartoons.com/a-cartoon-intro-to-redux-3afb77 5501a6#.nugvh41e9

Slide 70

Slide 70 text

Fin. André König [email protected]