Two Fundamental Abstractions

André Staltz (known for other work in functional reactive programming) teaches higher-order functions from first principles using javascript in 30 minutes. Conceptually grounds Iterables and Observables with the metaphor of getters and setters, and Input/Output. youtube video.page

YOUTUBE fdol03pcvMA André Staltz @ Uphill Conf 2018

Two Fundamental Abstractions. source

.

His gestures of abstractions living somewhere up in the clouds as opposed to concretions living down here on earth also helped me clarify for myself why Promises (and Monads) require strange contortions to move values into and out of them. They live up in the clouds. Rocket science, or magic beanstalks, or flying machines become necessary.

images

// I => O // Getter // () => T const ten = 10 var getTen; getTen = () => 10 getTen = () => { 5 + 5 } getTen = () => { console.log('side effect') return 5 * 2 } // ============== function add(getx, gety) { return getx() + gety() } // better to leave everything up in the cloud // Getter-getter function add(getx, gety) { return () => getx() + gety() } const tenPlusRandom = add(getTen, Math.random) console.log(tenPlusRandom()) console.log(tenPlusRandom()) console.log(tenPlusRandom()) // Setter // T => ()

hello

console.log('hello, world')

eval

1. copy this code into the browser console 2. `eval( codeAfterPagefold('hello') )` 3. try other pagefolds

function codeAfterPagefold(name) { const $ = jQuery const itemText = el => { const $el = $(el) const data = $(el).data() console.log({where:'itemText', el, $el, data}) return (data) ? data.item.text : null } const pagefolds = name => $('.item.pagefold') .filter((i, el) => { console.log({where:'pagefolds filter', i, el}) return itemText(el) === name }) return itemText(pagefolds(name) .last().next('.code')) }

get ten

Several ways to express a getter for 10

ten = 10 getTen = () => 10 getTen = () => { console.log('side effects') return 10; } getTen = () => { // different implementations return 5 + 5 }

broken

Something broken here that I don't understand.

console.log(codeAfterPagefold('get ten'))

`codeAfterPagefold('hello')` works fine. `codeAfterPagefold('get ten')` does not.

`pagefolds('hello').next('.code')` works fine. `pagefolds('get ten').next('.code')` does not.

`pagefolds('get ten').next().next().hasClass('code')` is true. I don't understand.