Pux is a PureScript library for building web applications. Interactive
UI is modeled as a single state transition function,
Event -> State -> (State, HTML)
which is run for every event. Pux also
provides tooling such as:
- Isomorphic routing and rendering
- Hot reloading
- Render to React (or any virtual DOM library)
- Time-travelling debug extension
Quick start
The starter app provides everything you need to get started:
git clone git://github.com/alexmingoia/pux-starter-app.git my-awesome-pux-appcd my-awesome-pux-appnpm installnpm start
Example
The following chunk of code sets up a basic counter that can be incremented and decremented:
module Main where import Prelude hiding (div)import Control.Monad.Eff (Eff)import Pux (CoreEffects, EffModel, start)import Pux.DOM.Events (onClick)import Pux.DOM.HTML (HTML)import Pux.Renderer.React (renderToDOM)import Text.Smolder.HTML (button, div, span)import Text.Smolder.Markup (text, (#!)) data Event = Increment | Decrement type State = Int -- | Return a new state (and effects) from each eventfoldp :: ∀ fx. Event -> State -> EffModel State Event fxfoldp Increment n = { state: n + 1, effects: [] }foldp Decrement n = { state: n - 1, effects: [] } -- | Return markup from the stateview :: State -> HTML Eventview count = div do button #! onClick (const Increment) $ text "Increment" span $ text (show count) button #! onClick (const Decrement) $ text "Decrement" -- | Start and render the appmain :: ∀ fx. Eff (CoreEffects fx) Unitmain = do app <- start { initialState: 0 , view , foldp , inputs: [] } renderToDOM "#app" app.markup app.input
Benchmarks
Why is Pux slow?
Pux has not focused on performance yet. The slow performance arises from translating Pux's (smolder) virtual DOM to React's virtual DOM. The goal is to write a purescript virtual DOM module for smolder, which would avoid that translation step and could be optimized for a monadic datastructure. I suspect this would achieve performance on par with Halogen.
Below are the render steps for the other libraries compared, which shows that Pux is the only one that has an intermediate virtual DOM representation (it has to render to React first then React has to render):
- Elm = Virtual DOM -> DOM patch
- React = Virtual DOM -> DOM patch
- Thermite = Virtual DOM -> DOM patch
- Halogen = Virtual DOM -> DOM patch
- Pux = Smolder Markup -> React Virtual DOM -> DOM patch