React vs Vue vs Hyperloop

@catmando

Today @fkchang chatted about a good article on the strengths and weaknesses of React vs. Vue

I thought I would extend the conversation by adding a comparison of Hyperloop's HyperReact DSL.

Here is the summary of Vue and React's strengths 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 HyperReact stack up against these?

Going down the list in order of above...

Vue's strengths compared to HyperReact?

• (+) HyperReact is pure Ruby, so you get the simplicity of a templating language like Vue, with the added advantage that 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 HyperReact?

• (+) Like React HyperReact scales really well (after all under the hood it's just React.)
• (-) HyperReact 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 right now stay with React.
• (+) Because HyperReact is built on React you get all the ecosystem and library goodness. Plus, because it's Ruby and integrates with Rails you get all that goodness too. Including isomorphic testing!

React and Vue's common strengths compared to HyperReact?

• (+) 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. There are just a couple of production apps out there so far, but it's based on tried and true technologies: React, Opal (Ruby -> JS transpiler) and Rails. You can even begin using it in existing Rails or React apps, side by side with existing code.

So what does HyperReact 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 it's Ruby you get a much richer set of built-in methods. I.e. Ruby reverse acts on strings just fine.
• States in HyperReact are implemented by React but are managed so they act like Vue states.
• HyperReact states are always updated using the bang (!) method, which works with all data types, such as array's, hashes, or application defined classes. Vue gives you two mechanisms: assignment, and the set function.
• 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/

This fiddle uses the HyperExpress cdn, which is the easiest way to get started, and works for playing and static pages. Code is compiled on the fly after the page load. For a full scale App you would use the HyperRails gem which adds HyperReact and other Hyperloop gems into an existing rails application.