React vs Vue vs Hyperloop

@catmando

Today @fkchang posted a nice article on the strengths and weaknesses of React vs. Vue

I thought I would extend the conversation by adding a comparison of Hyperloop.

Here is the summary from that article:

---

To recap, our findings, Vue’s strengths are:

• Flexible options for template or render functions
• Simplicity in syntax and project setup
• Faster rendering and smaller size

React’s strengths:

• Better at scale, studier and more testable
• Web and native apps
• Bigger ecosystem with more support and tools available

However, both React and Vue are exceptional UI libraries and have more similarities than differences. Most of their best features are shared:

• Fast rendering with virtual DOM
• Lightweight
• Reactive components
• Server-side rendering
• Easy integration with router, bundler and state management
• Great support and community

---

How does Hyperloop stack up against these?

Going down the list in order of above...

Vue's strengths compared to Hyperloop?

• (+) HyperReact is Hyperloop's React DSL (HyperReact) and its is pure ruby, so you get the simplicity of a templating language like Vue, with the added advantage that you instead of learning the html + template extensions + js, you only learn Ruby.
• (+) HyperReact's DSL is simple and tries to be consistent with other ruby libraries like ActiveRecord. Like Vue setup is as easy as including a single js file. Like Vue HyperReact treats states more like "smart" variables, and handles comparisons and reactive updates for you.
• (-) HyperReact is even bigger than React, and slightly slower. So if you have to have a minimal size app stick with Vue.

React's strengths compared to Hyperloop?

• (+) Like React Hyperloop scales really well.
• (-) Hyperloop shines on the web. However, while proof of concept for native apps has been done, it's not yet ready for production. So if you need native app support now stay with React.
• (+) Because Hyperloop is built on React you get all the eco system and library goodness. Plus because its ruby and integrates with Rails you get all that goodness too. Including isomorphic testing!

React and Vue's common strengths compared to Hyperloop?

• (+) Fast rendering with virtual DOM
• (+) Lightweight (not as light but still relatively light)
• (+) Reactive components
• (+) Server-side rendering
• (+) Easy integration with router, bundler and state management
• (+) Great support and community

In addition, there are some really big wins when you move into the full Hyperloop framework. You get:

• (+) Direct, policy controlled, synchronized access to your active record models in your client code.
• (+) Client and server code runs as an integrated unit.
• (+) One really great language runs everywhere.

So what is the downside?

As noted there are a couple of negatives to be aware of: HyperReact generates slightly more bulky code than JSX, and because of the extra layer it is slightly slower.

And of course Hyperloop is brand new, but it's based on tried and true technologies: React, Opal (Ruby -> JS transpiler) and Rails.

So what does Hyperloop code look like compared to React and Vue? Here is the same sample component using HyperReact.

<div data-reactrb-mount="App"></div>
<script type="text/ruby">
class App < React::Component::Base

  def render
    DIV do
      P { state.message }
      BUTTON { 'Reverse Message' }.on(:click) { reverse_message }
    end
  end

  define_state message: 'Hello From Hyperloop'

  def reverse_message
    state.message! state.message.reverse
  end

end
</script>

Some things to note:

• It looks very similar to the Vue definition.
• Because its Ruby you get a much richer set of built in libraries. I.e. Ruby reverse acts on strings just fine.
• States in Hyperloop are implemented by React but are managed so they act like Vue states.
• Hyperloop states are updated using the bang (!) method, which works with all data types (unlike Vue.)
• The React::Component::Base class takes care of most of boiler plate needed in the React version keeping things short and sweet.

In case you want to see it running here is the jsFiddle: https://jsfiddle.net/catmando/4ftytL0n/2/