Created
August 31, 2017 00:49
-
-
Save nkpart/5e538888e7e04a7ef2fd78bf33bbd003 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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