[Java] Mechanism for converting into a language that the browser can recognize

3 minute read

Higher and lower languages

High-level language High-level languages are programming languages designed to be easier for humans to understand than machines. Also, “high-level” does not mean an excellent language, but means that it is possible to describe elements unique to the model or OS with a high degree of abstraction, and many languages used for developing application software etc. Is classified as a high-level language, so the expression “high-level” is used.

Lower language A language that is easy for a machine to recognize is called a low-level language. “Lower” does not mean inferior language, but rather closer to hardware We use the term “lower” to do this.

To display the file in the browser, the machine recognizes it after developing it in a high-level language. It is necessary to translate into a lower level language that can be done, and that translation is called compilation.


The process of translating a programming language so that it can be understood by a working machine. Compilation is called a compiler (an opportunity-friendly programming language) It is done programmatically. If there is a language that cannot be recognized by the compiler, it must be pre-compiled into a language that can be recognized beforehand.


Pre-compilation that allows the compiler to translate languages that it cannot translate. Or, it refers to the pre-processing required for the main processing. In other words, pre-compilation is the compilation that should be done before compilation and main processing.

For example, a web application precompiles a file written in a high-level language and passes it to the browser so that the web browser can do the main thing of reading and displaying a static file.

As a method for performing such pre-compilation, there is a mechanism called asset pipeline.

Asset pipeline

It is a function that makes small static files called assets such as JavaScript and CSS. A high-level language precompilation function can be added to the asset pipeline, so it can be applied to develop using SCSS or TypeScript.

The processing of the asset pipeline is carried out according to the flow of “1) pre-compilation”, “2 connection”, “3 compression”, “4 arrangement” **. After precompiling and concatenating multiple static files, compress and lighten it and place it in the public directory so that it can be passed to the browser.

Until now, Rails has used the asset pipeline by Gem called Sprockets by default to precompile CSS and JavaScript.

However, since it has become more and more common to develop JavaScript library functions in recent years, Rails has started precompiling using module bundler since version 6 or later.

Module bundler

Module Bundler is a tool that manages JavaScript modules while considering dependencies.

A module is a group of processes that can be read from other files by dividing the functions one by one. In JavaScript, if you divide multiple functions into files, a problem occurs when you combine them into a single file, so in the Node.js environment, functions are handled as modules.

Modules allow you to split a large number of functions into multiple files, and you can combine the separated functions into a single file and work fine. However, because it is divided into multiple parts, a dependency is created, and there is a problem that it can not operate properly if there is a module that can not be loaded.

The solution to this problem is the module bundler, which manages the modules by bundling them together. In recent years, webpack has become the mainstream among module bundlers.


webpack is a tool for collectively managing various JavaScript required when creating a web application. There are four main things that webpack does.

Basic elements Roles
Entry Decide which file should be used as the reference (entry point) to resolve dependencies
Output Specify where and with what name the files that are collected by webpack and are used as the entry point
Loaders Load the method of converting files such as CSS and HTML other than JavaScript into modules, and perform the specified processing
Plugins Introduce and extend (plug-in) tasks such as compression that cannot be executed by the loader other than putting together files.

In other words, by using webpack, it is possible to convert and compress the JavaScript library and various languages other than JavaScript, and then place it in the desired location.

Although webpack can be introduced to Rails and command operation is possible, there is a gem called Webpacker that simplifies the setting because the description of the configuration file is somewhat difficult.


It is a gem that makes webpack Rails specification and prepares a dedicated configuration file and helper method. From Rails version 6 or later, Webpacker is introduced by default. Webpacker makes JavaScript packages available in addition to static file precompilation, similar to the Sprockets asset pipeline.