Announced at the end of 2017, HyperApp is a JavaScript library offering plenty of features — all for a weight of only 1 kB! That is relatively little compared with jQuery, for example, which weighs around thirty kB. Despite this unusual claim, is the library still performant? The answer is in this article!
A library made up of two APIs
The HyperApp library is made up of two APIs:
hyperapp.h, which returns a new tree of virtual DOM nodeshyperapp.app, which mounts a new application in the specified DOM element
The library is very intuitive: it has few instructions so as to be easy to use and quicker to get to grips with — all so that you can become productive as fast as possible.
HyperApp combines state management with a virtual DOM engine that supports keyed updates and lifecycle events, all without any dependencies. Hence the library’s slogan, “do more with less”.
HyperApp applications are made up of three interconnected parts: state, view and actions.
Here is an example of application code with HyperApp. It displays a counter that increments or decrements according to the settings chosen.
Media to re-attach: the CodePen “PaxbeV” by Aaron (@leox47) is embedded here in the French article and was lost during content extraction.
You can also install the library very easily with npm. All it takes is three lines of code:
Media to re-attach: the CodePen “PaxbaV” by Aaron (@leox47) is embedded here in the French article and was lost during content extraction.
Even though all of HyperApp’s features look promising, the library is still very little used among JavaScript developers. If you have worked on projects with it, do share them with us on social media.
You will find more content about JavaScript, and about front-end development more generally, on our blog.
