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
   

   View Slide

2. The road ahead ....
   

   View Slide

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
   

   View Slide

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.
   

   View Slide

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

   View Slide

6. Eine brandneue Programmiersprache
   

   View Slide

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

   View Slide

8. View Slide

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

   View Slide

10. Variablen und Scoping
    

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

14. const
    

    View Slide

15. Destructuring
    

    View Slide

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];
    

    View Slide

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
    

    View Slide

18. Default Values
    

    View Slide

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

    View Slide

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

    View Slide

21. Template Strings
    

    View Slide

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

    View Slide

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)}!`);
    

    View Slide

24. Classes
    

    View Slide

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();
    

    View Slide

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();
    

    View Slide

27. Arrow Functions
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

32. Modules
    

    View Slide

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();
    

    View Slide

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

    View Slide

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

    View Slide

36. Spread Operator
    

    View Slide

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

    View Slide

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

    View Slide

39. Object Spread*
    ES****-Feature
    (noch nicht abschließend spezifiziert)
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

43. Generators*
    * in Part 2
    

    View Slide

44. Recap
    

    View Slide

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

    View Slide

46. Das ungeliebte Kind: Der Build-Prozess
    

    View Slide

47. View Slide

48. Warum?
    

    View Slide

49. View Slide

50. gulp
    Grunt
    npm scripts
    webpack
    rollup
    browserify ...
    Babel
    

    View Slide

51. yajsmbt
    yet another JavaScript mind-blowing technology
    

    View Slide

52. Transpiler Bundler
    

    View Slide

53. View Slide

54. Warum webpack?
    

    View Slide

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

    View Slide

56. It's all about the state
    

    View Slide

57. UI
    State
    

    View Slide

58. User äußert die Intention sich auszuloggen.
    

    View Slide

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

    View Slide

60. Ein Kreislauf
    

    View Slide

61. View Slide

62. UI
    Action
    Creator
    Store Reducers
    

    View Slide

63. UI
    Der "View-Layer" – Interface zum User
    

    View Slide

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

    View Slide

65. Store
    "Hält den Application-State"
    

    View Slide

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

    View Slide

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

    View Slide

68. Genug!!
    

    View Slide

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
    

    View Slide

70. Fin.
    André König
    koenig@sitegeist.de
    

    View Slide