The Design of Purescript Halogen
July 10, 2015
Newsletter ↳
Phil Freeman, the author of Purescript, explains the design of Halogen, a declarative, type-safe UI library.
Warning, outdated
This video applies to Halogen version 0.4.1 and earlier. The architecture and concepts are quite different now.
Summary
- Purescript-halogen
- a toolkit for building reactive web apps in purescript
- built on signal functions and a virtual dom
- Signals are values which change over time
- they are functors and applicatives
- The “stateful” combinator creates a new signal from an old one, adding a stateful input. It is called foldp in Elm or stepper
- for example if a signal wraps up a monoid then you can define a combine function which produces a new signal of the latest mconcat’d values
- Halogen provides a DOM templating DSL which builds a type
HTML
- A user interface can be considered a
Signal HTML
- when the signal changes, push the diffs to the DOM
- Halogen goes beyond such simple Signals to Signal functions, i.e.
type UI input = Signal input -> Signal (HTML input)
- Signal functions do have a mathematical denotation
- The concrete representation of signal functions in Halogen
- Signal functions also have Functor and Applicative instances (slides have a diagram)
- But signal functions have some additional type class instances: Profunctor, Strong, Choice
- Signal functions also have a stateful combinator
- Explanation of the merge combinator
- Putting this all together, the signal functions and combinators combine to create graphs of data flow
- In Halogen you get a lot of composability for free, which works well when defining web components
- Components actually have a type interface:
type Component m i o = SF i (HTML (m o))
- Mixins become easy inside the graph of pure functions
- Undo/redo
- Routing
- Sitemap / breadcrumbs
- How to handle
- Ajax
- External input
- Third-party code
- Canvas, SVG, WebGL