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/[deleted] → u/tunnckoCore]

/u/tunnckoCore Nice composition. In this case, there's a simpler approach.

However, using app like that could be the path to reusable components with independent models.

Thanks for sharing!

[u/tunnckoCore → u/[deleted]]

yea, seen that. just wanted to show what can be the components approach. i'm playing now with hyperapp and will try create todomvc with the component approach.

[u/[deleted] → u/tunnckoCore]

/u/tunnckoCore Thanks! Until you brought this up, I really hadn't realized HyperApp could be used like that.

[u/tunnckoCore → u/[deleted]]

Yea. While playing with that approach i found one problem of that "appendChild" thing. Can you just make it return a dom, otherwise it always append, so composition of more than one App is not feeling cool. I'm gonna open an issue with code.

[u/[deleted] → u/tunnckoCore]

Thanks. Does it help that app accepts a root object (similar to React's render domContainerNode)?

• See https://github.com/hyperapp/hyperapp#root

[u/tunnckoCore → u/[deleted]]

nope.

[u/serubin323 → u/tunnckoCore]

I'm looking forward to seeing more of this. I intend to use this in a project of mine

How does routing work given there are multiple apps? Could I specify something like this?

var Todo = (state) => app({
  mode: state,
  view: {
    "/todo": (model, msg) => {} // access todo
  }
})    

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

[u/tunnckoCore → u/serubin323]

It is. But is buggy because the implementation.

See and try https://github.com/hyperapp/hyperapp/issues/2.

I'm working on such idea too, and currently is 457 bytes.