Skip to content

Instantly share code, notes, and snippets.

@IanShoe
Created February 9, 2016 16:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save IanShoe/bb63f10d7853c1c240c6 to your computer and use it in GitHub Desktop.
Save IanShoe/bb63f10d7853c1c240c6 to your computer and use it in GitHub Desktop.
Vue vs React

Given the UI, we've determined that a Client Side tool maintaining data state and binding would be advantageous. This is only to augment singular pages, even just parts of a page, so we don't want full blown frameworks and will likely utilize many rails UI helpers.

Doing a quick comparison with Vue.js and React.js leads me to believe that both are very capable at accomplishing this and both are fairly lightweight. Factually, there are only 3 real points that I find would impact the decision on which to choose.

  1. React.js uses .jsx files which require a compilation step during the build phase to convert them into proper .js and html templates. Because of this, there would be a little more ramp up in order to get started with this ecosystem. This gem should provide what's needed and make it pretty quick however I'd probably need to pull someone in and help me understand where to put these and how to configure it. Vue.js on the other hand uses standard .js and .html and is just a matter of plugging in a javascript file and adding <div id="my-vue-component"> to one of our .erbs. Out the gate, I know how I'd start implementing with this.

  2. React has a larger community and I imagine would find it easier to get open source projects for common widgets. Vue has some, but it's still up and coming so I'm not sure what that scene is like. One of our guys here is a fan of github star comparisons to gauge what kind of support to expect. React 36075. Vue 13803. Both are formidable numbers.

  3. There's some other stuff we would potentially want to include to truly be react ecosystem friendly. 2 way data binding doesn't come with the core but rather requires react-link. Instead they follow a flux methodology which, from what I gather, is "all actions flow one way", which can become cyclical (in a good way) to facilitate the same effect of 2 way data binding. I'd have to learn more about how and why there are the 2 approaches. They also talk about using browserify in their getting started for managing dependencies as well as babel, which I originally thought was a really good es6 shim, but I guess it's a more generic javascript transformation library. I don't know that we hard require any of these, but it's heavily engraved in their docs. Vue.js is pretty much run with it out of the box and is synonymous to the more common 2 way data binding mentality that I'm familiar with.

Personal Opinion Since we really just want to augment a few select spots with some client code and default to rails ecosystem for most of our heavy lifting, I feel Vue.js would fit that need a little more and ramp up quicker. But if we feel like down the road we'll utilize even more client-side heavier apps and potentially having things like navigation or complex components, React would probably lend itself better.

I doubt there's a real fit on this app for full blown frameworks like angular and ember within the rails ecosystem. I think they step on each others toes on what they solve (even though its been done on other projects before.)

Licenses I don't know how much these matter, but here are the licenses for each.

Vue - MIT React - BSD

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment