RAMCO INSTITUTE OF TECHNOLOGY

Department of Information Technology

Academic Year: 2024 – 2025 (Even Semester)
IT3501 & Web Essentials

UNIT I – BASICS OF FULL STACK 9

Understanding the Basic Web Development Framework - User - Browser – Webserver - Backend
Services – MVC Architecture - Understanding the different stacks –The role of Express – Angular –
Node – Mongo DB – React

1.Understanding the Basic Web Development Framework

➢ A web development framework is a collection of tools, libraries, and best practices that
help developers build web applications more efficiently. Frameworks help organize code, speed
up development, and ensure consistency.
➢ Frameworks can be used on the frontend (client-side), backend (server-side), or full stack
(both).

Types of Web Development Frameworks:

a) Frontend Frameworks (Client-Side)
These help in building the user interface and handle interactions in the browser.
Examples:
o React.js (Library by Facebook)
o Angular (Framework by Google)
o Vue.js (Progressive framework)
Key Features:
• Component-based development
• Data binding
• Routing
• State management
b) Backend Frameworks (Server-Side)
These are used for creating server logic, managing databases, APIs, and authentication.
Examples:
o Express.js (for Node.js)
o Django (Python)
o Spring Boot (Java)
o Laravel (PHP)
 Key Features:
• Middleware support
• Routing and URL handling
• Database ORM integration
• Request/Response management

Common Full Stack Combinations:

Stack Name Technologies Involved

MEAN MongoDB, Express.js, Angular, Node.js

MERN MongoDB, Express.js, React.js, Node.js

LAMP Linux, Apache, MySQL, PHP

Django + React Django (backend) + React (frontend)

Benefits of using Frameworks:

Consistent code structure
Cross-browser compatibility
Community support and documentation
Enhanced performance and security

2. Users-Browser-Web Server-Back end services

Users: are a fundamental part of all websites. In a web framework, the user interacts with the visual
output of webpages and provides input through actions like clicking, typing, or using touch
gestures on mobile devices.
Browser: The browser has three main roles in a web framework. First, it sends and receives data to
and from the web server. Second, it processes and displays the data as a visual webpage. Third,
it handles user input like clicks, typing, or touch and responds accordingly.

Browser to Web Server Communication:

Communication between the browser and web server occurs through a series of requests and
responses using the HTTP or HTTPS protocols.
HTTP(Hyper Text Transfer Protocol)
Defines how the browser communicates with the web server.
Specifies types of requests (e.g., GET, POST, PUT, DELETE).
Sets the format for sending requests and receiving responses.
Used for retrieving webpages, images, stylesheets, and scripts.
 HTTPS (Hyper Text Transfer Protocol Secure)

o A secure version of HTTP.

o Adds a security layer (SSL/TLS) to encrypt data exchanged between browser and
server.

o The web server provides a digital certificate to prove its identity.

o The browser verifies the certificate, and if trusted, establishes a secure connection.

o Ensures data privacy, integrity, and protection from eavesdropping.

The browser primarily makes three types of requests to the web server:
1. GET Request
• Used to retrieve data from the server.
• Commonly used to fetch:
o HTML files
o Images
o JSON data
• Example: Loading a webpage or an image.

2. POST Request
• Used to send data to the server.
• Typically used when:
o Submitting a form
o Adding an item to a shopping cart
o Sending login credentials
• The data is usually sent in the body of the request.

3. AJAX Request
(AJAX – Asynchronous JavaScript and XML)
• Not a separate HTTP method, but a technique to make GET or POST requests using
JavaScript.
• Enables asynchronous communication without reloading the page.
• Can handle various response types:
o XML
o JSON
o Plain text or raw data
• Improves user experience by allowing partial page updates.
Rendering the Browser View:
Rendering is the process by which the browser displays a web page to the user. It starts by retrieving
content from the server and then constructing a visual interface the user can interact with.
Rendering Process Overview:
1. The browser fetches HTML from the server based on the URL.
2. It parses the HTML and builds a DOM (Document Object Model).
3. The DOM is a tree structure that mirrors the HTML layout:
document
└── html
├── head
└── body
├── div
└── p
4. The browser uses CSS, JavaScript, and other assets to style and enhance the webpage.
5. It finally renders the page on the screen.
DOM
• The Document Object Model (DOM) is a structured tree representation of the HTML
document.
• Each tag becomes a node in the tree.
• JavaScript can dynamically modify the DOM to update content without reloading the page.
Common Types of Data the browser uses to render the final view as well as web page behaviour
The browser may request multiple types of files to fully render a webpage:
a) HTML Files
• Define the structure and content of the webpage.
• Forms the base of the DOM.
b) CSS Files
• Define the style of each element:
o Font, color, size, margin, border, etc.
• Help create a consistent and visually appealing layout.
c) Client-side Scripts (JavaScript)
• Add interactivity and logic to the page.
• Can:
o Modify the DOM dynamically
o Handle user events (clicks, input)
o Validate forms
o Fetch additional data (AJAX)
d) Media Files
• Include images, videos, and audio.
• These files enhance content and user experience.
e) Data Files (AJAX)
• Includes JSON, XML, or plain text.
• Retrieved via AJAX without reloading the page.
• Used to update parts of the page dynamically through JavaScript.

Web Server: A Web Server is a software or hardware system that receives requests from web
browsers (clients) and delivers content like HTML pages, images, and data files in response.
Examples: Apache, Nginx, Express (Node.js), Microsoft IIS.
Functions:
o Receives HTTP requests from the browser.
o Serves static files (HTML, CSS, JS, images).
o For dynamic content, forwards requests to backend services.
o Ensures proper routing and response handling.
Back end Services
Backend services run behind the web server and supply the data needed to respond to the browser.
The most common backend service is a database.
When a browser request needs data, the server-side script connects to the database, fetches the
required data, formats it, and sends it back to the browser. Similarly, when the browser sends data
to be saved, the backend updates the database accordingly.

3. Model View Controller Architecture

The Model-View-Controller (MVC) framework is an architectural/design pattern that separates an
application into three main logical components Model, View, and Controller

Controller:
The controller is the component that enables the interconnection between the views and the model so it
acts as an intermediary. The controller doesn’t have to worry about handling data logic, it just tells the
model what to do. It processes all the business logic and incoming requests, manipulates data using
the Model component, and interact with the View to render the final output.
Responsibilities:
• Receiving user input and interpreting it.
• Updating the Model based on user actions.
• Selecting and displaying the appropriate View.
Example: In a bookstore application, the Controller would handle actions such as searching for a
book, adding a book to the cart, or checking out.
View:
The View component is used for all the UI logic of the application. It generates a user interface for the
user. Views are created by the data which is collected by the model component but these data aren’t
taken directly but through the controller. It only interacts with the controller.
Responsibilities:
• Rendering data to the user in a specific format.
• Displaying the user interface elements.
• Updating the display when the Model changes.
Example: In a bookstore application, the View would display the list of books, book details, and
provide input fields for searching or filtering books.
Model:
The Model component corresponds to all the data-related logic that the user works with. This can
represent either the data that is being transferred between the View and Controller components or any
other business logic-related data. It can add or retrieve data from the database. It responds to the
controller's request because the controller can't interact with the database by itself. The model interacts
with the database and gives the required data back to the controller.
Responsibilities:
• Managing data: CRUD (Create, Read, Update, Delete) operations.
• Enforcing business rules.
• Notifying the View and Controller of state changes.
Example: In a bookstore application, the Model would handle data related to books, such as the book
title, author, price, and stock level.

Advantages of MVC Architecture

1. Separation of Concerns
• Each component (Model, View, Controller) has a distinct responsibility.
• Makes code cleaner, more organized, and easy to understand.
2. Improved Code Maintenance
• Since logic, UI, and data are separated, developers can easily maintain or update one
layer without affecting the others.
3. Parallel Development
• Multiple developers can work simultaneously:
o One on the UI (View)
o One on the backend (Model)
o Another on the Controller logic
• Boosts productivity and shortens development time.
4. Reusability of Components
• Components such as models and views can be reused across different parts of the
application.
 5. Better Testing and Debugging
• Easier to test each component individually:
o Models can be tested for data logic.
o Controllers for input handling.
o Views for rendering output.
6. Supports Asynchronous Development
• MVC supports asynchronous techniques (like AJAX) to update the view without
reloading the entire page.
7. Scalability
• MVC applications are easier to scale as your project grows in size and complexity.
8. Enhanced Control
• Controllers give full control over application flow and behavior, making it easier to
manage complex logic.
9. Framework Support
• Widely adopted in modern web frameworks:
o Node.js + Express
o Django
o Spring MVC
o Ruby on Rails

4.Understanding the different stacks

Technology Stack: A stack is a combination of technologies used together to build a full web
application covering frontend (client-side), backend (server-side), and database (data layer).
Examples:
• MERN Stack – MongoDB, Express, React, Node.js
• MEAN Stack – MongoDB, Express, Angular, Node.js

Stack Name Technologies Included

MERN MongoDB, Express.js, React.js, Node.js

MEAN MongoDB, Express.js, Angular, Node.js

LAMP Linux, Apache, MySQL, PHP

MEVN MongoDB, Express.js, Vue.js, Node.js

 5.Node.js
• Node.js is an open-source, cross-platform, JavaScript runtime environment that allows you to
run JavaScript code outside the browser, primarily on the server-side.
• Built on Google Chrome’s V8 JavaScript engine.
• Enables JavaScript to be used for backend development.

Some of the Reasons that Node.js is a Great Choice for Web Development
1. JavaScript End-to-End
• Node.js allows developers to write both frontend and backend code in JavaScript.
• Reduces confusion in deciding where to place logic (client vs. server).
• Promotes code reusability between frontend and backend.
• Improves team collaboration – frontend and backend teams use the same language.
2. Event-Driven Scalability
• Uses a single-threaded, non-blocking event loop to handle requests.
• More scalable than traditional multi-threaded servers (like Apache).
• Ideal for real-time applications (e.g., chat apps, live updates).
• Efficiently handles large numbers of simultaneous connections.
3. Extensibility
• Node.js has a large ecosystem with thousands of modules and packages available via npm
(Node Package Manager).
• Modules can be installed easily to add new features in minutes.
• Backed by a strong, active community constantly developing and updating libraries.
4. Quick Setup & Development Time
• Node.js is easy to install and set up.
• Able to implement a basic web server running in just a few lines of code.
• Saves development time, making it ideal for rapid prototyping and startups.

6. MongoDB
MongoDB is a NoSQL, document-oriented, and highly scalable database.
The name "Mongo" comes from "humongous", emphasizing its ability to handle large-scale
data.
Instead of storing data in traditional tables (rows and columns), MongoDB stores data as
JSON-like documents (BSON format).
Features:
• Schema-less design makes it flexible and perfect for fast-changing data models.
• Fast and scalable — suitable for high-traffic websites and real-time apps.
• Ideal for storing user data, comments, blogs, and other dynamic content.
• Integrates well with Node.js through its official MongoDB driver.
Key Advantages of MongoDB:
1. High Performance
• MongoDB is known for its fast read/write operations, making it one of the highest-performing
databases.
• Essential for websites and applications that handle heavy traffic or real-time data.
2. High Availability
• MongoDB supports replication, meaning data is automatically copied across multiple servers.
• This ensures continuous availability even if one server goes down.
3. High Scalability
• MongoDB supports horizontal scaling using a technique called sharding.
• It can distribute data across multiple machines, allowing the system to grow easily as data
volume increases.
4. Protection Against SQL Injection
• Since MongoDB is NoSQL and uses object-based document storage, it is not vulnerable to
SQL injection attacks.
• No use of SQL strings prevents attackers from injecting harmful queries.

7. Express
• Express.js is a minimal and flexible web application framework for Node.js.
• It acts as the webserver in stacks like Node.js–Angular or MERN/MEAN.
• Makes building server-side applications simple and efficient.
• Allows developers to handle HTTP requests, define routes, manage sessions, and more with
just a few lines of code.

Benefits of Express in Full Stack Development

• Acts as the middleware layer between frontend (Angular/React) and backend logic.
• Supports REST API development easily.
 • Highly customizable with third-party middleware modules.
• Works well with authentication, session tracking, and data exchange (JSON).
Features of Express Framework
Feature Description
Route Management Define custom URLs (routes) that execute specific server-side logic
Error Handling Built-in mechanisms to handle errors (e.g., 404 not found, internal errors)
Cookie Support Simplifies reading and writing of cookies from the client
Session & Cache Enables session tracking and caching of user data
Easy Integration Can be placed behind reverse proxies like Nginx, for secured deployment
Fast Setup Create a working web server with just a few lines of code

Example: Simple Express Server

const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Welcome to Express.js!');
});
app.listen(3000, () => {
console.log('Server running at http://localhost:3000');
});

8. Angular
• Angular is a client-side web framework developed by Google.
• It is written in TypeScript, a superset of JavaScript that adds static typing and object-oriented
features.
• Angular is designed to simplify the development of dynamic, single-page web applications
(SPAs).
• It follows the MVC (Model-View-Controller) architectural pattern to separate logic, data, and
presentation.

Benefits of Angular:
1. Powerful Data Binding
• Angular provides two-way data binding, which automatically synchronizes data between the
model and the view.
• This simplifies handling user input and updating the UI in real-time.
2. High Extensibility
• Angular’s architecture is highly modular and customizable.
• Developers can easily extend components, directives, and services to fit specific project needs.

3. Clean and Structured Code

• Angular encourages writing organized and maintainable code.
• It enforces best practices like separation of concerns using components and services.

4. Reusable Components
• Thanks to its component-based structure and custom services, Angular promotes code
reusability.
• Developers can create shared modules and reuse them across different parts of the application.

5. Strong Community and Support

• Developed and maintained by Google, Angular has strong long-term support.
• Extensive documentation, tools, and community resources are available.

6. TypeScript Compatibility
• Angular is built with TypeScript, which provides type safety, better tooling, and easier
debugging.
• It’s easier to integrate Angular into enterprise environments that already use JavaScript or
TypeScript.

9. React
React is a powerful JavaScript library for building fast, scalable front-end applications. Created by
Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual
DOM,enabling efficient UI updates and a seamless user experience.

Key Features of React.js

1. React uses a component-based architecture, allowing you to build reusable and maintainable
user interfaces.
2. It uses JSX (JavaScript XML), a syntax that lets you write HTML-like code within JavaScript.
3. React operates with a Virtual DOM, which improves performance by minimizing real DOM
manipulations.
4. One-way data binding ensures a predictable data flow, making applications easier to debug.
Working Principle of React.js
1. React components are defined using functions or classes that return JSX.
2. When the application runs, React builds a Virtual DOM, which is a lightweight in-memory
copy of the real DOM.
3. When a component’s state or props change, React creates a new Virtual DOM.
4. React uses a diffing algorithm to compare the new Virtual DOM with the previous one.
5. It identifies the minimum set of changes and updates only the necessary parts of the real
DOM.
6. This process makes UI rendering fast and efficient, especially in dynamic applications.

Benefits of React.js
1. React offers high performance due to its Virtual DOM and efficient rendering.
2. Reusable components reduce code duplication and improve maintainability.
3. It enables faster development through simple syntax, modular structure, and built-in tools.
4. React delivers a better user experience by rendering only the necessary UI elements.
5. The framework is easy to learn for developers familiar with JavaScript.
6. It has strong community support and is actively maintained by Meta (Facebook).

In full-stack development, various technology stacks like MEAN (MongoDB, Express, Angular,
Node.js) and MERN (MongoDB, Express, React, Node.js) offer complete solutions for building
robust applications. Each technology in the stack plays a vital role:

• Express.js handles server-side routing and middleware.

• Angular and React manage the dynamic client-side interface.

• Node.js enables scalable backend development using JavaScript.

• MongoDB provides a flexible, NoSQL database solution for storing and retrieving data
efficiently.