Rails 5.1, the proof of the maturity of the ecosystem
Rails 5.1 solves many of the “pending issues” of the recent years. About all, issues related to the assets management that since version 4.0 were handled by Sprockets, a gem that allowed us centralize all the process of grouping, use and compile all our assets using practical conventions.
It was not a surprise that when Chris McCord released Phoenix Framework two years ago, and he decided to include Brunch as asset build tool, adopting NPM as package manager. But, the Rails community showing their willingness to adopt new ways to do things if needed, decided with the release of Rails 5.1 to include Yarn as package and dependency manager for JS assets and optionally Webpack to handle module bundles and compilation. That’s a big step in the right direction towards where the web development is heading.
In this post we will cover how the integration with Yarn works.
Yarn is a package manager created by Facebook, and announced last year. According to Facebook, they were using NPM but as the size of their codebase and the number of engineers working on their projects grew, they ran into problems with consistency, security and performance. So they needed a tool that was fast and reliable.
And the best of all is that Yarn development is supported by other companies like Google and Tilde.
- Using Homebrew
- Using MacPorts
The easiest way is to use the installer, you can find it here.
You can also use Chocolatey
And Scoop as well
First you need to configure the repository
And finally simply:
To check all went well, just check the version of yarn installed:
Now, and previous to introduce Yarn applied to the RoR context, we are going to start using Yarn independently.
So, let’s start a new project using Yarn:
Yarn goig to ask you for basic information about the project, like the name of the project, version, description, author, repo url, and so on.
When the initialization have finished you will see a new file named package.json, which contains the data you provided before.
And now we are going to proceed to add new dependencies. You have different ways to add a dependency: just using its name, or specifying its version or tag. In this case I’m just going to add a react.js package without specify the version, to get the latest.
And that’s it. If you check the package.js file you will find the latest version of reactjs.
Optionally you can different categories of dependencies, and upgrade them or remove them. To install all dependencies of a project you just need to execute
You can check all the tree of depencies in a new file that is created after you install the first package, called yarn.lock
And, since I do not want to leave this example incomplete, let’s create a react hello world app, the easy way.
First of all lets install the package create-react-app, but globally to use it from the terminal.
And now, we can check create-react-app is working asking for his version:
If everything is Ok, let’s proceed to create our first react.js application:
Then, you are going to see an output similar to the following:
Amazing! So, let’s try our recently created app:
So, if you go to http://localhost:3000/ you will see your app up and running.
Now, let’s take a look of the files generated:
If you have tried previously other package and dependency managers, you will appreciate how clean and easy was to get to this point. I will not go deeper into reactjs, maybe in a future post I’m going to address that using Yarn, but that was a taste of Yarn. I’m really glad they decided to integrate it into the Rails workflow, you can see the details in this pull request.
Yarn on Rails
Now let’s try to use Yarn inside a new Rails 5.1 application.
In addition to the normal files you see when a new rails project is generated, you will find a package.json file, and if you take a look to the assets initializer file, you will find the following line:
So, Rails automatically includes the directory node_modules to the assets pipeline, you just need to reference the new package you want to add, for example, let’s say we want to use the moment.js library. We need first of all install the library using Yarn:
We can see that package.json was updated
And finally we need to include the new package to application.js:
Subscribe via RSS