NB: I come from a JS/React background and am a newbie to proper FP languages. My post probably will not make sense if you don’t know React.
I read the advice that multiple Halogen components would be more performant than one monolithic component (with some helper functions for generating pieces of app’s HTML tree).
I feel my old (closed source)React app design falls in between the two options - single global state, but with rendering (IMO) as optimal as needed, I am wondering if that model is possible in Halogen, and if it is bad design in some way. I obviously am not aware of why it would be bad. I want to use it again. More below.
My React app is made of a single global state tree - an ImmutableJS
tree managed by Redux - and dumb components
which are functions that receive all the state and all the actions ( to fire in response to HTML events) they need, in a props
argument and return some JSX (HTML) These dumb components are wrapped by higher order functions from libraries such as react-redux
, reselect
and recompose
which help with: selecting relevant piece of the global state , and diffing state against previous version so that the wrapped dumb component is called only if relevant piece of state has changed.
The dumb components can call other dumb components. The app is a single component tree with routing. Note that arguments to leaf components don’t need to be threaded down the component hierarchy, since the react-redux
higher order function that wraps each component “cheats” by pulling what is needed from global state. So the whole component tree remains dumb and doesn’t have boilerplate to thread arguments.
Single Global state seems to be an Elm idea that Redux copied, and I have liked it ever since I heard of it. In my app the total number of fields is ~100K and ~500 changes/sec to the State are pushed over a websocket from a server. The updates actually come in at 2K/sec but I have needed to apply some throttling to some of the updates to achieve performance. BTW RxJS
(FRP library) makes it a one line feature.
I think this single global state is what makes possible the neat debugging addon that Elm and Redux have. It lets you observe every state change from outside, initiate changes, roll back/replay the state changes, save/restore state. It is a beautiful thing to see your application UI change back and forth as you tweak the state.
The whole UI is a stateless dumb function of one data structure. This is the kind of elegant property that I expect functional language apps to have. Am I wrong to think this is preferable to having app state sprinkled all over the app?