temporal composability
TRANSCRIPT
![Page 1: Temporal composability](https://reader030.vdocuments.us/reader030/viewer/2022032611/55c300dfbb61eb5c2a8b4828/html5/thumbnails/1.jpg)
Temporal Composability
Undo / Redo in angular with promises and the command pattern
Image by Gossins: Flow of Time
![Page 2: Temporal composability](https://reader030.vdocuments.us/reader030/viewer/2022032611/55c300dfbb61eb5c2a8b4828/html5/thumbnails/2.jpg)
Undo / Redo
Native apps (including browser) support undo
Web apps and Mobile apps do not Power users produce more errors than
consumers Power users on a computer with native app What happens when a power user uses a
web app?
![Page 3: Temporal composability](https://reader030.vdocuments.us/reader030/viewer/2022032611/55c300dfbb61eb5c2a8b4828/html5/thumbnails/3.jpg)
Power User
![Page 4: Temporal composability](https://reader030.vdocuments.us/reader030/viewer/2022032611/55c300dfbb61eb5c2a8b4828/html5/thumbnails/4.jpg)
I want to be able to build a collection I want to be able to undo a price change
without having to remember which price I destroyed.
Use Case
![Page 5: Temporal composability](https://reader030.vdocuments.us/reader030/viewer/2022032611/55c300dfbb61eb5c2a8b4828/html5/thumbnails/5.jpg)
Sets all items to 222% margin
![Page 6: Temporal composability](https://reader030.vdocuments.us/reader030/viewer/2022032611/55c300dfbb61eb5c2a8b4828/html5/thumbnails/6.jpg)
function
x f(x)
![Page 7: Temporal composability](https://reader030.vdocuments.us/reader030/viewer/2022032611/55c300dfbb61eb5c2a8b4828/html5/thumbnails/7.jpg)
invertable
x f(x)
f-1(f(x))
![Page 8: Temporal composability](https://reader030.vdocuments.us/reader030/viewer/2022032611/55c300dfbb61eb5c2a8b4828/html5/thumbnails/8.jpg)
State Machine
Dual Transitions
![Page 9: Temporal composability](https://reader030.vdocuments.us/reader030/viewer/2022032611/55c300dfbb61eb5c2a8b4828/html5/thumbnails/9.jpg)
Command Pattern
![Page 10: Temporal composability](https://reader030.vdocuments.us/reader030/viewer/2022032611/55c300dfbb61eb5c2a8b4828/html5/thumbnails/10.jpg)
Double Stack
![Page 11: Temporal composability](https://reader030.vdocuments.us/reader030/viewer/2022032611/55c300dfbb61eb5c2a8b4828/html5/thumbnails/11.jpg)
Double Stack
asdf
![Page 12: Temporal composability](https://reader030.vdocuments.us/reader030/viewer/2022032611/55c300dfbb61eb5c2a8b4828/html5/thumbnails/12.jpg)
Creating a collection ID is returned asynchronously as a promise ID not specified until after creation but
needed for deletion
Discontinuity
![Page 13: Temporal composability](https://reader030.vdocuments.us/reader030/viewer/2022032611/55c300dfbb61eb5c2a8b4828/html5/thumbnails/13.jpg)
*Each function has the result of its inverse as input
Promises and double closure
msg
Results Promise
Context
Arguments
Function
Results Promise
inversemsg
![Page 14: Temporal composability](https://reader030.vdocuments.us/reader030/viewer/2022032611/55c300dfbb61eb5c2a8b4828/html5/thumbnails/14.jpg)
Promises
![Page 15: Temporal composability](https://reader030.vdocuments.us/reader030/viewer/2022032611/55c300dfbb61eb5c2a8b4828/html5/thumbnails/15.jpg)
F -> $q(f) - Function that generates a promise (reuse allows for unlimited undo/redo)
Asynchronous actions are handled (composition)
Anything can undo/redo if providing 2 functions
User messaging for current state of undo/redo
Reusablility & Composiblity
![Page 16: Temporal composability](https://reader030.vdocuments.us/reader030/viewer/2022032611/55c300dfbb61eb5c2a8b4828/html5/thumbnails/16.jpg)
Answers & Questions