What are the design goals of this project? 🎯

Hi. Cool repo. I was wondering if you have goals for the project and how they might differ from existing libraries (there are so many). For example, choo comes to mind as having a similar elm-like design.

[jorgebucaran]

@nichoth & @sotayamashita

I was building a web client for a project at work. My first choice was React+Redux, since that’s what we already use, but I wanted something more lightweight and without the frameworkyness of React.

I made the first prototype using Elm, which I really like, but it was too difficult to integrate with 3rd party components, e.g. CodeMirror.

yo-yo/choo

yo-yo is an abstraction on top of bel and morphodom (which mutates DOM nodes directly) whereas I preferred a virtual DOM approach like Snabbdom.

There’s choo too, an abstraction on top of yo-yo with a much nicer API.

1. Since they’re dealing with real HTML elements, they had to come up with a way to have lifecycle events for DOM nodes using the MutationObserver API which seems like code smell to me.
2. They don’t support CSS out of the box either, so I had to use dom-css.
3. Couldn’t agree with some of choo API choices like namespaces and their router design.
4. Too hard to integrate with 3rd party components, involving the creation of a portal, reminiscent of Elm ports.

See conversation

Hyperapp

~1kb. It’s almost vanilla. No deps, other than Hyperx (itself no deps) which is how we write HTML using JavaScript, but without breaking JavaScript. You can still use JSX if you want.

Hyperapp has Elm-like state management, a router and a tiny virtual dom implementation with SVG support, inline CSS, boolean HTML props and create, update and remove events for DOM nodes.

Integrating 3rd party components with Hyperapp is easy too. See this example with CodeMirror.

Compare

Let’s see a input box + heading example.

Hyperapp

const { app, html } = require("hyperapp")

app({
    model: "",
    update: {
        text: (_, value) => value
    },
    view: (model, msg) => html`
        <div>
            <h1>Hello ${model}</h1>
            <input oninput=${e => msg.text(e.target.value)} />
        </div>`
})

CodePen

Choo

const html = require("choo/html")
const choo = require("choo")
const app = choo()

app.model({
  state: { title: "" },
  reducers: {
    update: (state, data) => ({ title: data })
  }
})

const mainView = (state, prev, send) => html`
    <main>
      <h1>Hello ${state.title}</h1>
      <input type="text" oninput=${e => send("update", e.target.value)}>
    </main>
  `

app.router(["/", mainView])

const tree = app.start()
document.body.appendChild(tree)

Mercury

var document = require("global/document")
var hg = require("mercury")
var h = require("mercury").h

function App() {
    var state = hg.struct({
        text: hg.value(""),
        handles: hg.value(null)
    })

    state.handles.set(hg.handles({
        change: setText
    }, state))

    return state
}

function inputBox(value, sink) {
    return h("input.input", {
        value: value,
        name: "text",
        type: "text",
        "ev-event": hg.changeEvent(sink)
    })
}

App.render = function render(state) {
    return h("div", [
        h("p.content", "Hello " + state.text),
        h("p", [
            "Change it here: ",
            inputBox(state.text, state.handles.change)
        ])
    ])
}

function setText(state, data) {
    state.text.set(data.text)
}

hg.app(document.body, App(), App.render)

Cyclejs

const { run } = require("@cycle/xstream-run")
const { div, label, input, hr, h1, makeDOMDriver} = require("@cycle/dom")

function main(sources) {
    const sinks = {
        DOM: sources.DOM.select(".field").events("input")
            .map(ev => ev.target.value)
            .startWith("")
            .map(name =>
                div([
                    label("Name:"),
                    input(".field", { attrs: { type: "text" } }),
                    hr(),
                    h1("Hello " + name),
                ])
            )
    }
    return sinks
}

run(main, { 
    DOM: makeDOMDriver("#app-container") 
})

Mithril

Mithril is really clean ❤️
State flow is not Elm/Redux-like, though, you’re on your own!

const m = require("mithril")

var name = ""

const helloWorld = {
    view: _ => [
        m("h1", "Hello " + name),
        m("input", {
            value: name,
            oninput: e => name = e.target.value
        })
    ]
}

m.mount(document.body, helloWorld)

[nichoth]

Yes I was thinking the same things @acstll 😃. Very nice experiment in finding the most minimal implementation of the elm pattern, and the code is so simple. Was also wondering about what tests would look like.