Where Rails meets the Front End

(Re-)introducing Javascript from a Ruby perspective

Created by James Riley / @mrjamesriley

James Riley

Portuguese speaking, guitar playing, cat loving.. uncle!

Full-stack developer at SupaDupa.me

The Gameplan

What is Javascript, how does it compare to Ruby?


Created in 10 days

Monopoly on the front end

Seen as a toy language, had quirks

The bar has been raised...

websites vs apps

The use cases of Javascript have grown

SupaDupa Pages

SupaDupa Products

EcmaScript 6! (ES6)

The latest version of Javascript

For Complex applications

To adopt defacto standards

ES6 available today!

Rails sprockets-es6 Gem

Try it out at BabelJS.io

Brower support will take years.

Yay for transpilers!

Javascript basics

// variables needs to be declared
let partyHost  = 'James';

// supports arithmetic and dates
let guestCount = 10 + 5;
let partyDate  = new Date(2015, 8, 25);

// constants
const MAX_GUESTS = 30;

// conditionals
if(guestCount >= MAX_GUESTS) {
  console.log('No more guests allowed');

// arrays
let buffet_food = ['Muffins', 'Biscuits'];

// object
let muffin = {
  glutenFree: false,
  flavour: 'Blueberry',
  expiry: 2018

Ruby basics

# variables
party_host  = 'James'

# arithmetic and dates
guest_count = 10 + 5;
party_date  = Date.new(2015, 8, 25)

# constants

# conditionals
if guest_count >= MAX_GUESTS
  puts 'No more guests allowed'

# arrays
buffet_food = ['Muffins', 'Biscuits']

# hashes
muffin = {
  glutenFree: false,
  flavour: 'Blueberry',
  expiry: 2018

more Javascript

// loops
for food in buffetFood {
  console.log(`There shall be: ${food}`);

// functions
function eat(foodName, foodList) {
  if(foodList.indexOf(foodName) != -1) {
    console.log(`Enjoy your ${foodName}`);
  } else {
    console.log(`Sorry, no more: ${foodName}`)

eat('Muffin', buffetFood) // Enjoy your Muffin

// rest parameters
function startParty(location, ...guests) {
  console.log(`${guests.length} guests!`);

startParty('London', 'Alice', 'Bob');
// 2 guests!
more Ruby

# loops
for food in buffet_food do
  puts "There shall be: #{food}"

# functions
def eat(food_name, food_list)
    puts "Enjoy your #{food_name}"
    puts "Sorry, no more: #{food_name}"

eat 'Muffin', buffet_food  # Enjoy your Muffin

# splat operator
def startParty(location, *guests)
  puts "#{guests.length} guests!"

startParty('London', 'Alice', 'Bob')
# 2 guests!

Javacsript classes

class Guest {

 // constructor function with default options
 constructor(options={}) {
   this.firstName = options.firstName;
   this.lastName  = options.lastName;

 // method with string interpolation
 introduce() {
   console.log(`I am ${this.firstName}`);


var sam = new Guest({
  firstName: 'Sam',
  lastName: 'Phillips'

Ruby classes

class Guest

  # constructor function with default options
  def initialize(options={})
    @first_name = options[:first_name]
    @last_name  = options[:last_name]

  # instance method with string interpolation
  def introduce
    "Hello, my name is: #{@first_name}"


sam = Guest.new({
  first_name: 'Sam',
  last_name: 'Phillips'

Javacsript inheritance

class Singer extends Guest {

  constructor(options={}) {
    this.genre = options.genre;

  sing() {
    console.log('la la laaa');

  static find_by_name(name) {
    // retrieves singers matching the name given


var beyonce = new Singer({
  firstName: 'Beyonce',
  Lastname:  'Knowles',
  genre: 'Pop'

Ruby inheritance

class Singer < Guest

  def initialize(options={})
    super options
    @genre = options[:genre]

  def sing
    puts 'la la laaa'

  def self.find_by_name(name)
    # retrieves singers matching the name given


beyonce = Singer.new({
  first_name: 'Beyonce',
  last_name:  'Knowles',
  genre: 'Pop'

... so how do they differ?

Functions as a "first class object"

// assigning a function to a variable
var dance = function() {
  console.log('Shapes are being thrown');

// passing a function as an argument
document.addEventListener('click', function() {
  console.log('I have been clicked!');

Makes JS suitable for Event based programming

How else do they differ?

Advanced features of do differ:

  • Ruby has Meta-programming
  • Javascript has Generators

...but not essential

Bonus: Javascript makes you a Cross-app Developer!


People: Kyle Simpson

Books: Eloquent Javascript, Understanding EcmaScript 6

Websites: CodeSchool, CodeAcademy,
Mozilla Developer Network

Now go create something...

Thank you for listening!

Created by James Riley / @mrjamesriley