miso - :ramen: A tasty Haskell front-end framework

  •        48

Miso is a small "isomorphic" Haskell front-end framework for quickly building highly interactive single-page web applications. It features a virtual-dom, 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 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. Miso can be considered a shallow embedded domain-specific language for modern web programming. To get started quickly building applications, we recommend using the stack or nix package managers. Obtaining GHCJS is required as a prerequisite. stack and nix make this process easy, if you're using cabal we assume you have obtained GHCJS by other means.




Related Projects

Miso - Miso is a unified API for simple image operations commonly used on the web.

  •    Ruby

Miso is a unified API for simple image operations commonly used on the web.

reflex-platform - Reflex FRP is a composable, cross-platform functional reactive programming framework for Haskell

  •    Nix

The Reflex Platform is a collection of libraries and tools that are useful for developing and deploying Reflex-based applications. To get started with Reflex development, follow the instructions below.

morphdom - Fast and lightweight DOM diffing/patching (no virtual DOM needed)

  •    Javascript

This module was created to solve the problem of updating the DOM in response to a UI component or page being rerendered. One way to update the DOM is to simply toss away the existing DOM tree and replace it with a new DOM tree (e.g., myContainer.innerHTML = newHTML). While replacing an existing DOM tree with an entirely new DOM tree will actually be very fast, it comes with a cost. The cost is that all of the internal state associated with the existing DOM nodes (scroll positions, input caret positions, CSS transition states, etc.) will be lost. Instead of replacing the existing DOM tree with a new DOM tree we want to transform the existing DOM tree to match the new DOM tree while minimizing the number of changes to the existing DOM tree. This is exactly what the morphdom module does! Give it an existing DOM node tree and a target DOM node tree and it will efficiently transform the existing DOM node tree to exactly match the target DOM node tree with the minimum amount of changes. morphdom does not rely on any virtual DOM abstractions. Because morphdom is using the real DOM, the DOM that the web browser is maintaining will always be the source of truth. Even if you have code that manually manipulates the DOM things will still work as expected. In addition, morphdom can be used with any templating language that produces an HTML string.

vidom - Library to build UI based on virtual DOM

  •    Javascript

Vidom is just a library to build UI. It's highly inspired from React and based on the same ideas. Its main goal is to provide as fast as possible lightweight implementation with API similar to React. Try live playground to play with Vidom in your browser.

PREACT - Fast 3kB alternative to React, with the same ES2015 API

  •    Javascript

PREACT is a fast 3kB alternative to React, with the same ES2015 API. It provides the thinnest possible Virtual DOM abstraction on top of the DOM. The web is a stable platform, it's time we stopped reimplementing it in the name of safety. Preact is also a first-class citizen of the web platform. It diffs Virtual DOM against the DOM itself, registers real event handlers, and plays nicely with other libraries.

Mithril - A Javascript Framework for Building Brilliant Applications

  •    Javascript

Mithril is a modern client-side Javascript framework for building Single Page Applications. It's small (8.18 KB gzipped), fast and provides routing and XHR utilities out of the box. It supports virtual dom, which is a Javascript data structure that describes a DOM tree. It consists of nested virtual DOM nodes, also known as vnodes.

ghcjs - Haskell to JavaScript compiler, based on GHC

  •    Haskell

Get GHC 7.10.2 (MinGHC on Windows) and make sure that happy is installed. On linux you may need to install a package like libtinfo-dev to make the Haskell terminfo package work. GHCJS is a Haskell to JavaScript compiler that uses the GHC API.

virtual-dom - A Virtual DOM and diffing algorithm

  •    Javascript

Manual DOM manipulation is messy and keeping track of the previous DOM state is hard. A solution to this problem is to write your code as if you were recreating the entire DOM whenever state changes. Of course, if you actually recreated the entire DOM every time your application state changed, your app would be very slow and your input fields would lose focus. virtual-dom is a collection of modules designed to provide a declarative way of representing the DOM for your app. So instead of updating the DOM when your application state changes, you simply create a virtual tree or VTree, which looks like the DOM state that you want. virtual-dom will then figure out how to make the DOM look like this efficiently without recreating all of the DOM nodes.

haskell-nix - Nix and Haskell in production

  •    Nix

The emphasis of this guide is to be as robust as possible and gracefully handle writing Haskell projects at scale. Some of the suggestions in this guide might be overkill for a small Haskell project but are essential when managing multiple private Haskell projects across a team of developers. This guide is based partly on the Haskell section of the nixpkgs manual and partly on experience using Nix and Haskell in production at Awake Security.

asm-dom - A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications)

  •    C++

asm-dom is a minimal WebAssembly virtual DOM to build C++ SPA (Single page applications). You can write an entire SPA in C++ and compile it to WebAssembly (or asmjs as fallback) using Emscripten, asm-dom will call DOM APIs for you. This will produce an app that aims to execute at native speed by taking advantage of common hardware capabilities, also, you can use your C/C++ code without any change, you haven't to create a binding layer to use it (as we have to do if we want to use a C++ lib from JS). Basically we are creating an app in C++ that call javascript if needed instead of the opposite. You can write only once in C++ and share as much code as possible with desktop/mobile apps and web site. If you want to learn more about performance, please see this. asm-dom is a low-level virtual DOM library. It is unopinionated with regards to how you should structure your application.

kotojs - A framework for building reusable components with d3.js

  •    Javascript

A framework for creating reusable charts with D3.js, written in ES6. KotoJS is HEAVILY inspired by another reusable charting framework maintained by the Miso Project called d3.chart. I think that project is well designed and well documented. For those who are not familiar with d3.chart, the framework provides a logical way to ensure that all data-visualization components that are authored using the framework are done in a way that facilitates re-usablily.

petit-dom - minimalist virtual dom library

  •    Javascript

A minimalist virtual DOM library. Not quite. React is a more complete solution for writing UIs using Components. It ships with a full Component API and implementation. Also, React is not specifically a virtual DOM library. It just happens that the Component API is implemented using virtual DOM (which may or may not change in the future).

etch - Builds components using a simple and explicit API around virtual-dom

  •    Javascript

Etch is a library for writing HTML-based user interface components that provides the convenience of a virtual DOM, while at the same time striving to be minimal, interoperable, and explicit. Etch can be used anywhere, but it was specifically designed with Atom packages and Electron applications in mind.Note that using an Etch component does not require a reference to the Etch library. Etch is an implementation detail, and from the outside the component is just an ordinary object with a simple interface and an .element property. You can also take a more declarative approach by embedding Etch components directly within other Etch components, which we'll cover later in this document.

hnix - A Haskell re-implementation of the Nix expression language

  •    Nix

Haskell parser, evaluator and type checker for the Nix language. Nix is installed and in your $PATH. This is so that nix-store can be used for interacting with store paths, until hnix-store is ready.

react-haskell - React bindings for Haskell

  •    Haskell

As crazy as it seems, using React and Haskell together just may be a good idea. I was driven to create this thing because I had a large existing Haskell codebase I wanted to put online. However, even without existing code, I think a lot of problems are better modeled in Haskell than JavaScript or other languages. Or you might want to use some existing Haskell libraries.

purescript-pux - Build type-safe web apps with PureScript.

  •    PureScript

Build type-safe web applications with PureScript. Pux has not focused on performance yet. The slow performance arises from translating Pux's (smolder) virtual DOM to React's virtual DOM. The goal is to write a purescript virtual DOM module for smolder, which would avoid that translation step and could be optimized for a monadic datastructure. I suspect this would achieve performance on par with Halogen.

hyperx - 🏷 - tagged template string virtual dom builder

  •    Javascript

This module is similar to JSX, but provided as a standards-compliant ES6 tagged template string function. hyperx works with virtual-dom, react, hyperscript, or any DOM builder with a hyperscript-style API: h(tagName, attrs, children).

ijk - Transforms arrays into virtual dom trees; a terse alternative to JSX and h

  •    Javascript

This is a tiny recursive factory function that allows you to write terse, declarative representations of virtual DOM trees. It does not try mimic HTML or JSON syntax but instead a series of nested arrays to represent user interfaces. The above call to h returns a virtual DOM tree with named attributes that respect the provided schema. Expected output here, would be of the shape { x: 'main', y: {}, z: [...] }. A tree like this can be passed as a node to patch, diff and render algorithms exposed by libraries like Hyperapp, Ultradom or Preact.