Hyperapp
code-along

Hyperapp is an incredibly tiny and fast framework for web-front-ends. It is also incredibly simple. The concepts are few and easy to grasp – but it may be unclear how to go from there to real world applications.

So I put together this series of short videos that take you keystroke by keystroke from "Hello World" to fully-fledged TodoMVC – with some thoughts on dev setup and code structure along the way.

Watch the videos on double-speed, skip around and pick up ideas. Or watch them carefully in order, copying me exactly. – However you prefer, as long as you're having fun!

/ Zach

1. Hello World
4:08

We implement the "Hello World" of Hyperapp. In doing so we look at Hyperapp's h and text function which define a virtual-dom structure – and how Hyperapp renders this to the actual DOM.

Result on flems.io
2. Handling Events
6:39

We see how Hyperapp binds event handlers to dispatch actions, which update the state. This causes Hyperapp to recalculate the view and patch the DOM.

Result on flems.io
3. JSX, hyperlit & @hyperapp/html
8:45

We take a look at a few systems for authoring views, which can give you a better developer experience for the price of some small amount of complexity/performance.

Going forward, @hyperapp/html is the system I will be using in these videos.

JSX on flems.io , hyperlit on flems.io, @hyperapp/html on flems.io
4. Making a list
5:39

We begin our journey toward the TodoMVC implementation with the first step of making a list, using just the knowledge gained in the previous videos.

Result on flems.io
5. Crossing things off
6:50

We add the feature of being able to mark todo items as done. We learn about actions with custom payloads. We also introduce some CSS to make our app look a little fancier.

We also learn how hyperapp handles the class prop in a convenient way, allowing you to specify classes using objects

Result on flems.io
6. Add with Enter key
6:59

As we enable adding items using the enter key, we learn that actions can return other actions, and we learn about creating action "guards" or "decorators" (the nomenclature is as yet unsettled)

Result on flems.io
7. Deleting items
2:20

Just adding the feature for deleting items. No new concepts, but we emphasize the importance of not mutating state (a k a always work with copies).

Result on flems.io
8. Local dev setup
8:41

Taking a break from TodoMVC, to set up a minimalistic local dev environment with npm and rollup.

project files (.zip)
9. Editing items
3:56

Back to working on TodoMVC. This time we add the feature for editing todo items. We use conditional rendering.

project files (.zip)
10. Focus & Effects
9:32

For the first time, we introduce Hyperapp's concept of effects. We use them to focus the input elements in the DOM directly, for a better UX

project files (.zip)
11. Refactoring the view
14:04

The app is getting larger, so we will take a break from new features for a few videos. Instead we will break apart and structure the code, for more sustainable future development.

In this video, we focus on breaking apart the view. There is nothing Hyperapp specific here. Just moving around javascript.

project files (.zip)
12. Dispatch
6:56

We learn about the dispatch function passed to effects. We use it for a trick that has plenty of uses. In this case we use it to implement another decorator.

project files (.zip)
13. A Modularization pattern
7:09

I introduce a pattern that I like for breaking parts of the app into separate, self-contained modules – views, actions and all(I call it the "wire pattern")

Nothing Hyperapp specific here. If you have ideas for improving the pattern, or some entirely different pattern – go for it!

project files (.zip)
14. A Modularization pattern, part 2
6:33

We continue using the wire pattern to move the todo-list logic into its own module, leaving the main index.js devoid of any specific logic. Its sole purpose of tying modules together is now realized.

Still nothing Hyperapp specific here.

I also break out the raw logic functions of a todo-list, mostly to illustrate why it might be a good idea.

project files (.zip)
15. Check all
6:20

Our refactoring sojourn completed, we return to TodoMVC

This time, the turn has come to implement the "check all" feature.

project files (.zip)
16. Routing
14:03

For the first time, we're introduced to Hyperapp's concept of subscriptions, and use it to implement basic routing.

project files (.zip)
17. Filtering
3:10

Last video we learned to set various filters using routing. In this one we actually apply the filters to the list of todos.

project files (.zip)
18. Persistence
5:33

We return to subscriptions for a closer look, and use them to persist the app state in local storage, so we don't have to input our data every time the page reloads

project files (.zip)
19. TodoMVC Wrap-up
6:38

We conclude the series by finishing off the last bunch of little features.

Nothing new here. We're just coasting.

project files (.zip)
20. Bonus: Avoid wasting time on silly mistakes
9:06

If you've found yourself spending a lot of time debugging, only to slap your forehead when you figure out you just gave the arguments in the wrong order or something similar, you'll appreciate this bonus video :)

Update: Hyperapp now has official types. I have left the video as is, but have updated the project files. My custom types for hyperapp were removed, and updated the types for @hyperapp/html to use the official ones.

project files (.zip)