JS Application Development Part 1 - ES 2015 / Redux

Talk by André König

Transcript

1. CLIENT APPLICATION DEVELOPMENT André König sitegeist media solutions GmbH Part 1
2. The road ahead ....
3. 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
4. Advanced Redux Fortgeschrittene Aspekte im Redux-Kontext. Handling von Seiteneffekten mittels Redux Sagas, etc. Part 2 React Einstieg in die View-Layer Implementierung, die innerhalb des MySysmex Projektes eingesetzt wird.
5. Part 3 My Sysmex Technischer Einblick in die Struktur des MySysmex Projektes.
6. Eine brandneue Programmiersprache
7. WOW! WOW! JavaScript JavaScript sieht nun wie eine sieht nun wie eine richtige richtige Programmier- Programmier- sprache aus. sprache aus. – Leute
9. Variables and Scoping Classes Destructuring Modules Arrow Functions Default Values Object Spread Generators* Template Strings Spread Operator
10. Variablen und Scoping
11. // Good ol' ES5-Variablen var foo = 'bar'; // Problem: Variablen "Hoisting" var zoo = 'baz'; function doSomething() { console.log(zoo); // undefined var zoo = 'haha ...'; } doSomething();
12. // `let` hilft gegen das Hoisting von Variablen console.log(zoo); // Uncaught TypeError zoo is undefined let zoo = 'haha ...';
13. // `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.
14. const
15. Destructuring
16. // // 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];
17. // // 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
18. Default Values
19. // // ES5 // function doSomething(a, b, c) { b = b || 'ein B'; c = c || 'ein C'; console.log(a, b, c); } doSomething('ein A');
20. // // Default Values in ES2015 // function doSomething(a, b = 'ein B', c = 'ein C') { console.log(a, b, c); } doSomething('ein A');
21. Template Strings
22. // // ES5 // const firstName = 'André'; const lastName = 'König'; console.log('Seems like your name is ' + firstName + ' ' + lastName);
23. // // 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)}!`);
24. Classes
25. // // 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();
26. // // 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();
27. Arrow Functions
28. // // 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); }); };
29. // // ES2015 // class Car { constructor() { this.name = 'Smart'; } doSomething() { http.get('/get-ps', (ps) => { const message = `A ${this.name} with ${ps} PS`; console.log(message); }); } }
30. // // ES2015 // const filter = (anArray) => { return anArray.filter((item) => { return item === 'foo'; }); }; const items = ['zoo', 'bar', 'foo']; const result = filter(items); // ['foo']
31. // 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.
32. Modules
33. // // 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();
34. // // ES2015 // // // MyModule.js // const doSomething = () => console.log(`I'm doing something.`); export { doSomething }; // // App.js // import {doSomething} from './MyModule'; doSomething();
35. // // ES2015 // // // Car.js (with default export) // class Car { // ... } export default Car; // // App.js // import Car from './Car'; const car = new Car();
36. Spread Operator
37. // // ES5 // var arr0 = ['green', 'red']; var arr1 = ['yellow', 'blue']; var result = [].concat(arr0, arr1, ['black', 'gray']);
38. // // ES2015 // const arr0 = ['green', 'red']; const arr1 = ['yellow', 'blue']; const result = [...arr0, ...arr1, 'black', 'gray'];
39. Object Spread* ES****-Feature (noch nicht abschließend spezifiziert)
40. // // 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
41. // // ES2015 // var person = { name: 'André König', age: 20 }; var copiedPerson = Object.assign({}, person); console.log(person === copiedPerson); // false
42. // // ES**** – Object Spread // var person = { name: 'André König', age: 20 }; var copiedPerson = { ...person }; console.log(person === copiedPerson); // false
43. Generators* * in Part 2
44. Recap
45. Variables and Scoping Classes Destructuring Modules Arrow Functions Default Values Object Spread Generators* Template Strings Spread Operator
46. Das ungeliebte Kind: Der Build-Prozess
48. Warum?
50. gulp Grunt npm scripts webpack rollup browserify ... Babel
51. yajsmbt yet another JavaScript mind-blowing technology
52. Transpiler Bundler
54. Warum webpack?
55. // // ES2015 // import styles from './MyComponent.css'; const Component = () => <div className={styles.container}>Foo</div>; export default Component;
56. It's all about the state
57. UI State
58. User äußert die Intention sich auszuloggen.
59. UI State User klickt auf den Logout-Button User wird ausgeloggt und der Status angepasst. 1 2 View aktualisieren 3
60. Ein Kreislauf
62. UI Action Creator Store Reducers
63. UI Der "View-Layer" – Interface zum User
64. Action Creators Formalisieren die Intention des Users in ein einheitliches "Action-Format" {type: 'THE_ACTION_TYPE', payload: {}}
65. Store "Hält den Application-State"
66. Reducers "Berechnen" den neuen State basierend auf einer Action y = f(x) Pure Function! const state = reducer(currentState, action);
67. UI Action Creator Store Reducers 1 click 2 dispatch(action) 3 (currentState, action) 4 newState 5 state
68. Genug!!
69. 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
70. Fin. André König koenig@sitegeist.de