Javascript Framework Comparison with Examples (React, Vue & Hyperapp)

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 count.
  • You need two methods to increment and decrement the count variable.
  • You need a way to render said count variable and present it to the user.
  • You need two buttons hooked up to your two methods to alter the count variable 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:

  • All three frameworks have some import statements at the top.
  • React prefers the Object-Oriented paradigm, by creating a class for the Counter component. Vue follows a similar pattern by creating a new instance of the Vue class and passing information to it. Finally, Hyperapp sticks to the functional paradigm, while entirely separating view, state and actions from each other.
  • As far as the count variable is concerned, React instantiates it inside the component’s constructor, while Vue and Hyperapp simply set a property in their data and state respectively.
  • Moving forward, one notices that React and Vue have very similar methods for interacting with the count variable. React uses the setState method inherited from React.Component to 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 this inside 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 onclick instead of onClick and the way the count variable is referenced based on the way state is implemented in each framework.
  • Finally, all three frameworks are mounted to the #app element. 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.

read original article here