Show HN: 1 KB JavaScript framework for building front-end applications

(Great project, BTW!)

Everything old is new again...

Hyperapp doesn't outperform DIO.js, but that was never the mission I embarked on with this project. You can see it benchmarked " rel="nofollow">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);

    app({
      state: 0,
      actions: {
        add: state => state + 1,
        sub: state => state - 1
      },
      view: (state, actions) =>
        
          +
          {state}
          -
        
    })

In my experience over the past few months, HyperApp works very well, the documentation is solid, the performance is great, and we've encountered no bugs so far.

If I had to do it over again, I would choose HyperApp again. Great work, folks.