Explicitly Comprehensible FRP

class: center, middle

# Explicitly Comprehensible Functional Reactive Programming

## Steve Krouse

---

# This talk is about

## 1) the comprehensibility

When making a change, it's the first and most-time-consuming step.

## 2) of large

Software today is 10k lines minimum but goes up to millions.
      
## 3) FRP applications.

They are becoming increasingly prevalent.

---

# This this talk does not have The Answer<sup>TM<sup>
  
I complain about where we are, and point us in a promising direction.

---

# FP is comprehensible
## 1) Local reasoning
Code elsewhere cannot affect this code via *side-effects*.
<br>
## 2) Explicit data dependencies

We can grok this code by reading its dependency definitions recursively.

---
# FP is not *always* comprehensible

> There is in principle nothing to stop functional programs from **passing a single extra parameter into and out of every single function** in the entire system. If this extra parameter were a **collection (compound value)** of some kind then it could be used to **simulate an arbitrarily large set of mutable variables**... 
  
  > **...ease of reasoning is lost** (we still know that each function is dependent only upon its arguments, but one of them has become so large and **contains irrelevant values** that the benefit of this knowledge as an aid to understanding is almost nothing). This is however **an extreme example** and does not detract from the general power of the functional approach

> -- Out of the Tarpit (Moseley and Marks)

---

class: center, middle

# This "extreme example" has become the *most popular* pattern in FRP!

---
class: center, middle
# The Elm Architecture

---

# Elm Counter
  
<button onclick="num.innerText -= -1">+1</button><span id="num">0</span><button onclick="num.innerText -= 1">-1</button>

```
01 type alias Model = { count : Int } 
02      
03 initialModel : Model 
04 initialModel = { count = 0 } 
05
06 type Msg = Increment | Decrement 
07
08 update : Msg -> Model -> Model 
09 update msg model = case msg of 
10   Increment -> { model | count = model.count + 1 } 
11   Decrement -> { model | count = model.count - 1 } 
12
13 view : Model -> Html Msg 
14 view model = div [] 
15   [ button 
16       [ onClick Increment ] 
17       [ text "+1" ] 
18   , span [] [ text <| toString model.count ] 
19   , button 
20       [ onClick Decrement ]
21       [ text "-1" ] 
22   ]
```

---
                        
# Elm Todo MVC

<img src="https://user-images.githubusercontent.com/2288939/43979574-2cef3b36-9cb9-11e8-98f9-7cb25b27326a.png" width="400px">
      
```
Add -> 
{  model
  | uid = model.uid + 1
  , field = ""
  , entries = if String.isEmpty model.field 
      then model.entries 
      else model.entries ++ [newEntry model.field model.uid ]
}
```
  
---

# Elm TodoMVC diagram

---
# Elm TodoMVC Ctl-F "entries ="

<img style="position: absolute; clip: rect(0px, 300px, 492px, 0px);" src="https://user-images.githubusercontent.com/2288939/46862901-e237bb00-ce0d-11e8-89ee-fc8a19fb1759.png" height="700px">
      
<img style="position: absolute; top: -350px; right:0px; clip: rect(492px, 300px, 1500px, 0px);" src="https://user-images.githubusercontent.com/2288939/46862901-e237bb00-ce0d-11e8-89ee-fc8a19fb1759.png" height="700px">
      
---
      
# Elm TodoMVC Ctl-F "entries =" messages

---

# Reflex FRP
haskell, ghcjs

## 1) higher order

Stream can contain streams
      
## 2) cyclic

Streams can refer to streams that refer to themselves
      
---
# Reflex Counter

```
01 button :: Text -> m (Event ())
02 el :: Text -> m a -> m a
03 display :: Show a => Dynamic a -> m ()
04 (<$) :: a -> Event b -> Event a 
05 leftmost :: [Event a] -> Event a 
06 foldDyn :: (a -> b -> b) -> b -> Event a -> m (Dynamic b)
09
08 bodyElement :: MonadWidget t m => m () 
09 bodyElement = do 
10   rec evIncr <- button "+1" 
11       el "div" $ display count 
12       evDecr <- button "-1" 
13       count <- foldDyn (+) 0 $ leftmost
14         [ 1 <$ evIncr 
15         , -1 <$ evDecr 
16         ] 
17   return () 
18
19 main :: IO () 
20 main = mainWidget bodyElement 
```

---
# Reflex TodoMVC Entries

```
01 initialTasks :: Map Int Task
02 initialTasks = Map.empty 
03
04 insertNew_ :: Task -> Map Int Task -> Map Int Task 
05
06 todoMVC :: (DomBuilder t m, MonadFix m, MonadHold t m) => m ()
07 todoMVC = do
08   el "div" $ do
09     elAttr "section" ("class" =: "todoapp") $ do 
10       mainHeader
11       rec tasks <- foldDyn ($) initialTasks $
12           mergeWith (.)
13             [ fmap insertNew_ newTask 
14             , listModifyTasks 
15             , fmap (const $ Map.filter $ not . taskCompleted) clearCompleted
16             ] 
17           newTask <- taskEntry
18           listModifyTasks <- taskList activeFilter tasks
19           (activeFilter, clearCompleted) <- controls tasks
20    return ()
21  infoFooter
```
      
Cycle: `tasks` depends upon `listModifyTasks` and `clearCompleted`, which depend upon `tasks`

---
# Reflex TodoMVC Diagram
      
<iframe style="margin-left:-50px" width="900px" height="500px" overflow="scroll" frameborder="none" src="https://mermaidjs.github.io/mermaid-live-editor/#/view/eyJjb2RlIjoiZ3JhcGggVERcblxubmV3VGFza0V2ZW50Pm5ld1Rhc2tFdmVudF09PT4gdGFza3Ncbmxpc3RNb2RpZnlUYXNrcz5saXN0TW9kaWZ5VGFza3NdID09PiB0YXNrc1xuXG5jbGVhckNvbXBsZXRlZEV2ZW50PmNsZWFyQ29tcGxldGVkRXZlbnRdID09PiB0YXNrc1xudGFza3MgLS0-IHZpc2libGVUYXNrc1xuXG5hY3RpdmVGaWx0ZXItLT52aXNpYmxlVGFza3NcbnN1YmdyYXBoIHRhc2tMaXN0XG4gICAgdmlzaWJsZVRhc2tzLS0-Y29tcGxldGVkQ2hlY2tib3h7Y29tcGxldGVkQ2hlY2tib3h9XG4gICAgdmlzaWJsZVRhc2tzLS0-IGRlc2NyaXB0aW9uTGFiZWx7ZGVzY3JpcHRpb25MYWJlbH1cbiAgICB2aXNpYmxlVGFza3MtLT4gZWRpdEJveHtlZGl0Qm94fVxuICAgICB0b2dnbGVBbGxDaGVja2JveHt0b2dnbGVBbGxDaGVja2JveH0tLT50b2dnbGVBbGw-dG9nZ2xlQWxsXVxuICAgIHRvZ2dsZUFsbC0tPmxpc3RNb2RpZnlUYXNrc1xuICAgIHRvZ2dsZUFsbC0tPnRvZ2dsZVN0YXRlXG4gICB0b2dnbGVTdGF0ZS0tPnRvZ2dsZUFsbENoZWNrYm94XG4gICAgY2hhbmdlU2VsZj5jaGFuZ2VTZWxmXS0tPml0ZW1DaGFuZ2VzPml0ZW1DaGFuZ2VzXVxuICAgIGl0ZW1DaGFuZ2VzPml0ZW1DaGFuZ2VzXS0tPmxpc3RNb2RpZnlUYXNrc1xuICAgICBzdWJncmFwaCB0b2RvSXRlbVxuICAgICAgICAgIGVkaXRCb3h7ZWRpdEJveH0tLT5lZGl0Qm94RW50ZXI-ZWRpdEJveEVudGVyXVxuICAgICAgICAgIGVkaXRCb3gtLT5lZGl0Qm94VGV4dFZhbHVlXG4gICAgICAgICAgZWRpdEJveFRleHRWYWx1ZS0tPnNldERlc2NyaXB0aW9uPnNldERlc2NyaXB0aW9uXVxuICAgICAgICAgIGVkaXRCb3hFbnRlci0tPnNldERlc2NyaXB0aW9uPnNldERlc2NyaXB0aW9uXVxuICAgICAgICAgIGVkaXRCb3gtLT58b24gZXNjIGtleXxjYW5jZWxFZGl0XG4gICAgICAgICAgZGVzdHJveUJ1dHRvbntkZXN0cm95QnV0dG9ufS0tPmRlc3Ryb3lcbiAgICAgICAgICBkZXNjcmlwdGlvbkxhYmVse2Rlc2NyaXB0aW9uTGFiZWx9LS0-fG9uIGRvdWJsZSBjbGlja3xzdGFydEVkaXRpbmdcbiAgICAgICAgICBjb21wbGV0ZWRDaGVja2JveHtjb21wbGV0ZWRDaGVja2JveH0tLT5zZXRDb21wbGV0ZWRcbiAgICAgICAgICBlZGl0Qm94RW50ZXItLT5lZGl0aW5nXG4gICAgICAgICAgc3RhcnRFZGl0aW5nPnN0YXJ0RWRpdGluZ10tLT5lZGl0aW5nXG4gICAgICAgICAgY2FuY2VsRWRpdD5jYW5jZWxFZGl0XS0tPmVkaXRpbmdcbiAgICAgICAgICBzZXRDb21wbGV0ZWQ-c2V0Q29tcGxldGVkXS0tPmNoYW5nZVNlbGZcbiAgICAgICAgICBkZXN0cm95PmRlc3Ryb3ldLS0-Y2hhbmdlU2VsZlxuICAgICAgICAgIHNldERlc2NyaXB0aW9uPnNldERlc2NyaXB0aW9uXSAtLT5jaGFuZ2VTZWxmXG4gICAgICAgICAgZWRpdGluZy0tPnxoaWRlcy9zaG93cyB2aWEgY3NzfGVkaXRCb3hcbiAgICAgICAgICBlZGl0aW5nLS0-fGhpZGVzL3Nob3dzIHZpYSBjc3N8ZGVzY3JpcHRpb25MYWJlbFxuICAgICBlbmRcbmVuZFxuXG5zdWJncmFwaCBjb250cm9sc1xuICAgIGFsbEJ1dHRvbnthbGxCdXR0b259IC0tPmFsbEJ1dHRvbkNsaWNrZWQ-YWxsQnV0dG9uQ2xpY2tlZF1cbiAgICBhY3RpdmVCdXR0b257YWN0aXZlQnV0dG9ufS0tPmFjdGl2ZUJ1dHRvbkNsaWNrZWQ-YWN0aXZlQnV0dG9ubkNsaWNrZWRdXG4gICAgY29tcGxldGVkQnV0dG9ue2NvbXBsZXRlZEJ1dHRvbn0gLS0-Y29tcGxldGVkQnV0dG9uQ2xpY2tlZD5jb21wbGV0ZWRCdXR0b25DbGlja2VkXVxuICAgYWxsQnV0dG9uQ2xpY2tlZFxuICAgIGFsbEJ1dHRvbkNsaWNrZWQtLT5hY3RpdmVGaWx0ZXJcbiAgICBhY3RpdmVCdXR0b25DbGlja2VkLS0-YWN0aXZlRmlsdGVyXG4gICAgY29tcGxldGVkQnV0dG9uQ2xpY2tlZC0tPmFjdGl2ZUZpbHRlclxuICAgIGFjdGl2ZUZpbHRlci0tPmFjdGl2ZUJ1dHRvblxuICAgIGFjdGl2ZUZpbHRlci0tPmNvbXBsZXRlZEJ1dHRvblxuICAgIGFjdGl2ZUZpbHRlci0tPmFsbEJ1dHRvblxuICAgIGNsZWFyQ29tcGxldGVkQnV0dG9ue2NsZWFyQ29tcGxldGVkQnV0dG9ufS0tPmNsZWFyQ29tcGxldGVkRXZlbnRcbiAgICBhY3RpdmVGaWx0ZXItLT50b2RvUmVtYWluaW5nQ291bnRcbmVuZFxuXG5zdWJncmFwaCB0YXNrRW50cnlcbiAgIGRlc2NyaXB0aW9uQm94e2Rlc2NyaXB0aW9uQm94fS0tPlxuZGVzY3JpcHRpb25Cb3hFbnRlcj5kZXNjcmlwdGlvbkJveEVudGVyXVxuICBkZXNjcmlwdGlvbkJveHtkZXNjcmlwdGlvbkJveH0tLT5cbmRlc2NyaXB0aW9uQm94VmFsdWVcbiAgZGVzY3JpcHRpb25Cb3hFbnRlci0tPm5ld1Rhc2tFdmVudFxuICBkZXNjcmlwdGlvbkJveFZhbHVlLS0-bmV3VGFza0V2ZW50XG4gIGRlc2NyaXB0aW9uQm94RW50ZXItLT58Y2xlYXIgb24gZW50ZXJ8ZGVzY3JpcHRpb25Cb3h7ZGVzY3JpcHRpb25Cb3h9XG5lbmRcblxudGFza3MgLS0-IHRvZG9SZW1haW5pbmdDb3VudFxuXG5jbGFzc0RlZiBvcmFuZ2UgZmlsbDojZjk2XG5jbGFzcyB0YXNrcyxhY3RpdmVGaWx0ZXIsdG9kb1JlbWFpbmluZ0NvdW50LHZpc2libGVUYXNrcyxlZGl0aW5nLGl0ZW1zLHRvZ2dsZVN0YXRlLGVkaXRCb3hUZXh0VmFsdWUsZGVzY3JpcHRpb25Cb3hWYWx1ZSBvcmFuZ2VcblxuY2xhc3NEZWYgZ3JlZW4gZmlsbDojNGZmZjVhXG5jbGFzcyBuZXdUYXNrRXZlbnQsY2xlYXJDb21wbGV0ZWRFdmVudCxzZXRDb21wbGV0ZWQsZGVzdHJveSxjaGFuZ2VTZWxmLHNldERlc2NyaXB0aW9uLHN0YXJ0RWRpdGluZyxjYW5jZWxFZGl0LHRvZ2dsZUFsbCxsaXN0TW9kaWZ5VGFza3MsYWxsQnV0dG9uQ2xpY2tlZCxhY3RpdmVCdXR0b25DbGlja2VkLGNvbXBsZXRlZEJ1dHRvbkNsaWNrZWQsZGVzY3JpcHRpb25Cb3hFbnRlcixpdGVtQ2hhbmdlcyxlZGl0Qm94RW50ZXIgZ3JlZW4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ"></iframe>
---
# Reflex TodoMVC Diagram (Simplified)
      
<iframe style="margin-left:-50px" width="620px" height="500px" overflow="scroll" frameborder="none" src="https://mermaidjs.github.io/mermaid-live-editor/#/view/eyJjb2RlIjoiZ3JhcGggVERcblxubmV3VGFza0V2ZW50Pm5ld1Rhc2tFdmVudF09PT4gdGFza3Ncbmxpc3RNb2RpZnlUYXNrcz5saXN0TW9kaWZ5VGFza3NdID09PiB0YXNrc1xuXG5jbGVhckNvbXBsZXRlZEV2ZW50PmNsZWFyQ29tcGxldGVkRXZlbnRdID09PiB0YXNrc1xudGFza3MgLS0-IHZpc2libGVUYXNrc1xuXG5hY3RpdmVGaWx0ZXItLT52aXNpYmxlVGFza3NcbnN1YmdyYXBoIHRhc2tMaXN0XG4gICBcbiAgICB2aXNpYmxlVGFza3MtLT4gdG9kb0l0ZW0-aXRlbUNoYW5nZXNdXG4gICAgIHRvZ2dsZUFsbENoZWNrYm94e3RvZ2dsZUFsbENoZWNrYm94fS0tPnRvZ2dsZUFsbD50b2dnbGVBbGxdXG4gICAgdG9nZ2xlQWxsLS0-bGlzdE1vZGlmeVRhc2tzXG4gICAgdG9nZ2xlQWxsLS0-dG9nZ2xlU3RhdGVcbiAgIHRvZ2dsZVN0YXRlLS0-dG9nZ2xlQWxsQ2hlY2tib3hcbiAgIHN1YmdyYXBoIHRvZG9JdGVtXG4gICAgdG9kb0l0ZW0-aXRlbUNoYW5nZXNdXG4gICAgZW5kXG4gICAgdG9kb0l0ZW0-aXRlbUNoYW5nZXNdLS0-bGlzdE1vZGlmeVRhc2tzXG5lbmRcblxuc3ViZ3JhcGggY29udHJvbHNcbiAgICBhbGxCdXR0b257YWxsQnV0dG9ufSAtLT5hbGxCdXR0b25DbGlja2VkPmFsbEJ1dHRvbkNsaWNrZWRdXG4gICAgYWN0aXZlQnV0dG9ue2FjdGl2ZUJ1dHRvbn0tLT5hY3RpdmVCdXR0b25DbGlja2VkPmFjdGl2ZUJ1dHRvbm5DbGlja2VkXVxuICAgIGNvbXBsZXRlZEJ1dHRvbntjb21wbGV0ZWRCdXR0b259IC0tPmNvbXBsZXRlZEJ1dHRvbkNsaWNrZWQ-Y29tcGxldGVkQnV0dG9uQ2xpY2tlZF1cbiAgIGFsbEJ1dHRvbkNsaWNrZWRcbiAgICBhbGxCdXR0b25DbGlja2VkLS0-YWN0aXZlRmlsdGVyXG4gICAgYWN0aXZlQnV0dG9uQ2xpY2tlZC0tPmFjdGl2ZUZpbHRlclxuICAgIGNvbXBsZXRlZEJ1dHRvbkNsaWNrZWQtLT5hY3RpdmVGaWx0ZXJcbiAgICBhY3RpdmVGaWx0ZXItLT5hY3RpdmVCdXR0b25cbiAgICBhY3RpdmVGaWx0ZXItLT5jb21wbGV0ZWRCdXR0b25cbiAgICBhY3RpdmVGaWx0ZXItLT5hbGxCdXR0b25cbiAgICBjbGVhckNvbXBsZXRlZEJ1dHRvbntjbGVhckNvbXBsZXRlZEJ1dHRvbn0tLT5jbGVhckNvbXBsZXRlZEV2ZW50XG4gICAgYWN0aXZlRmlsdGVyLS0-dG9kb1JlbWFpbmluZ0NvdW50XG5lbmRcblxuc3ViZ3JhcGggdGFza0VudHJ5XG4gICBkZXNjcmlwdGlvbkJveHtkZXNjcmlwdGlvbkJveH0tLT5cbmRlc2NyaXB0aW9uQm94RW50ZXI-ZGVzY3JpcHRpb25Cb3hFbnRlcl1cbiAgZGVzY3JpcHRpb25Cb3h7ZGVzY3JpcHRpb25Cb3h9LS0-XG5kZXNjcmlwdGlvbkJveFZhbHVlXG4gIGRlc2NyaXB0aW9uQm94RW50ZXItLT5uZXdUYXNrRXZlbnRcbiAgZGVzY3JpcHRpb25Cb3hWYWx1ZS0tPm5ld1Rhc2tFdmVudFxuICBkZXNjcmlwdGlvbkJveEVudGVyLS0-fGNsZWFyIG9uIGVudGVyfGRlc2NyaXB0aW9uQm94e2Rlc2NyaXB0aW9uQm94fVxuZW5kXG5cbnRhc2tzIC0tPiB0b2RvUmVtYWluaW5nQ291bnRcblxuY2xhc3NEZWYgb3JhbmdlIGZpbGw6I2Y5NlxuY2xhc3MgdGFza3MsYWN0aXZlRmlsdGVyLHRvZG9SZW1haW5pbmdDb3VudCx2aXNpYmxlVGFza3MsZWRpdGluZyxpdGVtcyx0b2dnbGVTdGF0ZSxlZGl0Qm94VGV4dFZhbHVlLGRlc2NyaXB0aW9uQm94VmFsdWUgb3JhbmdlXG5cbmNsYXNzRGVmIGdyZWVuIGZpbGw6IzRmZmY1YVxuY2xhc3MgbmV3VGFza0V2ZW50LGNsZWFyQ29tcGxldGVkRXZlbnQsc2V0Q29tcGxldGVkLGRlc3Ryb3ksY2hhbmdlU2VsZixzZXREZXNjcmlwdGlvbixzdGFydEVkaXRpbmcsY2FuY2VsRWRpdCx0b2dnbGVBbGwsbGlzdE1vZGlmeVRhc2tzLGFsbEJ1dHRvbkNsaWNrZWQsYWN0aXZlQnV0dG9uQ2xpY2tlZCxjb21wbGV0ZWRCdXR0b25DbGlja2VkLGRlc2NyaXB0aW9uQm94RW50ZXIsaXRlbUNoYW5nZXMsZWRpdEJveEVudGVyLHRvZG9JdGVtIGdyZWVuIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0"></iframe>
  
---

# Is the cure worse than the disease?

### - Serializeable Elm singleton -> time travel debugging, hot reloading
### - Reflex + ghcjs is annoying
      
---
# Conclusion

## I hope you are now _unhappy_ with where we are. And excited to look for other solutions. Such a _higher-order_ and _cyclic_ streams. So that we can... (please forgive me)