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?

Javacsript

Created in 10 days

Monopoly on the front end

Seen as a toy language, had quirks

The bar has been raised...

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
MAX_GUESTS = 30


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


# 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}"
end


# functions
def eat(food_name, food_list)
  if(food_list.index(food_name))
    puts "Enjoy your #{food_name}"
  else
    puts "Sorry, no more: #{food_name}"
  end
end

eat 'Muffin', buffet_food  # Enjoy your Muffin


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

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]
  end

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

end

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

Javacsript inheritance


class Singer extends Guest {

  constructor(options={}) {
    super(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]
  end

  def sing
    puts 'la la laaa'
  end

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

end

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