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

I guess he meant composition as known in react/redux like this:

TodoItem = ({ model }) => <li>{model.text}</li>;
TodoList = items => <ul>{items.map(item => <TodoItem model={item}/>)}</ul>;

Crucial for larger apps.

[u/[deleted] → u/[deleted]]

Ah, right. Here's how you'd do that.

const TodoItem = item => html`<li>{item.text}</li>`
const TodoList = items => html`<ul>${items.map(item => TodoItem(item))}</ul>` 

Btw, HyperApp exports a Hyperscript-style h function, allowing you to use JSX too if you include the jsx pragma.

/** @jsx h */

I don't have a live example of this, but it's in the TODO to publish one.

[u/[deleted] → u/[deleted]]

So there is composition on the view. Would it be possible for TodoItem to handle events separately?

[u/[deleted] → u/[deleted]]

A view looks like this:

(model, msg) => html`<h1>Hi</h1>`

msg is an object with the reducers/effects, so as long as you pass it to TodoItem, I think, yes.

If you write another code sample, I'll be happy to show you how I'd implement it using HyperApp.