在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):dmjio/miso开源软件地址(OpenSource Url):https://github.com/dmjio/miso开源编程语言(OpenSource Language):Haskell 75.1%开源软件介绍(OpenSource Introduction):misoA tasty Haskell front-end framework Miso is a small, production-ready, "isomorphic" Haskell front-end framework for quickly building highly interactive single-page web applications. It features a virtual-dom, recursive diffing / patching algorithm, attribute and property normalization, 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 Table of Contents
Quick startTo get started quickly building applications, we recommend using the BeginTo build the sample-app with # optional use of cache
nix-env -iA cachix -f https://cachix.org/api/v1/install
# optional use of cache
cachix use miso-haskell
git clone https://github.com/dmjio/miso
cd miso/sample-app
nix-build
open ./result/bin/app.jsexe/index.html The above commands will add miso's binary cache to your nix installation (support for both Linux and OSX).
Nix
If unfamiliar with To begin, make the following directory layout: ➜ mkdir app && touch app/{Main.hs,app.cabal,default.nix} && tree app
app
|-- Main.hs
|-- app.cabal
`-- default.nix Add a ➜ cat app/*.cabal
name: app
version: 0.1.0.0
synopsis: First miso app
category: Web
build-type: Simple
cabal-version: >=1.10
executable app
main-is: Main.hs
ghcjs-options:
-dedupe
build-depends: base, miso
default-language: Haskell2010 Write a with (import (builtins.fetchGit {
url = "https://github.com/dmjio/miso";
ref = "refs/tags/1.8";
}) {});
pkgs.haskell.packages.ghcjs.callCabal2nix "app" ./. {} Add the source from Sample Application to Build the project
Open the result
For development with
To be put into a shell w/
To view the dependencies for your project, call
To build the project with
For incremental development inside of the
ArchitectureFor constructing client and server applications, we recommend using one ExamplesTodoMVCFlatris2048SnakeMarioMiso Plane (Flappy Birds)WebsocketSSEXHRRouterSVGCanvas 2DThreeJSSimpleFile ReaderWebVRPixel Card WarsHaddocksGHCJSGHCSample application-- | Haskell language pragma
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE RecordWildCards #-}
-- | Haskell module declaration
module Main where
-- | Miso framework import
import Miso
import Miso.String
-- | Type synonym for an application model
type Model = Int
-- | Sum type for application events
data Action
= AddOne
| SubtractOne
| NoOp
| SayHelloWorld
deriving (Show, Eq)
-- | Entry point for a miso application
main :: IO ()
main = startApp App {..}
where
initialAction = SayHelloWorld -- initial action to be executed on application load
model = 0 -- initial model
update = updateModel -- update function
view = viewModel -- view function
events = defaultEvents -- default delegated events
subs = [] -- empty subscription list
mountPoint = Nothing -- mount point for application (Nothing defaults to 'body')
logLevel = Off -- used during prerendering to see if the VDOM and DOM are in sync (only applies to `miso` function)
-- | Updates model, optionally introduces side effects
updateModel :: Action -> Model -> Effect Action Model
updateModel action m =
case action of
AddOne
-> noEff (m + 1)
SubtractOne
-> noEff (m - 1)
NoOp
-> noEff m
SayHelloWorld
-> m <# do consoleLog "Hello World" >> pure NoOp
-- | Constructs a virtual DOM from a model
viewModel :: Model -> View Action
viewModel x = div_ [] [
button_ [ onClick AddOne ] [ text "+" ]
, text (ms x)
, button_ [ onClick SubtractOne ] [ text "-" ]
] Transition applicationAn alternative, more powerful interface for constructing -- | Haskell language pragma
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE RecordWildCards #-}
-- | Haskell module declaration
module Main where
-- | Miso framework import
import Miso
import Miso.String
-- | Lens import
import Control.Lens
-- | Type synonym for an application model
data Model
= Model
{ _counter :: Int
} deriving (Show, Eq)
counter :: Lens' Model Int
counter = lens _counter $ \record field -> record { _counter = field }
-- | Sum type for application events
data Action
= AddOne
| SubtractOne
| NoOp
| SayHelloWorld
deriving (Show, Eq)
-- | Entry point for a miso application
main :: IO ()
main = startApp App {..}
where
initialAction = SayHelloWorld -- initial action to be executed on application load
model = Model 0 -- initial model
update = fromTransition . updateModel -- update function
view = viewModel -- view function
events = defaultEvents -- default delegated events
subs = [] -- empty subscription list
mountPoint = Nothing -- mount point for application (Nothing defaults to 'body')
logLevel = Off -- used during prerendering to see if the VDOM and DOM are in sync (only applies to `miso` function)
-- | Updates model, optionally introduces side effects
updateModel :: Action -> Transition Action Model ()
updateModel action =
case action of
AddOne
-> counter += 1
SubtractOne
-> counter -= 1
NoOp
-> pure ()
SayHelloWorld
-> scheduleIO_ (consoleLog "Hello World")
-- | Constructs a virtual DOM from a model
viewModel :: Model -> View Action
viewModel x = div_ [] [
button_ [ onClick AddOne ] [ text "+" ]
, text . ms $ x^.counter
, button_ [ onClick SubtractOne ] [ text "-" ]
] Live reload with JSaddleIt is possible to build DockerDeveloping miso applications inside a Docker container is supported (allows applications to be built on Windows). See the README in the Building examplesThe easiest way to build the examples is with the
This will build all examples and documentation into a folder named
To see examples, we recommend hosting them with a webserver
CoverageThe core algorithmic component of miso is diff.js. It is responsible for all DOM manipulation that occurs in a miso application and has 100% code coverage. Tests and coverage made possible using jsdom and jest. To run the tests and build the coverage report: cd miso/tests
npm i
npm run test
## Or by using `yarn` instead of `npm`:
# yarn
# yarn test IsomorphicIsomorphic javascript is a technique for increased SEO, code-sharing and perceived page load times. It works in two parts. First, the server sends a pre-rendered HTML body to the client's browser. Second, after the client javascript application loads, the pointers of the pre-rendered DOM are copied into the virtual DOM, and the application proceeds as normal. All subsequent page navigation is handled locally by the client, avoiding full-page postbacks as necessary. The For more information on how Pinning nixpkgsBy default Binary cache
cachix use miso-haskell BenchmarksAccording to benchmarks, |