Below is the explanation and procedure that I followed.

Flow of code

First of all, we need to understand the flow of execution of the code and the intermediate steps involved in it.

There will be three steps involved majorly:

1. The source code will be first broken into tokens and parsed into an AST with the help of a syntax parser. The code will now be in the form of an Abstract Syntax Tree.

2. After that, this AST will go to the interpreter for compilation. It will get converted into bytecode for further processing.

3. The bytecode generated above will be sent to the main thread for execution and executed inside the call stack.

Single-threaded Concurrency model

Since our motive here is to make the engine single-threaded, we will have only one thread for the execution of the tasks. We won't be able to run multiple tasks parallelly. If any CPU-intensive task is there, it will block the execution of further tasks causing the system to collapse or hang. So we need to keep the architecture such that it becomes non-blocking.

The concurrency model shown in the figure above has three significant components.

1. Call Stack

   The frames of the function calls form a stack. At the start of the program, Global Execution Context is created. After that, according to the function calls, a new frame is created to execute it. Being a stack, it supports LIFO (Last in, first out).

2. Memory Heap

   Inside the memory heap, memory is allocated to the objects and variables present inside the code. The memory is allocated randomly to every object in a heap.

3. Task Queue

   The primary purpose of the task queue is to queue the tasks while the call stack executes the previous ones. Since it is a queue, the operations performed here will be FIFO (First in, first out).

But now the question arises, how does the task queue be able to queue the tasks beforehand?

Asynchronous operations

To make the engine asynchronous, we can use an event loop. It helps us in making the engine asynchronous. We will also use the OS kernel and OS as well as web APIs. These are also very helpful in making the system asynchronous.

Components of the asynchronous model

1. Event Loop

   The primary work of the event loop is to monitor the call stack continuously and push a task from the task queue to the call stack when it gets empty.

2. OS Kernel & APIs

   We can use the OS Kernel for offloading the main thread from Input/Output operations, making the system asynchronous.

Engine model and execution process

Since we have outlined the architecture, we will try to understand the implementation and execution of the above model.

At the start of the code, a global execution context will be created in the call stack. Then the memory will be allocated to the objects and variables inside the memory heap. Then the code execution will start line by line.

Now, to make the system non-blocking, we will use the OS Kernel and APIs, e.g., Web APIs like setTimeOut(), localeStorage() And file read and write with the help of OS Kernel. When these types of tasks are inside the code, the main thread will send them to the OS environment, and the control will go to the following line of code. Since the control moves ahead instead of waiting for these operations to complete, these tasks will be queued in the task queue on completion from the OS environment.

Here the work of the event loop starts. An event loop is a process in which the call stack searches for the pending tasks in the task queue when nothing is to be executed inside the call stack. The event loop starts functioning only when all the frames inside the call stack are popped out. The task that was pushed inside the queue first will be pushed to the call stack first until all the queued tasks are executed.

This way, all the code will be executed, and all the tasks will be handled concurrently without blocking the main thread. This system takes help from the OS Kernel and APIs for handling I/O operations, allowing it to execute all the tasks on a single thread concurrently and asynchronously without blocking the thread.

Garbage collection and freeing up the memory

After the execution of the code, the memory from the heap needs to be freed up. Otherwise, it may cause system storage issues and slow it down. For this purpose, we need to use a garbage collector (GC). After doing some research, I thought of including the Mark and Sweep garbage collection algorithm for the implementation of the Garbage Collector of this engine. This algorithm works on the concept of 'an object is unreachable'. It points out the root object of the whole code - for example, the Global or Window object in our web browsers. After getting the root objects, it will search all the objects reachable from the root object, then all the objects reachable from those objects, and so on. After pointing out all the reachable objects, it sweeps all the unreachable objects.

Further optimization techniques

We also need to focus on some optimization techniques to make our engine more optimal and fast.

1. Inlining

   At the start, we can inline all the source code, saving a lot of time that might be wasted in parsing the blank lines.

2. Inline caching

   We can use the inline caching method to cache the simultaneous calls of the same function with the same arguments. It will cache those results, and the next time the same call happens, it won't need to execute the code instead, it will directly provide the output.

Outro

So it was all about the high-level architecture of a single-threaded, asynchronous, and highly concurrent engine. If you want to learn more of it, you can check out the links in the references section below.

Also, if you like my content, you can support me with a 👍 and catch me on Twitter and LinkedIn. If you also like to host your repositories on GitHub, like me, you can find me there also GitHub.

Feedbacks are most welcome.

References

https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

https://v8.dev/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management#garbage_collection

Nowadays, Internet has become an essential part of our lives, and we need the Internet for daily purposes. Whether searching for resources to study or watching a movie on any OTT platform, we need the Internet.

In this article, we will try to understand the functioning and basics of the Internet and how it gets to us.

But, before we proceed further, you need to understand some general terms, they may not make much sense to you now, but we will understand them more clearly in our further reading.

Technical terminology

Network

A network is a connection of two or more computers connected with the help of an ethernet cable or wirelessly with wi-fi or Bluetooth.

Switch

The switch is a device used to connect the devices to communicate. It has ethernet ports, and all the devices are associated with an ethernet cable. We need a switch device to make a wired network by connecting two or more computers with an ethernet cable.

LAN

Local Area Network is a network connecting the computers of a small area with a switch to make them communicate with each other.

Router

A router is a device used to connect a LAN to the Internet.

Modem

A modem is equipment that connects our network to the telephone infrastructure. This modem turns the information from our network into information manageable by the telephone infrastructure and vice versa.

WAN

Wide Area Network extends over an extensive geographical area, comprising countries to continents. It is a network of Local Area Networks.

ISP(Internet Service Provider)

An ISP is a company that manages some special routers linked together and can also access other ISPs' routers. So the message from our network is carried through the network of ISP networks to the destination network. The Internet consists of this whole infrastructure of networks.

Packets

In networking, the packets are a smaller chunk of the more extensive information containing both data and information about itself. Information stored inside it is known as 'header,' which tells a computer what to do with its data.

Protocols

In networking, a protocol is a standardized way of doing specific actions and formatting data so that two or more devices can communicate with and understand each other. The protocol is needed because we need a common language for the devices with different hardware and software to communicate over the Internet.

Now, as we are familiar with the above terminology, we'll move forward to our main topic.

Why is distributed networking important for the Internet?

There is no control centre for the Internet. Instead, it is a distributed networking system, not dependent on any individual machine. Any computer or hardware that can send and receive data accurately (e.g., using the correct networking protocols) can be part of the Internet.

The Internet is resilient due to its distributed nature. Computers, servers, and other pieces of networking hardware connect and disconnect from the Internet all the time without impacting how the Internet functions — unlike a computer, which may not function at all if it is missing a component.

Connecting to the Internet (A network of networks)

A small number of computers are connected to transmit information in a local area network. But when we need to communicate to a computer outside our network, we need to connect to another local area network.

But it's not possible to set cables up between your house and the rest of the world, so how can you handle this? Well, there are already cables linked to your home, for example, electric power and telephone. The telephone infrastructure already connects your house with anyone in the world, so it is the perfect wire we need. We connect our network to the telephone infrastructure with a modem.

The next step is to send the messages from our network to the network we want to reach. To do that, we will connect our network to an Internet Service Provider (ISP). An Internet connection and a router are needed to connect to the Internet. The router allows a local area network to communicate with the Internet and send messages outside a network.

Whenever a message is sent to a device outside of a local area network over the Internet, it first goes to the router; the router checks the message's destination and sends it to the other router. This process continues until the message reaches its destination.

Intranet & Extranet

Intranet is a private network owned by a single organization and is a tool for sharing information throughout the organization. Since the intranet is a private network, no one can use the intranet without a valid username and password.

The extranet is also a private network like an intranet owned by either a single or many organizations. It is managed on a contractual basis between organizations and facilitates sharing of information between internal and external members.

Future of Internet

In the coming time, the Internet will take over our lives, from streaming music to turning off the light of our bedroom, and we will be doing everything with the help of the Internet. It has already made our lives very simple. We use the Internet for our day-to-day tasks, from searching for our assignment questions to searching for a particular recipe. We use it for almost everything.

Building a better and safer Internet

The invention of the Internet is a significant achievement on its own, but it doesn't always work as expected. Networking issues and malicious activity can slow down Internet access or block it together.

Third parties can spy on user activities, leading to abuse and, in some cases, government repression. Internet protocols and processes were not designed with security and privacy in mind since the people who first designed and built the Internet were more concerned with getting it to work than making it perfect.

However, we as a developer should work on building the Internet safer by contributing to the development of new, more fast, and secure protocols and educating users about the working of Internet technology, etc.

Conclusion

So this is a brief idea about how the Internet works. If you want to know more about its working and deep dive to understand everything, you can refer to the links below in the resources section.

Also, if you like my content, you can support me with a 👍 and you can catch me on Twitter, Instagram, LinkedIn and if you also like to host your repositories on GitHub like me, you can find me there also GitHub.

Feedbacks are most welcome.

Resources

MDN Web Docs
Cloudflare
HP

Credit

MDN Web Docs
Icons8
Cloudflare

Read more

How does the Web works?

We use the web for our day-to-day tasks, such as information, education, or entertainment.

But have you ever wondered how these websites get to your screen?

How do all those websites get to load within a fraction of seconds and become alive?

A lot is happening between you clicking the search button and the websites loads.

In this article, we will deep dive into the functioning of what happens behind the scenes after we click that search button inside our web browser.

Technical terminology

Before we move further, it is good to understand some technical terms.

You may not understand them, but you will see them making more sense in this article later.

I'll try my best to explain them in the simplest way possible for your understanding so that we can move further.

URL

Uniform Resource Locator is a form of text that we use to tell the browser exactly what we want. Ex- https://google.com

Clients

It is your computer connected to the internet, from which you request some information.

Servers

A server is a computer that stores all the data, including web pages, sites, apps, etc.

Internet

It is a network of all the world's computers that allows you to send and receive data on the web.

Protocols

Protocols are rules that clients and servers must follow to communicate.

TCP/IP

Transmission Control Protocol and Internet Protocol are communication protocols that define how data should travel across the internet.

IP Address

Internet Protocol Address is a unique address given to each device across the internet. It is in the form 192.158.11.38, each number ranging from 0-255.

DNS

Domain Name Servers are like the phone address book for websites containing the IP address of all the websites in it.

HTTP

Hypertext Transfer Protocol is an application protocol that defines a language for clients and servers to speak. It is the first part of the URL.

ISP

Internet Service Provider is a company that provides web access to consumers.

Now, as we are familiar with the above terminology, we'll move forward to our main topic.

The whole story

When you request a website from the web, you type something in the browser and click the search button.

1. The browser communicates with the DNS server and searches for the website's actual address you are requesting.
2. After the browser gets the website's actual address, it requests the server to send a copy of the website to you. This request made by the browser is known as an HTTP request. TCP/IP creates message requests and other data transfers between the client and the server.
3. If the server approves the client's request, the server sends the client a 200 OK message which means You can get a copy of the website and starts sending the website's files to the browser in the form of small chunks called data packets.
4. The browser then assembles the data packets into a complete web page and displays them onto the screen.

Conclusion

So this is a brief idea about how the web works behind the scenes. If you want to know more about its working and deep dive to understand everything, you can refer to the links below in the resources section.

Also, if you like my content, you can support me with a 👍 and you can catch me on Twitter, Instagram, LinkedIn and if you also like to host your repositories on GitHub like me, you can find me there also GitHub.

Feedbacks are most welcome.

Resources

MDN Web Docs
IP Address Checker
Video

Credit

MDN Web Docs
Rohit Rana (dev.to)