miso: A tasty Haskell front-end framework

[ bsd3, data-structures, library, miso, web ] [ Propose Tags ]

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, 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.


[Skip to Readme]
Versions [faq] 0.1.0.0, 0.1.0.1, 0.1.0.2, 0.1.0.3, 0.1.0.4, 0.1.1.0, 0.1.2.0, 0.1.3.0, 0.1.4.0, 0.1.5.0, 0.2.0.0, 0.2.1.0, 0.3.0.0, 0.4.0.0, 0.5.0.0, 0.6.0.0, 0.7.0.0, 0.7.1.0, 0.7.2.0, 0.7.3.0, 0.7.4.0, 0.7.5.0, 0.7.6.0, 0.7.7.0, 0.7.8.0, 0.8.0.0, 0.9.0.0, 0.10.0.0, 0.11.0.0, 0.12.0.0, 0.13.0.0, 0.14.0.0, 0.15.0.0, 0.16.0.0, 0.17.0.0, 0.18.0.0, 0.19.0.0, 0.20.0.0, 0.20.1.0, 0.21.0.0, 0.21.1.0, 0.21.2.0
Dependencies aeson, base (<5), BoundedChan, bytestring, containers, ghcjs-base, hspec, hspec-core, http-api-data, http-types, lucid, miso, network-uri, scientific, servant, text, transformers, unordered-containers, vector [details]
License BSD-3-Clause
Copyright Copyright (c) 2017 David M. Johnson
Author David M. Johnson <djohnson.m@gmail.com>
Maintainer David M. Johnson <djohnson.m@gmail.com>
Category Web, Miso, Data Structures
Home page http://github.com/dmjio/miso
Source repo head: git clone https://github.com/dmjio/miso.git
Uploaded by DavidJohnson at Sun Jul 16 00:43:12 UTC 2017
Distributions LTSHaskell:0.21.2.0, NixOS:0.21.2.0, Stackage:0.21.2.0
Executables tests, simple, mario, websocket, router, todo-mvc
Downloads 8640 total (710 in the last 30 days)
Rating 2.0 (votes: 1) [estimated by rule of succession]
Your Rating
  • λ
  • λ
  • λ
Status Hackage Matrix CI
Docs available [build log]
Last success reported on 2017-07-16 [all 1 reports]

Modules

[Index]

Flags

NameDescriptionDefaultType
examples

Builds Miso's examples

DisabledAutomatic
tests

Builds Miso's tests

DisabledAutomatic

Use -f <flag> to enable a flag, or -f -<flag> to disable that flag. More info

Downloads

Maintainer's Corner

For package maintainers and hackage trustees


Readme for miso-0.2.1.0

[back to package description]
<h1 align="center">miso</h1> <p align="center"> <a href="https://haskell-miso.org"> <img width=10% src="https://emojipedia-us.s3.amazonaws.com/thumbs/240/apple/96/steaming-bowl_1f35c.png"> </a> <p align="center">A <i>tasty</i> <a href="https://www.haskell.org/"><strong>Haskell</strong></a> front-end framework</p> </p> <p align="center"> <a href="https://haskell-miso-slack.herokuapp.com"> <img src="https://img.shields.io/badge/slack-miso-E01563.svg?style=flat-square" alt="Miso Slack"> </a> <a href="http://hackage.haskell.org/package/miso"> <img src="https://img.shields.io/hackage/v/miso.svg?style=flat-square" alt="Hackage"> </a> <a href="https://haskell.org"> <img src="https://img.shields.io/badge/language-Haskell-green.svg?style=flat-square" alt="Haskell"> </a> <a href="https://img.shields.io/hackage-deps/v/miso.svg"> <img src="https://img.shields.io/hackage-deps/v/miso.svg?style=flat-square" alt="Hackage"> </a> <a href="https://github.com/dmjio/miso/blob/master/LICENSE"> <img src="http://img.shields.io/badge/license-BSD3-brightgreen.svg?style=flat-square" alt="LICENSE"> </a> <a href="https://hydra.dmj.io"> <img src="https://img.shields.io/badge/build-Hydra-00BDFD.svg?style=flat-square" alt="Miso Hydra"> </a> <a href="https://www.irccloud.com/invite?channel=%23haskell-miso&amp;hostname=irc.freenode.net&amp;port=6697&amp;ssl=1"> <img src="https://img.shields.io/badge/irc-%23haskell--miso-1e72ff.svg?style=flat-square" alt="IRC #haskell-miso"> </a> </p>

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. Miso is pure by default, but side 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.

Table of Contents

Examples

Haddocks

Sample application

-- | Haskell language pragma
{-# LANGUAGE RecordWildCards #-}

-- | Haskell module declaration
module Main where

-- | Miso framework import
import Miso

-- | Type synonym for an application model
type Model = Int

-- | Sum type for application events
data Action
  = AddOne
  | SubtractOne
  deriving (Show, Eq)

-- | Entry point for a miso application
main :: IO ()
main = startApp App {..}
  where
    model  = 0          -- initial model
    update = updateModel    -- update function
    view   = viewModel      -- view function
    events = defaultEvents  -- default delegated events
    subs   = []         -- empty subscription list

-- | Updates model, optionally introduces side effects
updateModel :: Action -> Model -> Effect Model Action
updateModel AddOne m = noEff (m + 1)
updateModel SubtractOne m = noEff (m - 1)

-- | Constructs a virtual DOM from a model
viewModel :: Model -> View Action
viewModel x = div_ [] [
   button_ [ onClick AddOne ] [ text "+" ]
 , text (show x)
 , button_ [ onClick SubtractOne ] [ text "-" ]
 ]

Building examples

The easiest way to build the examples is with the nix package manager

git clone https://github.com/dmjio/miso && cd miso && nix-build

This will build all examples and documentation into a folder named result

➜  miso git:(master) ✗ tree result -d
result
|-- doc
|   |-- x86_64-osx-ghc-8.0.2
|   |   `-- miso-0.2.0.0
|   |       `-- html
|   |           `-- src
|   `-- x86_64-osx-ghcjs-0.2.0-ghc7_10_3
|       `-- miso-0.2.0.0
|           `-- html
|               `-- src
|-- examples
|   |-- mario.jsexe
|   |   `-- imgs
|   |       |-- jump
|   |       |-- stand
|   |       `-- walk
|   |-- router.jsexe
|   |-- simple.jsexe
|   |-- tests.jsexe
|   |-- todo-mvc.jsexe
|   `-- websocket.jsexe

To see examples, we recommend hosting them with a webserver

cd result/examples/todo-mvc.jsexe && python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...