Build purely functional, type-safe web applications.
- Isomorphic routing and rendering
- Hot reloading
- Render to React (or any virtual DOM library)
- Time-travelling debug extension
Read the Guide to learn more about Pux.
The starter app provides everything you need to get started:
git clone git://github.com/alexmingoia/pux-starter-app.git my-awesome-pux-app
cd my-awesome-pux-app
npm install
npm startThe following chunk of code sets up a basic counter that can be incremented and decremented:
module Main where
import Control.Bind (bind)
import Control.Monad.Eff (Eff)
import Data.Function (const, ($))
import Data.Ring ((+), (-))
import Data.Show (show)
import Data.Unit (Unit)
import Pux (CoreEffects, 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 event
foldp :: ∀ fx. Event -> State -> EffModel State Event fx
foldp Increment n = { state: n + 1, effects: [] }
foldp Decrement n = { state: n - 1, effects: [] }
-- | Return markup from the state
view :: State -> HTML Event
view count =
div do
button #! onClick (const Increment) $ text "Increment"
span $ text (show count)
button #! onClick (const Decrement) $ text "Decrement"
-- | Start and render the app
main :: ∀ fx. Eff (CoreEffects fx) Unit
main = do
app <- start
{ initialState: 0
, view
, foldp
, inputs: []
}
renderToDOM "#app" app.markup app.input