miso

A tasty Haskell front-end framework

Miso is a small "isomorphic" Haskell front-end framework featuring a virtual-dom, diffing / patching algorithm, event delegation, event batching, SVG, Server-sent events, Websockets, type-safe servant-style routing and an extensible Subscription-based subsystem. Inspired by Elm, Redux and Bobril. IO and other effects (like XHR) can be introduced into the system via the Effect data type. Miso makes heavy use of the GHCJS FFI and therefore has minimal dependencies.

Examples

• TodoMVC
  • Link
  • Source
• Mario
  • Link
  • Source
• Websocket
  • Link
  • Source
• Router
  • Link
  • Source
• SVG
  • Link
• Simple
  • Link
  • Source

Haddocks

• GHCJS
• GHC

Getting Started

{-# LANGUAGE RecordWildCards #-}

module Main where

import Miso

type Model = Int

main :: IO ()
main = startApp App {..}
  where
    model  = 0
    update = updateModel
    view   = viewModel
    events = defaultEvents
    subs   = []

updateModel :: Action -> Model -> Effect Model Action
updateModel AddOne m = noEff (m + 1)
updateModel SubtractOne m = noEff (m - 1)

data Action
  = AddOne
  | SubtractOne
  deriving (Show, Eq)

viewModel :: Model -> View Action
viewModel x = div_ [] [
   button_ [ onClick AddOne ] [ text "+" ]
 , text (show x)
 , button_ [ onClick SubtractOne ] [ text "-" ]
 ]