Chapter 14. Frontend in Rails - 1. Asset Pipeline and Webpacker (Rails6)

on

This chapter explains the frontend basics in Rails.

Building Methods for Frontend

There are two main ways to build a frontend in Rails.

  1. Use Asset Pipeline (Sprockets)
  2. Use Webpacker

(3. Use both)

Webpacker can be used by default in Rails 6 and later. To be precise, both Sprockets and Webpacker are included in the gem, and in most cases, one of them is removed.

Frequently Used Terms

  • Asset Pipeline A js/css build tool that has been in Rails for a long time. Choose it if you don't need rich fronts.
  • Sprockets A gem for Asset Pipeline that handles js/css with javascript_include_tag and stylesheet_link_tag.
  • rails assets:precompile This command compiles js/css. This will build the files under assets to public. You will hardly notice this during development.
  • Webpack A js/css build tool that is an alternative to Asset Pipeline, used for using Javascript frameworks such as vue.js or react.js.
  • Webpacker A gem to handle Webpack in Rails, which handles js/css with javascript_pack_tag, stylesheet_pack_tag. If removed in Rails6, you need to prepare another way to load js/css. Removed in Rails 7 because it was difficult to use and unpopular.
  • bin/webpack This command will compile js/css in production.
  • bin/webpack-dev-server This command will compile js/css in development. If it doesn't run, js/css changes will not be reflected.

Since Webpacker is often customized for each project, it may be better to ask someone who knows more about it than to Google it.

Why Webpack instead of Asset Pipeline?

This is a long story and it would take a long time to explain it all, but here is my interpretation of what you should know at least know.

  • Due to technological advances and the fact that old IE support is no longer needed, there is a demand for a richer UI that makes heavy use of Ajax, such as modal and seamless screen transitions/updates.
  • When such features are implemented using plain Javascript or jQuery, the code becomes complicated and difficult to maintain for other members. And also, (even if it can be written cleanly to some extent) the implementation method will vary depending on the members.
  • Therefore, by using frontend framework, rules and restrictions are set so that the code will be similar to some extent no matter who implements it, and maintainability is kept high.

The main role of the frontend framework can be thought of as increasing maintainability at the expense of learning and implementation costs.

At the same time, npm, a frontend management tool, makes it easier to manage libraries, install lint tools, and install tests for Javascript.

Two major features common to both Vue.js and React are Virtual DOM and State Management, which are explained next.

Virtual DOM

the code will be similar to some extent no matter who implements it.

One way to do this is to use a Virtual DOM.

It is easier to understand if you think of it as a Javascript version of an HTML template like the Rails View Partial, but it has the advantage of being intuitive and easy to understand because it can be coded using HTML tags and custom tags as opposed to creating elements with createElement or rewriting styles with .style.

State Management

Basically, Vue.js and React do not directly manipulate the DOM in Javascript, but instead define a variable with a state in a file and draw the screen based on that state variable.

dev.to - Express State Management of the Frontend Framework with Plain Javascript

Summary of the above

Projects that should choose Asset Pipeline are the following cases.

  • When rich UIs are not required or Javascript code will be small.
  • When there is not enough technical level or manpower for the frontend.
  • When the project wants to reduce man-hours as much as possible.

Projects that should choose Webpacker are the following cases.

  • When rich UIs are required or Javascript code will be large.
  • When there are members with enough skills for the frontend.
  • When a lot of time can be spent on the frontend and the project wants to maintain high maintainability.

Managing large Javascript with Asset Pipeline

If the amount of Javascript code is large, but you need to use the Asset Pipeline for some reason, you should try using the following.

  • Separate Javascript files by action(URL)
    • If the file size is still large, further separate the files by functional grouping.
  • Use a linter tool such as ESLint to detect problems using CI in the same way as Rubocop
    • Split methods so that one method does not become too large (e.g. no more than 10 lines).
  • Create tests that include Javascripts using System spec (Capybara + Selenium)

Others

SEO

Mainly for toC systems.

This is not covered in detail in this book, but it's easy to leave this out of the requirements definition, so make sure you do. In particular, if you are using a frontend framework in the project, you may need to pay attention to how it displays on SNS such as Twitter and Facebook.

Session management

I cannot give an immediate answer as to the best way to do this. It depends on the system architecture, so you should look carefully at what kind of implementation is secure.

A major way might be to use authenticity token generated by csrf_meta_tags.

Passing values from Rails to Javascript

ActiveRecord and Array in Rails cannot be handled by Javascript as is, so they need to be serialized to JSON using the Serializer. Also, by passing through the Serializer, items can be extracted in as an allowlist(whitelist), so even when using SQL with select *, there is no need to worry about unintended items being accidentally output to the communication log or screen.

It is good if you can get a common understanding of API definitions between server-side engineers and frontend engineers by using Swagger.

Area of Responsibility

I don't think server-side engineers need to be able to build frontend systems with Webpacker, but it's important to know what tools are out there and what advantages and disadvantages they have. Of course, it is desirable for them to be able to use plain Javascript and CSS cleanly.

Frontend engineers should be able to design components using frontend frameworks, test js, and build CI environments. Even better if they can build faster and lighter bin/webpack-dev-server and CI.