Transducer

Explain transducer in JS code snippets

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