JavaScript - From DHTML to a Multi-Paradigm Language

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