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.
The infamous counter example
A counter is probably one of the most used examples in reactive programming and is dead simple to understand:
- You need to have a variable to keep track of the counter’s
- You need two methods to increment and decrement the
- You need a way to render said
countvariable and present it to the user.
- You need two buttons hooked up to your two methods to alter the
countvariable when the user interacts with them.
Here’s the above implementation in all three frameworks:
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:
- All three frameworks have some
importstatements at the top.
- React prefers the Object-Oriented paradigm, by creating a
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.
- As far as the
countvariable is concerned, React instantiates it inside the component’s constructor, while Vue and Hyperapp simply set a property in their
- Moving forward, one notices that React and Vue have very similar methods for interacting with the
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.
- The rendering part of all three frameworks is virtually the same. The only minor differences are that Vue needs a function,
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.
- Finally, all three frameworks are mounted to the
#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.
Counter example verdict
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.