## DOM Recursion Problem Solved by Reflex

As I wrote in [The Model-View Recursion Problem in FRP](https://docs.google.com/document/d/1suHgeUvls6MZLHholN6r4KK0G5VaYArjKnALvmmJQhU/edit#):

> In "Experience Report: Functional Reactive Programming and the DOM", authors describe a “recursion between FRP and the DOM” problem: “…the DOM tree in an FRP application can change in response to changes in FRP behaviors and events. However such new elements in the DOM tree may also produce new primitive event streams… which the FRP program needs to be able to react to. In other words, there is a cycle of dependencies…”

> You start with two buttons. The first button doesn’t respond to clicks. But the second button, when clicked, adds two more buttons to the page, where again the first button doesn’t respond to clicks, but the second button can add more pairs of buttons on click. 

> ... I believe ... the solution is mutually recursive like the code in AFRP, and looks something like:

> `clicksCount = count $ merge $ map (\[b1, b2] -> b1.clicks) nestedButtons`

> `nestedButtons = repeat clicksCount [button, button]`

> `buttons = flatten nestedButtons`

Turns out the Reflex library allows me to neatly solve this problem. The core of the code looks like:

```haskell
rec
  countedClicks <- foldDyn (\a b -> if evenButton a then b + 2 else b) 2 clicks
  
  clicks <- listListView (ffor countedClicks (\n -> [1..n])) (\ _ x -> dynTextButton x)
```

And it only took me ~5 hours to write those two lines. No joke. I use a few helper functions of my own creation. You can see the [full code here](/code/reflex/button_and_text.hs). And the [live version here](/code/reflex/button_and_text.jsexe/index.html).

And that ~5 hours is not including the ~3 hours it took to get reflex set up on my chromebook. Cloud9, AWS, Digital Ocean, and Codeanywhere all didn't work for different reasons. Eventually I got Google App Engine to work but I didn't realize the version I used would delete everything I install over night. So I created a more permanent instance on Google Compute which works as well and lets me SSH in using the browser. I just have to remember to turn it off when I'm not using it (which I am pretty sure stops the billing), otherwise it costs $100 per month because I'm using a big box.

I'm getting better at emacs which is fun. I install haskell syntax highlighting and am using the shell from within emacs to compile the code in a different window. And I have `sudo python -m SimpleHTTPSever 80` so I can see the code after I compile it with `ghcjs`. I can't use a lot of the really cool emacs haskell extensions because I'm using `ghcjs` instead of `ghc` and `./try-reflex` instead of `cabal` or `stack`, but I'm doing OK now. It took me a while to get used to all the fucking types in reflex, but I'm getting the hang of it.

Next steps... I'm a little lost in terms of what's next because this problem, along with [Reflex ToDoMVC minus a few features](https://github.com/reflex-frp/reflex-todomvc/blob/develop/src/Reflex/TodoMVC.hs) seems to already be solved. One idea is that I can go through Reflex ToDo MVC, line by line, expression by expression, and type-annotate everything and add a bunch more comments. There are definitely parts of it I don't understand, such as the `def` keyword, `&`, and `.~`. 

In a vague sense, I'm working towards building a "CycleJS devtools dataflow diagram" experience for Reflex, so another step would be to draw pictures for each type, or a way that I'd display it on the screen and show the values flowing through. And another good step that comes to mind would be to figure out how to get ahold of Reflex internals so I can get a sense of the network and hook into the different event firings.

Author: Steve Krouse

code/reflex/button_and_text.hs

@@ -0,0 +1,52 @@
+{-# LANGUAGE OverloadedStrings, RecursiveDo, ScopedTypeVariables, FlexibleContexts, TypeFamilies, ConstraintKinds #-}
+
+import Prelude hiding (mapM, mapM_, all, sequence)
+
+import Control.Monad hiding (mapM, mapM_, forM, forM_, sequence)
+import Control.Monad.Fix
+import Data.Map (Map)
+import qualified Data.Map as Map
+import Data.Foldable
+import Data.Monoid ((<>))
+import Data.Text (Text)
+import qualified Data.Text as T
+
+import GHCJS.DOM.Types (JSM)
+
+import Reflex
+import Reflex.Dom.Core
+import Data.Text.Encoding (encodeUtf8)
+
+
+main = mainWidget app
+
+evenButton :: [Int] -> Bool
+evenButton [] = False
+evenButton [x] = even x
+
+dynListToMap :: (Ord k, (Functor (Dynamic t))) => Dynamic t [k] -> Dynamic t (Map k k)
+dynListToMap l = ffor l (Map.fromList . (map $ \x -> (x, x)))
+
+listListView :: (Ord k, (Functor (Dynamic t)), Adjustable t m, PostBuild t m, MonadFix m, MonadHold t m) => Dynamic t [k] -> (k -> Dynamic t k -> m (Event t a)) -> m (Event t [k])
+listListView l = do
+  events <- listViewWithKey $ dynListToMap l
+  return (fmap (fmap Map.keys) events)
+
+dynTextButton :: (Adjustable t m, PostBuild t m, MonadFix m, MonadHold t m, DomBuilder t m, Show a) => Dynamic t a -> m (Event t ())
+dynTextButton dynString = do
+  rec
+    (el,_) <- el' "button" $ do
+      dynText $ fmap (T.pack . show) dynString
+  return (domEvent Click el)
+
+app :: ( DomBuilder t m , DomBuilderSpace m ~ GhcjsDomSpace , MonadFix m , MonadHold t m, PostBuild t m) => m ()
+app = do
+  
+  rec
+      countedClicks <- foldDyn (\a b -> if evenButton a then b + 2 else b) 2 clicks
+
+      clicks <- listListView (ffor countedClicks (\n -> [1..n])) (\ _ x -> dynTextButton x)
+      
+
+  return ()
+  

code/reflex/button_and_text.jsexe/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script language="javascript" src="rts.js"></script>
+    <script language="javascript" src="lib.js"></script>
+    <script language="javascript" src="out.js"></script>
+  </head>
+  <body>
+  </body>
+  <script language="javascript" src="runmain.js" defer></script>
+</html>