Hyperapp
code-along

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.

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.

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.

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.

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

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)

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).

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

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

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

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.

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.

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!

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.

Our refactoring sojourn completed, we return to TodoMVC

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

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

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

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

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

Nothing new here. We're just coasting.

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.