DEV Community

loading...

Fighting boredom with a HyperApp experiment

citizen428 profile image Michael Kohl Originally published at citizen428.net Updated on ・1 min read

I'm a bit sick, so I'm looking for things to kill the boredom. 2 days ago I read a blog post on HyperApp. Yesterday I cloned the app from this Medium post in it:

I created the exact same app in React and Vue. Here are the differences.

screenshot

According to one comment, the React version weighs in at 127.24KB and Vue at 77.84 KB. HyperApp in a Parcel production build came out at 7.25KB (minified 2.8KB). Interesting, cause this may not even the best HyperApp can do, since (a) I'm not really a frontend dev and (b) this was my first HyperApp experience.

You can find the code at the following repository, suggestions welcome:




Discussion

pic
Editor guide
Collapse
anders profile image
Anders

I am really loving this trend towards more minimal frameworks!

Just for the hell of it I took a few minutes and made a Plain JS version, without any real effort that got us down to 4.26 KB. andershammervald.com/Experiments/P...

Collapse
citizen428 profile image
Michael Kohl Author

Thanks for that :) However, personally I prefer the HyperApp version. I think it provides enough to be useful even for larger applications while still being small.

Collapse
anders profile image
Anders

Absolutely, I think its always important to be aware of different solutions to a problem and selecting whatever is appropriate for your use case (and also, personal preference ofc plays a role).

I am just generally very appreciative of this recent trend of frameworks and libraries providing a higher bang for your buck and relative reduction in complexity. The web is sorely in need of optimization. Dev.to is a great example of what can be achieved if that is a focus =)

Thread Thread
citizen428 profile image
Michael Kohl Author

I think we can 100% agree on this. :) Personally I'm quite the Vue fanboy, because it scales well from replacing jQuery to full-blown SPAs with state management.

That said for server-rendered (Rails) apps that just need the occasional sprinkle of JS, I quite like Stimulus and after this experiment I'm quite sure to give HyperApp another spin soon.

Collapse
jessesingleton profile image
Jesse Singleton

Nice! Never heard of HyperApp but the idea of making tiny blazing fast static sites is strangely satisfying. I've been building a personal blog in GatsbyJS, I'd be interested to take their blog boiler plate and try and recreate it in HyperApp.

Collapse
joestrouth1 profile image
Joe Strouth

Crazy that the hyperapp build unminified is 25% the size of react-dom minified and gzipped. Very cool!