• TL;DR
  • Ruby
  • Rails
  • Summary
• Difference between any? and empty?
• Difference between empty? and blank?
• Difference between blank? and present?
• The presence method
• [Bonus] Logical Operators
• Sample Code
  • Example
  • Results

TL;DR

Ruby

Rails

Summary

Difference between any? and empty?

any? is defined in the mixin module Enumerable to check if the enumberable contains the values evaluated from a given block. When no block is given, it returns true if the object contains a value other than false or nil.

Since Array, Hash both include the Enumerable module, both any? and empty? methods become available.

• For Hashes, any? is an antonym of empty?, i.e. {}.any? is false and {}.empty? is true.
• For Arrays, any? is almost the antonym of empty?, except for nil and false, that [nil, false].any? is false, while [nil, false].empty? is also false.

Difference between empty? and blank?

empty? is simply a Ruby method defined on certain classes, e.g. Array, Hash, String, while blank?/present? are Ruby on Rails methods defined in ActiveSupport, which can also be installed independently with Rails.

By definition, blank? includes:

• nil
• false
• empty/whitespace strings
• empty arrays, hashes
• any other objects with object.empty? is true

Difference between blank? and present?

present? is just a negation of blank?.

# File activesupport/lib/active_support/core_ext/object/blank.rb, line 25
def present?
  !blank?
end

The presence method

Defined together with present?, presence method returns the receiver if it's present otherwise returns nil.

object.presence is equivalent to object.present? ? object : nil.

For example, something like

def display_name
  return user.name if user.name.present?

  "Demo User"
end

becomes

def display_name
  user.name.presence || "Demo User"
end

[Bonus] Logical Operators

nil && true # => nil
true && nil # => nil
nil || "" # => ""
nil || true # => true
0 && 1.25 # => 1.25
0 || 1.25 # => 0

Sample Code

Example

require "active_support"
require "active_support/core_ext/object/blank"

VALUES = [
  nil, false, true, "", "\n", "Hello", 0, 1.25, [], [nil, false], [1, 2], {}, { colour: nil }
]

puts `ruby -v`
puts `rails -v`
puts

puts "All Values: #{VALUES}"
puts

puts "Truthy: #{VALUES.select { |v| !!v == true } }"
puts "Falsey: #{VALUES.select { |v| !!v == false } }"
puts "nil?: #{VALUES.select { |v| v.nil? == true } }"
puts "any?: #{VALUES.select { |v| v.respond_to?(:any?) && v.any? == true } }"
puts "empty?: #{VALUES.select { |v| v.respond_to?(:empty?) && v.empty? == true } }"

puts

puts "blank?: #{VALUES.select { |v| v.blank? == true } }"
puts "present?: #{VALUES.select { |v| v.present? == true } }"

Results

ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [x86_64-darwin18]
Rails 6.0.3.5

All Values: nil, false, true, "", "\n", "Hello", 0, 1.25, [], [nil, false], [1, 2], {}, {:colour=>nil}

Truthy: true, "", "\n", "Hello", 0, 1.25, [], [nil, false], [1, 2], {}, {:colour=>nil}
Falsey: nil, false
nil?: nil
any?: [1, 2], {:colour=>nil}
empty?: "", [], {}

blank?: nil, false, "", "\n", [], {}
present?: true, "Hello", 0, 1.25, [nil, false], [1, 2], {:colour=>nil}

TL;DR

                                user     system       total           real
transform_keys:             6.994507    0.014749    7.009256  (  7.022791)
using_each_with_object:    11.424220    0.041001   11.465221  ( 11.511807)
symbolize_keys:             7.628721    0.018207    7.646928  (  7.665882)

with_indifferent_access:  107.970348    0.446824  108.417172  (109.052287)
deep_symbolize_keys:       95.842033    0.551120   96.393153  ( 97.145661)

Shallow Symbolizing

Shallow symbolizing means it will only convert the string keys of a hash to symbols without converting the keys in the nested hashes.

Ruby < 2.5

Before Ruby 2.5, there are no handy methods in Ruby to convert string hash keys to symbols. But the enumberable method each_with_object can be used to achieve it.

{"dimensions" => { "height" => 10 } }.each_with_object({}) { |(k,v), h| h[k.to_sym] = v }

Ruby >= 2.5

Since Ruby 2.5, a new method transform_keys has been added to Hash class, which can be used to convert string keys to symbols.

https://ruby-doc.org/core-2.5.0/Hash.html#method-i-transform_keys

{"dimensions" => { "height" => 10 } }.transform_keys(&:to_sym)

Ruby on Rails

Ruby on Rails' active support provides symbolize_keys on Hash class to symbolize keys.

{"dimensions" => { "height" => 10 } }.symbolize_keys

Deep Symbolizing

Ruby on Rails' active_support provides two ways of achieving this.

with_indifferent_access

https://api.rubyonrails.org/classes/ActiveSupport/HashWithIndifferentAccess.html

It converts the hash keys (nested) so that strings and hashes are considered same.

hash = {"dimensions" => { "height" => 10 } }.with_indifferent_access
# hash.dig(:dimensions, :height) # => 10
# hash.dig('dimensions', 'height') # => 10

deep_symbolize_keys

https://apidock.com/rails/v6.0.0/Hash/deep_symbolize_keys

It is similar to symbolize_keys method, but it includes the keys from the root hash and from all nested hashes and arrays.

Unlike with_indifferent_access, once converted, the keys in the new hash can no longer be retrieved via original string format.

hash = {"dimensions" => { "height" => 10 } }.deep_symbolize_keys
# hash.dig(:dimensions, :height) # => 10
# hash.dig('dimensions', 'height') # => nil

Benchmarking

Code

require 'benchmark'
require 'active_support/all'

TIMES = 50_000_000
HASH = {
  "colour" => "red",
  "sizes" => [
    "measurements_1" => {
      "height" => 1,
      "length" => 2,
      "depth" => 3,
    },
    "measurements_2" => {
      "height" => 10,
      "length" => 20,
      "depth" => 30,
    }
  ]
}

Benchmark.bm do |x|
  x.report("transform_keys:") { TIMES.times { HASH.transform_keys(&:to_sym) } }
  x.report("using_each_with_object:") { TIMES.times { HASH.each_with_object({}) { |(k,v), h| h[k.to_sym] = v } } }
  x.report("symbolize_keys:") { TIMES.times { HASH.symbolize_keys } }
  x.report("with_indifferent_access:") { TIMES.times { HASH.with_indifferent_access } }
  x.report("deep_symbolize_keys:") { TIMES.times { HASH.deep_symbolize_keys } }
end

Results

                                user     system       total           real
transform_keys:             6.994507    0.014749    7.009256  (  7.022791)
using_each_with_object:    11.424220    0.041001   11.465221  ( 11.511807)
symbolize_keys:             7.628721    0.018207    7.646928  (  7.665882)

with_indifferent_access:  107.970348    0.446824  108.417172  (109.052287)
deep_symbolize_keys:       95.842033    0.551120   96.393153  ( 97.145661)

The official guides or How to GraphQL website would be a good starting point.

The Basics

Here is a basic sign up mutation that handles the sign up process:

class Mutations::SignUp < Mutations::BaseMutation
  null true

  argument :email, String, required: true
  argument :password, String, required: true

  field :token, String, null: true
  field :user, Types::UserType, null: true

  def resolve(email:, password:)
    # create your user with passed in email and password.
  end
end

The Problem

But what if it's a third party client calling this mutation endpoint with a lot of parameters?

Here is an example (the parameters are illustrative only, which may not make total sense).

Mutation's resolve function would now have 10+ parameters.

class Mutations::SignUp < Mutations::BaseMutation
  null true

  argument :email, String, required: true
  argument :password, String, required: true
  argument :expires_at, GraphQL::Types::BigInt, required: true
  argument :expires_in, GraphQL::Types::BigInt, required: true
  argument :resource_state, Int, required: true
  argument :username, String, required: false
  argument :firstname, String, required: true
  argument :lastname, String, required: true
  argument :sex, String, required: false
  argument :active_till, GraphQL::Types::ISO8601DateTime, required: true

  field :token, String, null: true
  field :user, Types::UserType, null: true

  def resolve(email:, password:, expires_at:, expires_in:, resource_state:,
              username:, firstname:, lastname:, lastname:, sex:, active_till:)
    # create your user with data passed in.
  end
end

The Solutions

Use double splat operator (**)

Ruby 2.0 introduced double splat operator captures all keyword arguments.

class Mutations::SignUp < Mutations::BaseMutation
  null true

  argument :email, String, required: true
  argument :password, String, required: true
  argument :expires_at, GraphQL::Types::BigInt, required: true
  argument :expires_in, GraphQL::Types::BigInt, required: true
  argument :resource_state, Int, required: true
  argument :username, String, required: false
  argument :firstname, String, required: true
  argument :lastname, String, required: true
  argument :sex, String, required: false
  argument :active_till, GraphQL::Types::ISO8601DateTime, required: true

  field :token, String, null: true
  field :user, Types::UserType, null: true

  def resolve(**arguments)
    # create your user with data passed in.
    # arguments is a hash like this: { email: '', password: '', expires_at: 1234556, ... }
    # use arguments[:email] to access them.
  end
end

Create a new Type

https://graphql-ruby.org/guides#type-definitions-guides

module Types
  class SignUpArguments < Types::BaseInputObject
    argument :expires_at, GraphQL::Types::BigInt, required: true
    argument :expires_in, GraphQL::Types::BigInt, required: true
    argument :resource_state, Int, required: true
    argument :username, String, required: false
    argument :firstname, String, required: true
    argument :lastname, String, required: true
    argument :sex, String, required: false
    argument :active_till, GraphQL::Types::ISO8601DateTime, required: true
  end
end

class Mutations::SignUp < Mutations::BaseMutation
  null true

  argument :email, String, required: true
  argument :password, String, required: true
  argument :sign_up_details, Types::SignUpArguments, required: true

  field :token, String, null: true
  field :user, Types::UserType, null: true

  def resolve(email:, password:, sign_up_details:)
    # create your user with data passed in.
    # sign_up_details.to_h => { expires_at: 1234556, ... }
  end
end

Here are the few simple steps to integrate Sidekiq into a Dockerized Rails project:

If the project has not been dockerized yet, the previous post can be helpful.

Add Sidekiq to Gemfile

gem 'sidekiq' # Simple, efficient background processing for Ruby

Build project

docker-compose build

Setup Sidekiq

Follow the steps below to setup Sidekiq.

1. Generate a Sidekiq worker.

   docker-compose run web bundle exec rails g sidekiq:worker Hard
   

2. If ActiveJob is used, update config/application.rb.

   config.active_job.queue_adapter = :sidekiq
   

3. If ActiveJob is not used, delete app/jobs folder.

   rm -r app/jobs/
   

4. Set the Sidekiq Redis URL.

   By default, Sidekiq tries to connect to Redis at localhost:6379, which needs to be changed the Redis URL in Docker.

   • Create config/initializers/sidekiq.rb.

     touch config/initializers/sidekiq.rb
     

   • Set URL in initializer.

     Sidekiq.configure_server do |config|
       config.redis = { url: ENV.fetch('REDIS_URL_SIDEKIQ', 'redis://localhost:6379/1') }
     end
     
     Sidekiq.configure_client do |config|
       config.redis = { url: ENV.fetch('REDIS_URL_SIDEKIQ', 'redis://localhost:6379/1') }
     end
     

5. Add Sidekiq and Redis to docker-compose.yml

   version: '3'
   
   services:
     db:
       image: 'postgres:10-alpine'
       volumes:
         - 'postgres:/var/lib/postgresql/data'
       ports:
         - '5432:5432'
   
     redis:
       image: 'redis:5-alpine'
       command: redis-server
       ports:
         - '6379:6379'
       volumes:
         - 'redis:/data'
   
     sidekiq:
       depends_on:
         - 'db'
         - 'redis'
       build: .
       command: bundle exec sidekiq
       volumes:
         - '.:/project'
         - '/project/tmp' # don't mount tmp directory
       environment:
         - REDIS_URL_SIDEKIQ=redis://redis:6379/1
   
     web:
       depends_on:
         - 'db'
         - 'redis'
       build: .
       command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0' -e ${RAILS_ENV}"
       ports:
         - '3000:3000'
       volumes:
         - '.:/project'
       environment:
         - REDIS_URL_SIDEKIQ=redis://redis:6379/1
   
   volumes:
     redis:
     postgres:
   

6. Customize REDIS_URL_SIDEKIQ

   Either add as an environment variable in docker-compose.yml:

   sidekiq:
     depends_on:
       - 'db'
       - 'redis'
     build: .
     command: bundle exec sidekiq
     volumes:
       - '.:/project'
     environment:
       - REDIS_URL_SIDEKIQ=redis://redis:6379/12
   

   Or add to .env file and load it in docker-compose.yml

   OTHER_ENV=example
   REDIS_URL_SIDEKIQ=redis://redis:6379/12
   

   sidekiq:
     depends_on:
       - 'db'
       - 'redis'
     build: .
     command: bundle exec sidekiq
     volumes:
       - '.:/project'
     env_file:
       - '.env'
   

7. Add UI page to routes.rb.

   require 'sidekiq/web'
   mount Sidekiq::Web => '/sidekiq'
   

Start Server

docker-compose up --build

Go to http://localhost:3000/sidekiq to verify.

Troubleshooting

Errno::ENOENT - No such file or directory - bs_fetch:atomic_write_cache_file:rename

• Reason: Two processes are trying to load the /app/tmp directory at the same time².

• Solution: Add - '/project/tmp' to Sidekiq volumes in docker-compose.yml.

Add Redis to Gemfile

gem 'redis' # A Ruby client library for Redis

Build project

docker-compose build

Setup Redis for caching

1. Update config/environments/production.rb.

   # Use Redis store for caching.
   config.cache_store = :redis_cache_store, { url: ENV.fetch("REDIS_URL_CACHING", "redis://localhost:6379/0") }
   

2. Update config/environments/development.rb.

   Change memory_store to redis_cache_store and caching can be toggled by bundle exec rails dev:cache.

   config.cache_store = :redis_cache_store, { url: ENV.fetch("REDIS_URL_CACHING", "redis://localhost:6379/0") }
   

3. Customize Redis URL

   Please refer to the previous blog post here.

Add Redis to docker-compose.yml

version: '3'

services:
  db:
    image: 'postgres:10-alpine'
    volumes:
      - 'postgres:/var/lib/postgresql/data'
    ports:
      - '5432:5432'

  redis:
    image: 'redis:5-alpine'
    command: redis-server
    ports:
      - '6379:6379'
    volumes:
      - 'redis:/data'

  web:
    depends_on:
      - 'db'
      - 'redis'
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    ports:
      - '3000:3000'
    volumes:
      - '.:/project'
    environment:
      - REDIS_URL_CACHING=redis://redis:6379/0

volumes:
  redis:
  postgres:

Start Server

docker-compose up --build

Set directly

docker-compose.yml

web:
  depends_on:
    - 'db'
  build: .
  ports:
    - '3000:3000'
  environment:
    - RAILS_LOG_TO_STDOUT=enabled

Specify the env_file

For example, if the Rails project uses dotenv gem, then the .env file at the root of the project can be passed into Docker Compose like the following:

docker-compose.yml

version: '3'

services:
  db:
    image: 'postgres:10-alpine'
    volumes:
      - 'postgres:/var/lib/postgresql/data'
    ports:
      - '5432:5432'
    env_file:
      - '.env'

  web:
    depends_on:
      - 'db'
    build: .
    ports:
      - '3000:3000'
    volumes:
      - '.:/project'
    env_file:
      - '.env'

volumes:
  postgres:

.env

RAILS_LOG_TO_STDOUT=enabled

• Prerequisites
  • Docker and Docker Compose
  • Ruby
• Create a Rails 6 API project
• Setup Docker
  • Create .dockerignore
  • Create Dockerfile
• Setup Docker Compose
  • Create docker-compose.yml
  • Config database.yml
• Start Rails Server
• Install RSpec (Optional)
• Troubleshooting

Prerequisites

Docker and Docker Compose

Docker: https://www.docker.com/get-started

Docker Compose: https://docs.docker.com/compose/install/

For example, I have:

$ docker -v
$ Docker version 19.03.2, build 6a30dfc

$ docker-compose -v
$ docker-compose version 1.24.1, build 4667896b

Ruby

Rails 6 requires Ruby 2.5.0 or newer¹.

If the local machine hasn't got Ruby installed, RVM would be a common solution to consider.

For installing RVM with default Ruby and Rails in one command, run:

\curl -sSL https://get.rvm.io | bash -s stable --rails

To verify the successful installation:

$ ruby -v
$ ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-darwin18]

$ rails -v
$ Rails 6.0.2.1

Create a Rails 6 API project

To create a new Ruby on Rails 6 API project, run:

rails new rails-6-api-docker-demo --api --database=postgresql -T -C

• rails-6-api-docker-demo: The name of the new project.
• --api: Create an API only project.
• --database=postgresql: Use PostgresQL as the default database adapter.
• -T: (Optional) Skip test files. RSpec would be a more common option.
• -C: (Optional) Skip ActionCable if no WebSockets is needed for the project.

Setup Docker

Create .dockerignore

cd rails-6-api-docker-demo
touch .dockerignore

.dockerignore files essentially works the same way as .gitignore, but for docker containers. You may just use the content from .gitignore file plus the .git folder and .gitignore itself.

gitignore.io can be handy for generating the desired .gitignore file. For example, https://www.gitignore.io/api/git,rails,rubymine gives an example of .gitignore file for git, rails and rubymine IDE.

Here's a complete example: https://gist.github.com/yizeng/eeeb48d6823801061791cc5581f7e1fc

Create Dockerfile

touch Dockerfile

A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image. Using docker build users can create an automated build that executes several command-line instructions in succession.

Full documentation can be found here.

FROM ruby:alpine

RUN apk update && apk add bash build-base nodejs postgresql-dev tzdata

RUN mkdir /project
WORKDIR /project

COPY Gemfile Gemfile.lock ./
RUN gem install bundler --no-document
RUN bundle install --no-binstubs --jobs $(nproc) --retry 3

COPY . .

CMD ["bundle", "exec", "rails", "server", "-b", "0.0.0.0"]

• FROM ruby:alpine: Select the base image to build from. Here uses the latest alpine version of Ruby. Note that the version needs to match the Ruby version in Gemfile. If there is a mismatch (e.g. ruby '2.6.5' in Gemfile), then here would be FROM ruby:2.6.5-alpine. More versions can be found at the Docker Hub.
• RUN apk update && apk add build-base nodejs postgresql-dev tzdata: Install the required packages inside Docker.
• RUN mkdir /project: Create a folder called project to host the codebase.
• WORKDIR /project: Set the working directory to project folder.
• COPY Gemfile Gemfile.lock ./: Copy the files to the working directory.
• RUN gem install bundler: Install the bundler gem. It needs to match the version in Gemfile.lock, A specific version can be set like RUN gem install bundler -v 2.0.2.
• COPY . .: Copy the codebase into Docker.
• CMD ["bundle", "exec", "rails", "server", "-b", "0.0.0.0"]: Set the start command.

Setup Docker Compose

Create docker-compose.yml

touch docker-compose.yml

Docker compose is a tool to build a multi-container application, where docker-compose.yml is the YAML config file that tells Docker Compose how to build the containers together.

A more detailed documentation can be found here.

version: '3'

services:
  db:
    image: 'postgres:10-alpine'
    volumes:
      - 'postgres:/var/lib/postgresql/data'
    ports:
      - '5432:5432'
    environment:
      - POSTGRES_HOST_AUTH_METHOD=trust

  redis:
    image: 'redis:5-alpine'
    command: redis-server
    ports:
      - '6379:6379'
    volumes:
      - 'redis:/data'

  web:
    depends_on:
      - 'db'
      - 'redis'
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    ports:
      - '3000:3000'
    environment:
      - DATABASE_HOST=db

volumes:
  redis:
  postgres:

Here defines 3 services in order to run the Rails application:

• db: The PostgreSQL database service, which uses postgres:10-alpine here for example. It maps port 5432 inside Docker to the same port on local host machine.
• redis: The Redis caching service, which uses redis:5-alpine here for example. It maps port 6379 inside Docker to the same port on local host machine. This is needed if Sidekiq is used for job processing or Rails caching is set to Redis instead of memcache.
• web: This is how the Rails API is composed. It depends on db and redis with port 3000 exposed on host machine.

Config database.yml

The default Ruby on Rails' database.yml needs to be configed with the Docker database URL by adding host, username and password to it.

default: &default
  adapter: postgresql
  encoding: unicode
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  host: <%= ENV.fetch("DATABASE_HOST") { "localhost" } %>
  port: <%= ENV.fetch("DATABASE_PORT") { 5432 } %>
  username: <%= ENV.fetch("DATABASE_USERNAME") { "postgres" } %>
  password: <%= ENV.fetch("DATABASE_PASSWORD") { "" } %>

development:
  <<: *default
  database: rails_6_api_docker_demo_development

test:
  <<: *default
  database: rails_6_api_docker_demo_test

production:
  <<: *default
  database: rails_6_api_docker_demo_production
  username: <%= ENV.fetch("DATABASE_USERNAME") { "rails_6_api_docker_demo" } %>
  password: <%= ENV.fetch("DATABASE_PASSWORD") { "" } %>

Start Rails Server

Build the containers

docker-compose build

Before starting the server, Rails databases need to be created first.

docker-compose run web bundle exec rails db:create
docker-compose run web bundle exec rails db:migrate

Finally, to build and spin up the Rails 6 API server:

docker-compose up --build

Head over to http://localhost:3000 to test it out and start building the real API!

Install RSpec (Optional)

If the project was initialized with -T option that no tests are generated, a testing framework would be needed for the project.

Here is how to add RSpec support.

1. Add rspec-rails to Gemfile

   # Add it inside group :development, :test
   group :development, :test do
     # some existing gems...
     # ...
   
     gem 'rspec-rails'
   end
   

2. Rebuild the containers

   docker-compose build
   

3. Install RSpec

   docker-compose run web bundle exec rails generate rspec:install
   

4. Run the tests

   docker-compose run web bundle exec rspec
   

Troubleshooting

Error starting userland proxy: listen tcp 0.0.0.0:6379: bind: address already in use

• Reason: Port 6379 is already in use on local machine.This is most likely that there is another Redis server running locally.

• Solution: Either stop the Redis on local machine or map to another port in docker-compose.yml, like - '6380:6379'.

Error starting userland proxy: listen tcp 0.0.0.0:5432: bind: address already in use

• Reason: Port 5432 is already in use on local machine. This is most likely that there is another PostgreSQL server running locally.

• Solution: Either stop the PostgreSQL on local machine or map to another port in docker-compose.yml, like - '5434:5432'.

Your Ruby version is 2.6.5, but your Gemfile specified 2.6.3
ERROR: Service 'web' failed to build: The command '/bin/sh -c bundle install' returned a non-zero code: 18

• Reason: There is a Ruby version mismatch between Gemfile and Docker container.

• Solution: Either update the Ruby version in Gemfile to 2.6.5, or pull explicitly Ruby 2.6.3 image in Dockerfile like FROM ruby:2.6.3-alpine.

/usr/local/bundle/ruby/2.6.0/gems/activesupport-6.0.2.1/lib/active_support/railtie.rb:39:in
rescue in block in <class:Railtie>': tzinfo-data is not present.
Please add gem 'tzinfo-data' to your Gemfile and run bundle install (TZInfo::DataSourceNotFound)
/usr/local/bundle/ruby/2.6.0/gems/tzinfo-1.2.5/lib/tzinfo/zoneinfo_data_source.rb:180:in `initialize':
None of the paths included in TZInfo::ZoneinfoDataSource.search_path are valid zoneinfo directories. (TZInfo::ZoneinfoDirectoryNotFound)

• Reason: Required tzdata package was not installed in Docker container.

• Solution: Include tzdata in Dockerfile's RUN apk add command (see details above).

/usr/local/lib/ruby/2.6.0/rubygems.rb:283:in `find_spec_for_exe':
Could not find 'bundler' (2.0.2) required by your /project/Gemfile.lock. (Gem::GemNotFoundException)
ERROR: Service 'web' failed to build: The command '/bin/sh -c bundle install' returned a non-zero code: 1

• Reason: Required gem bundler was not installed in Docker container.

• Solution: Include RUN gem install bundler command in Dockerfile (see details above).

After some Googling, this article gave me directions and therefore made my own version of it.

namespace :db do
  desc 'Convert development DB to Rails test fixtures'
  task to_fixtures: :environment do
    TABLES_TO_SKIP = %w[ar_internal_metadata delayed_jobs schema_info schema_migrations].freeze

    begin
      ActiveRecord::Base.establish_connection
      ActiveRecord::Base.connection.tables.each do |table_name|
        next if TABLES_TO_SKIP.include?(table_name)

        conter = '000'
        file_path = "#{Rails.root}/test/fixtures/#{table_name}.yml"
        File.open(file_path, 'w') do |file|
          rows = ActiveRecord::Base.connection.select_all("SELECT * FROM #{table_name}")
          data = rows.each_with_object({}) do |record, hash|
            suffix = record['id'].blank? ? conter.succ! : record['id']
            hash["#{table_name.singularize}_#{suffix}"] = record
          end
          puts "Writing table '#{table_name}' to '#{file_path}'"
          file.write(data.to_yaml)
        end
      end
    ensure
      ActiveRecord::Base.connection.close if ActiveRecord::Base.connection
    end
  end
end

Then it can be used just like any other Rake tasks:

rake db:to_fixtures

All generated *.yml files will be fully compaitible with Rails and can be loaded to tests.

---
country_1:
  id: 1
  name: New Zealand
  created_at: '2017-02-20 08:56:18.481455'
  updated_at: '2017-02-20 08:56:18.481455'
country_2:
  id: 2
  name: United States
  created_at: '2017-02-20 09:51:23.430189'
  updated_at: '2017-02-20 09:51:23.430189'
country_3:
  id: 3
  name: Deutschland
  created_at: '2017-02-20 09:53:23.819761'
  updated_at: '2017-02-20 09:53:23.819761'

For a proper and comprehensive integration of TypeScript in Rails, please see Webpacker gem.

As I'm currently learning TypeScript, I wondered if I could apply it to my little Ruby on Rails project Strafforts (A Visualizer for Strava Estimated Best Efforts and Races), so that I could use this real world project to help me learning TypeScript quickly.

Even though there is a gem called typescript-rails which is a Rails asset pipeline wrapper for the TypeScript, or a proper and comprehensive integration of TypeScript in Rails like Webpacker gem. I have decided to create my own quick and hacky way of introducing TypeScipt to my Ruby on Rails project, mostly due to the following reasons:

• The purpose is to learn TypeScript with all its setup process, so why not start from scratch by myself as I'm not trying to create a nice and complete solution for everyone.
• typescript-rails project hasn't been updated for almost a year. Is it well maintained and fully compatible with the latest Rails 5.1.x?
• webpacker is a whole solution which is too heavy for TypeScript learning purpose.
• Rails 5.1.x supports Yarn now. Why not try the traditional Node.js way instead of the Rails way?

Therefore I have added TypeScript support to my Ruby on Rails project in a quick and hacky way.

• Install Yarn
• Install TypeScript through Yarn
  • Initialize
  • Add TypeScipt package
  • Add to assets paths
  • Update .gitignore
• Write TypeScript
• Add tsconfig.json
• Add Rake build task
• Demos

Install Yarn

Yarn is a JavaScript package manager, a quick, secure and reliable npm alternative. which is officially supported by Rails from version 5.1.

To install Yarn, please follow the official installation guide here. For macOS users, simply use homebrew brew install yarn.

Install TypeScript through Yarn

Initialize

For projects with Rails 5.1 or above, package.json should have been created automatically when app was created. Otherwise for older versions of Rails, use yarn init to create a package.json first.

Add TypeScipt package

Use the following command to add TypeScript package to the project.

yarn add typescript

It will create node_modules folder under project root and a yarn.lock file containing information about the package versions. If installation is successful, TypeScript binary should be accessible in node_modules/.bin/tsc.

Add to assets paths

For users with Rails 5.1 or above, this step should have been done automatically. But for users with older Rails versions, node_modules folder needs to be added to Rails assets paths manually.

To do so, add the following line to config/initializers/assets.rb:

Rails.application.config.assets.paths << Rails.root.join('node_modules')

Update .gitignore

For users with Rails 5.0 or under, once node_modules folder is created, remember to add it together with Yarn's error log file to .gitignore, so that they will not be commited to the repository.

/node_modules
/yarn-error.log

Write TypeScript

Now write some TypeScript to replace the existing CoffeeScript or plain JavaScript. For example, create a TypeScript file welcome.ts under app/assets/javascripts.

class HelloWorld {

    private name: string;

    constructor(name: string) {
        this.name = name;
    }

    print() {
        alert(`Hello World, ${this.name}!`);
    }
}

new HelloWorld('John Doe').print();

Add tsconfig.json

Typically, to guide TypeScript compiler on how to generate JavaScript files, add a TypeScript configuration file called tsconfig.json to the project.

The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. It specifies the root files and the compiler options required to compile the project.

Here for example, create a tsconfig.json file with some common options, and tell compiler to convert welcome.ts to generated/welcome.js, where everything in generated folder can be added to .gitignore.

{
  "compilerOptions": {
      "outFile": "app/assets/javascripts/generated/welcome.js",
      "noImplicitAny": true,
      "noEmitOnError": true,
      "sourceMap": true,
      "target": "es5"
  },
  "files": [
      "app/assets/javascripts/welcome.ts"
  ]
}

Add Rake build task

Finally create a new Rake task to compile to TypeScript files to JavaScript. Note that this new task can be added to Rails' rake assets:precompile task, so that every time rake assets:precompile is executed, assets:tsc will be run first.

namespace :assets do
  desc 'Compile TypeScript Files'
  task :tsc do
    system('node_modules/.bin/tsc')
  end
end

Rake::Task['assets:precompile'].enhance ['assets:tsc']

For example, add a assets.rake file to lib/tasks folder with the content above, then call the following command to compile TypeScript.

rake assets:tsc

Demos

A simple demo for this tutorial is hosted on GitHub.

The more complicated example that was actually applied to Strafforts can also be viewed on GitHub, which contains separate tsconfig.json files for compiling different pages/projects.

One progress bar is a global overlay that hides the entire application until the page is loaded, while the other is a default progress bar when any Ajax is triggered without hiding any content.

After some Googling, I found this answer works like a charm. Hence I'm turning it into a simple working demo for anyone is interested.

• Demo
• Add first progress bar
• Add second progress bar
• Make them working together
• Demo's source code

Demo

Add first progress bar

First, add an ordinary Pace.js progress bar like usual.

• Add references to pace.min.js and the theme CSS file.

<head>
    ...
    <script src="pace.min.js"></script>
    <link href="center-atom.css" rel="stylesheet" />
</head>

• Optionally, I want this one to be used as a global overlay, which means nothing but this progress bar is shown before page has fully loaded.

<head>
    ...
    <style>
        body> :not(.pace),
        body:before,
        body:after {
            -webkit-transition: opacity .4s ease-in-out;
            -moz-transition: opacity .4s ease-in-out;
            -o-transition: opacity .4s ease-in-out;
            -ms-transition: opacity .4s ease-in-out;
            transition: opacity .4s ease-in-out
        }
        
        body:not(.pace-done)> :not(.pace),
        body:not(.pace-done):before,
        body:not(.pace-done):after {
            opacity: 0
        }
    </style>
</head>

Add second progress bar

Next step is to add another progress bar that will be shown inside application only, when there are Ajax calls, state changes, etc.

<head>
    <script src="pace.min.js"></script>
    <link href="center-atom.css" rel="stylesheet" />
    <link href="minimal.css" rel="stylesheet" /><!-- Add reference to a new Pace.js theme CSS. -->
    ...
</head>

Make them working together

• Set page states

To indicate what the state the page is currently in and which progress bar should be shown, add a class name on body element of the page.

For example, add .content-loading class to body in HTML markup, which indicates the page hasn't been loaded and is in the initial state.

...
<body class="content-loading"><!-- Add class name for initial state. -->
    <button onclick="Pace.restart()">Trigger Ajax</button>
    <button onclick="location.reload()">Reload Page</button>
</body>

Then add a piece of JavaScript code to set page state (.content-loading class on body) to .content-loaded when Pace.js finishes page loading. Once this is executed, the in-app progress bar will be shown from then on for Ajax calls, etc.

<head>
    ...
    <script>
        Pace.on('hide', function () {
            document.getElementsByTagName("body")[0].classList.remove('content-loading');
            document.getElementsByTagName("body")[0].classList.add('content-loaded');
        });
    </script>
</head>

• Wrap themes with unique class names

Now the page has two states, one is the initial state where the first progress bar will be shown. The other state is when page has been loaded, the second progress bar will be shown for any Ajax calls, etc. within the application.

Therefore CSS themes need to be updated accordingly to reflect those two states.

If you are using CSS, update all CSS rules in both themes to be under .content-loading or .content-loaded. For example, minimal.css now looks like:

.content-loaded .pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.content-loaded .pace-inactive {
    display: none;
}
.content-loaded .pace .pace-progress {
    background: #29d;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 2px;
}

If you are using Sass, simply wrap themes with the class names like below:

// center-atom.scss file
.content-loading {
    // all theme styles.
}

// minimal.scss file
.content-loaded {
    // all theme styles.
}

• Update overlay styles

If global overlay style in place, the last step is to update it for .content-loading state only. So that content in the application will still be visible during Ajax calls.

<head>
    ...
    <style>
        .content-loading> :not(.pace),
        .content-loading:before,
        .content-loading:after {
            -webkit-transition: opacity .4s ease-in-out;
            -moz-transition: opacity .4s ease-in-out;
            -o-transition: opacity .4s ease-in-out;
            -ms-transition: opacity .4s ease-in-out;
            transition: opacity .4s ease-in-out
        }
        
        .content-loading:not(.pace-done)> :not(.pace),
        .content-loading:not(.pace-done):before,
        .content-loading:not(.pace-done):after {
            opacity: 0
        }
    </style>
</head>

Demo's source code

See demo's on JSFiddle here.