Forem: Ankur Vyas

Rails 6 jQuery upgrade with webpacker!

Ankur Vyas — Mon, 30 Mar 2020 07:16:01 +0000

Adding jQuery to Rails 6 with webpacker will enable you to write ES 6 flavored JavaScript applications in no time. An essential thing to note is that Rails 6 comes installed with webpacker by default so you don't need to install it separately. In this article, I have outlined the process of adding jQuery with webpacker to yourRuby on Rails Development version for building your frontend of the application.

This blog is divided into three sections:

jQuery in an older version of Rails
Webpacker Installation
Add jQuery with webpacker

1. JQuery in an older version of Rails:

If you are using an older version on Rails and added jQuery to it. Then the easiest way to add jQuery was to use jquery-rails gem.

By doing so the jquery and jquery-ujs files will be added to the asset pipeline and available for you to use. If they're not already in app/assets/javascripts/application.js by default, add these lines:

//= require jquery
//= require jquery_ujs

If you are running Rails 5.1 and up, and if you have included //= require rails-ujs, then jquery_ujs is not needed anymore. You can just add:

//= require jquery

Adding jQuery in this way makes it part of the rails asset pipeline.

Now if you are upgrading your rails version to Rails 6 and use it with webpacker then you need to remove jquery-rails from Gemfile.

Remove below from application.js

//= require jquery
//= require jquery_ujs

2. Webpacker Installation

Webpacker gem uses Webpack to manage app-like JavaScript modules in Rails.

Webpacker makes it easy to use the JavaScript pre-processor and bundler webpack 4.x.x+ to manage application-like JavaScript in Rails 6 jquery. It coexists with the asset pipeline, as the primary purpose for webpack is app-like JavaScript, not images, CSS, or even JavaScript Sprinkles (that all continue to live in app/assets).

Rails 6 comes with webpacker by default so you don’t need to do anything for it! When you create a brand new jquery Rails 6 app it will add webpacker and will do the configurations for you.

Read Also: Notable ActiveRecord changes in Rails 6 – Part1

If you are upgrading rails app from an older version then you need to add below line manually in your Gemfile

gem 'webpacker', '~> 4.x'

Once you have added it then you need to run the following command to install Webpacker:

$ bundle exec rails webpacker:install

Optional: To fix "unmet peer dependency" warnings,

$ yarn upgrade

Once installed, you can start writing modern ES6-flavored JavaScript apps right away:

Rails will provide you with the basic directory structure as follows

app/javascript:
  ├── packs:
  │   # only webpack entry files here
  │   └── application.js
  └── src:
  │   └── application.css
  └── images:
      └── logo.svg

In /packs/application.js, include this at the top of the file:

import 'core-js/stable'
import 'regenerator-runtime/runtime'

You can then link the JavaScript pack in Rails views using the javascript_pack_tag helper.

<%= javascript_pack_tag 'application' %>

So by doing this, your Rails webpacker jquery installation will get completed. No need to do the above steps if you already are using Rails 6.

3. Add jQuery with webpacker

In our Rails application run below command to add jQuery.

$ yarn add jquery

This will add jquery to Rails 6 to your application frontend. So we can access it in the webpacker. Just add following at config/webpack/environment.js

Add require("jquery") to your app/javascript/packs/application.js

Now you will be able to add JQuery in Rails 6 application!

How to put a Ruby on Rails application in Maintenance Mode

Ankur Vyas — Mon, 19 Aug 2019 07:15:31 +0000

What is the maintenance mode?

Maintenance mode page is the user-friendly message for your site visitors indicating that we are working on something for which the site needs to be down for some time. We require this because we don't want our website to be broken for a specific amount of time while the site maintenance is in progress.

When you hire Ruby on Rails programmers, they can take care of the entire maintenance mode page.

Why you require the maintenance mode page?

Performing upgrades (migrate rails version from one to another)
Performing data migrations in the backend
Migrating images or files from Amazon S3 to Google Cloud or vice versa
And many more...

How to so do for Ruby on Rails applications?

The easiest way to do is by using Turnout gem. Turnout is Rack middleware with a Ruby on Rails Development engine that allows you to put your app in maintenance mode easily.

Turnout gem has the following features.

Easy installation
Rake commands to turn maintenance mode on and off
Easily provide a reason for each downtime without editing the maintenance.html file
Allow certain IPs or IP ranges to bypass the maintenance page
Allow certain paths to be accessible during maintenance

You can find them all of them here.

Installation

Just add the following gem to your Gemfile

gem 'turnout'

and do bundle install that's it!

Activation

$ rake maintenance: start.

Tada! It's done. When you do so, you will get the following page.

$ rake maintenance: start reason= "This is the custom reason!"

You can find all the commands here.

Deactivation

$ rake maintenance: end.

Default maintenance pages are provided, but you can create your own public/maintenance.[html|json|html.erb] files instead. Reach out to learn more about the expert web developers in NYC for the various ways to improve or build the quality of projects and across your company.

A Ruby on Rails web development company will ensure that you activate and deactivate maintenance page at the right time.

That's it!

Read Also: Top 3 tips to Boost Performance of your Ruby on Rails Application

How can we debounce render a React Component? (with example)

Ankur Vyas — Thu, 25 Jul 2019 13:27:43 +0000

What is debouncing?

According to https://www.geeksforgeeks.org/debouncing-in-javascript/

Debouncing in JavaScript is a practice used to improve browser performance. There might be some functionality in a web page which requires time-consuming computations. If such a method is invoked frequently, it might greatly affect the performance of the browser, as JavaScript is a single-threaded language. Debouncing is a programming practice used to ensure that time-consuming tasks do not fire so often, that it stalls the performance of the web page. In other words, it limits the rate at which a function gets invoked!

Yes, It sounds interesting!!! Next question is how we can use this in React JS?

The answer is react-debounce-render!

react-debounce-render is a Higher Order Component that wraps your react components and debounces their rendering.

This method can be used to prevent extra renders when a react component rapidly receives new props by delaying the triggering of the render until updates become less frequent. Doing so will improve the overall rendering time of the application, thus improving the user experience. It uses lodash debounce under the hood. Reach out to learn more about the web development NYC experts for the various ways to improve or build the quality of projects and across your company.

Read Also: Top Libraries to use with Advanced React JS Applications!

You can find my whole source code at https://github.com/AnkurVyas-BTC/react-debounce-example

Let's see how we can use react-debounce-render with our big React applications!

Only two things are present here -

1. Simple Textbox
2. Displaying data based on the input text

In my sample application, what I have done is to print the input text after 2 seconds. You can consider it a heavy time-consuming computation.

import React, { Component } from 'react';

class Calculator extends Component {

  sleep = (milliseconds) => {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
      if ((new Date().getTime() - start) > milliseconds) {
        break;
      }
    }
  }

  timedOutDisplay = (inputVal) => {
    this.sleep(2000);
    return `Heavy calculation based on input => ${inputVal}`;
  }

  render() {

    return (
      <React.Fragment>
        {this.timedOutDisplay(this.props.inputVal)}
      </React.Fragment>
    );
  }
}

export default Calculator;

The code this.sleep(2000) allows adding 2 seconds delay.

The examples are as follows -

1. Without Debounce Rendering

If you type any text (12345 in the GIF), the input becomes unusable and is blocking UI.

It will take every change from 1 to 2, 2 to 3, 3 to 4 and 4 to 5. So you will see -

Heavy calculation based on input => 12345

after ~10 seconds ( 2 seconds delay after each input)

2. With Debounce Rendering

We can make any component debounce rendered by adding two lines.

Import debounceRender and wrap component within debounceRender

import debounceRender from 'react-debounce-render';

export default debounceRender(WithDebounceCalculator, 500);

Look at below example

import React, { Component } from 'react';
import debounceRender from 'react-debounce-render';

class WithDebounceCalculator extends Component {

  sleep = (milliseconds) => {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
      if ((new Date().getTime() - start) > milliseconds) {
        break;
      }
    }
  }

  timedOutDisplay = (inputVal) => {
    this.sleep(2000);
    return `Heavy calculation based on input => ${inputVal}`;
  }

  render() {

    return (
      <React.Fragment>
        {this.timedOutDisplay(this.props.inputVal)}
      </React.Fragment>
    );
  }
}

export default debounceRender(WithDebounceCalculator, 500);

Now, if you type any text (12345 in the GIF) the input is very smooth and is not blocking UI.
If will take change 12345 as a collection. So you will see -

Heavy calculation based on input => 12345

after ~2 seconds

When you are using filters which requires heavy computation the debounced rendering is an appropriate fit!