Runtime Environment and the Javascript Engine

Beginners often jump into coding without fully/partially understanding how the internet works or the runtime environment and the javascript engine.

It may or may not be beneficial to you depending on your goal.

However, if you aim to understand how things are connected and their process under the hood then you've come to the right place.

First of all, let's understand how the internet works from the moment you visit a site. In this example, we'll be using aifolio-journal.herokuapp.com.

When you visit "aifolio-journal.herokuapp.com", it will request your ISP (Internet Service Provider) which will then conduct a DNS lookup on the URL entered. DNS lookup is basically like yellow pages where every person has a designated name, address, and phone number. The name in this instance will be the URL, your ISP will check what is the address for the name provided (which is aifolio-journal.herokuapp.com, you can check the IP address by opening your command prompt and run the syntax "ping google.com").

Upon finding the address, the ISP will send it back to the user which in turn will make a direct request to the server with the IP provided.

The response will depend on how the route is handled. In this instance, the response will have an HTML file, CSS, and JS.

The Javascript will run in the runtime environment; but what exactly is a runtime environment? Think of it as a container that has all the necessary components to run your code. It will have the Javascript Engine, Web API, and a Callback queue.

The engine comprises 2 components, the Callstack where the codes are executed, and the Heap memory where all the objects are stored.

When the code first enters the engine, the engine will read it and then parse it into an AST (Abstract Syntax Tree) where the codes are de-structured in a meaningful way. For instance, if you have a code as const x = 10, it will be converted into AST (See image below)

The parsed codes (AST Objects) are the ones that are compiled into machine language (0's and 1's). Before we delve deeper, let's first take into consideration the difference between compilation and interpretation, which is the step the comes after the Parsing step.

An example of the compilation are programs that you've installed on your machine, you may execute them at any time but they are not compiled before execution, rather, they are compiled and bundled long before you even execute it. If you're familiar with Java then to illustrate that, when you compile your code, it provides you with a .class file; a file that is compiled into a machine code.

An interpreted language is what Javascript historically used. Where the codes are executed after compilation on a line-by-line basis. This is way slower than compilation as it needs to read each line of code before executing it. Imagine using Google Maps; whenever you pan around, there will be a second or more delay as it needs to calculate your location and the image that needs to be displayed.

JIT or Just-in-time compilation is a mixture of both compilation and interpreted language. It will read the code, compile it and then execute it; whilst the code is still running, it will fire up the optimization, optimizing the compiled code, recompiling it and then executing it. The latter process will enter a loop until the compiled code is fully optimized. The reason for this process is for faster and more efficient code execution, the faster it spits out compiled codes, the faster it can be executed.