7 ms·

Show HN: 1kb JavaScript library for building front end applications

187 points by jbucaran 9y ago

cwt137 9y ago
Interesting. Looks like a little like a hybrid between Vue.js and JSX.
- efdee 9y ago
  It seems to be actually using (or supporting use of, anyways) JSX.
  - jbucaran 9y ago
    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
- roucoulawan 9y ago
  So maybe do we have somewhere some cool benchmarks to compare with the others frameworks ? Like here http://www.stefankrause.net/js-frameworks-benchmark5/webdriver-ts/table.html http://www.stefankrause.net/js-frameworks-benchmark5/webdriv...
  - jbucaran 9y ago
    Yes. http://www.stefankrause.net/js-frameworks-benchmark6/webdriver-ts/table.html http://www.stefankrause.net/js-frameworks-benchmark6/webdriv...
- pitaj 9y ago
  Vue already supports JSX. Vue templates compile into hyperscript VDOM trees just like JSX.
Numberwang 9y ago
Can anyone suggest a good approach to evaluate these libraries? How does this compare to Mithril etc?
- franciscop 9y ago
  We totally need http://microjs.com/ http://microjs.com/ with a reputation system.
- jbucaran 9y ago
  > 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.
  - jakelazaroff 9y ago
    I like the combination of actions and reducers — feels like how the reducer pattern appears in Cycle.js.
franciscop 9y ago
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.md#about-hyperx https://github.com/hyperapp/hyperapp/blob/master/docs/hyperx... [2] https://github.com/hyperapp/hyperapp/blob/master/src/app.js#L5 https://github.com/hyperapp/hyperapp/blob/master/src/app.js#... [3] https://hyperapp.glitch.me/clicks https://hyperapp.glitch.me/clicks [4] https://hyperapp.glitch.me/slider https://hyperapp.glitch.me/slider
- jbucaran 9y ago
  > 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 9y ago
    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.
    - 9y ago
christophilus 9y ago
It appears to me to boot somewhat slowly, though maybe it's because of the HN hug of death? Anyone else noticing that?
ahallock 9y ago
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 9y ago
  It seems interesting. Can you provide some example of code how it could look?
git-pull 9y ago
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.
deleted 9y ago
[deleted]
mal34 9y ago
Another React copy&paste obsession to add more complexity !!
ngrilly 9y ago
Which browsers are compatible?
- naugtur 9y ago
  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+
- jbucaran 9y ago
  >=IE10
naugtur 9y ago
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
skrowl 9y ago
Thank god someone invented this. We needed another front end javascript library!
- kelvin0 9y ago
  It's definitely going to make Javascript Great Again!
  - romanovcode 9y ago
    This time it will stick, I'm pretty sure.
jancsika 9y ago
> 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 9y ago
  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/fac2c3de24e5171596fb189f9c1feb8e https://gist.github.com/jbucaran/fac2c3de24e5171596fb189f9c1... - hyperapp + hyperx + webpack minimal boilerplate https://gist.github.com/jbucaran/c6a6bdb5383a985cec6b0ae4ebe5a4b1 https://gist.github.com/jbucaran/c6a6bdb5383a985cec6b0ae4ebe... - hyperapp + jsx + rollup + buble minimal boilerplate https://gist.github.com/jbucaran/f714dd6d64041591e5e53dbff8558439 https://gist.github.com/jbucaran/f714dd6d64041591e5e53dbff85... - hyperapp + jsx + rollup minimal boilerplate https://gist.github.com/jbucaran/0c0da8f1256a0a66090151cfda777c2c https://gist.github.com/jbucaran/0c0da8f1256a0a66090151cfda7... - hyperapp + jsx + webpack minimal boilerplate https://gist.github.com/jbucaran/6010a83891043a6e0c37a3cec684c08e https://gist.github.com/jbucaran/6010a83891043a6e0c37a3cec68... - hyperapp + hyperx + browserify minimal boilerplate https://gist.github.com/jbucaran/48c1edb4fb0ea1aa5415b6686cc7fb45 https://gist.github.com/jbucaran/48c1edb4fb0ea1aa5415b6686cc... - hyperapp + jsx + browserify minimal boilerplate https://gist.github.com/jbucaran/21bbf0bbb0fe97345505664883100706 https://gist.github.com/jbucaran/21bbf0bbb0fe973455056648831...
fiatjaf 9y ago
Not good, but still better than MobX.
pakx 9y ago
Is this picodom + a TEA-style app structure?
- jbucaran 9y ago
  tl;dr Yes. Originally it was just hyperapp, but　many people asked for only the virtual DOM, so picodom was born.
  - pakx 9y ago
    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 9y ago
      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.
      - christophilus 9y ago
        I'm also really into Clojure/ClojureScript these days. I'm going to look into getting a data-oriented version of either hyperapp or picodom implemented in ClojureScript.
      - pakx 9y ago
        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.
jamesrom 9y ago
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
responde 9y ago
Another Javascript library

187 points by jbucaran 9y ago

cwt137 9y ago

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

efdee 9y ago
It seems to be actually using (or supporting use of, anyways) JSX.
- jbucaran 9y ago
  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
roucoulawan 9y ago
So maybe do we have somewhere some cool benchmarks to compare with the others frameworks ? Like here http://www.stefankrause.net/js-frameworks-benchmark5/webdriver-ts/table.html http://www.stefankrause.net/js-frameworks-benchmark5/webdriv...
- jbucaran 9y ago
  Yes. http://www.stefankrause.net/js-frameworks-benchmark6/webdriver-ts/table.html http://www.stefankrause.net/js-frameworks-benchmark6/webdriv...
pitaj 9y ago
Vue already supports JSX. Vue templates compile into hyperscript VDOM trees just like JSX.

Numberwang 9y ago

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

franciscop 9y ago
We totally need http://microjs.com/ http://microjs.com/ with a reputation system.
jbucaran 9y ago
> 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.
- jakelazaroff 9y ago
  I like the combination of actions and reducers — feels like how the reducer pattern appears in Cycle.js.

franciscop 9y ago

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.md#about-hyperx https://github.com/hyperapp/hyperapp/blob/master/docs/hyperx... [2] https://github.com/hyperapp/hyperapp/blob/master/src/app.js#L5 https://github.com/hyperapp/hyperapp/blob/master/src/app.js#... [3] https://hyperapp.glitch.me/clicks https://hyperapp.glitch.me/clicks [4] https://hyperapp.glitch.me/slider https://hyperapp.glitch.me/slider

jbucaran 9y ago
> 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 9y ago
  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.
  - 9y ago

christophilus 9y ago

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

ahallock 9y ago

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 9y ago
It seems interesting. Can you provide some example of code how it could look?

git-pull 9y ago

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.

deleted 9y ago

[deleted]

mal34 9y ago

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

ngrilly 9y ago

Which browsers are compatible?

naugtur 9y ago
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+
jbucaran 9y ago
>=IE10

naugtur 9y ago

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

skrowl 9y ago

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

kelvin0 9y ago
It's definitely going to make Javascript Great Again!
- romanovcode 9y ago
  This time it will stick, I'm pretty sure.

jancsika 9y ago

> 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 9y ago
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/fac2c3de24e5171596fb189f9c1feb8e https://gist.github.com/jbucaran/fac2c3de24e5171596fb189f9c1... - hyperapp + hyperx + webpack minimal boilerplate https://gist.github.com/jbucaran/c6a6bdb5383a985cec6b0ae4ebe5a4b1 https://gist.github.com/jbucaran/c6a6bdb5383a985cec6b0ae4ebe... - hyperapp + jsx + rollup + buble minimal boilerplate https://gist.github.com/jbucaran/f714dd6d64041591e5e53dbff8558439 https://gist.github.com/jbucaran/f714dd6d64041591e5e53dbff85... - hyperapp + jsx + rollup minimal boilerplate https://gist.github.com/jbucaran/0c0da8f1256a0a66090151cfda777c2c https://gist.github.com/jbucaran/0c0da8f1256a0a66090151cfda7... - hyperapp + jsx + webpack minimal boilerplate https://gist.github.com/jbucaran/6010a83891043a6e0c37a3cec684c08e https://gist.github.com/jbucaran/6010a83891043a6e0c37a3cec68... - hyperapp + hyperx + browserify minimal boilerplate https://gist.github.com/jbucaran/48c1edb4fb0ea1aa5415b6686cc7fb45 https://gist.github.com/jbucaran/48c1edb4fb0ea1aa5415b6686cc... - hyperapp + jsx + browserify minimal boilerplate https://gist.github.com/jbucaran/21bbf0bbb0fe97345505664883100706 https://gist.github.com/jbucaran/21bbf0bbb0fe973455056648831...

fiatjaf 9y ago

Not good, but still better than MobX.

pakx 9y ago

Is this picodom + a TEA-style app structure?

jbucaran 9y ago
tl;dr Yes. Originally it was just hyperapp, but　many people asked for only the virtual DOM, so picodom was born.
- pakx 9y ago
  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 9y ago
    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.
    - christophilus 9y ago
      I'm also really into Clojure/ClojureScript these days. I'm going to look into getting a data-oriented version of either hyperapp or picodom implemented in ClojureScript.
    - pakx 9y ago
      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.

jamesrom 9y ago

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

responde 9y ago

Another Javascript library