DEV Community: Yireobong William

Understanding Browser Architecture: A brief overview

Yireobong William — Fri, 05 Apr 2024 13:19:49 +0000

Web browsers play a vital role in our everyday lives as they serve as the primary means of accessing the internet which helps in making communication easier and faster, keeping us well-informed, and providing entertainment. They could easily pass as the most used piece of software. Of course, we are familiar with the major web browsers, including Google's Chrome, which, according to statistics, is the most used web browser in the world. Others include Mozilla's Firefox, Microsoft's Edge, Apple's Safari, Opera web browser, and the list goes on. This article aims to enlighten you on the intricate workings of the web browser, unraveling what goes on under the hood and how the web browser achieves its functionality.

The main functionality of a web browser is to fetch resources, which are mostly HTML files with style sheets and some JavaScript scripts, and then proceed to display the information in an understandable way for end users. This goal is achieved by the collaboration of various components in the web browser, including the user interface, the rendering engine, the JavaScript engine, networking components, data storage, and browser plugins/extensions.

The roles of the various components are as follows;

User Interface

The user interface, as the name suggests, refers to the visual components that end users see and interact with. This includes the address bar, search buttons, bookmark buttons, and various other components on the browser screen. The user interface differs across various browsers, but it is usually simple and easy to use.

The Rendering Engine

The rendering engine deals with the processing of acquired HTML/XML files into visually pleasing layouts for end users. HTML files mostly consist of tags and other components that, if displayed as is, would be unappealing to the average user. As such, the rendering engine processes them alongside the attached CSS file (if any) and presents to you the beautiful website you see on the screen. Different browsers make use of different rendering engines; for example, Google Chrome and Opera use Blink, Mozilla Firefox uses Gecko, while Chrome and Safari use Webkit.

The Browser Engine

It is fair to refer to this component as the powerhouse of the web browser as it functions as a middleman between the user interface, the rendering engine, and other browser components. It ensures that inputs from the user, such as typing in a web address or clicking a link, are accurately relayed and trigger the appropriate feedback. A fast and efficient browser engine ensures that web pages load smoothly and quickly, thereby enhancing the user experience.

Javascript Engine(Interpreter)

As we all know, JavaScript is the language of the web. It enables developers to create websites with dynamic content, interactive features, and visually appealing animations. It wouldn't make sense if browsers didn't come with JavaScript interpreters. The JavaScript interpreter is the component of the browser that parses and executes JavaScript code embedded on web pages. The interpreted results are generated and forwarded to the rendering engine for appropriate action.

Networking Components

These refer to the components involved in network communications using protocols such as HTTPS and FTP. They are responsible for tasks like resolving web addresses into IP addresses, establishing network connections, making HTTP requests to web servers, fetching required resources like HTML/CSS files, and relaying them to the rendering engine for proper rendering/display.

Data Storage

You might be wondering what data storage has to do with web browsers, but hear me out. Your web browser stores minute amounts of data. Browsers make use of three storage mechanisms: localStorage, sessionStorage, and cookies. localStorage stores data that is persistent (remains in the browser memory even after being refreshed or closed) and can only be accessed by client-side JavaScript, not by the server. sessionStorage is similar to localStorage except that data stored here isn't persistent. Data stored in cookies are persistent; they can be configured to be accessed only by the server and not by client-side JavaScript. Cookies help inform websites about the user, enabling the websites to personalize the user experience. In addition, some cookies are necessary for security purposes, such as authentication cookies.

Browser Plugins/Extensions

Plugins or browser extensions refer to non-standalone software that can be added to web browsers for extra functionality. Plugins are generally created using web-based technologies like JavaScript. Web browser plugins can add or remove content from websites, such as blocking intrusive ads or allowing users to edit content on web pages. With plugins, one can easily add new features to a web browser.

Understanding browser architecture not only enriches our comprehension of the digital realm but also empowers us to navigate the vast landscape of the internet with greater insight and efficiency.

Feel free to drop your thoughts in the comment section.
Thank you.

Exploring the mechanics of internet connectivity

Yireobong William — Mon, 25 Mar 2024 21:00:58 +0000

In modern society, we all make use of the internet in our daily lives, whether for work or pleasure. From watching Netflix to researching on Google to playing fun online games with friends and family. But have you ever slowed down and wondered how it actually works behind the scenes? Well, today we'll be exploring how the internet actually pulls off the great feat of connecting the whole world in what could be called a global village. Let's dive right into it.

What is the Internet?

Before delving into what the internet is all about, we need to understand what a network is. A network is the connection of two or more devices, enabling communication between them and the sharing of data, information, and other resources.
The internet, which began as ARPANET, was developed in the late 1960s by the United States Department of Defense as a means of creating a decentralized communication network capable of withstanding a nuclear attack.
Today the internet is used by more than 2 billion of the world's population, it facilitates communication, provides quick access to a wide array of information and resources that previously would take years to gather, enhances entertainment in the form of video games, movies and the likes. businesses and brands also make use of the internet in order to reach their target audience and enhance sales. these among others are the various roles the internet plays in the modern world.

An overview of how the internet operates.

The internet operates under a set of standard protocols that govern how information is exchanged between connected devices and computer systems. At its core, the internet consists of a network of interconnected routers responsible for directing traffic throughout the entire ecosystem.
Data isn't transferred in bulk as one might assume, but rather broken down into tiny bits called packets. This enhances the speed and efficiency of data transfer. The IP and TCP protocols play vital roles in this process. Internet Protocol (IP) ensures that packets reach the correct address, while the Transmission Control Protocol (TCP) ensures that packets are transmitted in the correct order and reliably.
Other protocols include the Domain Name System (DNS),Hypertext Transfer Protocol (HTTP), Secure Socket Layer (SSL), Transport Layer Security (TLS) and a bunch of others.

Protocols and Why They Are Necessary

Protocols are sets of rules and standards that define how information is shared between various devices and systems.
These protocols exist to maintain consistency across the network. For example, a web browser developed by Company A can communicate freely and efficiently with a web server developed by Company B, provided they both adhere to the standard protocols.
The most common protocols and their roles include Internet Protocol (IP), Transmission Control Protocol (TCP), User Datagram Protocol (UDP), Domain Name System (DNS), and many others.

Basic terminologies/concepts

Packet: A small unit of data that is transmitted over the internet.
Router: A device that directs packets of data between different networks.
IP Address: A unique identifier assigned to each device on a network, used to route data to the correct destination.
Domain Name: A human-readable name that is used to identify a website, such as google.com.
DNS: The Domain Name System is responsible for translating domain names into IP addresses.
HTTP: The Hypertext Transfer Protocol is used to transfer data between a client (such as a web browser) and a server (such as a website).
HTTPS: An encrypted version of HTTP that is used to provide secure communication between a client and server.
SSL/TLS: The Secure Sockets Layer and Transport Layer Security protocols are used to provide secure communication over the internet.

Understanding these various terminology plays a role in the understanding of the internet, let's dive deeper into the roles each plays in the smooth operation of the internet.

IP Addresses and Domain Names

Let's get started with what IP addresses are and why they are very important.

In the real world, our houses have addresses that help us differentiate them from other houses and determine their position relative to other structures. If someone wants to visit you, you give them your address, making it very easy for them to come see you. IP addresses work in the same way; they are unique identifiers given to devices connected to the internet to differentiate them from other devices. IP addresses are usually four sets of numbers separated by periods, e.g., 192.168.1.1.

Now, it would be impossible for humans to memorize these numbers and use them when they need to access a particular site. That's where domain names come in. Domain names are human-readable names used to represent IP addresses. The introduction of domain names also led to the adoption of a Domain Name System (DNS). Since computers won't be able to recognize domain names, the DNS acts as a register that stores IP addresses and their corresponding domain name(s). When you open up your browser and type in a domain name like facebook.com, the browser sends a request to the DNS for the IP address corresponding to the said domain name. When the DNS returns the IP address, the browser then proceeds to access the website.

Understanding HTTP and HTTPS

Hypertext Transfer Protocol (HTTP) and HTTPS (HTTP Secure) are the most commonly used protocols for transferring data. They are used by your web browser to communicate with the server. When you want to visit a website in your browser, the web browser sends an HTTP request to the server asking for the website, web app, or whatever resources you're looking for. The server then sends back an HTTP response containing the requested data/information.

HTTPS is a more secure version of the HTTP protocol; it is encrypted with SSL/TLS, thus allowing for the protection of very sensitive information such as payment credentials, passwords, personal data, etc. HTTPS is definitely the more widely used of the two protocols, as the need for security on the internet has been on the rise.

Securing Internet Connections with SSL/TLS

As mentioned earlier, these protocols are used for the encryption of sensitive data exchanged between devices to minimize the risk of data breaches. These protocols ensure secure internet communication.

A few terms to be familiar with when discussing SSL/TLS include:

Certificates: These are used to establish trust between the client and the server. They usually contain information about the server and are typically signed by a trusted third party to verify their authenticity.

Handshake: This refers to a process in which the client and the server exchange information to decide on the encryption algorithm and other parameters to be used during the connection.

Encryption: Once the connection is established, data encrypted with the previously agreed encryption method is shared between the client and server.

When building web services and web apps, one must endeavor to obtain and maintain valid SSL/TLS certificates and ensure to follow best practices regarding their usage, as this enables secure connections and reduces the risk of data leakage.

The Future of the Internet

With the rise of new technological advancements, the internet has been growing rapidly and doesn't seem like it would be slowing down anytime soon. The introduction of 5G networks, which enable large amounts of information to be distributed at super speed, enhances the overall performance of the internet. Within the last few years, AI was introduced and has so far proved to be a force to reckon with due to its endless possibilities and extreme flexibility. With AI in the picture, we can delegate some tasks to them, which they carry out with speed and accuracy, thereby increasing our efficiency in carrying out assigned tasks.

Internet of Things (IoT) refers to the network of physical devices, vehicles, home appliances, and other objects that are connected to the internet and can exchange data. As IoT continues to grow, it is expected to revolutionize industries such as healthcare, transportation, and manufacturing.

Blockchain is a distributed ledger technology that enables secure, decentralized transactions. It is being used to power a wide range of applications, from cryptocurrency to supply chain management.

I hope you found this article useful. If you have any questions, suggestions or comments, please feel free to leave them below. Thanks for reading!