Why Ruby on Rails and React JS.

January 09, 2020

There’s a lingering question in the web development community, if Ruby and Ruby on Rails is still relevant. This is a very good question as there are so many web technologies that currently exist and a lot of frameworks gaining steam.

Let me burst that bubble real quick and just say, Ruby on Rails is very much alive and kicking.

A quick Google search about its relevancy today would yield you this answer, and with research about it. Being a Ruby on Rails developer is also one of the highest paying programming jobs there is.

It might not be the IT programming language and framework of today (Python togehter with the Django Framework holds that crown), but a lot of popular and up and coming tech startups still rely on good ol’ Ruby on Rails to build their apps.

But why Ruby on Rails?

I’m listing down here 5 reasons why I’m so inlove with Ruby on Rails.

1. Ruby is a beautiful programming language

Have you seen a code block of Ruby? It is very easy to read and understand among all programming languages. To illustrate, here are code examples from Ruby, C++, and PHP that all does the same thing.

Ruby

for i in (1..10)
  rno = Random::rand(100) + 1
  msg = case rno
        when 42
          "The ultimate result."
        when 1..10
          "Way too small."
        when 11..15, 19, 27
          "Sorry, too small"
        when 80..99
          "Way too large"
        when 100
          "TOPS\n Really way too large"
        else
          "Just wrong"
        end
  puts "Result: #{rno.to_s}: #{msg}"
end

C++

#include <iostream>
#include <string>
using namespace std;
int main(){
  for( int i = 1; i <= 10; i = i + 1 ) {
    int rno = rand() % 100 + 1;
    string msg;
    switch(rno) {
      case 42:
        msg = "The ultimate result.";
        break;
      case 1 ... 10:
        msg = "Way too small.";
        break;
      case 11 ... 15:
        msg = "Sorry, too small";
        break;
      case 19:
        msg = "Sorry, too small";
        break;
      case 27:
        msg = "Sorry, too small";
        break;
      case 80 ... 99:
        msg = "Way too large";
        break;
      case 100:
        msg = "TOPS\n Really way too large";
        break;
      default:
        msg = "Just wrong";
    }
    cout << "Result: " << rno << ": " << msg << endl;
  }
  return 0;
}

PHP

<?php
  for ( $i = 1; $i <= 10; $i++ ) {
    $rno = rand(1, 100);
    switch($rno) {
      case 42:
        $msg = "The ultimate result.";
        break;
      case ($rno >= 1 && $rno <= 10):
        $msg = "Way too small.";
        break;
      case ($rno >= 11 && $rno <= 15):
        $msg = "Sorry, too small";
        break;
      case 19:
        $msg = "Sorry, too small";
        break;
      case 27:
        $msg = "Sorry, too small";
        break;
      case ($rno >= 80 && $rno <= 99):
        $msg = "Way too large";
        break;
      case 100:
        $msg = "TOPS\n Really way too large";
        break;
      default:
        $msg = "Just wrong";
    }
    echo nl2br("Result: " . $rno . ": " . $msg . "\n");
  }
?>

Thanks Richard Praxedes for these code examples!

With these examples, we can see that you can do the same code from C++ and PHP in Ruy in a very short manner and very readable as well. And it saves a lot of time, having to code less.

2. RoR is Stable and Mature

Ruby on Rails is old. It’s about 14 years old. But, what that gives you is a very stable and mature platform that rarely breaks out of nowhere.

That age carries with it an excellent eco-system of well-maintained gems (plugins). From authentication, blogging engines, to payment gateway integrations, there are no deficiencies of gems for Ruby.

3. Strong focus on testing

Out of the box, Ruby on Rails has its own testing suite which you can use. The platform highly encourages you to do testing. But, the most popular testing framework for Ruby on Rails is RSpec which is very robust, self-documenting and really easy to read.

Here’s an example of an RSpec test case.

describe '#calc' do
    it 'returns a value' do
      result = subject.calc '5 x 5'
      expect(result).to eq 25
    end
  end

I think even non-coders would understand what this is testing out.

4. Convention over configuration

Because the Ruby community values convention over configuration, moving from project to project is very easy because everyone follows the same guidelines and standards.

Also, taking over a Ruby on Rails project is easier for a RoR developer, given that the previous developer followed the community coding conventions.

5. Community

Even though not as large as others, the Ruby community is one of the most active. There are also thousands of contributors maintaining the framework itself so it’ll live longer than the others.

Also, if you’re trying to look for answers, you will find the documentation of Ruby on Rails very detailed, and organized. Probably one of the better documentations for a platform that you will see.

With that said, there are more reasons to love Ruby on Rails, and reasons to hate on it as well. I’ll probably enumerate cons in another post.

Hello from React!

Now that we’ve discussed why Ruby on Rails, what is React JS anyway?

In a nutshell: React JS is a javascript library for creating interfaces.

Other javascript libraries similar to React are Angular, Vue, and Ember. Each of these libraries have their own advantages but I find React having the edge over the others.

Why React JS?

This is pretty easy to figure out, other than it being the hottest thing right now for web. Again, I’ll enumerate 5 reasons why I find React to be really useful.

1. Low learning curve

Unlike Ruby on Rails, which people have said has a steep learning curve, React is very easy to learn and understand. It won’t take you time to understand the different concepts about React since it is very light weight. I love their documentation and always find myslef referring back to it just to make sure what I’m doing is right.

2. Development Speed

Similar to Rails, React advocates for keeping everything DRY (Don’t repeat Yourself), thus the strong focus on Components. React is all about reusability of code. Converting even the smallest reusable code to Components is what made me really push for React. Code once, use it all over the place, change it in one place.

3. Components

React revolves around Components and it is a wonder. A Component may be a simple Function Component which you can pass props or attributes to, or it can be way more complex than that. A component can hold data in memory with the use of States, updates on the fly when actions are done, and has life cycle methods in it. These life cycle methods are basically instructions on what a component should do when it renders, or updates other than updating what it displays.

So, how does it look like?

Here’s a simple Sidebar Drawer function component which toggles on click. (Yeah, we know how long this would take to do in other libraries.)

import React, { useState } from 'react';
const links = [
  { name: 'Home', url: '/' },
  { name: 'Dashboard', url: '/dashboard' },
  { name: 'My Profile', url: '/dashboard/my-profile' },
  { name: 'Settings', url: '/dashboard/settings' },
];
const Drawer = () => {
  const [visible, setVisible] = useState(false);
  return (
    <>
      <button onClick={() => setVisible(!visible)}>Toggle Drawer</button>
      <div className={`drawer ${visible && 'visible'}`}>
        <div className="vertical-nav">
          {links.map(link => (
            <a href={link.url}>{link.name}</a>
          ))}
        </div>
      </div>
    </>
  );
};
export default Drawer;

That’s how short the code is to make a Drawer. (Of course this doesn’t include the styling yet.)

4. Redux

Redux is one of the best state management packages out there. It integrates with all javascript libraries. Redux integrates seamlessly with React and is a breeze to use. Although, there is a high learning curve learning Redux, everyone learning React should atleast know the general concepts of Redux.

5. React Native

The best part about React, React Native. It is a javascript framework for building cross-platform native apps using React JS. If you’re a web developer who has a good foundation of Javascript and you want to do mobile apps, React Native is for you. Learning React JS first is a good foundation for React Native as it is absolutely the same thing. (Except that you can’t use any HTML tags in React Native.)

This is Facebook’s brainchild, so there is no doubt about the support it gets. It is very well maintained, and there are just a flurry of updates to improve and make React even more better for everyone.

Putting it all together

Ruby on Rails and React JS shares similar concepts in keeping everything DRY, and code reusability which makes using both together a no-brainer. Also, integrating React components with Rails is as easy as:

-- sample of an .html.erb layout
-- other html tags
<body>
  <header>
    <%= react_component "Drawer", prerender: true %>
  </header>
</body>

In my opinion, using two very efficient frameworks that lets you code less, and do more is absolutely the way to go.

Marc Dagatan
Chief Technical Officer
FullSuite

• Dual booting your Windows laptop with Ubuntu →