
Show HN: 1 KB JavaScript framework for building front-end applications - jbucaran
https://github.com//hyperapp/hyperapp
======
mishkovski
It is not a library. It is a framework. The distinction is important and
whatever you choose influences how you test, develop and maintain your
software. Libraries are slaves of your code. When you use libraries you have
control. When you use a framework it is the opposite, you depend on the magic
provided by it and ultimately you lose part of that control. The choice is
clear for me.

~~~
dang
OK, we'll s/library/framework/ the above.

------
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](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.

~~~
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/>](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.

------
hellcow
I started using HyperApp in my company's admin dashboard to render a complex
diagram.

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.

------
codegladiator
I want to see the trend of maximal libraries in javascript now.

Show HN: 2 MB JavaScript library for building front end applications with a
lot of useful interactive ui components.

like [https://github.com/nlp-compromise/compromise](https://github.com/nlp-
compromise/compromise)

~~~
hyperpape
I agree.

The fight for really small frameworks is most relevant for consumer apps,
especially ones consumed on mobile.

But even on mobile, it's primarily relevant because customers get minimal
value from your app or are bad at accurately assessing the value they get.

In my day job, I work on a system where business users spend several hours a
day using it. Loading a MB of minified JS has such a limited effect on the
overall time it takes users to get their work done, it's almost irrelevant.
Though, per the point about accuracy above, I wonder how it affects our demos.

~~~
diggernet
I used to need to use a large web app like that at work. You'd get a login
page. Submitting your login caused the app to load, which was many MB. Once
that was all downloaded, the page would finally display, and you could do what
you needed to. (In our case, you usually only needed to look something up
quickly and be done, which is a bit different than your case.) But the real
kicker is... the company VPN was slow. Really slow. In fact, most of the time,
as soon as the app finally loaded, the first thing it did was pop up a dialog
telling you your session had expired due to inactivity and send you back to
the login page to start over from scratch.

I sure missed the simple, small, usable, multi page site we used before the
"upgrade" to the single page app competitor! (On top of that, the old one
worked fine on mobile. The new one, not at all.)

~~~
hyperpape
That's painful. I definitely think that there are cases where enterprise users
would be best served by simple server rendered HTML or minimal JS.

Still, I can't help but think that the real low-hanging fruit is the slow VPN.
How much time was wasted waiting for the network? So many companies are penny-
wise pound-foolish.

~~~
Spivak
I think you have it backwards here. Most companies are pound wise in the sense
that they consider the time cost of employees in a project management setting,
but don't account for the small but frequent time wasted waiting on a slow
network.

It's not impossible but it's a tough sell arguing for a 50k expenditure for
better hardware for the VPN will actually save the company time worth >50k.

~~~
hyperpape
Hmm, maybe I underestimate the cost of VPN upgrades.

I'd say that there's a point where the overhead of spending money becomes high
enough that companies will waste a lot of expensive employee time to avoid
requisitioning something.

And although companies track high level time costs in a project management
context, I'm not sure whether they're conscious of the way that time use can
be driven by bits of waste.

That sorta fits "penny wise, pound foolish", but sorta doesn't.

------
sAbakumoff
So far, the Infinite monkey theorem is just giving us an infinite number of
javascript frameworks, and no Shakespeare

------
majewsky
So I'm looking at the example JS snippet and suddenly it embeds HTML in the
middle. Can someone who knows current JS explain how this even parses?

~~~
ryandvm
It's JSX which is basically PHP reborn as a front end technology.

Everything old is new again...

~~~
enobrev
JSX is more like Cold Fusion, I think.

~~~
jbucaran
I remember I was perhaps 17 and while I really didn't understand very well
what ColdFusion was about, I wanted to try it out so badly. Unfortunately, it
wasn't free, so I was never able to get do anything with it. I enjoyed AS3 to
the fullest though.

~~~
enobrev
My first major development project was an intranet I wrote in Cold Fusion 4.

I was an on-site support tech for a software company who wrote software for
tracking market data for trading companies around Wall Street. The company
used a huge MS Access "app" to track our knowledge base and customer support
requests. The app obviously took a ton of time to develop but was slow and
difficult to use and required a weekly upload / merge to the main office in
Colorado.

So one day while strolling around downtown after lunch, I randomly happened
upon some guy selling business and programming books on a table on the
sidewalk (on Broad Street for those familiar). I bought a book on Cold Fusion
4 for $20 and over the next two months put together a prototype in my spare
time that was a slick interface on top of the Access Database.

It was a hit with the NY office, and after about a year of working on it in my
spare time, the whole company started using it. They replaced the Access app
with my intranet and hired a SQL server guy to manage the database behind it.
They didn't want me to leave my on-site support position because I was doing
really well with it, so I ended up splitting my job - half time as a tech,
half as a programmer.

That company, which was incredibly successful at the end of the 90s, has since
shrunk from 150 or so employees around the world to less than 10. From what I
understand they're still using that old Cold-Fusion based intranet I wrote all
those years ago.

After I got laid off I moved on to PHP because I couldn't afford CF on my own.

AS3 remains, to this day, one of my favorite programming languages. I had
really hoped JavaScript would start to resemble it eventually.

------
cygned
Would love to see the code documented with docco, like so:
[http://dak0rn.github.io/prunk/](http://dak0rn.github.io/prunk/)

The whole library would be documented on one page which is a fairly low entry
barrier for new developers. Thanks for this awesome project!

~~~
jbucaran
That would be so nice! I am working on a "how it works" post, but it's still
not finished.

If you are interested have a look here:

[https://gist.github.com/jbucaran/8dc33b7947f3193eb2ea3d5700e...](https://gist.github.com/jbucaran/8dc33b7947f3193eb2ea3d5700e27036)

~~~
cygned
Neat! The great thing about docco is that it takes the comments right from the
source and creates that page out of it. So you have both a pretty website and
the same documentation directly in the code.

------
styfle
Another small template engine similar to React is ".dom", weighing in at only
500 bytes!

[https://news.ycombinator.com/item?id=13605673](https://news.ycombinator.com/item?id=13605673)

It only works in modern browsers supporting Proxy.

~~~
jbucaran
Looks really cool, other than Object.assign, Proxy and Symbol I think this is
quite an achievement for that size, but I am pretty sure it doesn't support
keyed DOM updates. Hyperapp was also under 1 KB before we introduced the keyed
VDOM.

~~~
styfle
What is keyed DOM updates? Is that the equivalent of React's `key` property?

[https://facebook.github.io/react/docs/lists-and-
keys.html#ke...](https://facebook.github.io/react/docs/lists-and-
keys.html#keys)

------
payne92
Dupe:
[https://news.ycombinator.com/item?id=14629414](https://news.ycombinator.com/item?id=14629414)

~~~
jbucaran
We've come a long way since then. We are super close to 1.0 now and while the
API hasn't changed much, there have been numerous breaking changes and we've
also added new features, documentation, examples and seen the ecosystem grow
too.

~~~
payne92
For next time: consider sharing a link to a release notes/announcement/update
page with all of that information, instead of reposting the main project page
URL.

(Great project, BTW!)

~~~
jbucaran
Thanks! Here is the release notes page of the last dozen of versions for now.

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

------
demoonkevin
Do you have any examples of websites made with Hyperapp?

~~~
lukejacksonn
I have made a few simple sites with hyperapp in its various stages of
development. I am not advocating that any of these projects represent the
_proper_ way to build a hyperapp (or a web app in general for that matter, I
am learning too) but they are hyperapps.. in production!

Site: [https://audiostream.world](https://audiostream.world) Repo:
[https://github.com/joextodd/audiostream](https://github.com/joextodd/audiostream)

Site: [https://browses.io](https://browses.io) Repo:
[https://github.com/browses/frontend](https://github.com/browses/frontend)

Site: [https://plural.video](https://plural.video) Repo:
[https://github.com/lukejacksonn/plural](https://github.com/lukejacksonn/plural)

Site: [https://hyperapp-hn.deployable.site](https://hyperapp-
hn.deployable.site) Repo: [https://github.com/lukejacksonn/hyperapp-
hn](https://github.com/lukejacksonn/hyperapp-hn)

There is also [https://github.com/hyperapp/awesome-
hyperapp](https://github.com/hyperapp/awesome-hyperapp) which is full of much
community goodness.

Hope that helps! Join us on slack if you have questions :]

