JavaScript: The Magic Parts

How do I write JavaScript.

Transcript

1. JavaScript:

   The Magic Parts
   Hannes Moser
   

   View Slide

2. –Douglas Crockford
   If a feature is sometimes useful
   and sometimes dangerous and if
   there is a better option then

   always use the better option.
   

   View Slide

3. –Hannes Moser
   I am going to use any feature I
   am able find within the language!
   

   View Slide

4. –Douglas Crockford
   I made every mistake with

   JavaScript you could make.
   

   View Slide

5. Libraries
   

   View Slide

6. Modules modulecounts.com
   

   View Slide

7. npm Modules modulecounts.com
   

   View Slide

8. Modules modulecounts.com
   

   View Slide

9. npm install pad-left
   

   View Slide

10. npm install yolo
    

    View Slide

11. npm install swag
    

    View Slide

12. choo
    react, redux &
    saga
    lodash
    yo-yo
    

    View Slide

13. ∞
    Libraries
    

    View Slide

14. absurdjs.com
    

    View Slide

15. Object Literals
    

    View Slide

16. Object Literals
    const a = 1
    const b = 2
    const o = {
    a,
    b,
    c() {
    return 'I am C3PO'
    }
    }
    

    View Slide

17. Functional
    Programing
    

    View Slide

18. Arrow Functions
    const a = [1, 2, 3, 4, 5, 6]
    const sumOfIncrementByOneAndOddNumbers = a
    .map(v => v += 1)
    .filter(v => v % 2 !== 0 ? v : false)
    .reduce((sum, v) => sum + v, 0)
    // 15
    

    View Slide

19. Modules
    

    View Slide

20. Modules: Export
    export default {
    run
    }
    export const G = 9.81
    

    View Slide

21. Modules: Import
    import athlete from 'athlete'
    import {G} from 'athlete'
    const a = athlete.run() / G
    

    View Slide

22. Template Strings
    

    View Slide

23. Template Strings
    const foo = 'Hello'
    const bar = 'World'
    console.log(`${foo}, ${bar}!`)

    // Hello, World!
    

    View Slide

24. Tagged Template Strings
    import html from 'html'
    const lftCol = html`left`
    const rgtCol = html`right`
    const dom = html`
    
    
    ${lftCol}
    ${rgtCol}
    
    
    `
    document.body.appendChild(dom)
    

    View Slide

25. Destructuring
    

    View Slide

26. Destructuring
    const [a, b] = [1, 2, 3]

    // a === 1, b === 2
    

    View Slide

27. Destructuring
    const {a, b} = {a:1, b:2}

    // a === 1, b === 2
    

    View Slide

28. Destructuring: Fail-soft
    const [a, b = 2] = [1]

    // a === 1, b === 2
    

    View Slide

29. Destructuring: Nesting
    const {op:a, lhs:{op:b}, rhs:c} = ast()
    

    View Slide

30. Defaults
    

    View Slide

31. Defaults
    function trim(str, char = ' ')
    {
    …
    }
    trim(' lala land ')
    

    View Slide

32. Magic Parts
    

    View Slide

33. Named Parameters
    

    View Slide

34. Named Parameters
    function complex(name, priority, user, title) {
    …
    }
    complex(

    „Hannes Moser",

    undefined,

    null,

    „Mag.(FH)„

    )
    // I like this more
    complex({
    name: "Hannes Moser",

    title: "Mag.(FH)"
    })
    

    View Slide

35. Named Parameters
    import assign from 'lodash/assign'
    function (config) {
    config = assign({baseurl: '/'}, config)
    }
    

    View Slide

36. Named Parameters
    function url({baseurl: '/'}) {
    …
    }
    url({})
    

    View Slide

37. Named Parameters
    function url({baseurl: '/'} = {}){
    …
    }
    url() // "/"
    

    View Slide

38. Class-free Objects
    

    View Slide

39. Class-free Objects: Prototypes
    function Pokemon(name) {
    this.name = name
    // handle ...
    }
    Pokemon.prototype.collect = function() {
    …
    }
    const pikachu = new Pokemon("Pikachu")
    

    View Slide

40. Class-free Objects: ES2015 Classes
    class Pokemon {
    constructor(name) {
    this.name = name
    // handle ...
    }
    collect() {
    …
    }
    }
    const pikachu = new Pokemon("Pikachu")
    

    View Slide

41. Class-free Objects: Constructor Function
    function pokemon({name} = {}) {
    function collect() {
    …
    }
    return {
    collect
    }
    }
    const pikachu = pokemon({name: 'Pokemon'})
    

    View Slide

42. Class-free Objects: Parasitic Inheritance
    import parasite from 'parasite'
    function pokemon({name} = {}) {
    const super = parasite({name})
    function collect() {
    …
    }
    super.collect = collect
    return
    }
    const pikachu = pokemon({name: ‚Pokemon'})
    pikachu.eat() && pikachu.collect()
    

    View Slide

43. Clean Interfaces
    

    View Slide

44. Clean Interfaces
    export default function pokemon() {
    function collect() {
    …
    }
    return {collect}
    }
    const pikachu = pokemon()
    pikachu.bad = function() {
    …
    }
    // no problem at all
    

    View Slide

45. Clean Interfaces: Freeze
    export default function pokemon() {
    function collect() {
    …
    }
    return Object.freeze({collect})
    }
    const pikachu = pokemon()
    pikachu.bad = function() {
    …
    }
    // throws TypeError or fails silently
    

    View Slide

46. Ain't No Party Like a Third-Party JavaScript Party
    

    View Slide

47. Malwaretising
    import $ from 'jquery'
    // your friendly malvertising service
    const pref = $.post
    $.post = function(...args) {
    pref({
    url: 'https://example.com'
    })
    return pref.call(null, ...args)
    }
    // example
    $.post({
    url: 'https://example.net'
    })
    

    View Slide

48. Malvertising malware.html
    

    View Slide

49. Unicode
    

    View Slide

50. Unicode
    const ಠ_ಠ = "uhu"
    console.log(ಠ_ಠ) // "uhu"
    

    View Slide

51. for-of
    

    View Slide

52. for-of
    const a = [1, 2]
    for([idx, val] of a.entries()) {
    console.log(idx, val)
    }
    

    View Slide

53. mandatory
    parameters
    

    View Slide

54. mandatory parameters
    function mandatory() {
    throw new Error("Missing Parameter")
    }
    function foo(a = mandatory()) {
    …
    }
    foo() // Error: Missing Parameter

    foo(1)
    

    View Slide

55. mixins
    

    View Slide

56. mixins
    const Validation = Sup => class extends Sup {
    validate(schema) {
    …
    }
    }
    class Person {
    …
    }
    class Employee extends Validation(Person) {
    …
    }
    

    View Slide

57. that’s not async
    

    View Slide

58. that’s not async
    const file = open('hannes.json')
    const result = process(file)
    const html = render(result)
    html
    .then(str => console.log(str))
    .catch(err => console.error(err))
    

    View Slide

59. that’s not async
    function open(file) {
    return new Promise((resolve, reject) => {
    fs.readFile(file, (err, data) => {
    if (err) {
    return reject(err)
    }
    return resolve(data)
    })
    })
    }
    

    View Slide

60. async/await
    const file = await open('hannes.json')
    const result = process(file)
    const html = render(result)
    console.log(html)
    

    View Slide

61. Thank You
    

    View Slide

62. Sources
    • ECMAScript® 2016 Language Specification
    • Douglas Crockford: The Better Parts
    • Axel Rauschmayr: 2ality.com, Exploring ES6
    • Rebecca Murphy: Ain't No Party Like a Third-Party
    JavaScript Party
    • Snippets: https://github.com/eliias/the-magic-parts
    

    View Slide