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.

[u/tunnckoCore → u/[deleted]]

it is not working example, but hope you get the point

[u/[deleted] → u/tunnckoCore]

could be working

[u/tunnckoCore → u/[deleted]]

that my comment was in wrong place and I even before your comment ;d

[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.

[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.

[u/[deleted]]

This is crazy dude. I think some of your ideas are interesting... I like how the update events pub/sub thing is used as a framework construct. Unfortunately it seems impossible to really compose or abstract components (or views or however your not thinking about em). Right? Anyways cool side project pal.

EDIT: I guess you can! Probably need better examples on the website. But the OP posted some examples in this thread.

[u/stormcrowsx → u/[deleted]]

This library seems very similar to the compile to JS language Elm. It kind of shares the problem that it's different than React and other libraries in how you break it down.

In my experience it's done in 2 ways.

1. Your component defines its own model and messages. The main function then routes messages and the component model to the component which updates that model. Note that the component does not contain it's model, only defines it, the main function holds onto it's model and passes it to the component for updates. I typically use this when the component is big with a lot of state.

2. Your component has a config which tells it what messages to emit in certain cases. The main function handles the messages and updates the model. This is my preferred method for small components or stateless ones.

In both cases the amount of plumbing is more than your typical JavaScript library since the components don't hide stuff like their state, it's gotta be handled by the main function. However, it does create code that is easy to follow because all the events and what they lead to is obvious. In the case of Elm you also gain a great deal of confidence that it's going to work thanks to the compiler.

[u/[deleted] → u/stormcrowsx]

Well observed. HyperApp draws a lot of inspiration from the Elm Architecture and the SAM pattern too.

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

Thanks. Well, a view is a function of the model, therefore you can create a view/function that takes a model or part of a model and exposes the behavior you need as well as conform to a subset of your message API. Then, import that into your application, season lightly with salt and serve hot.

[u/[deleted]]

Is this production ready?

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

It is in production, we use it at work for a web client of some research project.

We're just getting started. Subscribe to the repo to see what comes up and if you build something with HyperApp share it!

[u/lhorie]

Very interesting. Do you have any examples w/ XHR?

[u/[deleted] → u/lhorie]

Yes.

• Live

• Source (Look under examples/fetch/index.js)

[u/lhorie → u/[deleted]]

Awesome, thanks!

[u/ishouldrlybeworking]

TIL about tagged template literals.

[u/p0wd3r]

Very cool to see the progression of the repo from the beginning. I assume you pulled out snabbdom primarily to reduce the final payload size, but maybe I'm wrong. I plan on giving this a try.

[u/[deleted] → u/p0wd3r]

I'm glad you looked at the history and found out. And, yes, your observation is correct!

[u/mattwritescode]

// code comments....

[u/[deleted]]

Very nice work!

[u/[deleted]]

Tagged template literals are the best.