8 ms·

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

216 points by jbucaran 9y ago

majewsky 9y ago
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?
- wereHamster 9y ago
  It doesn't, that's not valid ES{4,5,6,2016,2017} code.
- dianthrow 9y ago
  What you are looking at is called JSX[1]. It's not valid JavaScript, but is turned into function calls by transpilers such as Babel[2]. It's used as a more HTML-like syntax of writing function calls that output a representation of the DOM known as a "virtual DOM". You can embed JavaScript inside of JSX by using single curlies. [1] https://facebook.github.io/jsx/ https://facebook.github.io/jsx/ [2] http://babeljs.io/ http://babeljs.io/
- jbucaran 9y ago
  It's called JSX. I used it in the example because it's popular among the JavaScript crowd, popularized by React. That code is not directly consumed by the browser, instead, it's compiled into the code below by a compiler like Babel, minified and bundled into a tiny blob of code we ship to the browser. app({ state: { count: 0 }, view: (state, actions) => h("main", {}, [ h("h1", {}, [state.count]), h("button", { onclick: actions.down }, "-"), h("button", { onclick: actions.up }, "+"), ]), actions: { down: state => ({ count: state.count - 1 }), up: state => ({ count: state.count + 1 }) } }) So, I used JSX for "familiarity", but you don't need to use it to build your own apps. You can just write the code shown in the snippet above and you'd do just as well. You can also minimize and bundle your code to tap into the JavaScript ecosystem, code using a modular style and still not have to use JSX at all. Hope that helps :)
  - majewsky 9y ago
    Indeed. Thanks very much. Coincidentally, the h() function up there looks very similar to what we used to render HTML in a 15-year-old Perl application that I maintained at work.
- ryandvm 9y ago
  It's JSX which is basically PHP reborn as a front end technology. Everything old is new again...
  - enobrev 9y ago
    JSX is more like Cold Fusion, I think.
    - jbucaran 9y ago
      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 9y ago
        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.
codegladiator 9y ago
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
- leonord 9y ago
  Don't think that will catch on ;)
- hyperpape 9y ago
  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 9y ago
    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 9y ago
payne92 9y ago
Dupe: https://news.ycombinator.com/item?id=14629414 https://news.ycombinator.com/item?id=14629414
- jbucaran 9y ago
  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 9y ago
    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 9y ago
      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
maxpert 9y ago
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.
- tedmiston 9y ago
  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.
- jbucaran 9y ago
  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> })
hellcow 9y ago
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.
styfle 9y ago
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 9y ago
  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 9y ago
    What is keyed DOM updates? Is that the equivalent of React's `key` property? https://facebook.github.io/react/docs/lists-and-keys.html#keys https://facebook.github.io/react/docs/lists-and-keys.html#ke...
demoonkevin 9y ago
Do you have any examples of websites made with Hyperapp?
- okwolf 9y ago
  I can't take credit for this one, but there's a HN clone: https://github.com/traducer/hypernews https://github.com/traducer/hypernews
- lukejacksonn 9y ago
  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 :]
mishkovski 9y ago
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.
- jbucaran 9y ago
  I like and agree a lot with this definition too. Thanks!
- okwolf 9y ago
  One thing I like about the Hyperapp approach though is use of plain JavaScript objects and pure functions to build your app. This means that it's possible to only have a dependency on Hyperapp in one place as part of assembling the overall app.
- dang 9y ago
  OK, we'll s/library/framework/ the above.
cygned 9y ago
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!
- kenOfYugen 9y ago
  I like this approach a lot, especially as implemented in [1]. Perhaps a tutorial, or some examples can be documented in that style. Hyperapp + hyperscript-helpers[2] is my favorite combo at the moment. 1. http://dave.kinkead.com.au/modelling-the-boundary-problem/ http://dave.kinkead.com.au/modelling-the-boundary-problem/ 2. https://github.com/ohanhi/hyperscript-helpers https://github.com/ohanhi/hyperscript-helpers
- jbucaran 9y ago
  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/8dc33b7947f3193eb2ea3d5700e27036 https://gist.github.com/jbucaran/8dc33b7947f3193eb2ea3d5700e...
  - cygned 9y ago
    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.
sAbakumoff 9y ago
So far, the Infinite monkey theorem is just giving us an infinite number of javascript frameworks, and no Shakespeare

216 points by jbucaran 9y ago

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?

wereHamster 9y ago
It doesn't, that's not valid ES{4,5,6,2016,2017} code.
dianthrow 9y ago
What you are looking at is called JSX[1]. It's not valid JavaScript, but is turned into function calls by transpilers such as Babel[2]. It's used as a more HTML-like syntax of writing function calls that output a representation of the DOM known as a "virtual DOM". You can embed JavaScript inside of JSX by using single curlies. [1] https://facebook.github.io/jsx/ https://facebook.github.io/jsx/ [2] http://babeljs.io/ http://babeljs.io/
jbucaran 9y ago
It's called JSX. I used it in the example because it's popular among the JavaScript crowd, popularized by React. That code is not directly consumed by the browser, instead, it's compiled into the code below by a compiler like Babel, minified and bundled into a tiny blob of code we ship to the browser. app({ state: { count: 0 }, view: (state, actions) => h("main", {}, [ h("h1", {}, [state.count]), h("button", { onclick: actions.down }, "-"), h("button", { onclick: actions.up }, "+"), ]), actions: { down: state => ({ count: state.count - 1 }), up: state => ({ count: state.count + 1 }) } }) So, I used JSX for "familiarity", but you don't need to use it to build your own apps. You can just write the code shown in the snippet above and you'd do just as well. You can also minimize and bundle your code to tap into the JavaScript ecosystem, code using a modular style and still not have to use JSX at all. Hope that helps :)
- majewsky 9y ago
  Indeed. Thanks very much. Coincidentally, the h() function up there looks very similar to what we used to render HTML in a 15-year-old Perl application that I maintained at work.
ryandvm 9y ago
It's JSX which is basically PHP reborn as a front end technology. Everything old is new again...
- enobrev 9y ago
  JSX is more like Cold Fusion, I think.
  - jbucaran 9y ago
    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 9y ago
      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.

codegladiator 9y ago

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

leonord 9y ago
Don't think that will catch on ;)
hyperpape 9y ago
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 9y ago
  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 9y ago

payne92 9y ago

Dupe: https://news.ycombinator.com/item?id=14629414 https://news.ycombinator.com/item?id=14629414

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

maxpert 9y ago

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.

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

hellcow 9y ago

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.

styfle 9y ago

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 9y ago
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 9y ago
  What is keyed DOM updates? Is that the equivalent of React's `key` property? https://facebook.github.io/react/docs/lists-and-keys.html#keys https://facebook.github.io/react/docs/lists-and-keys.html#ke...

demoonkevin 9y ago

Do you have any examples of websites made with Hyperapp?

okwolf 9y ago
I can't take credit for this one, but there's a HN clone: https://github.com/traducer/hypernews https://github.com/traducer/hypernews
lukejacksonn 9y ago
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 :]

mishkovski 9y ago

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.

jbucaran 9y ago
I like and agree a lot with this definition too. Thanks!
okwolf 9y ago
One thing I like about the Hyperapp approach though is use of plain JavaScript objects and pure functions to build your app. This means that it's possible to only have a dependency on Hyperapp in one place as part of assembling the overall app.
dang 9y ago
OK, we'll s/library/framework/ the above.

cygned 9y ago

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!

kenOfYugen 9y ago
I like this approach a lot, especially as implemented in [1]. Perhaps a tutorial, or some examples can be documented in that style. Hyperapp + hyperscript-helpers[2] is my favorite combo at the moment. 1. http://dave.kinkead.com.au/modelling-the-boundary-problem/ http://dave.kinkead.com.au/modelling-the-boundary-problem/ 2. https://github.com/ohanhi/hyperscript-helpers https://github.com/ohanhi/hyperscript-helpers
jbucaran 9y ago
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/8dc33b7947f3193eb2ea3d5700e27036 https://gist.github.com/jbucaran/8dc33b7947f3193eb2ea3d5700e...
- cygned 9y ago
  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.

sAbakumoff 9y ago

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