Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JS Application Development Part 1 - ES 2015 / Redux

Sitegeist
May 17, 2016
65

JS Application Development Part 1 - ES 2015 / Redux

Talk by André König

Sitegeist

May 17, 2016
Tweet

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
    [email protected]

    View Slide