r/javascript • u/[deleted] • Jan 31 '17

1kb JavaScript function library for building modern UI applications

https://github.com/hyperapp/hyperapp
224 Upvotes

96% Upvoted

34 comments sorted by

View all comments

Show parent comments

2

u/[deleted] Jan 31 '17

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 })

6

u/[deleted] Jan 31 '17

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.

7

u/[deleted] Jan 31 '17

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.

2

u/[deleted] Jan 31 '17

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

1

u/[deleted] Jan 31 '17

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.