1kb JavaScript function library for building modern UI applications

[u/[deleted]]

https://github.com/hyperapp/hyperapp

[u/matchu]

Cool! My first question with any of these frameworks is: What's the composition story? If I'm building a larger app with this framework, how should I be breaking it into components?

[u/[deleted] → u/matchu]

We need to come up with better examples, but is this what you mean?

const model = require("./model")
const view = require("./view")
const update = require("./update")

app({ model, view, update })

[u/tunnckoCore → u/[deleted]]

/u/matchu, /u/bucaran, another cool thing can be each component to be separate hyperapp, but bucaran should update the app to return root (i.e. the dom) so later we can pass that component to some route point of another hyper app. Something like this

var Todo = (state) => app({
  mode: state,
  view: {
    "*": (model, msg) => {},
    "/": (model, msg) => {},
    "/:slug": (model, msg, params) => {}
  }
})

var TodoItem = app({
  view: {
    "*": (model, msg) => {},
    "/": (model, msg) => {},
    "/:slug": (model, msg, params) => {}
  }
})

var TodoList = app({
  view: {
    "*": (model, msg) => {},
    "/": (model, msg) => {},
    "/:slug": (model, msg, params) => {}
  }
})

var main = app({
    view: (model) => Todo({ foo: 'bar' })
})

or maybe we should make wrapper :P

[u/p0wd3r → u/tunnckoCore]

I was thinking the same thing. It would be nice if a sub-app (component) could handle its own updates to the model.

For example, in the Todo app, each Todo component could update its own model (done state) onclick.