Rails Asset Pipeline and Other Stuffs

First sprint is officially started! My team and I have passed all along the journey before the first sprint is started. Yep, creating project vision, presentation slides about our product, mock up of our product, and list all our backlog. Now, we enter the development phase!

To begin develop our product, I got an assignment to initialize all the libraries that will be used and create a setup script which also known as build script. Our project will be developed using Ruby on Rails and MongoDB for the database, so I installed Ruby and Rails on my local laptop and fortunately MongoDB is already installed. But, my task isn’t finished yet just by installing Rails and MongoDB. I also installed sass-rails, mongoid, and haml-rails. Those libraries will be used for developing our product. I also configured some of the libraries to work expected. Unfortunately, I got some doubt to install React library (yep, our project will be also developed using React!).

There are two popular libraries that are already integrated inside Rails which are react-rails and react_on_rails. After some exploration, I found a good blog post that tells you there are 3 ways to use React in Rails with their comparison. I found an interesting terms that I ever heard before but never really know well about it. Before telling you what the terms is, you may look on Adam’s post, he was talking about pipeline. Guess what? This terms also contains a pipeline! But not pipeline used in CI, this is a pipeline which you’ll find in Rails. Yep, Rails asset pipeline. Cool! Rails also has a pipeline! But what is it for?

After reading several resources, I found that there are three main goals that Rails Asset Pipeline has, which are precompile, concatenate, and minify assets into one central path. Isn’t it cool? Some JavaScript developers may use other tools that will do these jobs such as Gulp or Grunt, but Rails already has the tools built in. This asset pipeline is powered by two technologies which are Sprockets for taking the assets from all specified paths, compiling them, then placing them in the target path (public/assets) and Tilt for template engine that sprockets uses. You may look at your Gemfile.lock if you want to check whether these two tools are truly used or not.

react-rails uses the default Rails assets management and transforms JSX automatically in the asset pipeline, it uses Ruby Babel transpiler for transformation. On the other hand, react_on_rails doesn’t rely completely on the Rails asset pipeline, it uses ES6 by default and state-of-the-art JavaScript tools including Webpack for compiling instead of using Rails asset pipeline. My team decided to use react-rails for the sake of simplicity and quickness. We don’t need to configure and manage extra things like Webpack, yay!

I installed react-rails library then followed this simplest explanation to configure the library and make sure it works well. But again, the installation process isn’t finished yet! Since we have to do TDD, I also have to prepare the libraries which allows you to do TDD with React in Rails. After several research, I found this helpful project and tell my team to use Jest for testing React. My team is okay with it, so I followed the step on that helpful project, I have to install browserify-rails first to make Jest can work in Rails.

Finally, after finishing the installation, I have to create a build script. I created a .sh file for setup the project automatically including installing dependencies like MongoDB and libraries in one step, yep just run that .sh file! That .sh file only works in Unix, so for the Windows users I already created the procedure to setup the project too. Finally, I have to test my script to make sure it’s running well. Actually, there is another task for me, which is setup linter for coding React. My team will use linter from Airbnb so our code will follow same convention. I already configured it but it isn’t running well yet.

Well, I’ve pushed some of my work to Gitlab and will push completely as soon as possible! I hope I can finish setup the linter and test the script soon. To end this post, I want to share good tutorials for creating simple CRUD in Rails using React:

Yep, we will also follow those tutorials to develop our project.

Bye all!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s