$30 off During Our Annual Pro Sale. View Details »

Transducer

othree
October 03, 2015

 Transducer

Explain transducer in JS code snippets

othree

October 03, 2015
Tweet

More Decks by othree

Other Decks in Technology

Transcript

  1. 7UDQVGXFHU

    View Slide

  2. :DUQLQJ
    Ŏ /RWVRIFRGHVQLSSHWV
    Ŏ /RWVRIPDWKHTXDWLRQ

    View Slide

  3. Ŏ &RPSRVDEOHFROOHFWLRQGDWDRSHUDWLRQV

    View Slide

  4. 2XWOLQH
    Ŏ )XQFWLRQFRPSRVLWLRQ
    Ŏ 0DSUHGXFH
    Ŏ &ROOHFWLRQGDWDRSHUDWLRQV
    Ŏ 7UDQVGXFHU

    View Slide

  5. )XQFWLRQ&RPSRVLWLRQ

    View Slide

  6. function incOne(input) {
    return input + 1;
    }
    function multTwo(input) {
    return input * 2;
    }

    View Slide

  7. function incOneMultTwo(input) {
    return (input + 1) * 2;
    }

    View Slide

  8. function incOneMultTwo(input) {
    return multTwo(incOne(input));
    }

    View Slide

  9. z = f(y)
    y
    =
    g
    (
    x
    )
    z
    =
    f
    (
    g
    (
    x
    ))

    View Slide

  10. x
    g
    !
    y
    f
    !
    z

    View Slide

  11. z
    =
    h
    (
    x
    )
    h = f g

    View Slide

  12. h = f g
    ¯
    h = g f

    View Slide

  13. 7UDQVIRUPDWLRQ
    Ŏ +DYLQJWKHVDPHGRPDLQDQGFRGRPDLQ
    Ŏ ,QSXWDQGRXWSXWEHWKHVDPHW\SH

    View Slide

  14. f : X 7! X
    g : X 7! X

    View Slide

  15. whatever 7! whatever

    View Slide

  16. function multTwoIncOne(input) {
    return incOne(multTwo(input));
    }

    View Slide

  17. var incOneMultTwo = compose(incOne, multTwo);

    View Slide

  18. function compose(f, g) {
    return function (input) {
    return f(g(input));
    };
    }

    View Slide

  19. 3URV
    Ŏ 6PDOOIXQFWLRQV
    Ŏ (DV\WRZULWH
    Ŏ (DV\WRWHVW
    Ŏ &RGHUHXVH

    View Slide

  20. 0DS5HGXFH

    View Slide

  21. 0DS
    Ŏ $SSO\WUDQVIRUPDWLRQWRDOOHOHPHQWVRIJLYHQ
    FROOHFWLRQ

    View Slide

  22. map
    (
    transform, coll
    ) !
    coll
    0

    View Slide

  23. [1,2,3,4].map(function (input) {
    return input + 1;
    });
    // => [2,3,4,5]

    View Slide

  24. [1,2,3,4].map(incOne);

    // => [2,3,4,5]

    View Slide

  25. [1,2,3,4].map(incOneMultTwo);

    // => [4,6,8,10]

    View Slide

  26. 5HGXFH
    Ŏ 5HGXFHDFROOHFWLRQWRDVLQJOHYDOXH

    View Slide

  27. reduce
    (
    reducing, coll
    ) !
    whatever

    View Slide

  28. [1,2,3,4].reduce(function(result, value) {
    return result + value;
    }, 0);
    // 10

    View Slide

  29. [1,2,3,4].reduce(function(result, value) {
    return result * value;
    }, 1);
    // 24

    View Slide

  30. [1,2,3,4].reduce(function(result, value) {
    return result.push(value);
    }, []);
    // [1, 2, 3, 4]

    View Slide

  31. 5HGXFLQJ)XQFWLRQ
    Ŏ )XQFWLRQSDVVHGWRUHGXFH
    Ŏ +RZWRDFFXPXODWHYDOXHV
    Ŏ 5HGXFHWRFROOHFWLRQLVSRVVLEOH

    View Slide

  32. whatever, input 7! whatever

    View Slide

  33. [1, 2, 3, 4].reduce(function(result, value) {
    return result + value;
    }, 0);
    // 10
    whatever
    whatever
    input

    View Slide

  34. Ŏ 5HGXFLQJIXQFWLRQLVQRWFRPSRVDEOH

    View Slide

  35. &ROOHFWLRQ2SHUDWLRQV

    View Slide

  36. )LOWHU
    Ŏ 5HWXUQQHZFROOHFWLRQZLWKZDQWHGHOHPHQW
    RQO\XVHSUHGLFDWHIXQFWLRQ

    View Slide

  37. filter
    (
    predicate, coll
    ) !
    coll
    0

    View Slide

  38. [1,2,3,4].filter(function (input) {
    return (input % 2 == 0);
    });
    // [2, 4]

    View Slide

  39. function even (input) {
    return (input % 2 == 0);
    }
    [1,2,3,4].filter(even);
    // [2, 4]

    View Slide

  40. Ŏ 5HGXFLQJIXQFWLRQFDQUHWXUQDQHZFROOHFWLRQ

    View Slide

  41. Ŏ %RWKPDSDQGƉOWHUFDQXVHUHGXFHWRLPSOHPHQW

    View Slide

  42. [1,2,3,4].map(function (input) {
    return input + 1;
    });
    // => [2,3,4,5]

    View Slide

  43. [1,2,3,4].reduce(function (result, input) {
    return result.push(input + 1);
    }, []);
    // [2,3,4,5]

    View Slide

  44. [1,2,3,4].filter(function (input) {
    return (input % 2 == 0);
    }, []);
    // [2,4]

    View Slide

  45. [1,2,3,4].reduce(function (result, input) {
    return (
    input % 2 == 0 ?
    concat(result, input) :
    result
    );
    }, [])
    // => [2, 4]

    View Slide

  46. PDS UHGXFH ƉOWHU
    GHGXSH WDNH UHSODFH
    VRUW FDW SDUWLWLRQ

    View Slide

  47. Ŏ (YHU\FROOHFWLRQRSHUDWLRQFDQXVHUHGXFHWR
    LPSOHPHQW
    Ŏ 7KHQXPEHURIHOHPHQWVLQFROOHFWLRQLVPXWDEOH

    View Slide

  48. 7UDQVGXFHU

    View Slide

  49. Ŏ 7UDQVGXFHUFRPHVIURP&ORMXUH

    View Slide

  50. Ŏ 7UDQVGXFHULVDUHGXFLQJIXQFWLRQWUDQVIRUP
    IXQFWLRQ
    Ŏ 7UDQVIRUPRQHUHGXFLQJIXQFWLRQWRDQRWKHU
    UHGXFLQJIXQFWLRQ

    View Slide

  51. http://clojure.org/transducers
    (whatever, input 7! whatever) 7! (whatever, input 7! whatever)

    View Slide

  52. Ŏ ,QSXWUHGXFLQJIXQFWLRQ
    Ŏ 2XWSXWUHGXFLQJIXQFWLRQ
    Ŏ &RPSRVDEOH

    View Slide

  53. T : transducer
    R
    : reducing function
    Rmap
    Tfilter
    ! Rmap,filter

    View Slide

  54. map reducing function map transducer
    filter reducing function filter transducer
    take reducing function take transducer
    replace reducing function replace transducer

    View Slide

  55. var c = chan(
    1, // buffer size
    compose(
    // Only events with even x & y
    filtering(function (e) {
    return (
    even(e.pageX) &&
    even(e.pageY)
    );
    }),
    // e -> [type, x, y]
    mapping(function (e) {
    return [e.type, e.pageX, e.pageY];
    })
    )
    );

    View Slide

  56. var c = chan(
    1, // buffer size
    compose(
    // Only events with page x & y
    filtering(function (e) {
    return (
    even(e.pageX) &&
    even(e.pageY)
    );
    }),
    // e -> [type, x, y]
    mapping(function (e) {
    return [e.type, e.pageX, e.pageY];
    })
    )
    );

    View Slide

  57. var c = chan(
    1, // buffer size
    compose(
    // Only events with page x & y
    filtering(function (e) {
    return (
    even(e.pageX) &&
    even(e.pageY)
    );
    }),
    // e -> [type, x, y]
    mapping(function (e) {
    return [e.type, e.pageX, e.pageY];
    })
    )
    );

    View Slide

  58. var c = chan(
    1, // buffer size
    compose(
    // Only events with page x & y
    filtering(function (e) {
    return (
    even(e.pageX) &&
    even(e.pageY)
    );
    }),
    // e -> [type, x, y]
    mapping(function (e) {
    return [e.type, e.pageX, e.pageY];
    })
    )
    );

    View Slide

  59. var c = chan(
    1, // buffer size
    compose(
    // Only events with page x & y
    filtering(function (e) {
    return (
    even(e.pageX) &&
    even(e.pageY)
    );
    }),
    // e -> [type, x, y]
    mapping(function (e) {
    return [e.type, e.pageX, e.pageY];
    })
    )
    );
    transducer
    transducer

    View Slide

  60. var c = chan(
    1, // buffer size
    compose(
    // Only events with page x & y
    filtering(function (e) {
    return (
    even(e.pageX) &&
    even(e.pageY)
    );
    }),
    // e -> [type, x, y]
    mapping(function (e) {
    return [e.type, e.pageX, e.pageY];
    })
    )
    );
    filter
    transducer
    constructor
    map
    transducer
    constructor

    View Slide

  61. var c = chan(
    1, // buffer size
    compose(
    // Only events with page x & y
    filtering(function (e) {
    return (
    even(e.pageX) &&
    even(e.pageY)
    );
    }),
    // e -> [type, x, y]
    mapping(function (e) {
    return [e.type, e.pageX, e.pageY];
    })
    )
    );
    filter predicate
    map transform

    View Slide

  62. x
    g
    !
    y
    f
    !
    z

    View Slide

  63. x
    g
    !
    y
    f
    !
    z
    transducer
    reducing function

    View Slide

  64. var c = chan(
    1, // buffer size
    compose(
    // Only events with page x & y
    filtering(function (e) {
    return (
    even(e.pageX) &&
    even(e.pageY)
    );
    }),
    // e -> [type, x, y]
    mapping(function (e) {
    return [e.type, e.pageX, e.pageY];
    })
    )
    );
    f

    View Slide

  65. var c = chan(
    1, // buffer size
    compose(
    // Only events with even x & y
    filtering(function (e) {
    return (
    even(e.pageX) &&
    even(e.pageY)
    );
    }),
    // e -> [type, x, y]
    mapping(function (e) {
    return [e.type, e.pageX, e.pageY];
    })
    )
    );
    g

    View Slide

  66. x
    h
    !
    z
    h = f g

    View Slide

  67. var c = chan(
    1, // buffer size
    // Only events with even x & y
    // And transform format to [type, x, y]
    compose(
    // Only events with even x & y
    filtering(function (e) {
    return (
    even(e.pageX) &&
    even(e.pageY)
    );
    }),
    // e -> [type, x, y]
    mapping(function (e) {
    return [e.type, e.pageX, e.pageY];
    })
    )
    );
    h

    View Slide

  68. x
    g
    !
    y
    f
    !
    z

    View Slide

  69. x
    g
    !
    y
    f
    !
    z
    coll
    0 =
    reduce
    (
    z, coll
    )

    View Slide

  70. x
    g
    !
    y
    f
    !
    z
    x
    g
    !
    y
    f
    !
    z

    View Slide

  71. :KDWLVx

    View Slide

  72. Ŏ xLVODVWUHGXFLQJIXQFWLRQEXLOGWKHQHZFROOHFWLRQ
    IURPHOHPHQWV

    View Slide

  73. function (result, value) {
    return result.push(value);
    }

    View Slide

  74. function (result, value) {
    return result.append(value);
    }

    View Slide

  75. function (result, value) {
    return result[value[0]] = value[1];
    }

    View Slide

  76. function (result, value) {
    return result.put(value);
    }

    View Slide

  77. Ŏ 7UDQVGXFHUGRQŇWNQRZEXLOGIXQFWLRQIRUHYHU\
    FROOHFWLRQW\SHGDWD
    Ŏ 2QO\WKHGDWDW\SHNQRZVKRZWREXLOGLWVVHOI

    View Slide

  78. &ROO5HGXFH3URWRFRO
    Ŏ )RUFROOHFWLRQGDWDIURP&ORMXUH
    Ŏ 3URYLGHPHWKRGWRLWHUDWHDQGEXLOGFROOHFWLRQ

    DQGLQLWLDOYDOXH
    perform reduce , CollReduce
    x

    View Slide

  79. var receipt = compose(
    mapping(incOne),
    filtering(even)
    );
    var reduceToArray = function (result, input) {
    return result.push(input);
    }
    [1,2,3,4].reduce(
    receipt(reduceToArray)
    , []);
    // [2, 4]

    View Slide

  80. var receipt = compose(
    mapping(incOne),
    filtering(even)
    );
    var reduceToArray = function (result, input) {
    return result.push(input);
    }
    [1,2,3,4].reduce(
    receipt(reduceToArray)
    , []);
    // [2, 4]
    x
    h
    z
    h
    (
    x
    )

    View Slide

  81. var receipt = compose(
    mapping(incOne),
    filtering(even)
    );
    var reduceToArray = function (result, input) {
    return result.push(input);
    }
    [1, 2, 3, 4].reduce(
    receipt(reduceToArray)
    , []);
    // [2, 4]
    CollReduce
    initial
    value
    iterate

    View Slide

  82. Ŏ &ORMXUHKDYHQDWLYH&ROO5HGXFHSURWRFRO
    Ŏ 2WKHUODQJXDJHQHHGWRLPSOHPHQWLWDQGFXVWRP
    UHGXFH

    View Slide

  83. 5HGXFLQJ)XQFWLRQ
    7UDQVIRUP

    View Slide

  84. +RZ

    View Slide

  85. 0DS
    coll.map(transform);

    View Slide

  86. 0DSE\5HGXFH
    coll.reduce(function (result, input) {
    return concat(result, input + 1);
    }, [])
    CollReduce map transform

    View Slide

  87. %XLOGIURP&ROO5HGXFH
    3URWRFRO

    View Slide

  88. function (result, input) {
    return concat(result, input + 1);
    }

    View Slide

  89. 'HFRXSOH&ROO5HGXFH

    View Slide

  90. ,QF2QH7UDQVGXFHU
    function (reducing) {
    return function (result, input) {
    return reducing(result, input + 1);
    };
    }
    map transform
    CollReduce

    View Slide

  91. 'HFRXSOH7UDQVIRUP

    View Slide

  92. 0DS7UDQVGXFHU&RQVWUXFWRU
    function mapping(transform) {
    return function (reducing) {
    return function (result, input) {
    return reducing(result, transform(input));
    };
    };
    }

    View Slide

  93. function mapping(transform) {
    return function (reducing) {
    return function (result, input) {
    return reducing(result, transform(input));
    };
    };
    }
    transducer
    constructor

    View Slide

  94. function mapping(transform) {
    return function (reducing) {
    return function (result, input) {
    return reducing(result, transform(input));
    };
    };
    }
    transducer
    x
    g
    !
    y
    f
    !
    z
    g

    View Slide

  95. function mapping(transform) {
    return function (reducing) {
    return function (result, input) {
    return reducing(result, transform(input));
    };
    };
    }
    reducing
    function

    View Slide

  96. function mapping(transform) {
    return function (reducing) {
    return function (result, input) {
    return reducing(result, transform(input));
    };
    };
    }
    whatever

    View Slide

  97. function mapping(transform) {
    return function (reducing) {
    return function (result, input) {
    return reducing(result, transform(input));
    };
    };
    }
    CollReduce initial
    value
    map
    transform
    x
    y
    x
    g
    !
    y
    f
    !
    z
    x
    g
    !
    y
    f
    !
    z

    View Slide

  98. )LOWHU7UDQVGXFHU&RQVWUXFWRU
    function filtering(predicate) {
    return function (reducing) {
    return function (result, input) {
    return (
    predicate(input) ?
    reducing(result, input) :
    result
    );
    };
    };
    }

    View Slide

  99. 7DNH7UDQVGXFHU&RQVWUXFWRU
    function taking(n) {
    return function (reducing) {
    return function (result, input) {
    if (n > 0) {
    n--;
    return reducing(result, input);
    } else {
    return result;
    }
    };
    };
    }

    View Slide

  100. 'URS7UDQVGXFHU&RQVWUXFWRU
    function dropping(n) {
    return function (reducing) {
    return function (result, input) {
    if (n > 0) {
    n--;
    return result;
    } else {
    return reducing(result, input);
    }
    };
    };
    }

    View Slide

  101. var c = chan(
    1, // buffer size
    compose(
    // Only events with even x & y
    filtering(function (e) {
    return (
    even(e.pageX) &&
    even(e.pageY)
    );
    }),
    // e -> [type, x, y]
    mapping(function (e) {
    return [e.type, e.pageX, e.pageY];
    })
    )
    );

    View Slide

  102. 7UDQVGXFHUMV

    View Slide

  103. https://github.com/jlongster/transducers.js

    View Slide

  104. Ŏ ,PSOHPHQWLWVRZQ&ROO5HGXFHSURWRFRO
    Ŏ ,PSOHPHQWUHGXFHEDVHGRQ&ORMXUHŇVGHVLJQ
    Ŏ :RUNZLWKMVFVS

    View Slide

  105. var map = t.map,
    filter = t.filter,
    comp = t.comp,
    into = t.into,
    apush = function(arr, x) {
    arr.push(x); return arr;
    },
    var inc = function(n) { return n + 1; };
    var isEven = function(n) { return n % 2 == 0; };
    var xf = comp(map(inc), filter(isEven));
    into([], xf, [0,1,2,3,4]); // [2,4]
    transduce(xf, apush, 0, [0,1,2,3,4]); // [2,4]

    View Slide

  106. var map = t.map,
    filter = t.filter,
    comp = t.comp,
    into = t.into,
    apush = function(arr, x) { arr.push(x); return
    var inc = function(n) { return n + 1; };
    var isEven = function(n) { return n % 2 == 0; };
    var xf = comp(map(inc), filter(isEven));
    into([], xf, [0,1,2,3,4]); // [2,4]
    transduce(xf, apush, 0, [0,1,2,3,4]); // [2,4]
    CollReduce
    transducer
    initial value
    coll

    View Slide

  107. &ORMXUH7UDQVGXFHU&RQVWUXFWRU
    (fn [xf]
    (fn ([] ...)
    ([result] ...)
    ([result input] ...)))

    View Slide

  108. [] Init: return initial value
    [result] Completion: some reduce operation require this step
    [result, input] Step: reducing function to build collection

    View Slide

  109. http://jlongster.com/Transducers.js--A-JavaScript-Library-for-Transformation-of-Data

    View Slide

  110. http://phuu.net/2014/08/31/csp-and-transducers.html

    View Slide

  111. Q?

    View Slide