Hyperapp is a micro JavaScript framework for building web applications. It’s been optimised for perfomance and simplicity, while still allowing for complex web applications. Given its reduced size and architecture, Hyperapp is also ideal for creating Progressive Web Applications (PWA), a topic we will be covering in a later post.

Since it is a new development and requires a different paradigm than many of the most popular frameworks, it may feel daunting to look at a Hyperapp project at first. However, Hyperapp is actually one of the simplest frameworks to learn and develop with. The resources linked here can be a valuable first step, but as with any programming exercise, the best approach is to try it yourself. You can fork Hyperapp from the Github link above and try out any of the examples below. Alternatively, you can use Hyperstart, an online development framework optimised for Hyperapp, which deploys pre-configured projects and already includes many of the examples mentioned here.

Whatever way you choose to code using Hyperapp, the first step should be to understand the documentation, available at Github. You can follow up with more texts from Jorge Bucaran, Hyperapp’s creator, at this Sitepoint article and on Github.

Code Examples

For a more complete and constantly updated list of projects built with Hyperapp, including boilerplates and utilities, check Awesome Hyperapp.

There is also an ongoing community effort to document resources and examples at Learn Hyperapp. You can also find recipes to follow at Hyperapp Recipes, a collection of code snippets to teach basic and intermediary how-to functionality using Hyperapp.

Basic Examples:

Intermediate Examples:

If you’re a more advanced user looking for an example of a complex project, just check out the code for our website, Hyperstart.io. It’s an entirely open-source online development platform and probably one of the biggest projects being built using Hyperapp.

Reading

Lastly, we should mention two blogs that deal with Hyperapp-related matters: Hypercraft and Hyperapp Vox Populi. We will also provide more examples and tutorials on this blog, so make sure to check it out as well!

Lastly, if you have any questions about Hyperapp, you can ask them on Slack, Twitter, or Reddit.