Understanding the Modern Web

QE to Dev journey, before going forward, you need to understand how programs work on the web. It’s essential to have a more granular understanding of the web itself. Some of this knowledge is necessary for a holistic understanding of the ecosystem you’ll be working in, while other aspects (like HTTP) are foundational to programming. Put yourself in a developer’s shoes, free your mind, and recall your knowledge for development.

There are certain major aspects to understand web development:

Design
Front-end
Back-end
Unit Test
Debugging
Deployment

Pre-Evaluation: Foundational Concepts

What is a client and a server? A client is a program that requests data or services from another program. A server is a program that provides those services. A common example is a web browser (client) requesting a web page from a web server (server). The browser sends a request, and the server responds by sending back the requested HTML, CSS, and JavaScript.
What are DNS servers? DNS (Domain Name System) servers act like the internet’s phonebook. They translate human-friendly domain names (like www.google.com) into computer-readable IP addresses (like 142.250.191.46). When you type a domain name into your browser, a DNS server finds the correct IP address so your computer can connect to the right web server.

1. Design

Q. What is Design?

In web development, design refers to planning the architecture and user experience of a web application. This includes the visual layout (UI/UX design) and the technical structure of the software (software design patterns). A good design ensures the application is efficient, scalable, and maintainable. For example, planning a database schema and API endpoints before writing code prevents major restructuring later.

Q. What are the properties of Object-Oriented Programming (OOP)?

OOP is a programming paradigm based on the concept of “objects,” which can contain data (fields/attributes) and code (methods/procedures). Its core principles include:

Encapsulation: Bundling data and methods that operate on the data into a single unit (an object), and restricting direct access to some of the object’s components.
Inheritance: A new class (child class) can inherit properties and behaviors from an existing class (parent class). This promotes code reuse.
Polymorphism: Objects of different classes can be treated as objects of a common superclass. This allows a single function or interface to work with objects of various types.
Abstraction: Hiding complex implementation details and showing only the essential features of an object.

Q. What is the MVC design pattern?

MVC (Model-View-Controller) is a popular software design pattern for structuring a web application. It separates an application into three interconnected components:

Model: Manages the data and business logic of the application. It’s the core of the app and is independent of the user interface.
View: The user interface part of the application. It’s what the user sees and interacts with, like the HTML a browser renders. It gets data from the Model.
Controller: Acts as an intermediary between the Model and the View. It handles user input, manipulates the Model, and updates the View.

A common example is an e-commerce website:

A user clicks to view a product (Request).
The Controller receives the request and asks the Model for the product details from the database.
The Model fetches the data and sends it back to the Controller.
The Controller passes this data to the View.
The View uses this data to render the HTML page showing the product details, which is then sent back to the user’s browser.

2. Front-end

Q. What is HTML and how is it used?

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It provides the structure of a web page using a system of tags (like <p> for a paragraph or <h1> for a heading). Browsers interpret HTML tags to display content, links, and images.

Q. What is CSS and how is it used?

CSS (Cascading Style Sheets) is used to describe the presentation of a web page written in HTML. It controls the visual styling, including colors, fonts, layout, and spacing. CSS allows developers to separate the structure (HTML) from the style (CSS), making websites easier to manage and update.

Q. What’s the difference between static and dynamic web pages?

Static web pages are fixed HTML documents stored on a server. Every time a user requests the page, the server sends the exact same file. They are simple, fast, and secure but lack interactivity and personalization.
Dynamic web pages are generated on the fly by a server-side script. The content changes based on user actions, database information, or other factors. For example, a social media feed is dynamic because it shows different content to different users.

Q. What is a Synchronous and Asynchronous call?

A synchronous call blocks the execution of a program until the operation is completed. It’s like a person waiting in line at a coffee shop: you must wait for the person in front of you to be served before you can order.
An asynchronous call allows the program to continue executing while the operation runs in the background. It’s like placing an online order for pickup: you can continue browsing or doing other tasks while the coffee is being prepared.

Q. How do AJAX calls work?

AJAX (Asynchronous JavaScript and XML) is a set of web development techniques that allows a web page to communicate with a server without reloading the entire page. Using the XMLHttpRequest or the more modern fetch() API, JavaScript sends an asynchronous request to the server, receives a response (often JSON), and then updates a specific part of the web page with the new data. This creates a smoother, more responsive user experience. For example, when you “like” a post on a social media site, the counter updates without the entire page refreshing.

Q. What is the DOM Tree and how can you manipulate it?

The DOM (Document Object Model) is a programming interface for HTML and XML documents. When a browser loads a web page, it creates a tree-like structure representing all the elements on the page. Each HTML tag is a “node” in this tree.

You can manipulate the DOM using JavaScript to dynamically change the content, structure, and style of a web page. For example, you can add new elements, change the text of a paragraph, or hide an image using JavaScript methods like document.createElement(), document.getElementById().innerHTML, or element.style.display.

3. Back-end

Q. How do the Request and Response work?

The Request-Response cycle is the fundamental process of web communication.

A client (e.g., a web browser) sends an HTTP Request to a server. This request includes details like the URL, the type of request (e.g., GET, POST), and any data.
The server receives the request, processes it, and generates an HTTP Response.
The response is sent back to the client and contains a status code (e.g., 200 OK, 404 Not Found) and the requested data (e.g., HTML, JSON).

Q. What is a Java Servlet and its lifecycle?

A Java Servlet is a Java class that extends the capabilities of a server. Servlets are used to handle HTTP requests and generate responses. They are server-side components that can process dynamic web content.

The lifecycle of a Servlet involves three main phases:

Initialization (init() method): The servlet container (like Tomcat) loads the servlet and calls the init() method once to set it up.
Service (service() method): For every incoming request, the container creates a new thread and calls the service() method. This method determines the type of request (GET, POST, etc.) and calls the appropriate handler method (e.g., doGet(), doPost()).
Destruction (destroy() method): When the servlet is removed from service (e.g., when the server shuts down), the container calls the destroy() method once to clean up resources.

Q. How does a Servlet Container serve a request?

A Servlet Container (e.g., Apache Tomcat) is a part of a web server that manages the lifecycle of servlets. When a web server receives a request for a servlet, it passes the request to the container. The container:

Checks if the requested servlet is loaded. If not, it loads and initializes it.
Creates a request and response object for the incoming request.
Assigns a thread to the servlet and invokes its service() method, passing the request and response objects.
The servlet’s service() method processes the request and writes the response.
The container sends the response back to the client.

4. Unit Test

Q. What is White box testing?

White box testing, also known as clear box or structural testing, is a software testing method where the tester has knowledge of the internal workings, code structure, and design of the system being tested. The goal is to verify the internal logic, code paths, and data flow to ensure the code works as intended and to cover all possible execution paths.

Q. Give some examples of Unit testing.

Unit testing is a level of software testing where individual components (units) of a software application are tested in isolation. Examples include:

Testing a function that calculates a user’s age to ensure it returns the correct value for various inputs (e.g., date of birth).
Testing a function that sorts an array to verify that it sorts numbers and strings correctly in ascending and descending order.
Testing a database access method to confirm it retrieves and stores data as expected.

5. Debugging

Q. What is Debugging?

Debugging is the process of finding and resolving defects or “bugs” in a computer program. It involves systematically analyzing the code to identify the source of an error and then correcting it. The goal is to make the software behave as expected.

Q. How does Debugging work?

Debugging typically involves a combination of tools and techniques:

Reproducing the bug: The first step is to consistently replicate the error to understand its context.
Using a debugger: A debugger is a tool that allows you to step through the code line by line, inspect the values of variables at each step, and set “breakpoints” to pause execution at specific points. This helps pinpoint where the code is misbehaving.
Logging: Inserting log statements (e.g., console.log() in JavaScript or System.out.println() in Java) to print out variable values or program flow messages can help track the state of the program and identify the point of failure.

6. Deployment

Q. How does Web Application Deployment work?

Deployment is the process of moving a web application from the development environment to a production environment where it can be accessed by users. This involves several steps:

Building: Compiling and packaging the application’s source code into a deployable artifact (e.g., a .war file for Java or a container image for Docker).
Configuration: Setting up server-specific settings, like database connections, environment variables, and security keys.
Uploading: Transferring the application artifact to a web server or application server.
Starting the server: Running the server to make the application accessible to the public. Modern deployment often uses tools like Docker and Kubernetes for containerization and orchestration, simplifying this process.

Q. What is a Web server and an Application server?

A Web server (e.g., Apache HTTP Server, Nginx) is a program that handles HTTP requests and serves static content like HTML, CSS, and images. It’s optimized for speed and simplicity.
An Application server (e.g., Apache Tomcat, JBoss) is a server that provides an environment for running dynamic applications. It extends a web server by providing a runtime environment for server-side code (like Java Servlets or Spring Boot applications), managing resources like database connections, and handling complex business logic. In many modern deployments, these roles are often combined or managed by a single server that can serve both static and dynamic content.

Footnotes:

Additional Reading

OK, that’s it, we are done now. If you have any questions or suggestions, please feel free to comment. I’ll come up with more topics on Machine Learning and Data Engineering soon. Please also comment and subscribe if you like my work, any suggestions are welcome and appreciated.

Post Views: 1,502