Skip to content

Instantly share code, notes, and snippets.

@nkpart
Created August 31, 2017 00:49
Show Gist options
  • Save nkpart/5e538888e7e04a7ef2fd78bf33bbd003 to your computer and use it in GitHub Desktop.
Save nkpart/5e538888e7e04a7ef2fd78bf33bbd003 to your computer and use it in GitHub Desktop.
10:11 dalaing I've just remembered - I have some reflex code to share for those who were interested
10:11 mankyKitty :D
10:12 dalaing there's an evolution of component design / list management through these pieces
10:12 oharvey (IRC) ith all this fancy development someone might get the idea that you work at a research lab.
10:12 dalaing we start off with components that take Dynamics as inputs and Events as outputs - that's the standard advice on where to start
10:12 dalaing so something like: https://github.com/qfpl/intro-to-reflex-compose/blob/master/code/src/Examples/Components/Pass1.hs#L88
10:14 dalaing we add a model for TodoItems: https://github.com/qfpl/intro-to-reflex-compose/blob/master/code/src/Examples/Components/Pass1.hs#L134
10:14 dalaing and then we build something that works with them: https://github.com/qfpl/intro-to-reflex-compose/blob/master/code/src/Examples/Components/Pass1.hs#L142
10:15 dalaing it takes in a Dynamic t TodoItem, and gives us two events - one Event t (TodoItem -> TodoItem) for changes to the model, and one Event t () to indicate that the item should be removed
10:15 dalaing then we can use `list` to build up that model while laying things out: https://github.com/qfpl/intro-to-reflex-compose/blob/master/code/src/Examples/Components/Pass1.hs#L304
10:16 dalaing via some horrendous switching: https://github.com/qfpl/intro-to-reflex-compose/blob/master/code/src/Examples/Components/Pass1.hs#L339
10:17 dalaing but we can handle the mark all complete / clear complete functionality by folding that into the update functionality: https://github.com/qfpl/intro-to-reflex-compose/blob/master/code/src/Examples/Components/Pass1.hs#L347
10:17 dalaing so that's the first pass, just heavily leaning on the dynamic in / event out idea
10:18 dalaing next we can fix up that switching, using EventWriter
10:18 <-- yupitsmj (IRC) left the room.
10:18 dalaing that lets us collect events for some value with a monoid instance
10:18 dalaing https://github.com/qfpl/intro-to-reflex-compose/blob/master/code/src/Examples/Components/Pass2.hs#L104
10:19 dalaing so we write a monoid instance for gathering changes and removals, and we make sure we have the key available in a monad reader
10:19 dalaing this means we have dynamics as inputs, but we use eventwriter for our outputs:
10:19 dalaing https://github.com/qfpl/intro-to-reflex-compose/blob/master/code/src/Examples/Components/Pass2.hs#L142
10:20 carlo_sg (IRC) So Dave Thomas is a KDB guy. Now everything sort of makes sense 😱
10:20 dalaing it cleans up the todoItem quite a lot: https://github.com/qfpl/intro-to-reflex-compose/blob/master/code/src/Examples/Components/Pass2.hs#L200
10:20 carlo_sg (IRC) I'm happy to see YOW Nights come to Singapore (and Hong Kong!)
10:20 dalaing and we can use listWithKey / runReader / runEventWriter to tidy up the todo list: https://github.com/qfpl/intro-to-reflex-compose/blob/master/code/src/Examples/Components/Pass2.hs#L214
10:21 dalaing the switching is now a pair of fmaps: https://github.com/qfpl/intro-to-reflex-compose/blob/master/code/src/Examples/Components/Pass2.hs#L250
10:21 dalaing so that's pass 2 - the switching is gone, the EventWriter cleans a pile of things up, and life is looking great
10:22 dalaing but we're building a model of the whole todo list which we aren't using
10:22 dalaing and we aren't going to use it, we could simplify the model so it just tracked membership in the list, and the individual pieces could track their own state
10:22 --> gfixler (IRC) (@freenode_gfixler:matrix.org) joined the room.
10:23 dalaing this gives us the opportunity to hide more information, which is nice
10:23 dalaing (we're already hiding a bit of information in the text edit component already, and have been since the start)
10:24 dalaing in the final pass, we simplify the monoid we use for send events from children to parents, and just track removals: https://github.com/qfpl/intro-to-reflex-compose/blob/master/code/src/Examples/Components/Pass3.hs#L104
10:24 dalaing now we change the complete component quite a bit: https://github.com/qfpl/intro-to-reflex-compose/blob/master/code/src/Examples/Components/Pass3.hs#L116
10:25 dalaing we pass in the mark all complete / clear complete events, and we return a dynamic representing the completion status
10:25 dalaing with that done, we don't need to track the completion status in the model of the list
10:26 dalaing we pass the mark all complete clear complete events in the todoItem and return the dynamic representing the completion status: https://github.com/qfpl/intro-to-reflex-compose/blob/master/code/src/Examples/Components/Pass3.hs#L176
10:26 dalaing and then we chop the model down: https://github.com/qfpl/intro-to-reflex-compose/blob/master/code/src/Examples/Components/Pass3.hs#L210
10:27 dalaing we don't even have to fmap to get the removes out, and we just need to collapse a dyn map dyn to a dyn map to get the completion status out
10:28 dalaing at that point we have components that only know about / communicate about what they need to make the app run, and we have a pretty lightweight model that just tracks membership
10:28 dalaing anyhow, that's the final bit that I talked about at compose, that wasn't covered at BFPG / BrisJS
10:29 dalaing it's pretty neat, and (I think) it's also the bit that shows that you can avoid the halogen style of looping changes back into the model if you don't actually need the model - my knowledge of halogen is pretty limited
10:31 dalaing there's also some scope to do some classy lens stuff with the monoid types for use with EventWriter, haven't gone fully down that rabbit hole yet
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment