How to setup ES6 in your Rails application

Tue, 20 Sep 2016 13:00:00 +0000

ECMAScript6(ES6) is the new version of JavaScript language, with a lot of new and shinny features. Lets take a look at some of them.

Classes

For some a long waited feature in Js, for others worst nightmare, classes. Similar as in your other favourite languages as ruby, java, etc… you can now create classes in Js, like this:

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get name() {
    return this.firstName + " " + this.lastName;
  }

  set name(name) {
    var names = name.split(" ");

    this.firstName = names[0];
    this.lastName = names[1];
  }
}

var blake = new Person("Darth", "Vader");
blake.name = "Light Vader"
console.log(blake.name); // => Light Vader

Interpolation

ES6 finally deliver more powerful string syntax in JavaScript. One of those powerful new features is String interpolation which is awkwardly similar to Ruby String interpolation….well stealing from the best is always good thing to do :)
To use interpolation in ES6 you surround string in a backticks (``) instead of regular quotes (“”)

ES5 way:

var name = 'Vader'
console.log("Your name is: " + name)

ES6 way:

var name = 'Vader'
console.log(`Your name is: ${name}`)

Fat Arrows

Another appealing feature in ES6: fat arrows. Fat arrows allow us to bind a function to the current value of this. First, let’s take a look at how we can handle this without a fat arrow.

With ES5 we have to keep a reference to the current value of this when defining the function:

var self = this;

$("button").on("click", function() {
  // do something with self
});

In ES6 you could simply use fat arrows to achive same thing

$("button").on("click", () => {
  // do something with this
});

Default arguments

You can also set default values to function parameters now, just as you would expect

ES5 way:

"use strict";

var hello = function hello() {
  var name = arguments.length <= 0 || arguments[0] === undefined ? "Vader" : arguments[0];

  alert(name);
};

ES6 way:

var hello = function(name = "Vader") {
  alert(name);
}

Splats

Splats, allow you to collect additional arguments passed to your function as an array. ES6 refers to them as rest arguments

ES5 way:

"use strict";

var ingredients = function awards(first, second) {
  var salt = first;
  var peper = second;

  for (var _len = arguments.length, others = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
    others[_key - 2] = arguments[_key];
  }

  var love = others;
};

ES6 way:

var ingredients = function(first, second, ...others) {
  var salt = first;
  var peper = second;
  var love = others;
}

These are just some of hounorable mentions and by all means not the only ones, here is more detailed list.

Current state and browsers

Browsers are implementing new features in a fast pace, but it would still take some time until we could actually use ES6. Maybe years. Fortunately, we have Babel.js. We can use all these new features today without worrying with browser compatibility.

Babel.js is just a pre-processor. You write code that uses these new features, which will be exported as code that browsers can understand, even those that don’t fully understand ES6.

Setup Rails

Finally, to use ES6 in Rails now I will add gem sprockets-es6. sprockets-es6 is Sprockets transformer that converts ES6 code into vanilla ES5 with Babel.js, so I need to add babel-transpiler gem also.

Gemfile

gem 'sprockets', '>= 3.0.0'
gem 'sprockets-es6'
gem 'babel-transpiler'

Note for this to work you must use at least sprockets 3. ES6 will ship by default with sprockets 4 in the future and hence by default with Rails, but until then you need to add ES6 support manually.

After adding required gems, we now have ability to write ES6 in our Rails app, add following file and try it!

application/assets/javascripts/hello.js.es6

var fn = (name) => {
	console.log(`Hello %{name}`);
}

fn('Vader');

Note you must add es6 extension to you js files

Start rails app an open browsver console and you should see console message!

R’n’R

Monkey patching in Rails

Sat, 16 Jul 2016 13:00:00 +0000

Monkey Patching. It’s amazing. One of the most powerful Ruby features. You have ability to open any ruby class and change how it works, add new methods, basically you can do almost anything. But, as we all now from the great power comes great responsibility, and putting the power in the human hands is usually not so great idea.

Let’s see how to use Monkey Patching in Rails, where to store the code, and how to make you life easier in 1 year from now when things stop to work because of the patch you/someone wrote.

The problem and example app

Surprisingly, 90% of Rails application I was involved in required ability to check if String value is a Number. Let’s say we have analyses table which stores name, and the value of analysis done on the blood sample.

Some of the values can be Number(ex: 1.5, 2.45, etc..) some of them just plain String(positive, negative, etc...). But we will go easiest route in this example and store each result in value column which is String.

Let’s roll!

rails new sampler # create new rails application
bin/rails g model analysis name value # create analysis model
bin/rake db:migrate # create the table

Now, insert some test data into the analyses table:

bin/rails console
Analysis.create(name: "Leukocite", value: "7.56")
Analysis.create(name: "Blood color", value: "blue")  # watch it vampire!!!

Since in this fictive application I need ability to figure out if the value of Analysis is string or number, I need a way to check if String is valid Number. I will open String class and add method is_number? Which will check if string is number (NOTE: not the only and certainly not the fastest way to resolve the problem but for the sake of this post, I will do it).

class String
  def is_number?
    true if Float(self) rescue false
  end
end

Now I can call is_number? On each string value in my app,like this

Analysis.first.value.is_number?  ⇒ true
Analysis.last.value.is_number?   ⇒ false
"ok".is_number?                  ⇒ false

Well, not so fast! How to add this in Rails app and where to add it ?

Put them in a module

When you monkey patch a class, don’t just reopen the class and shove your patch into it:

class String
  def is_number?
    true if Float(string) rescue false
  end
end

Why not?

If two libraries monkey-patch the same method, you won’t be able to tell.
If there’s an error, it’ll look like the error happened inside String(While technically true, it’s not that helpful).
It’s harder to turn off your monkey patches.
If you, say, forgot to require ‘string’ before running this monkey patch, you’ll accidentally redefine String instead of patching it.

Instead, put monkey patches in a module:

module CoreExtensions
  module String
    module Number
      def is_number?
        true if Float(self) rescue false
      end
    end
  end
end

This way, you can organize related monkey patches together. When there’s an error, it’s clear exactly where the problem code came from. And you can include them one group at a time:

# Actually monkey-patch String, you can add this to Rails initializers
String.include CoreExtensions::String::Number

Keep them togeather & ogranized

When you monkey patch core Ruby classes you are add/change Ruby API. You need a way to quickly find and learn those changes when you jump in codebase.

I mostly follow Rails’ monkey patching convention. Patches go into lib/core_extensions/class_name/group.rb or lib/core_ext/class_name/group.rb.

So this patch:

module CoreExtensions
  module String
    module Number
      def is_number?
        true if Float(self) rescue false
      end
    end
  end
end

will go into: lib/core_extensions/string/number.rb

Now you/new developers can easily jump in lib/core_extensions and see all of the monkey patching adventures :)

Conclusion

Always think through when you want to do monkey patching, is there better way. In this example definitely there is, we could store results differently not everything in one string column. But this is just the naive example :)

If you go for the big guns it is nice to know how to use them.

Rails raw vs html_safe

Sat, 04 Jun 2016 13:00:00 +0000

Rails has some neat security protections out of the box. Rails will automatically escape html using html_escape method under the box, hence preventing execution of malicious code. But, in a real world scenario there are a lot of time where you want to render html that is not escaped. In that scenario two of the most used methods are raw and html_safe. In this article lets explore difference between this two methods.

What is XSS(Cross-Site Scripting) ?

XSS allows an attacker to execute scripts in the security context of your web application. The OWASP Top 10 of most frequent vulnerabilities lists it as #3, with other types of injection on #1 now.

You can read more about it here!

The playground app

rails new welcome
cd welcome
rails g controller welcome index
touch app/models/greeting.rb

I created basic rails app called welcome and added welcome controller with index view. Also, I added simple class Greeting in our models dir, this class I’m going to use for showing basic greeting message.

OK, still a few things to setup:

1.Add root route to config/routes.rb and delete everything else from class (thanks Rails 5 for removing this bloating comments in generated files :))

Rails.application.routes.draw do
  root "welcome#index"
end

2.Add greeting message to Greeting model

class Greeting
  def message
   "Welcome jedi master"
  end
end

3.Add Greeting model instance variable to WelcomeController

class WelcomeController < ApplicationController
  def index
    @welcome = Greeting.new
  end
end

4.Show message on the root page (welcomes/index page)

<p><%= @welcome.message %></p>

Finally run your rails server got to localhost:3000, and you will see following rendered on root page.

Rendering html in view

Now lets emphasis Jedi Master title in our greeting message

class Greeting
  def message
  "Welcome <strong>jedi master</strong>"
  end
end

Refresh your page and you will see that rails automatically escaped your content.

I trust my content don’t escape it Rails

Ok, you can used following methods to tell rails not to escape your content, both will produce same output

in app/views/welcomes/index.html.erb

<p><%= @welcome.message.html_safe %></p>

<p><%= raw @welcome.message %></p>

me:
Look yoda master I’m giving big respect by greeting all jedis properly!

yooda:
Why do you have two different methods for the same thing. Which path is the right path to choose, young apprentice ?

Rails raw() vs html_safe() method

html_safe() returns instance of SafeBuffer which inherits from String overriding +, concat and << so that:

If the string is safe (another SafeBuffer), the buffer concatenates it directly
If the string is unsafe (a plain String), the buffer escapes it first, then concatenates it

You can look at the implementation here

raw() is a wrapper around html_safe() that forces the input to String and then calls html_safe() on it. It’s also the case that raw() is a helper in a module

Basically, you can simulate raw in out example like this

class Greeting
  def message
    "Welcome <strong>jedi master</strong>".to_s.html_safe
  end
end

The main reason to use raw instead of html_safe if when content can be nil.

If you call html_safe on Nill class, like this

nil.html_safe

app fill fail saying undefined method `html_safe' for nil:NilClass.

But if you call raw on Nil class, app will not fail it will return instance of empty string, since calling nil.to_s returns new empty_string ""

Summary

If a plain String is passed into a <%= %>, Rails always escapes it
If a SafeBuffer is passed into a <%= %>, Rails does not escape it. To get a SafeBuffer from a String, call html_safe on it. The XSS system has a very small performance impact on this case, limited to a guard calling the html_safe? method
If you use the raw helper in a <%= %>, Rails detects it at compile-time of the template, resulting in zero performance impact from the XSS system on that concatenation
Rails does not escape any part of a template that is not in an ERB tag. Because Rails handles this at template compile-time, this results in zero performance impact from the XSS system on these concatenations
If you have string which can be nil consider using raw() because html_safe() will throw an error

Be carefull not to let sits inject malicouse dark force to young jedis

Work with environment varaibles easier in Rails

Sun, 24 Apr 2016 12:40:00 +0000

Face it, if you are working with real world rails project you have a lot of environment variables. Third party service keys, database, etc…
This was always pain for me because I had to set this through terminal (I always forget process how to do this, so I need to spend some time on google to check how to set ENV variables in specific OS).

Recently I came a cross a very sexy technique for setting ENV variables in you rails app, and process is quite trivial.

Add local_env.yml file to rails config/ dir
touch config/local_env.yml

in this yml file add all of yours ENV variables, for example

AWS_ACCESS_KEY: '<placeholder>'
STRIPE_KEY: '<placeholder>'
SLACK_KEY: '<placeholder>'

Next step is to load all these yml keys/value pairs into ENV variables when your rails app is starting.

Add following in config/application.rb

config.before_configuration do
  env_file = File.join(Rails.root, "config", "local_env.yml")
  YAML.load(File.open(env_file)).each do |key, value|
    ENV[key.to_s] = value
  end if File.exist?(env_file)
end

And voalla…magic….you are handling all of you app specific ENV variables through simple rails yml file.

NOTE: you will also want to add this file to .gitignore.

If you need some more complex ENV variable manipulation you can also take a look at Figaro gem.

Depend on Behavior, Not Data

Sun, 10 Apr 2016 16:00:00 +0000

Since most of us write object-oriented code, we are creating classes a lot of classes.

Why?

We need place to store behavior and data that belongs together. Hence the classes! Nothing special but behavior and data together on “one” place.

Behavior is captured in methods and invoked by sending messages. When you create classes that have a single responsibility, every tiny bit of behavior lives in one and only one place. The phrase “Don’t Repeat Yourself ” (DRY) is a shortcut for this idea. DRY code tolerates change because any change in behavior can be made by changing code in just one place.

In addition to behavior, objects often contain data. Data is held in an instance variable and can be anything from a simple string or a complex hash. Data can be accessed in one of two ways; you can refer directly to the instance variable or you can wrap the instance variable in an accessor method.

Let us create a class that represents Person. In our app we want Person responding to bmi(Body mass index) message.

Body mass index (BMI) is a measure of body fat based on height and weight that applies to adult men and women.

Formula for calculating BMI is:

BMI = ( Weight in Kilograms / ( Height in Meters x Height in Meters ) )

Now we can use calculate Person BMI easily

curry = Person.new(1.90, 85)
curry.bmi ====> 23.5

Hide instance variables

Always wrap instance variables in accessor methods instead of directly referring to variables. Hide the variables, even from the class that defines them, by wrapping them in methods. Ruby provides attr_reader as an easy way to create the encapsulating methods:

Using attr_reader caused Ruby to create simple wrapper methods for the variables. Here’s a virtual representation of the one it created for weight:

This weight method is now the only place in the code that understands what weight means. Weight becomes the result of a message send. Implementing this method changes weight from data (which is referenced all over) to behavior (which is defined once).

If the @weight instance variable is referred to ten times and it suddenly needs to be adjusted, the code will need many changes. However, if @weight is wrapped in a method, you can change what weight means by implementing your own version of the method. Your new method might be smart and figure out that everybody lies about their weight :)

  # default implementation via attr_reader
  def weight
    weight * expected_lie_factor
  end

This example is arguably trivial and could have been done by making one change to the value of the instance variable. However, you can never be sure that you won’t eventually need something more complex (our methods is not that smart, right now). But this adjustment is a simple behavior change when done in a method, but a code destroying mess when applied to a bunch of instance variable references.

You should hide data from yourself. Doing so protects the code from being affected by unexpected changes. Data very often has behavior that you don’t yet know about. Send messages to access variables, even if you think of them as data.

Configure rspec to work with rails.

Sat, 19 Mar 2016 12:00:00 +0000

Lots of people tend to use RSpec when working with rails instead default MiniTest. RSpec isn’t included in a default Rails application, and there is boring process configuring RSpec if you are RSpec user, unless you have configured some custom templates or you are using some custom Rails app generators. Suspenders is great example of custom generator which come with Rspec configured by default.

Lets assume that you want to configure RSpec from ground up, and there is no any custom generators magic included :)

Creating the new app:

rails new cool_app -T

-T option tells default Rails generator to skip creating test directory. If you already generated app with MiniTest, just delete test directory from Rails app and your good to go.

Installing gems:

group :development, :test do
  gem 'byebug'
  gem "rspec-rails"
end

group :test do
  gem "capybara"
  gem "database_cleaner"
  gem "selenium-webdriver"
end

rspec-rails is used in both the development and test environments. Specifically, they are used in development by generators we’ll be utilizing shortly. The remaining gems are only used when you actually run your specs, so they’re not necessary to load in development. This also ensures that gems used solely for generating code or running tests aren’t installed in your production environment when you deploy to your server.

Run bundle install from command line to install newly added gems.

What are these gems that we added to the gem file:

rspec-rails includes RSpec itself in a wrapper to add some extra Rails-specific features.
capybara makes it easy to programatically simulate your users’ interactions with your web application.
database_cleaner helps make sure each spec run in RSpec begins with a clean slate, by–you guessed it–cleaning data from the test database.
selenium-webdriver will let us test JavaScript-based browser interactions with Capybara.

RSpec configuration:

To add some basic RSpec configuration run following command line directive

bin/rails generate rspec:install

You should see following console output

create .rspec
create spec
create spec/spec_helper.rb
create spec/rails_helper.rb

Rspec creates .rspec configuration file, spec/ directory where all new specs are going to live, and two helper files spec_helper and rails_helper where we will further customize how RSpec will interact with our code.

Next change RSpec’s output from the default format to the easy-to-read documentation format. This makes it easier to see which specs are passing and which are failing as your suite runs. It also provides an attractive outline of your specs for–you guessed it–documentation purposes. Open .rspec and add the following lines:

--format documentation

Finally, let’s install a binstub for RSpec:

bundle binstubs rspec-core

Now when you run bin/rspec or bin/rake, your sould see message simillar to this in console output:

0 examples, 0 faliures

Cool rspec is ready to roll !!

Cleaning database:

Now everythings works fine, but here is the problem, if you create some new database rows in one spec, you test database is not going to clean/destroy those rows after spec finishes, therfore violating one of the 4 main testing phases:

Setup the system under test (usually a class, object, or method) is set up.
Exercise the system under test is executed.
Verify the result of the exercise is verified against the developer’s expectations.
Teardown the system under test is reset to its pre-setup state.

Main problem is not violating Teardown pahse, but the living hell of problems you will get into if there is no some sort of databse cleaning strategy.

database_cleaner gem to the rescue!

Easilly we will setup stategy that cleans database after every spec, so we begin each spec with clean slate database.

Inside spec/ directory create directory support/ and add database_cleaner.rb file with following content:

RSpec.configure do |config|
  config.before(:suite) do
    DatabaseCleaner.clean_with(:deletion)
  end

  config.before(:each) do
    DatabaseCleaner.strategy = :transaction
  end

  config.before(:each, js: true) do
    DatabaseCleaner.strategy = :deletion
  end

  config.before(:each) do
    DatabaseCleaner.start
  end

  config.after(:each) do
    DatabaseCleaner.clean
  end
end

also, require "databse_cleaner" in rails_helper and uncomment this line of code (for RSpec to be able to pick support files):

Dir[Rails.root.join('spec/support/**/*.rb')].each { |f| require f }

There is a lot of going on in the database_cleaner setup which is out of the scope for this post, you should read more here.

Testing javascript interaction:

If you have test with javascript interaction (usually ingeration/feature) tests, just add js: true option to yout spec (that is why I added selenium-webdriver in Gem file), as in following example:

require "rails_helper"

scenario "Some cool scenario" do
 feature "includes JS magic", js: true do
   # do your magic here
 end
end

Happy testing, here is the demo repo!

Formulaic, testing forms.Easier.

Sat, 19 Mar 2016 12:00:00 +0000

I’ve been recently playing with thoughtbots Formulaic gem. I was frustrated and bored with the way how form in rails are tested. Luckily Formulaic reduced my frustration and boredom.

Life is good again :)

The problem

Let’s create rails post scaffold, for the n time (n tends to infinity).

  bin/rails generate scaffold post title body:text
   bin/rake db:migrate

Ok, now let’s write an integration test for adding a new post

require 'rails_helper'

feature 'User adds a new post' do
  scenario 'successfully, when title and body is entered'  do
    visit new_post_path

    fill_in 'Title', with: 'Strange kind of women'
    fill_in 'Body', with: 'The kind that gets written down in history'
    click_on 'Create Post'

    expect(page).to have_content 'Post was successfully created'
  end
end

When written on small test project like this, of course this is not too much of a problem, but in real world rails projects consisting of hundreds of forms this pattern of filling and exercising forms becomes pain in ass.
At least for me.

Also, I like to separate my test phases(setup, exercise, verify, teardown) with a new line, but writing tests like this I always ask myself does fill form fields belong to setup or exercise phase ?

Let’s give Formulaic a try!

First, in Gemfile add

gem 'formulaic', group: :test
bundle install

also, for Formulaic to work with rspec add following in rails_helper.rb

RSpec.configure do |config|
  config.include Formulaic::Dsl, type: :feature
end

Cool! Time to rewrite the previous test.

require 'rails_helper'

feature 'User adds a new post' do
  scenario 'successfully, when title and body is entered'  do
    visit new_post_path

    fill_form_and_submit(:post, 
      { title: 'Strange kind of women',
        body: 'The kind that gets written down in history' })

    expect(page).to have_content 'Post was successfully created'
  end
end

Much nicer, and hey, I don’t have to think in which phase filling fields belongs to.

If you are using fctory_girl this test becomes even more cooler:

require 'rails_helper'

feature 'User adds a new post' do
  scenario 'successfully, when title and body is entered'  do
    visit new_post_path

    fill_form_and_submit(:post, attributes_for(:post))

    expect(page).to have_content 'Post was successfully created'
  end
end

Caveats

Formulaic relies pretty heavily on the assumption that your application is using translations for SimpleForm and input helpers, using the simple_form.labels.<model>.<attribute> and helpers.submit.<model>.<action> conventions.

You can still use Formulaic by using strings as keys instead of symbols, which it knows to pass directly to fill_in rather than trying to find a translation. You’ll need to find submit buttons yourself since submit is a thin wrapper around I18n.t.

So, in our example I have to add some translations for this to work, but hey you will do that anyway.

helpers:
  submit:
    post:
      create: 'Create Post'

Also, formulaic assumes your forms don’t use AJAX, setting the wait time to 0. This can be configured using:

Formulaic.default_wait_time = 5

If you’ve read this whole post, I’m sure you have irresistible desire to listen to Deep Purple’s Strange Kind of Woman.

[Indulge yourself]

Capybara, save_and_open_page for the lazy!

Sat, 05 Mar 2016 14:00:00 +0000

When I’m writting Rails integration tests with capybara, every once in a while there is something not working as I wish. When misfourtune occures, usually I want to see how my rendered page looks like save_and_open_page to the rescue!

Lets for the moment imagine that we are testing site navigation links. When Guest clicks on About navigation link, he/she should see About page.

describe "Guest sees the about page" do
  it "when about page link is clicked" do
    visit root_path

    click_link "About"

    expect(page).to have_css ".title", text: "About page"
  end
end

After running test, it is failling

Hmm….that is strange! Lets see what my page looks like, just add save_and_open_page method call!

describe "Guest sees the about page" do
  it "when about page link is clicked" do
    visit root_path

    click_link "About"

    save_and_open_page
    expect(page).to have_css ".title", text: "About page"
  end
end

Capybara will open browser and render my current page. Sueprise….surprise, there is no about link rendered.

Thanks save_and_open_page you just save me a lot of the debugging!

Only thing that bugs me with save_and_open_page is size of method name, I’m just lazy typing it. It would be a lot nicer if I could just type page!.

Well… I could, lest write small Capybara extenstion and add it to spec/support directory.

Now I could just type page!

describe "Guest sees the about page" do
  it "when about page link is clicked" do
    visit root_path

    click_link "About"

    page!
    expect(page).to have_css ".title", text: "About page"
  end
end