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

JavaScript - From DHTML to a Multi-Paradigm Language

Robert Vogt
September 23, 2016

JavaScript - From DHTML to a Multi-Paradigm Language

Robert Vogt

September 23, 2016
Tweet

More Decks by Robert Vogt

Other Decks in Technology

Transcript

  1. JavaScript
    From DHTML to a
    Multi-Paradigm
    Language
    Robert Vogt
    #NCamp16

    View Slide

  2. Robert Vogt
    Software Engineer
    from & in Sankt Gallen
    @_deniaz

    View Slide

  3. View Slide

  4. «Web 2.0 describes World Wide Web websites that
    emphasize user-generated content, usability, and
    interoperability for end users.»

    View Slide

  5. jQuery MooTools Prototype JS script.aculo.us

    View Slide

  6. Single-page application

    View Slide

  7. Angular
    React
    Object-Oriented
    Functional

    View Slide

  8. View Slide

  9. JavaScript

    View Slide

  10. «A programming paradigm is a style or way of
    programming. Some languages make it easy to write in
    some paradigms but not others.»

    View Slide

  11. «Object-oriented programming is a programming
    language model organized around objects rather than
    actions and data rather than logic.»

    View Slide

  12. class Dog extends Animal {}
    let dog = new Dog();
    dog.walk();

    View Slide

  13. let Animal = {
    walk: function() {}
    };
    let Dog = Object.create(Animal);
    Dog.bark = function() {
    return ‘Woof!’;
    };

    View Slide

  14. Class-based
    Inheritance
    Prototypical
    Inheritance

    View Slide

  15. «Functional Programming is a programming
    paradigm that treats computation as the evaluation of
    mathematical functions and avoids changing-state and
    mutable data.»

    View Slide

  16. Functions
    First-Class

    View Slide

  17. let sum = function(a, b) {
    return a + b;
    }

    View Slide

  18. Functions
    Higher-Order

    View Slide

  19. $.get(
    'http://example.com',
    (data) => { /* Success! */ }
    );

    View Slide

  20. function createPrinter(a, b) {
    return function() {
    return ‘Namics’;
    }
    }
    const print = createPrinter();
    print(); // Namics.

    View Slide

  21. Functions
    Pure

    View Slide

  22. let double = (x) = x * 2;

    View Slide

  23. Closures
    Function

    View Slide

  24. let incrementer = (function() {
    let _value = 0;
    return () => ++_value;
    })();
    incrementer(); // 1
    incrementer(); // 2
    incrementer(); // 3

    View Slide

  25. Data
    Immutable

    View Slide

  26. const list1 = Immutable.List.of(1, 2);
    const list2 = list1.push(3, 4, 5);

    View Slide

  27. Composition
    Function

    View Slide

  28. let ten = double(sum(2, 3));

    View Slide

  29. Soooo… Any
    Real World Examples?

    View Slide

  30. View Slide

  31. Store View
    Action
    Action Dispatcher

    View Slide

  32. const HelloMessage = (props) => (
    Hello {props.name}
    );

    View Slide

  33. «Those who are unaware
    they are walking in darkness
    will never seek light.»
    — Bruce Lee
    find me on twitter
    @_deniaz

    View Slide