[heropunch-dev] Native Functional-Reactive UIs

  • From: "xj9" <dmarc-noreply@xxxxxxxxxxxxx> (Redacted sender "xj9" for DMARC)
  • To: heropunch-dev <heropunch-dev@xxxxxxxxxxxxx>
  • Date: Mon, 06 May 2019 22:56:11 -0600

the best UI libraries are doomed. millions of hours of effort dropped
into making web technologies fast and productive. dragged down by awful
toolchains just so developers can have a sane way to manage
increasingly complex applications.

so there *is* some sanity there, but it is buried under a lot of
garbage that is only there because you have to run this stuff in web
browsers. what if we could take some of the good stuff that is
happening in the web gui world and make it fast, native, and fun to
work with? can you really have your cake and eat it too?

a small example of a UI component in vue would be

export default Vue.component('my-chungus', {
  render (h) {
    return h('p', {class: 'chungun'}, this.value)
  },
  props: ['value']
})

or, if you prefer a little DSL

export default Vue.component('my-chungus', {
  render () {
    return <p class="chungun">{this.value}</p> 
  },
  props: ['value']
})

obviously, this is javascript, but there are a lot of nice things about
the vue.js and react workflow and development lifecycle. another
excellent example of functional-reactive ui programming is elm. the
basic concept here is this: the component tree is a set of self-
contained objects that communicate though message passing. depending on
the library the exact semantics can differ, but the basic idea is the
same.


└── ComponentA (parent)
    ├── ComponentB (child)
    ├── ...

the component tree is typically a directed graph with props (data)
being passed downward and events being emitted upward. in contrast to
typical OOP UI toolkits, neither component can directly mutate the
state of the other. updates are triggerd by updating props or emitting
an event. (i.e. passing a message).

there is usually also a state tree that is mapped into the component
tree as needed. decoupling the state of the application from the view-
model code that manages the interface makes it significantly easier to
reason about the state of the system in larger programs. 

none of this leverages any features that are unique to javascript. the
only challenge is bringing these ideas into native gui programming.


Other related posts:

  • » [heropunch-dev] Native Functional-Reactive UIs - xj9