miso-0.1.1.0: README.md
:ramen: miso
======================
[](http://hackage.haskell.org/package/miso)
[](https://haskell.org)
[](https://github.com/dmjio/miso/blob/master/LICENSE)
[](https://www.irccloud.com/invite?channel=%23haskell-miso&hostname=irc.freenode.net&port=6697&ssl=1)
[](https://haskell-miso-slack.herokuapp.com)
[](https://travis-ci.org/dmjio/miso)
**Miso** is a small "[isomorphic](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/)" [Haskell](https://www.haskell.org/) front-end framework featuring a virtual-dom, diffing / patching algorithm, event delegation, event batching, SVG, Server-sent events, Websockets, and an extensible Subscription-based subsystem. Inspired by [Elm](http://elm-lang.org/), [Redux](http://redux.js.org/) and [Bobril](http://github.com/bobris/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](https://github.com/ghcjs/ghcjs) FFI and therefore has minimal dependencies.
## Examples
- TodoMVC
- [Link](https://d3u8rq3uy5wnb9.cloudfront.net/)
- [Source](https://github.com/dmjio/miso/blob/master/examples/todo-mvc/Main.hs)
- Mario
- [Link](https://dfhxhtlu1tq0x.cloudfront.net/)
- [Source](https://github.com/dmjio/miso/blob/master/examples/mario/Main.hs)
- SVG
- [Link](https://d2dwfl7f3j7of0.cloudfront.net/)
- Simple
- [Link](https://dco9lhtzw9c6i.cloudfront.net)
- [Source](https://github.com/dmjio/miso/blob/master/exe/Main.hs)
## Documentation
- [GHCJS](https://d10z4r8eai3cm9.cloudfront.net/)
- [GHC](http://hackage.haskell.org/package/miso)
## Getting Started
```haskell
{-# 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 "-" ]
]
```