Question about Rails & React.js
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi, we've built our app ComplianceChimp.com in rails. I was wondering if someone could explain how React.js could be useful for us. I know there is a react-rails gem available, but I'm not entirely sure what advantage it would provide an application like ComplianceChimp. You can demo our tool by logging in with Github. It asks minimal permissions and as long as you're logged in with Github you'll be logged into ComplianceChimp

I know this question might be tough without reviewing our views and coffee script. I can add you to the Github repo, just let me know your username.

awarded to alixaxel

Crowdsource coding tasks.

1 Solution

Winning solution

I see React.js mostly useful for two things:

  1. creating custom reusable HTML elements with one-way data binding
  2. optimizing reflows / repaints of the DOM tree when the data changes by only creating what is still not there

Use case #1 is also handled by frameworks like Angular, the difference being that it does two-way data binding.

Since I don't see much value in React.js for Compliance Chimp since the DOM tree is not that huge. I would advise you to first benchmark your FPS rate in Chrome DevTools timeline and only implement if you need it.

One thing that you should probably look into is Polymer for custom self-contained (inner DOM structure, style and behaviour) HTML components - I learnt about it recently in a conference and I must say I'm quite impressed. Along with Material Design and Paper Elements you'll get the easy-to-use flexbox layout model and styles that will make Compliance Chimp more app-like and look & feel across devices in a consistent way.

Here's a nice short introduction if you want to learn more about it: http://youtu.be/HKrYfrAzqFA.

PS: For two-way data binding (if you need it), wait for Angular 2.0 or use something else, like Ember.

I read that the reason you don't want two way binding in React.js is because of something to do with children bubbling down from parent or something like that. What would two way databinding get us in angular and how would that apply to ComplianceChimp? I need to read up on polymer because I thought that WAS Material Design. Also this is the first time I'm hearing about Paper Elements.
akshatpradhan 4 years ago
Note to think about: https://github.com/alchapone/polymer-rails/blob/master/README.md I wonder if this gem would play nicely with the rest of the CoffeeScript/Sass (and also front end gems) that are in ComplianceChimp. Would we have to rip out bootstrap to implement Paper Elements? I noticed it's still called Dev, does that mean it's not production ready yet? Also are you suggesting The Paper Elements of Polymer as an alternative to FlatUI?
akshatpradhan 4 years ago
interesting stuff here alixaxel! I love the Paper Elements demo but I must admit I'm partial since I love material design (I even used a bit of it for one of my projects http://vigitox.cap-lyon.fr/), anyway I'd love to try an experimental UI with polymer and Paper Elements/Material Design for CC. For Rails there's also polymer-paper-rails
kc00l 4 years ago
@kc00l polymer allows data binding: https://www.polymer-project.org/docs/start/tutorial/step-3.html. What does that mean in terms of ajax with remote: true
akshatpradhan 4 years ago
@alixaxel What do you think about Riot – A React-like user interface library https://muut.com/riotjs/compare.html ?
akshatpradhan almost 4 years ago
@akshat: I saw it on HN and just skimmed the website, from the comparison link that you posted I got mainly two things: 1) seems to be a lighter version of React but I don't know what's the downside and 2) it's an unfair comparison to Polymer since it isn't a polyfill and also (among other things) doesn't give you the flexbox layout model ready to go as HTML attributes (which is my favorite feature).
alixaxel almost 4 years ago