In my previous article, I tried to explain why I think Hyperapp is a viable alternative to React or Vue and the reasons I found it easier to get started with it. Lots of people criticized that piece, as it was opinionated and didn’t give the other frameworks a proper chance to shine. So, in this article, I’m going to try to compare these three frameworks as objectively as possible, by providing some minimal examples to showcase their capabilities.
A counter is probably one of the most used examples in reactive programming and is dead simple to understand:
countvariable and present it to the user.
countvariable when the user interacts with them.
Here’s the above implementation in all three frameworks:
Counter example in React, Vue and Hyperapp
There’s probably quite a lot to take in here, especially if you’re not familiar with one or more of them, so let’s deconstruct the code step-by-step:
importstatements at the top.
Countercomponent. Vue follows a similar pattern by creating a new instance of the
Vueclass and passing information to it. Finally, Hyperapp sticks to the functional paradigm, while entirely separating
actionsfrom each other.
countvariable is concerned, React instantiates it inside the component’s constructor, while Vue and Hyperapp simply set a property in their
countvariable. React uses the
setStatemethod inherited from
React.Componentto alter its state, while Vue directly alters
this.count. Hyperapp has its methods written using the ES6 fat arrow syntax and, as far as I can tell, is the only framework that prefers this syntax, due to React and Vue’s need to use
thisinside their methods. Hyperapp’s methods, on the other hand, require the state as an argument, meaning that it might be possible to reuse them in a different context.
h, to be passed to the renderer, the fact that Hyperapp uses
onClickand the way the
countvariable is referenced based on the way state is implemented in each framework.
#appelement. Each framework has a slightly different syntax, with Vue being the most straightforward one and providing the most versatility by working with an element selector instead of element.
Comparing all three frameworks side-by-side, Hyperapp needs the fewest lines of code to implement a counter and it’s the only framework that goes for a functional approach. However, Vue’s code seems to be slightly shorter in absolute length, while the element selector mounting is a great addition. React’s code seems to be the most verbose, but that doesn’t mean the code isn’t just as easy to understand.
Chances are you’re gonna have to deal with asynchronous code. One of the most common asynchronous operations is sending requests to an API. For the purposes of this example, I will use a placeholder API with some dummy data and render a list of posts. The rundown of what has to be done is the following:
fetch()with the proper URL, wait for the data, convert to JSON and finally update the
postsvariable with the received data.
Fetching data from a RESTful API
Let’s break down the above code and compare the three frameworks:
fetch()is quite simple and works as expected across all three frameworks. The key difference here, however, is that Hyperapp handles asynchronous actions a little bit differently than the other two. Instead of modifying state directly inside the asynchronous action, the action will call a different, synchronous action when the data has been received and converted to JSON. This makes the core more functional and easier to break down into smaller and potentially reusable units, while it avoids some callback nesting problems that might arise.
Asynchronous operations are quite easy no matter which framework you choose. Hyperapp might force you down the route of writing functional and more modular code when working with asynchronous actions, but the other two frameworks can definitely do that, too and offer you more of a choice in that respect.
Probably the most famous example in reactive programming, the To-Do List has been implemented using pretty much every single framework in existence. I’m not going to implement the whole thing here, just a stateless component to showcase how all three frameworks can help create smaller reusable building blocks for your web applications.
Sample TodoItem implementations
The above image showcases one technique for each framework and an extra one for React. Here’s what we notice reading through all four of them:
Vue takes a little bit to get used to, as its templates are a bit different from the other two frameworks. React is extremely flexible, supporting a handful of different approaches to creating components, while Hyperapp keeps everything simple and provides compatibility with React if you want to make the switch at some point.
Another key consideration is what component lifecycle events each framework lets you subscribe to and handle according to your needs. Here’s a table I created from the API reference of each one:
Lifecycle method comparison
destroyevents together, while Hyperapp bundles the
mountevents as one. Both offer a decent amount of control in handling lifecycle events.
unmountat all (as far as I understand it), instead relying on the
destroyevent to fire later down the line in the component lifecycle. React doesn’t handle the
destroyevent, instead opting to only handle the
unmountevent. Finally, Hyperapp doesn’t handle the
createevent, solely relying on the
mountevent instead. Depending on your needs and experience, these differences might be important to remember when designing around a component’s lifecycle events.
Overall, lifecycle hooks are provided in every framework and they help you deal with many things during a component’s lifecycle. All three frameworks offer hooks for all of their lifecycle events with minor differences among them, which could stem from the underlying differences in implementation and approach. Vue is certainly a step ahead by offering more granular event handling, allowing you to handle lifecycle events either before or after they are fired.
Apart from ease-of-use and coding techniques, performance is also one of the key considerations for most developers, especially when working with more complex apps. js-framework-benchmark is a great resource for comparing frameworks, so let’s see what the numbers say for each set of benchmarks:
Table operations benchmark
Startup metrics benchmark
Memory allocation benchmark
If performance is an issue, you should consider what kind of app you are working on and what your needs are. It seems like Vue and React work best for more complex apps, while Hyperapp is better suited to smaller apps, with less data to process and apps that require a really fast startup or need to work on lower-end hardware.
Keep in mind, however, that these benchmarks are far from representative of the average use-case, so you might see rather different results in a real-life scenario.
Comparing React, Vue and Hyperapp might feel like comparing apples and oranges in many ways. There are some additional considerations concerning these frameworks that could very well help you decide on one over the other two:
I think if you’ve read this far, you already know which tool is better suited to your needs. After all, this was not a discussion of which one is best, but rather a discussion on which one is a better fit for each situation. To sum it all up:
If you enjoyed this article and the effort put into it, remember to give it a clap or two and share it with all your friends on social media!