Pre-processing to display on the browser (compiler)

We have summarized the mechanism until multiple static files are applied to the browser. Roughly speaking The browser has a fixed language that it can recognize, and any language needs to be translated into a language that it can recognize. This translation work is called compilation, and if it cannot be compiled, it must be processed in advance. This pre-processing is called pre-compilation, and each small function is made into a set of processing called modules, compiled, and returned to the browser.

Premise
Programming beginner(Two months)This is a summary of what I learned.
It may not be valid in the actual field or there may be incorrect information.
If you have noticed it, I would appreciate it if you could point it out in the comments.

The language that the browser can recognize is fixed

The browser can only recognize the languages HTML, CSS, JavaScript and WebAssembly. No matter what you write on the server side, these four are finally returned to the browser. Browsers cannot render pages in other languages.

Languages that make development convenient

The browser recognizes only the above four, but there are programming languages designed to be easier to write and read in development. This programming language is called a ** high-level language **.

High-level language

A programming language designed to be easier for humans to understand than machines Languages that are easy for machines to recognize are called ** low-level languages **. High-level language example CSS:SCSS、SASS JavaScript:TypeScript、CoffeeScript

Mechanism for converting to a language that the browser can recognize

The process of translating a language that is convenient for development so that the browser can recognize it is called compilation.

compile The task of translating a programming language so that it can be understood by the machines that operate it. Compiling is done by a program called a compiler. If there is a language that the compiler cannot recognize, you need to precompile it in advance.

** Precompiled ** Ahead-of-time that allows the compiler to translate languages that it cannot translate. Pre-processing performed for the main processing As a method for performing this precompilation, there is a mechanism called an asset pipeline.

** Asset Pipeline ** A function that organizes static files called assets such as JavaScript and CSS into small pieces The processing of the asset pipeline is performed in the flow of precompilation → concatenation → compression → placement. After precompiling and concatenating multiple static files, compress and reduce the weight and place it in the public directory so that it can be passed to the browser. Precompilation is done using the module bundler.

** Module bundler ** Module bundler is a tool to manage JavaScript modules while considering their dependencies. A module is a set of processes that divides functions one by one so that they can be read from other files. Modules manage a group of functions, and when each function has a dependency, the module bundler manages them while considering them. Module Pandora is used because if the functions are divided into files without being managed by modules, problems will occur when finally combining them into one file.

webpack Mainstream tool in module bundler There are four main things webpack does ・ Entry Decide which file to use as the reference (entry point) to resolve the dependency. ・ Output Specify where and what name to output the file that is used as an entry point and collected by webpack. ・ Loaders Read (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 that the loader cannot execute other than collecting files such as compression.

Recommended Posts

Pre-processing to display on the browser (compiler)
[Ruby on Rails] Quickly display the page title in the browser
Check the root on the Rails browser
How to display 0 on the left side of the standard input value
How to display products by category on the same list screen
I tried to display the calendar on the Eclipse console using Java.
Display text on top of the image
Display an image on the base64 screen
I want to display background-ground-image on heroku.
How to change the timezone on Ubuntu
[Swing] How to display an arbitrary name on the menu bar on Mac
[Ruby on Rails] How to display error messages
[Swift 5] Processing to close the keyboard on UITableView
Migration from Eclipse to IntelliJ (on the way)
Display the System Monitor applet on the Ubuntu 20.04 taskbar
Ssh login to the app server on heroku
[Ruby] Code to display the day of the week
Double-click to open the jar file on Windows
Display "Hello World" in the browser using Java
How to display the result of form input
[Ruby On Rails] How to use simple_format to display the entered text with line breaks
[Ubuntu 20.04] Display the day of the week on the date / clock
How to set the display time to Japan time in Rails
[Ruby on Rails] How to change the column name
[Android] Display images and characters on the ViewPager tab
I want to display the name of the poster of the comment
Display the list in setDetails on the screen with spring-security
How to display a browser preview in VS Code
How to determine the look-ahead request (Prefetch) from the browser
Deploy the Spring Boot project to Tomcat on XAMPP
Install MySQL 5.6 on CentOS6 [How to specify the version]
I want to simplify the log output on Android
[Rails] How to display an image in the view
Implemented a strong API for "I want to display ~~ on the screen" with simple CQRS
What to do when Rails on Docker does not reflect controller changes in the browser
How to correctly check the local HTML file in the browser
How to display the select field of time_select every 30 minutes
The key to running Docker on Raspberry Pi 4 (Ubuntu server 20.04)
I want to use screen sharing on the login screen on Ubuntu 18
I was addicted to looping the Update statement on MyBatis
Android app to select and display images from the gallery
(Ruby on Rails6) Display of the database that got the id of the database
From Ruby on Rails error message display to Japanese localization
How to disable Set-Cookie from API on the front side
How to display a graph in Ruby on Rails (LazyHighChart)
Display an error screen during the download process to response
How to install JDK 8 on Windows without using the installer
[Rails] How to display the list of posts by category
Run the sample "Introduction to TensorFlow Development" on Jetson nano
How to switch Java in the OpenJDK era on Mac
How to run React and Rails on the same server
I want to narrow down the display of docker ps
[Rails] How to display information stored in the database in view
How to check the database of apps deployed on Heroku
[Android] Try to display the effect on the touched part of the screen, which is common in games.