2b:null 2c:["$","title",null,{"children":"Time and Meaning: domain modeling and reactive programming | Travis Stodter | Observable"}] 31:[{"id":"fb6135207493356bf14b02154ad37109d523511cfb8a8e35826919f3e79224c8386caa8013e4017c09d3945cf966d37b81d13c795951d27d8ab7bcde5c5bfcfd","href":"https://static.observableusercontent.com/files/fb6135207493356bf14b02154ad37109d523511cfb8a8e35826919f3e79224c8386caa8013e4017c09d3945cf966d37b81d13c795951d27d8ab7bcde5c5bfcfd","name":"image@6.png","type":"image/png","lastModified":1618082573061.196,"size":497154},{"id":"2ffa38c256e5acdbd41d9ebbcc79489fddf8cc2cc51f382605001334ab7dc381a317dc5b8d86f3c2146c6c09205cd85d75a057b442d32c1ef303593c1a04b022","href":"https://static.observableusercontent.com/files/2ffa38c256e5acdbd41d9ebbcc79489fddf8cc2cc51f382605001334ab7dc381a317dc5b8d86f3c2146c6c09205cd85d75a057b442d32c1ef303593c1a04b022","name":"image@3.png","type":"image/png","lastModified":1618005308873.98,"size":99105},{"id":"f2bcd1350294455a64572c45940a427492a021e1fc75594d56da1a7ebee3ad5426f755b0870c24321d8d6104fe6c8580998310c00c23e791923bfa17019d3333","href":"https://static.observableusercontent.com/files/f2bcd1350294455a64572c45940a427492a021e1fc75594d56da1a7ebee3ad5426f755b0870c24321d8d6104fe6c8580998310c00c23e791923bfa17019d3333","name":"image@1.png","type":"image/png","lastModified":1618005034237.051,"size":60903},{"id":"0d25654140f7bb7da6c8f122822703a9fc34d4b87c083fd73abf62cece415b5d0d3a64e86221a1cdcaedf0316854bdfc7c47e0b98b18f4bdbe7d59ef08356f4c","href":"https://static.observableusercontent.com/files/0d25654140f7bb7da6c8f122822703a9fc34d4b87c083fd73abf62cece415b5d0d3a64e86221a1cdcaedf0316854bdfc7c47e0b98b18f4bdbe7d59ef08356f4c","name":"image@4.png","type":"image/png","lastModified":1618017444517.996,"size":54956},{"id":"111148bc8aa19dcb285cf952e450577ce128dcd4d0f05ea0553b7f7e7894708a5c85ef0aaa1ad9e4be85199405bf08b4855256f97135c1410dec29a2f424e89b","href":"https://static.observableusercontent.com/files/111148bc8aa19dcb285cf952e450577ce128dcd4d0f05ea0553b7f7e7894708a5c85ef0aaa1ad9e4be85199405bf08b4855256f97135c1410dec29a2f424e89b","name":"image@5.png","type":"image/png","lastModified":1618017730026.754,"size":26528}] 2f:{"id":"118414c28a9b1481","slug":"time-and-meaning","title":"Time and Meaning: domain modeling and reactive programming","thumbnail":"8edd8dc0991cce2ce4336d3a68c61b7c4b54147269b51803c2e4fab42276aa8d","access_level":"public","create_time":"$D2021-04-09T20:49:08.433Z","update_time":"$D2021-04-10T20:28:46.069Z","view_time":null,"first_public_time":"$D2021-04-10T20:27:32.055Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"825710bbc181247a","login":"tstodter","name":"Travis Stodter","avatar_url":"https://avatars-next.observableusercontent.com/13a6888a44b6a120d03ed3e83f80e89a67369f87bdb0dc4247e2e4082c7086c4","tier":"starter_2024"},"version":534,"publish_version":534,"role":null,"authored":false,"authors":[{"type":"individual","id":"ec330b2e51aa3a97","login":"tstodter","name":"Travis Stodter","avatar_url":"https://avatars-next.observableusercontent.com/13a6888a44b6a120d03ed3e83f80e89a67369f87bdb0dc4247e2e4082c7086c4","tier":null}],"members":[{"type":"individual","id":"ec330b2e51aa3a97","login":"tstodter","name":"Travis Stodter","avatar_url":"https://avatars-next.observableusercontent.com/13a6888a44b6a120d03ed3e83f80e89a67369f87bdb0dc4247e2e4082c7086c4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Time and Meaning: domain modeling and reactive programming","cells":[{"id":0,"value":"md`# Time and Meaning: domain modeling and reactive programming`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"keyBindings","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"slide.md`\n# Time and Meaning: domain modeling and reactive programming\n\n### Travis Stodter\n_tmsigm@rit.edu_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"slide.md`\nToday:\n\n- Some imprecise thoughts\n- Some disjointed tips\n- Some exciting ideas\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"notes.md`\n- Some of this will feel quite unfamiliar\n- ...but it's not far away. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"slide.md`\nToday:\n\n- Guidelines for modeling real-world domains\n- Guidelines for figuring out what you need to code\n- A very brief overview of reactive programming\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":471,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":452,"value":"slide.md`\nWe want:\n\n- Easy ways to communicate\n- Precise ways to communicate\n- Reliable ways to communicate\n\nWe want a language.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":475,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"slide.md`\nWhat is meaning?\n\n${widthSmall(await FileAttachment(\"image@3.png\").image())}\n`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":477,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"slide.md`\nWhat is meaning?\n\n${widthSmall(await FileAttachment(\"image@1.png\").image())}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"notes.md`\n- Meaning is \"that thing defined in terms of the meaning of other things\"\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"slide.md`\n### _Match the meanings of your models to the meanings of your domain._ \n\n- **Domain**: the real world thing\n ${html`Airplane autopilot, construction management, user interaction`}\n\n- **Model**: the representation of that thing\n ${html`Classes, methods, functions, objects`}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"slide.md`\n${html`functional`} \n## Reactive programming\n\n- _Programming with values over time_\n- Many different approaches\n- Extraordinarily popular \n - AngularJS, ReactiveX, Excel\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":483,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"slide.html`\n${beside(\n md`\n \\`x = ${xImperative} \\` ${bind(html``, \n viewof xImperative)}\n\n \\`y = ${yImperative} \\` ${bind(html``, \n viewof yImperative)}\n\n \\`z = x + y // ${3} \\`\n `, \n md`\n \\`x = ${xReactive} \\` ${bind(html``, \n viewof xReactive)}\n\n \\`y = ${yReactive} \\` ${bind(html``, \n viewof yReactive)}\n\n \\`z = x + y // ${z} \\`\n `\n)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":386,"value":"notes.md`\nReactive programmings emphasizes what values _are_ (what they mean)\n\n...not how they come to be.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":201,"value":"viewof xImperative = Range([0, 10], {step: 1, value: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":202,"value":"viewof yImperative = Range([0, 10], {step: 1, value: 2})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"viewof xReactive = Range([0, 10], {step: 1, value: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"viewof yReactive = Range([0, 10], {step: 1, value: 2})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"z = xReactive + yReactive","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":377,"value":"slide.md`\n### _Aim for simple models that map to familiar ideas_ \n\n- Models are in your head, so they repeat often.\n- Simple things change predictably, complex things change chaotically.\n- Familiar ideas have lots of wheels.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":486,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"slide.md`\n## Reactive programming\n\n- **Domain**: change, identity, *values*, *events*\n\n- **Model**: Values, Event streams, ...\n\n${styled('width', '60%')(await FileAttachment(\"image@5.png\").image())}\n${cite('https://www.raywenderlich.com/books/reactive-programming-with-kotlin/v2.0/chapters/2-observables')}\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":489,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":300,"value":"slide.md`\n### _Consider the relationships between models first._ \n\n- The relationships between your models _are_ their definition.\n- Relationships \\`==\\` functions/methods.\n- Definition and representation follows from the operations.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":492,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":315,"value":"slide.md`\n - values -- events\n > Make values from events\n - values -- values\n > Combine values at the same point in time\n - events -- events\n > Transform, filter, combine\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":495,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":353,"value":"slide.md`\n\n~~~js\n// Weird JS'y pseudocode\nlatestValue = (Events) => Value\nadd = (Value, Value) => Value\nmergeEvents = (Events, Events) => Events\n~~~\n\n${styled('width', '60%')(await FileAttachment(\"image@4.png\").image())}\n${cite('https://rxjs.dev/api/index/function/merge')}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":498,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":347,"value":"slide.md`\n### _Reuse ideas as much as possible_ \n\n- Remember, you're an idiot.\n- Don't forget that you're brilliant.\n- Always avoid hard work\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":501,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":390,"value":"slide.md`\n### _Maintain the relationships between relationships_ \n\n- With enough reuse, relationships will have relationships with one another\n- With enough reuse, functions/methods will be built out of one another\n- Clarifies and creates meaning.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":504,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":394,"value":"slide.md`\n~~~js\nlatestValue = (Events) => Value\nadd = (Value, Value) => Value\nmergeEvents = (Events, Events) => Events\n~~~\n- \\`mergeEvents(mergeEvents(a, b), c)\\` should be all events in \\`a\\`, \\`b\\`, and \\`c\\`.\n- \\`latestValue(mergeEvents(a, b))\\` _must be_ the latest event in either \\`a\\` or \\`b\\`.\n- ...\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":507,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"slide.md`\n### _Once you understand the relationships, let the insides follow the outsides._ \n\n~~~js\nValue = (time) => val\nEvents = [[time, val], [time, val], ...]\n~~~\n\n- Choose representations that serve the needs of the operations/relationships.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":510,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":421,"value":"slide.md`\n~~~js\nadd = (Value, Value) => Value\nmergeEvents = (Events, Events) => Events\n~~~\n\n~~~js\n\nadd((t) => 1, (t) => 2) == (t) => 3\n\nmergeEvents([[0, 'R'], [2, 'T']], \n [[1, 'I']]) \n\n == [[0, 'R'], [1, 'I'], [2, 'T']]\n~~~\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":513,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":437,"value":"slide.md`\n### Fairly close to useful\n\n~~~js\nimport { merge, fromEvent, interval } from 'rxjs';\n\nconst clicks = fromEvent(document, 'click');\nconst timer = interval(1000);\nconst clicksOrTimer = merge(clicks, timer);\nclicksOrTimer.subscribe(x => console.log(x));\n~~~\n\n\\`clicksOrTimer\\` has an event every second _and_ on every click.\n\n${cite('https://rxjs.dev/api/index/function/merge')}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":516,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":527,"value":"slide.html`\n${widthSmall(await FileAttachment(\"image@6.png\").image())}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":530,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":442,"value":"slide.md`\n### Pros\n\n- Extremely concise\n- You know how you know\n- Code is defined by models are defined by domain \n- Sometimes impossible to write meaningless code\n\n### Cons\n\n- Library-oriented\n- A lot of upfront work\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":519,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":449,"value":"slide.md`\n### More?\n\n_Algebra-Driven Design_ by Sandy Maguire (https://algebradriven.design/)\n\n\"Denotational design with type class morphisms\", Conal Elliott (http://conal.net/papers/type-class-morphisms/)\n\nSvelte programming language (https://svelte.dev/)\n\nReactive extensions libraries (https://rxjs.dev/guide/overview)\n\nMe! (tmsigm@rit.edu)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":522,"value":"notes.md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"md`\n---\n## Appendix\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"import { slide, notes, style, keyBindings } from 'e3f90f810696489d'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"widthSmall = styled('width', '60%')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"styled = (prop, value) => (element) => {\n element.style[prop] = value;\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":191,"value":"beside = (a, b) => html`\n

\n ${a}\n

\n ${b}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":310,"value":"cite = text => html`${text}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"import {Input, Range, bind, html} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"