
Show HN: 1kb JavaScript library for building front end applications - jbucaran
https://github.com/hyperapp/hyperapp
======
git-pull
Clickables:

\- Code examples:
[https://glitch.com/edit/#!/hyperapp](https://glitch.com/edit/#!/hyperapp)

\- Browser demos: [https://hyperapp.glitch.me/](https://hyperapp.glitch.me/)

\- README:
[https://github.com/hyperapp/hyperapp/blob/master/README.md](https://github.com/hyperapp/hyperapp/blob/master/README.md)

This is a good example of what an open source project should do. Straight
forward. And also, refreshing to see a lite javascript framework.

One suggestion to authors: Include a link to the demonstration's code on pages
like [https://hyperapp.glitch.me/slider](https://hyperapp.glitch.me/slider).

------
franciscop
That hyperx onclick example [1] is really clever if I understand it correctly
from a quick overview [2]. It stores a reference to the event using the
template literals features (reading _manually_ the interpolated arguments):

    
    
        html`<button onclick=${() => alert("Hi")}>Click</button>`
    

Not sure how it is attached then; from the syntax it _can_ only be a
traditional _onclick= ""_ event, however in the examples [3] [4] they are
attached as an addEventListener() events. I'd have to dig deeper to understand
it.

I've done something slightly similar in the past:

    
    
        dom.body.html = `<button ${evt.on.click(e => console.log(e))}>Click me</button>`;
    

However, for that syntax above I'm using two different tiny libraries I made
while the author could combine both of them into one + virtual DOM. Great work
there!

Honest question as the author seems the submitter, what are the target
developers for your library? It seems (to me) that virtual dom + JSX is
overkill for simple websites, while the big webapps seems to want the
_enterprise_ -backed React/Angular/Ember/Etc.

[1]
[https://github.com/hyperapp/hyperapp/blob/master/docs/hyperx...](https://github.com/hyperapp/hyperapp/blob/master/docs/hyperx.md#about-
hyperx)

[2]
[https://github.com/hyperapp/hyperapp/blob/master/src/app.js#...](https://github.com/hyperapp/hyperapp/blob/master/src/app.js#L5)

[3] [https://hyperapp.glitch.me/clicks](https://hyperapp.glitch.me/clicks)

[4] [https://hyperapp.glitch.me/slider](https://hyperapp.glitch.me/slider)

~~~
jbucaran
> What are the target developers for your library?

Anyone. Big app devs, small app devs. For the record, you can user hyperapp
with any of the following technologies:

\- JSX

\- A string template literal based solution like hyperx or t7.

\- The built-in hyperscript-style `h` function
([https://goo.gl/da3U3P](https://goo.gl/da3U3P)).

~~~
finchisko
Any example on jsx? Is it react jsx or something else?

Edit: already found example in project github.

Looks promising. Currently I'm looking for solution to replace jquery for one
small popup for Chrome KeePassXC extension. HyperApp seems like good match.
Thanks.

~~~
jbucaran
Thanks! You can find more examples on CodePen.

\- [https://codepen.io/hyperapp](https://codepen.io/hyperapp)

------
naugtur
I found it a while ago and I like the simplicity.

The thing that got me sold on the idea is how simple actions are. You can have
them work like thunk by calling an action as a callback in another action or
just return a promise. No middlewares to install, all by design of a 1kb lib.

[edit] when using, be careful with the recent API changes - it's not much,
just some names, but took me a while to notice I'm reading docs to a newer
version than what I've installed.

Looking forward to 1.0

------
jamesrom
HyperApp: [https://itunes.apple.com/app/apple-
store/id1179750280?mt=8](https://itunes.apple.com/app/apple-
store/id1179750280?mt=8)

Hyper.app: [https://hyper.is/](https://hyper.is/)

hyperapp:
[https://github.com/hyperapp/hyperapp](https://github.com/hyperapp/hyperapp)

------
Numberwang
Can anyone suggest a good approach to evaluate these libraries? How does this
compare to Mithril etc?

~~~
jbucaran
> How does this compare to Mithril etc?

I am the author of HyperApp and also a big fan of Mithril. I'll try to compare
both as fairly as I can. This is not a full or even adequate comparison, I'm
just adding to the thread.

Mithril has something called auto-redrawing, that IIRC re-renders the
application after DOM events by default. This can be seen as inefficient, but
Mithril throttles rerenders, which ameliorate any issues caused by it.

Mithril has no state management solution out of the box.

This may be desirable if you want to experiment with different state
management architectures until you find one that you like.

HyperApp has its own built-in state management solution which is inspired and
draws a lot from the Elm Architecture. In this way, it's a lot like React and
Redux, but since everything is built-in, there's essentially 0 boilerplate.

The drawback is that there's no other state management available for HyperApp.

Mithril has stateful components, which is a simple and useful way to reuse
code across your app and easily port to other apps.

HyperApp has custom tags, which are pure functions and stateless. They only
accept props and know how to render themselves. If you are coming from React,
Backbone, Angular (basically everywhere else), scaling applications will seem
difficult at first, but it's not, it's just different.

We are currently working on a component abstraction which is based on the idea
of a fragmented state. We'll release 1.0.0 when that's done.

Mithril is bundled with m.request, which simplifies making HTTP requests.

HyperApp has no built-in facilities to help you make HTTP requests. I am not
interested in a custom xhttp solution when there is a `fetch` standard.

~~~
pygy_
Disclaimer, Mithril core dev here. I'm not as familiar with Hyper.

In Mithril:

The hyperscript function supports Emmet/Zencoding syntax:
`m('input.myClass#myId[type=radio]')`

There's a stream library for state management (not an out of the box solution,
but a robust building block).

The Mithril router

\- supports `path`, `search` and `hash` modes

\- supports asynchronous resolution (for lazy module loading)

\- parses the current route at mount time and launches the app at that route
if possible

The renderer

\- has lifecycle hooks (that fire when nodes are created, updated, and
removed, before and after the DOM is mutated),

\- supports fragments (components can return arrays) and raw HTML nodes (the
former with keys support).

\- optimizes keyed diff for insertion/deletion of contiguous nodes

\- AFAICT Mithril handles the attribute/property dichotomy better

Mithril also comes with a querystring parser and builder.

There are probably a lot of other small things that I didn't notice (and there
may as well be errors in my assessment of hyperapp)

Edit: I take back what I said about forms. Either Chrome got their act
together or hyperapp is doing something that I don't understand yet... Anyway,
the naive app works well:
[https://flems.io/#0=N4IgTgpgZpDOAWAhArgF1QewHYgFxQEMAbWCAGhF...](https://flems.io/#0=N4IgTgpgZpDOAWAhArgF1QewHYgFxQEMAbWCAGhFKIgGNUIATPEAOgCtYQKoBLaz3AG1QWAgFsIzFvFRiiXEDWz0sqZgB54AZgB8AHSwACQ2J6p4YPgfUB6bfqzqGPAG6GeDALx6Qp85aIfHVtnFwdNXQNjeABPAAcIMAI4uOs7SMdQ9y8fWISwIJDXBxAAXzIRcUlcVg4FJVUIVWYG2FQTDAYIIkNPExY2yHEACgByGngCLABzCBM5niNzOdMGBmpRgEoDAzEWMQxkVWG-
Cz4yQ2AowxceCAB3Yc2ro2NDSFRkMCNBa7eTMaLOJoUYXF7-f7YIFoXD9e5meAAQXQYDGLmIyAgoI6XSImzIfwh6KImNhOO6T0JxnK+KpANGcWxB1xT22r2MAF1rqUDKU2QZWu1gPALsk4qVeoY8okxTtRClhuD3hgMKhYdKwATXm0CPRYcBiaTDONJjMVgslvAVh51ljytdbg9YcMdfRRXQeNhYJtejpDMNCfAxqFscByoZfuy3kHRtDUKGdqg9EmU4aILDXRAWGmtRC3lCsMC1YY5p4-QQPV6WBMprNhlnUAQwLNUNmMXM2Xm+bmITHGWDw5m2ySIJ23hz+ahaa8K6hPVhYPrCTWzc7M+6516LmmfWXLtdk4eo8YPl8jAb2zysIfUFfqbzNmUKiBRBIpDRYJwKA0VGoamUOQoIhFgAawEYQQC+eQahkVA4kXGwbCOOIQOmasMDEGxTgCAABABGFgCLwhRUHiaoQDqcpQCg5hYPg3BEOQ1D0Mw7C+HwwjCJsQYIHEbjUCGPY6goUiEmYSjnxomD0HoxjC2YpRMI1MUSLI8TOFKDlSiAA)

------
ahallock
I just used this on a Rails project where I didn't have time to integrate a
complete React build pipeline. I needed it for a few small components with
complex state requirements. It's been a joy to use.

My one complaint is that firing actions within actions feels imperative and
could become hard to reason about. Perhaps observables could help here.

~~~
MatejMazur
It seems interesting. Can you provide some example of code how it could look?

------
cwt137
Interesting. Looks like a little like a hybrid between Vue.js and JSX.

~~~
efdee
It seems to be actually using (or supporting use of, anyways) JSX.

~~~
jbucaran
Yes. It supports JSX and also ES6 template literals via hyperx or t7:

\- [https://github.com/substack/hyperx](https://github.com/substack/hyperx) \-
[https://github.com/trueadm/t7](https://github.com/trueadm/t7)

------
jancsika
> Or you can use ES6/ES5 by setting up a build pipeline.

> import { h, app } from "hyperapp"

I might be misunderstanding here, but isn't `import` unavailable in ES5?
(I.e., just a future reserved word?)

~~~
jbucaran
If you grab hyperapp from the CDN
[https://unpkg.com/hyperapp@latest](https://unpkg.com/hyperapp@latest), you'd
use it like this:

> const { h, app } = hyperapp

If you setup a simple build pipeline using npm/yarn + browserify you would
instead:

> const { h, app } = require("hyperapp")

And if you compile your app with babel using babel-preset-es2015, etc., then
you can use the ES6 import syntax.

===

Here are some gists to help you on your journey:

\- hyperapp + hyperx + rollup minimal boilerplate
[https://gist.github.com/jbucaran/fac2c3de24e5171596fb189f9c1...](https://gist.github.com/jbucaran/fac2c3de24e5171596fb189f9c1feb8e)

\- hyperapp + hyperx + webpack minimal boilerplate
[https://gist.github.com/jbucaran/c6a6bdb5383a985cec6b0ae4ebe...](https://gist.github.com/jbucaran/c6a6bdb5383a985cec6b0ae4ebe5a4b1)

\- hyperapp + jsx + rollup + buble minimal boilerplate
[https://gist.github.com/jbucaran/f714dd6d64041591e5e53dbff85...](https://gist.github.com/jbucaran/f714dd6d64041591e5e53dbff8558439)

\- hyperapp + jsx + rollup minimal boilerplate
[https://gist.github.com/jbucaran/0c0da8f1256a0a66090151cfda7...](https://gist.github.com/jbucaran/0c0da8f1256a0a66090151cfda777c2c)

\- hyperapp + jsx + webpack minimal boilerplate
[https://gist.github.com/jbucaran/6010a83891043a6e0c37a3cec68...](https://gist.github.com/jbucaran/6010a83891043a6e0c37a3cec684c08e)

\- hyperapp + hyperx + browserify minimal boilerplate
[https://gist.github.com/jbucaran/48c1edb4fb0ea1aa5415b6686cc...](https://gist.github.com/jbucaran/48c1edb4fb0ea1aa5415b6686cc7fb45)

\- hyperapp + jsx + browserify minimal boilerplate
[https://gist.github.com/jbucaran/21bbf0bbb0fe973455056648831...](https://gist.github.com/jbucaran/21bbf0bbb0fe97345505664883100706)

------
pakx
Is this picodom + a TEA-style app structure?

~~~
jbucaran
tl;dr Yes.

Originally it was just hyperapp, but many people asked for only the virtual
DOM, so picodom was born.

~~~
pakx
Thx. Hadn't looked at timelines, and assumed it was the other way. Great job
w/ hyperapp. Congrats!

FWIW I like Elm, and hyperapp seems a delightful port of the TEA idea ... plus
for being a js library, with immediate access to JS and DOM. I'll look for
examples using 3rd party visual widgets, and animation libraries.

That said IMO TEA is only a convenience. What I find supremely empowering
about Elm is its type inference/system. If we got that in JS-land I likely
wouldn't look at another language for some time to come :)

~~~
jbucaran
Thanks! I love Elm too. Elm is functional programming for the masses! Recently
I'm kind of more curious about ClojureScript.

That said, you can totally use Flow or TypeScript with hyperapp.

~~~
pakx
This is going off-topic, apologies.

Yes, of course, re using TypeScript or Flow. However ... I'm not a fan of
TypeScript -- if I'm going to use a different "language" (albeit one that's a
transpile-able thin veneer over JS) I may as well switch to a language w/ an
even better type system.

Flow, from the little I know, is closer to what I want -- still JS, but an
annotation or "compilation switch" makes everything typecheck.

~~~
jbucaran
Same here. Flow is great though and you can use it without annotations too,
just not as useful.

See: [http://thejameskyle.com/adopting-flow-and-
typescript.html](http://thejameskyle.com/adopting-flow-and-typescript.html)

~~~
pakx
Ha, funny -- clicking that link leads to a page w/ this message: "This page is
unavailable when linked to from news.ycombinator.com. Please find a less toxic
place to spend your time." :-)

The link works when copy/pasted. Let me read.

------
responde
Another Javascript library

------
christophilus
It appears to me to boot somewhat slowly, though maybe it's because of the HN
hug of death? Anyone else noticing that?

------
ngrilly
Which browsers are compatible?

~~~
naugtur
I'm not an author, but based on my reading of it (and I read the whole thing)
it really just depends on polyfills you use with your webpack build. I'd risk
saying IE10+

------
fiatjaf
Not good, but still better than MobX.

------
mal34
Another React copy&paste obsession to add more complexity !!

------
skrowl
Thank god someone invented this. We needed another front end javascript
library!

~~~
kelvin0
It's definitely going to make Javascript Great Again!

~~~
romanovcode
This time it will stick, I'm pretty sure.

