[maxpert]

I am happy after the React fiasco these libraries are finally getting lime light. I have personally used DIO.js (https://dio.js.org), Vue.js and Inferno, but not Hyperapp. So far I have seen DIO outperform almost every library in heavy view cases (table with ~ 1k rows and rows itself having deep nesting). I am curious however how does hyperapp perform.

[tedmiston]

I tried Vue.js and thought it was pretty nice. As someone who only dabbles in modern front end in their spare time, it'd be great to see someone with more experience do a good comparison write-up of all the "post-React" alternatives.

[dianthrow]

I honestly love that these libraries keep getting smaller and faster. People have really started to hate these newer libraries, but as long as they are getting better, I'm fine with experimenting with them.

Vue even has a lighter alternative called Moon[1], which was on HN a while back. I'm curious as well about the performance of HyperApp. Looking at the JS frameworks benchmark[2], it's not the best, but not the worst either (pretty good for squeezing it all into 1kb).

[1] http://moonjs.ga

[2] https://github.com/krausest/js-framework-benchmark

[jbucaran]

Thanks for the comment :)

Hyperapp doesn't outperform DIO.js, but that was never the mission I embarked on with this project. You can see it benchmarked <https://rawgit.com/krausest/js-framework-benchmark/master/> among many other frameworks and you can see it's on the same ballpark as React.

The goal of this project is to minimize the concepts you need to learn to write a modern frontend app while staying on par with what other libraries can do; deliver good performance, but not at the sake of a clumsy or awkward API; reduce the boilerplate and still follow our "simplified" take on Flux or the Elm architecture if you prefer.

Hyperapp is unreservedly functional, we don't have stateful components, use `this`, classes or have more than one way to do the same thing.

We are not just about saving bytes either, but size and our brutally small code base is important for a few reasons. The idea behind the entire thing being 300 LOC is that _anyone_ can understand how everything works within a few hours. It's genuinely possible to understand not just what it does, but how it does it.

IMHO a normal person can't do that with React, or DIO, or most of the other large-ish frameworks out there. Even Preact, I found it too large for my taste. Yes, minified and gzipped is like 3.4 KB, but that translates to almost 800 LOC. It's an outstanding achievement considering it's just a fraction of React, but you are only getting React+ReactDOM.

Hyperapp is not perfect, but you are getting React+ReactDOM+Redux+ReduxThunk out of the box.

Just for a light (and harmless) comparison, this is a +/- counter in DIO.js:

    class Counter {
      getInitialState () {
        return {
          count: 0
        }
      }
      increment () {
        return {
          count: this.state.count + 1
        }
      }
      decrement () {
        return {
          count: this.state.count - 1
        }
      }
      render () {
        return [
          this.state.count,
          h('button', {onClick: this.increment}, '+'),
          h('button', {onClick: this.decrement}, '-')
        ]
      }
    }

    dio.render(Counter);

And here is the same in Hyperapp:

    app({
      state: 0,
      actions: {
        add: state => state + 1,
        sub: state => state - 1
      },
      view: (state, actions) =>
        <div>
          <button onclick={actions.add}>+</button>
          <h1>{state}</h1>
          <button onclick={actions.sub}>-</button>
        </div>
    })

[maxpert]

Thanks for your response, I totally buy the argument of stateful components (believe me I have seen worst of the worst bugs due to these issues), and bringing down time to learn concept. But 300LOC, Woah! you got my attention! I think the thing that derived React was ecosystem around it (which I think FB is going to loose pretty soon), and most libraries including DIO.js (excluding Vue.js) don't have much of it.

For the comparison example you did, don't post it anywhere officially :P because I can use babel with jsx preset (I am sure hyperapp is using too) and then do the stylish lambdas to make code look cleaner. That would be a fair comparison.

[jbucaran]

Sorry, I am sure you could use JSX with DIO.js too. To be honest, I wasn't even looking at the JSX. I grabbed it from where I found it. The takeaway is not JSX, but the fact that they use classes and that's all.

Personally, if I was going to go with this kind of architecture, I'd choose Preact (or React if I can't help it) to tap into the massive React ecosystem.