31:T41e,Ok, but now we need some way to pipe both values into a reactive greeting string: ```js pipe(first, last, (first, last) => `Hello \${first} \${last}!`) ``` To do this, we'll write a more general version of pipe. For reference, here's pipe's definition again: ```js function pipe(x /* Observable */, f /* (x: T) => U */) /* Observable */ { // initialize a new output observable with the current value of f(x) const obs = new Observable(f(x.read())); // whenever the input observable changes... x.subscribe((value) => { // update the output observable with the new value of f(x) obs.write(f(value)); }) return obs; } ``` Now instead of just taking two inputs, we'll take N inputs where the first N-1 are observables and the last is a function with N-1 inputs. We'll store an array of the current values of each input observable, and whenever one of them updates, we'll call the function again to update the output. Here's an implementation of `combineLatest`. I've pointed out the most significant changes with `/* NEW! */`.32:[] 2f:{"title":"You Could Have Invented Reactivity Part 2: Observable Functions","cells":[{"id":0,"value":"# You Could Have Invented Reactivity Part 2: Observable Functions\n\nThis article is part of a series:\n- [Part 1: The Observer Pattern](https://observablehq.com/@joshpoll/you-could-have-invented-reactivity-the-observer-pattern)\n- [Part 2: Observable Functions](https://observablehq.com/@joshpoll/you-could-have-invented-reactivity-part-2)\n\nIn the [previous article](https://observablehq.com/@joshpoll/you-could-have-invented-reactivity-the-observer-pattern), we made a basic Observable class for reactivity.\nLet's try to apply it to a slightly more complex example.\n\nInstead of just greeting a first name, we'll greet a first and last name that we parse from a string.\nWe want this intermediate computation to be reactive as well. That way, if the parsed names don't change we won't need to rerun our greeting code.","pinned":false,"hidden":false,"mode":"md"},{"id":86,"value":"import {log} from '@sorig/console-log-without-leaving-your-notebook'","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"Here's the function we want to make reactive:","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"function greet(lastCommaFirst) {\n const firstSpaceLast = lastCommaFirst.split(',')\n .map(s => s.trim())\n .reverse()\n .join(\" \");\n\n console.log(`Hello ${firstSpaceLast}!`)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"The dataflow of the function is\n```\nlastCommaFirst -> firstSpaceLast -> `Hello \\${firstSpaceLast}!`\n```\n\nUnlike the example in the last article, we have an intermediate computation.\nHere are some example calls to show how the function is robust to changes in whitespace.\n\nRun the cells and inspect the results. They should be identical.","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"greet(\"Pollock, Josh\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"greet(\"Pollock , Josh\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"greet(\"Pollock,Josh\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"logTable(10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"Let's try to make this reactive! We'll start with the same `Observable` class from the last article.","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"// An implementation of the observer pattern\nclass Observable {\n constructor(initialValue) {\n this._value = initialValue;\n this.observers = [];\n }\n\n read() {\n return this._value;\n }\n\n write(newValue) {\n if (newValue !== this._value) {\n this._value = newValue;\n this.notifyObservers();\n }\n }\n\n // Method to add an observer\n subscribe(observer) {\n this.observers.push(observer);\n }\n\n // Method to notify all observers about the value change\n notifyObservers() {\n this.observers.forEach(observer => observer(this._value));\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"Now let's define an input Observable and try to create the intermediate computation:","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"lastCommaFirst = new Observable(\"Pollock, Josh\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"function parseName(lastCommaFirst) {\n return lastCommaFirst.split(',')\n .map(s => s.trim())\n .reverse()\n .join(\" \")\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"lastCommaFirst.subscribe((lastCommaFirst) => parseName(lastCommaFirst));","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"But we have a problem! How do we use the value we create in the subscription? We seem to be stuck.\n\nHow do we make this problem tractable? Let's first clearly define the inputs and outputs of our problem.\n\n# Pipe: Specification\n\n**Inputs:**\n- An input observable, `lastCommaFirst: Observable`.\n- A function, `parseName`, from string to string: `split: (lastCommaFirst: string) => string`.\n\n**Output:**\n- We don't want to output just the string from `parseName`, but instead an _observable_ string, so that we can react to changes in its value: `Observable`.\n\nSo we need a function that pipes our input observable into our input function:\n```ts\ndeclare function pipe(lastCommaFirst: Observable, f: (lastCommaFirst: string) => string) => Observable\n```\n\nGeneralizing this type, we want\n```ts\ndeclare function pipe(x: Observable, f: (x: T) => U) => Observable\n```\n\n(Haskellers may notice this is essentially `fmap`.)\n\n# Pipe: Implementation\n\nNow let's define `pipe`!","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"function pipe(x /* Observable */, f /* (x: T) => U */) /* Observable */ {\n // initialize a new output observable with the current value of f(x)\n const obs = new Observable(f(x.read()));\n\n // whenever the input observable changes...\n x.subscribe((value) => {\n // update the output observable with the new value of f(x)\n obs.write(f(value));\n })\n\n return obs;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"Let's walk through why this implementation makes sense, and how you might come up with it based on the specification.\nHere are some guiding observations based on the spec:\n\n1. We need to return an `Observable` so we'll want to make one somewhere in the `pipe` function.\n2. We'll need to subscribe to the input, `x`, so we can react to it.\n3. But we can't _return_ anything from a subscription. Its value is thrown away by `notifyObservers`. Instead we'll need to do some kind of effect -- typically a mutation or a log. Writing to the `Observable` seems like a good choice.\n\nOk! Let's try our new function.","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"firstSpaceLast = pipe(lastCommaFirst, (lastCommaFirst) => parseName(lastCommaFirst))","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"// run this cell to see the latest value of firstSpaceLast\nfirstSpaceLast.read()","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"greeting = pipe(firstSpaceLast, (firstSpaceLast) => `Hello ${firstSpaceLast}!`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"greeting.subscribe((greeting) => console.log(`greeting: ${greeting}`))","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"// When you submit a name in this field, it will be written to the `name` Observable.\n// If you only change the whitespace, you won't see a new console log!\nviewof updatedName = Inputs.text({value: \"name, your\", placeholder: \"Enter your last, first name\", submit: true, autocomplete: false})","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"lastCommaFirst.write(updatedName)","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"logTable(10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"# Combining Multiple Values\n\nOur implementation of `greet` above was a little awkward. It's arguably more readable to compute `first` and `last` separately:","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"function greetSplit(lastCommaFirst) {\n const first = lastCommaFirst.split(',')[1].trim();\n const last = lastCommaFirst.split(',')[0].trim();\n\n console.log(`Hello ${first} ${last}!`)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"Let's try to write this as a reactive program using our current interface.","pinned":false,"hidden":false,"mode":"md"},{"id":145,"value":"first = pipe(lastCommaFirst, (lastCommaFirst) => lastCommaFirst.split(',')[1].trim())","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"last = pipe(lastCommaFirst, (lastCommaFirst) => lastCommaFirst.split(',')[0].trim())","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"function combineLatest(...inputs) {\n const observables = inputs.slice(0, -1);\n const fn = inputs[inputs.length - 1];\n\n /* NEW! */\n // store the latest value for each observable\n let latestValues = observables.map(obs => obs.read());\n\n // initialize a new output observable\n const obs = new Observable(fn(...latestValues));\n\n // every time an observable changes...\n observables.forEach((observable, index) => {\n observable.subscribe((value) => {\n /* NEW! */\n // push the update to latestValues\n latestValues[index] = value;\n\n // update the output observable\n obs.write(fn(...latestValues));\n });\n });\n\n return obs;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"We call it `combineLatest`, because it behaves like ReactiveX's [`combineLatest` operator](https://reactivex.io/documentation/operators/combinelatest.html), which combines the latest values of its input observables.\n\nLet's try it out with `first` and `last`.","pinned":false,"hidden":false,"mode":"md"},{"id":171,"value":"greetingSplit = combineLatest(first, last, (first, last) => `Hello ${first} ${last}!`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"greetingSplit.subscribe((greetingSplit) => console.log(`greetingSplit: ${greetingSplit}`))","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"// When you submit a name in this field, it will be written to the `name` Observable.\n// If you only change the whitespace, you won't see a new console log!\nInputs.bind(Inputs.text({value: \"name, your\", placeholder: \"Enter your last, first name\", submit: true, autocomplete: false}), viewof updatedName)","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"logTable(10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"Tada! Now we can write some basic reactive programs using reactive variables, `Observables`, and reactive functions, called with `combineLatest`.\n\n**Challenge Questions To Check Your Understanding:**\n\n- What happens when you change just the whitespace?\n- What happens when you change just the first name? Just the last name?\n- What happens when you change the first and last names at the same time?\n\nFor each of these, do `greeting` and `greetingSplit` behave the same way? Why or why not?","pinned":false,"hidden":false,"mode":"md"},{"id":83,"value":"import {logTable} from '@sorig/console-log-without-leaving-your-notebook'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}