JAL1502 - WEB DEVELOPMENT FRAMEWORK

UNIT I BASICS OF WEB DEVELOPMENT FRAMEWORK AND FULL STACK

Understanding the Basic Web Development Framework - User - Browser - Webserver - Backend
Services - Understanding the Node.js-to-Angular Stack Components.
1.1 UNDERSTANDING THE BASIC WEB DEVELOPMENT FRAMEWORK:
What's Web Development?

 Web development is the process of creating, building, and maintaining websites and web
applications that run online.
What are the types of Web Development?
 Web development can be broken down into three types:
 Front end: The part of the website where the user interacts directly.
 Back end: The server side of the website.
 Full-stack: Covers both front-end and back-end responsibilities.
What is Framework?

 Framework is a platform for developing applications which provides a foundation on which

software applications can be built. The front end frameworks are the software packages that
provide -
 The reusable code modules,
 Standardized front end technologies and
 Ready made interface blocks for making the front end development faster and simple.
What is a Web Development Framework (WDF)?
 A web development framework is a collection of tools, libraries and technologies that are used
to create web applications and websites. It provides a basic structure and set of conventions for
developers to build web applications quickly and efficiently as well as to develop application
programming interfaces (APIs).
 Web development frameworks are also referred to as web application frameworks or simply
web frameworks.
Why do we use Web Development Framework?
1. Saves Time : The most striking feature of web framework is that it saves time and energy in
developing any app because the developer doesn't need to worry about session handling, error
handling and authentication logic. These functions are taken care of by web framework

2. Well Organised Application : The web framework itself takes care of managing directories
and files. This makes the complete application well organized.
3. Flexibility and Customisable : Add-ons, themes, plugins, widgets enable rapid customization
on the web application. This brings out a lot of flexibility in code development.
4. Code Reusability : Framework also promotes the reuse of code.
5. Security : Framework makes developer sure that the application uses good security
measurements because the framework itself takes care of it.
BASIC COMPONENTS OF WEB DEVELOPMENT FRAMEWORK:
 The basic components of web development framework are :
1. User
2. Browser
3. Webserver
4. Backend Services

 Although websites vary greatly on appearance and behavior, all have these basic components
in one form or another.
1. USER
 User is an important fundamental part of web development framework.
 Users expectations from a website define the requirements for developing good website.
 Normally an efficient and easy to use website is preferred by the user. They also expect
that the same website must behave closer to the applications installed on their
computers and mobile devices.
 User Interacts with the browser by using input devices such as mouse, keyboard on PC
or swipes and taps on mobile devices. The web framework processes the user input and
provides the required visual output.
ROLE:
 The user interacts with the web application through a browser. This interaction
drives the flow of data between the client (browser) and server.
 Actions taken by the user, such as clicking a link, submitting a form, or loading a
webpage, trigger events that initiate communication with the server.
2. BROWSER
 Browser is an application for accessing websites. User interacts with the browser in the
web development framework.
 The browser place three roles in the web framework :
1. It provides communication to and from the web server.
  Requesting Resources: The browser sends HTTP requests to a server to fetch
resources, such as HTML, CSS, JavaScript files, images, and other content.
These resources are necessary to display the webpage and provide functionality.
2. It interprets the data from the server and display the visible output.
 Rendering Content: Once the resources are retrieved, the browser parses the
HTML, CSS, and JavaScript to render the content on the screen. It constructs
the Document Object Model (DOM) from the HTML and applies CSS for
styling. JavaScript is then executed to handle dynamic content and interactivity.
3. The browser handles the user interaction through the keyboard, mouse, touch
screen or other input devices and takes the appropriate action.
 Managing User Interactions: The browser listens for user interactions, such as
clicks, typing, scrolling, and other events. It processes these events, triggering
JavaScript functions or actions (like navigation or form submissions) and
updating the DOM as needed.
ROLES OF THE BROWSER:
 The browser is the software application that displays web pages and interfaces
with the user. It processes HTML, CSS, JavaScript, and other content received
from the server.
 The browser acts as the intermediary between the user and the server,
interpreting and rendering content while managing the communication with the
server via HTTP.
COMPONENTS WITHIN THE BROWSER:
i. JavaScript Client Side: JavaScript runs within the user's browser and is
responsible for creating dynamic content and handling user interactions
without requiring a full-page reload. For instance, JavaScript can validate
form inputs, manipulate the DOM (Document Object Model), and
send/receive data from the server using AJAX (Asynchronous JavaScript and
XML).
 Role: JavaScript runs on the client-side (within the browser) and is
responsible for making the webpage dynamic and interactive.
 Tasks:
1. Manipulating the DOM (e.g., showing/hiding elements, updating
content).
2. Handling events triggered by user actions (clicks, form submissions).
3. Sending asynchronous requests to the server via AJAX, allowing for
dynamic updates without refreshing the entire page.
ii. JSON/XML,etc.: Data exchanged between the browser and server is often
formatted as JSON (JavaScript Object Notation) or XML (Extensible
Markup Language). These formats are used for sending structured data
during asynchronous operations, such as fetching data from a server without
reloading the page (e.g., via AJAX requests).
 Role:JSON (JavaScript Object Notation) and XML (Extensible Markup
Language) are data interchange formats used for communication between
the client and server.
 Tasks:
1. JSON is commonly used for transferring data between the browser
and server because it’s lightweight and easy to parse.
2. These formats are crucial in AJAX operations where the server sends
data that the browser processes and displays without a page reload.
iii. HTML/CSS/Images: The browser renders the web page using HTML (for
structure), CSS (for styling), and Images (for visual content). These are static
resources that define how the content is displayed to the user.
 Role: HTML (HyperText Markup Language) structures the content, CSS
(Cascading Style Sheets) styles the content, and images provide visual
elements.
 Tasks:
1. The browser uses HTML and CSS to render the user interface. It
combines these with images and other media to create a visually
engaging experience.
2. The browser retrieves these files either from the server during page
load or caches them for future use.
iv. User Interactions: The user’s actions within the browser (like clicking a
button or submitting a form) trigger events that are handled by JavaScript.
These interactions can lead to requests being sent to the server, such as
fetching new data, submitting a form, or navigating to another page.
 Role: User interactions are the actions taken by the user, such as clicking
a button, entering data, or navigating through the site.
 Task:
1. These interactions trigger events in the browser. JavaScript handles
these events and may update the UI or send data to the server
depending on the interaction.
HTTP COMMUNICATION:
 Role: The communication between the client (browser) and the server
happens through HTTP (Hypertext Transfer Protocol). HTTP is the
foundation of data communication on the web.
 Different HTTP methods (like GET, POST, PUT, DELETE) are used to
perform various actions, such as retrieving, submitting, updating, or
deleting data.
 Types of Requests:
1. HTTP GET:
 Role: Requests data from the server (e.g., HTML page, JSON data).
GET requests are used when retrieving information without
causing any side effects on the server.
 Example: Loading a webpage, fetching data for a dropdown menu.
2. HTTP POST:
 Role: Sends data to the server (e.g., form submission, file upload).
POST requests are used when sending data that should be
processed by the server.
 Example: Submitting a form with user data for registration.
3. HTTP PUT:
 Role: Updates existing data on the server. PUT is used to modify
resources by sending updated data.
 Example: Updating a user's profile information.
4. HTTP AJAX:
 Role: AJAX (Asynchronous JavaScript and XML) is a technique
for sending HTTP requests and receiving responses without
reloading the entire page.
 Example: Loading new comments on a post without refreshing the
page.
3. WEBSERVER
 The web server is responsible for accepting HTTP requests from the client, serving
static files, and routing requests to server-side scripts.
 Role: The server-side is responsible for processing the client's requests, performing
the necessary logic, and sending back the appropriate response. It manages the
backend logic, data processing, and storage.
 COMPONENTS WITHIN THE SERVER:
1. Webserver (Apache/IIS, etc.):
 Role: The web server software (like Apache or IIS) listens for incoming
HTTP requests from clients, serves static files (HTML, CSS, images), and
passes requests for dynamic content to server-side scripts.
 Tasks:
i. Serving static files directly.
ii. Routing requests to the correct server-side scripts for processing.
2. Server-Side Scripts (PHP/Java/.NET/C++):
 Role: Server-side scripts handle the dynamic aspects of the web application,
such as processing form submissions, querying the database, or generating
dynamic web pages.
 Tasks:
i. Processing business logic.
ii. Interacting with databases to fetch or store data.
iii. Generating and returning HTML, JSON, or other content to the client.
3. Database (MySQL/Oracle, etc.):
 Role: The database stores persistent data that the server-side scripts need,
such as user accounts, product catalogs, or order histories.
 Tasks:
i. Executing SQL queries to retrieve, insert, update, or delete data.
ii. Managing data integrity and relationships.
4. Other Services:
 Role: The server may interact with additional services, which could be other
backend services, microservices, or third-party APIs.
 Tasks:
i. Handling specialized tasks like payment processing, authentication, or
logging.
ii. Communicating with other applications or services as part of a larger
system.
*These operations work together to ensure that web pages are
requested, rendered, and interactive based on user input.*
RETURNING THE RESPONSE:
 Role: After processing the request, the server prepares a response and sends
it back to the client (browser). This response contains the information or
resources the client requested.
 The browser then updates the UI based on this response, allowing the user to
see the results of their actions.
 Examples of Responses:
1. HTML/CSS: The server sends back an HTML page with embedded
CSS, which the browser renders.
2. JSON/XML: If the client requested data (e.g., through AJAX), the
server might respond with JSON or XML, which the browser
processes and integrates into the existing page.
 3. Files/Images: The server can return binary files like images or
downloadable documents.
4. BACKEND SERVICES:
 A backend service refers to the server-side components of a web application or system
that handle the business logic, data processing, and storage behind the scenes.
 Unlike frontend services, which interact directly with users, backend services perform
essential tasks that power the application's core functionalities.
 Backend services are the backbone of any modern web application. They perform the
heavy lifting by handling data management, executing business logic, interacting with
databases, and ensuring that the application runs smoothly and securely.
Key Roles and Functions of a Backend Service:
1. Business Logic: Backend services contain the rules and operations that define how
data is processed and how the application behaves. For example, calculating prices,
processing orders, validating data, or managing user authentication.
2. Database Interaction: Backend services interact with databases to store, retrieve,
update, and delete data. They execute SQL queries or use Object-Relational
Mapping (ORM) tools to manage data. This might involve handling user data,
product information, transaction records, etc.
3. API Endpoints: Backend services expose API endpoints that the frontend or other
services can interact with. These endpoints handle HTTP requests (GET, POST,
PUT, DELETE) and return appropriate responses. RESTful APIs and GraphQL
are common technologies used here.
4. Authentication and Authorization: Backend services manage user authentication
(verifying user identities) and authorization (determining user permissions). This
often involves integrating with authentication services, managing sessions or tokens,
and controlling access to resources.
5. Data Processing: Backend services often handle complex data processing tasks, such
as aggregating data, running algorithms, or integrating with third-party services.
This processing is usually done asynchronously to avoid slowing down the user
experience.
6. Integration with External Services: Backend services frequently interact with other
external services or APIs (e.g., payment gateways, email services, cloud storage).
This enables the application to leverage external tools or data without exposing them
directly to the frontend.
7. Security and Validation: Backend services ensure the security of the application by
validating inputs, handling secure data transmission (e.g., using HTTPS), encrypting
sensitive data, and protecting against vulnerabilities like SQL injection or cross-site
scripting (XSS).
8. Load Balancing and Scalability: Backend services are often deployed in a way that
supports load balancing and scalability, ensuring the application can handle large
numbers of users and requests without performance degradation.
Summary of Data Flow:
1. User Interaction: User interacts with the web application through the browser.
2. Browser Activity: The browser processes static files (HTML, CSS, images) and
runs JavaScript for dynamic operations.
3. HTTP Requests: The browser sends HTTP requests to the server using methods
like GET, POST, PUT, often facilitated by AJAX for asynchronous operations.
4. Server Processing: The webserver routes requests to server-side scripts, which
may interact with a database or other services to generate a response.
5. Response to Browser: The server sends back the requested data or content,
which the browser then uses to update the user interface.
1.6 UNDERSTANDING THE NODE.JS-to-ANGULAR STACK COMPONENTS
 The following architecture illustrates a typical MEAN stack application, where MongoDB,
Express, Angular, and Node.js work together to create a full-stack web application.

 The front end (Angular) manages the user interface and interactions, while the backend
(Node.js with Express) handles the server-side logic, with MongoDB as the data store.
 This setup allows for a seamless flow of data between the client and server, enabling dynamic
and responsive web applications.
1. USER
 Role: The user interacts with the application through a web browser. The actions
performed by the user (e.g., clicking buttons, filling out forms) trigger events that lead
to requests being sent to the server.
2. BROWSER
The browser acts as the interface between the user and the web application, rendering the
UI and handling interactions.
COMPONENTS WITHIN THE BROWSER:
 Angular:
 Role: Angular is a front-end framework used for building dynamic, single-page
applications (SPAs). It handles data binding, dependency injection, and other client-
side operations to create a smooth user experience.
 Tasks: Angular manages the overall structure of the client-side application, routing,
and components. It communicates with the server via HTTP requests to fetch or
update data.
 JavaScript Client-Side:
 Role: JavaScript runs in the browser to handle user interactions, manipulate the
DOM, and perform asynchronous tasks like sending HTTP requests.
 Tasks: JavaScript works alongside Angular to handle user events, update the UI
dynamically, and manage the application’s state.
 JSON/XML, etc.:
 Role: JSON (JavaScript Object Notation) is the primary data format used for
exchanging data between the browser and server. XML can also be used, but JSON
is more common.
 Tasks: The browser uses JSON to communicate with the server, particularly when
sending and receiving data through API requests.
  HTML/CSS/Images:
 Role: HTML structures the content, CSS styles it, and images provide visual
elements. Angular may generate dynamic content and styles based on user
interactions or data fetched from the server.
 Tasks: The browser renders these files to display the web page, ensuring that the
user sees a well-designed and responsive UI.
 User Interactions:
 Role: The user’s interactions (e.g., clicks, inputs, scrolling) are captured by the
browser, triggering JavaScript or Angular functions.
 Tasks: These interactions might cause updates to the UI, form submissions, or
HTTP requests to the server.
3. HTTP COMMUNICATION:
 Role: HTTP (Hypertext Transfer Protocol) is used for communication between the
client (browser) and server. Requests like GET, POST, PUT, and DELETE are used to
fetch data, submit forms, update resources, and delete items respectively.
 Types of Requests:
i. GET: Fetch data or resources from the server.POST: Send data to the server,
typically to create a new resource.
ii. PUT: Update existing data on the server.
iii. AJAX: Asynchronous JavaScript and XML (AJAX) is used for sending and
receiving data without refreshing the entire page.
4. SERVER :
The server handles incoming requests from the client, processes them, interacts with the
database, and sends back the appropriate responses.
COMPONENTS WITHIN THE SERVER:
 Node.js:
 Role: Node.js is a runtime environment that allows JavaScript to run on the server
side. It’s used for building scalable, high-performance backend services.
 Tasks: Node.js executes server-side logic, handles API requests, and manages
asynchronous operations efficiently.
 Express:
 Role: Express is a web application framework for Node.js that simplifies the process
of building APIs and handling HTTP requests and responses.
 Tasks: Express defines routes for different API endpoints, handles middleware, and
processes requests before sending responses back to the client.
 Server-Side Scripts:
 Role: These are the scripts that contain the application’s business logic, processing
data from the client, interacting with the database, and performing calculations or
other tasks.
 Tasks: The scripts handle operations like validating input, querying the database,
and returning processed data.
 MongoDB:
 Role: MongoDB is a NoSQL database that stores data in a flexible, JSON-like
format (BSON). It’s commonly used with Node.js due to its ease of integration and
scalability.
 Tasks: The database stores and retrieves data as required by the server-side scripts.
For instance, user profiles, products, or transaction records could be stored in
MongoDB.
 Other Services:
  Role: This refers to any additional services or microservices that the backend might
interact with, such as authentication services, third-party APIs, or payment
gateways.
 Tasks: These services provide additional functionality that the main server relies on,
such as handling payments or sending notifications.
5. RETURNING THE RESPONSE :
 After processing the request, the server sends a response back to the client. This
response can include data (in JSON format), an updated webpage, or a confirmation of
an action (e.g., success or error message).
 The client (Angular application) receives this response, processes it, and updates the UI
accordingly.

IMPORTANT QUESTIONS TO REVIEW:
Q1. Explain the Basic Components of Web Development Framework ?

 The basic components of web development framework are user, browser, webserver and
backend services.

1. User:
 User is an important fundamental part of web development framework.
 Users expectations from a website define the requirements for developing good website.
 Normally an efficient and easy to use website is preferred by the user. They also expect that
the same website must behave closer to the applications installed on their computers and
mobile devices.
 User Interacts with the browser by using input devices such as mouse, keyboard on PC or
swipes and taps on mobile devices. The web framework processes the user input and
provides the required visual output.
2. Browser :
 Browser is an application for accessing websites. User interacts with the browser in the web
development framework.
 The browser place three roles in the web framework :
1. It provides communication to and from the web server.
 Browser to Webserver Communication:
 For communicating with the webserver, the browser makes use of HTTP &HTTPS
protocol.
 HTTP stands for Hyper Text Transfer Protocol. This protocol is used for
communication between browser and webserver. It's a request/response protocol.
HTTP also defines what type of requests that can be made by the user. Similarly it
defines the format of those request and response.
 HTTPS protocol is similar to HTTP protocol but it adds an additional security layer
so that the user can decide whether to accept the connection or not.
 There are three types of requests to the server -
i. GET : Retrieving data from the server. This data can be in the .HTML files or
Images.
ii. POST : Sending data to the server.
iii. AJAX : AJAX stands for Asynchronous JavaScript and Extensible Markup
Language. In AJAX, the GET or POST request is done directly by JavaScript
running in the browser.
 Difference between GET and POST requests: When a user submits his
request using the GET method then the URL string displays the request
submitted by the user. But if the POST method is used then URL string does
not show the submitted contents.
 The common browsers are Internet Explorer, Mozilla Firefox, Google
Chrome and Safari.
2. It interprets the data from the server and display the visible output.
 Rendering the browser view
 The browser reads data from the initial URL and then renders the HTML
document to build the Document Object Model(DOM).
 The DOM is a tree structured object. The browser interprets each DOM element
and renders it to user's screen to build a webpage view.
 Browsers get different types of data from multiple webserver requests to build
the webpages.
 Following are various types of files displayed by the browser -
1. HTML files: The HTML files represent the static data.
2. CSS files: These files define how the elements on the page are to be styled
using fonts, colors, borders and so on.
3. Client side script: Normally these scripts are in JavaScript files. These scripts
provide additional functionalities to the webpage, facilitate the interactivity
of user with the web page and provide any necessary logic required to display
the page and provide the functionality.
4. Media files : These are the files that contains images, videos and audio. These
files can be rendered as webpages.
5. Data: Any data such as XML, JSON or rsw text can be provided to the web
server as a response to an AJAX request.
6. HTTP headers: The HTTP headers define the type of data in the request as
well as the type of data expected to be returned back to the browser.
3. The browser handles the user interaction through the keyboard, mouse, touch screen or
other input devices and takes the appropriate action.
 User Interaction: The user interacts with the browser via input devices such as
mouse, keyboards, and touchscreens. The browser has an event system that captures
these user input events and then takes the appropriate action.
 3. Webserver
 Web server is a special type of server to which the browser submits the request of a web
page which is desired by the client. There are some popularly used web servers such as
Apache and IIS from Microsoft.
 Functions of webserver are -
i. The web server accept the request from the web browser.
ii. The user request is processed by the web server.
iii. The web servers responds the user by providing the services which they demand for
over the web browsers.
iv. The web servers serve the web based applications.
v. The DNS translates the domain names into the IP addresses.
vi. The server verify given address exists, find necessary files, run appropriate scripts ,
exchange cookies if necessary and return back to the browser.
vii. Some servers actively participates in sessions handling techniques.
4. Backend Services:
 Backend services are services that run behind the webserver. They provide the data to the
web server which is requested by the web browser.
 The most common type of backend service is a database that stores information.
 When a browser requests some data to the web server, the web server connects to the
database (backend services) or some other backend service retrieves the information,
formats it and then sends it back to the browser.
 Similarly when the data comes from the browser to the web server in the form of request,
then the web server connects to the database and updates the data.
Q2. Understanding the basic components of node.js to angular stack (OR) Understanding the
Different Stacks (OR) Write short notes on a) Express b) Angular c) Node d) MongoDB

 The stack development refers to the end-to-end application software development. The Node.js
to Angular stack consists of - MongoDB, Express, Angular, Node.js.
 The basic block diagram of how the Node.js Angular fits into the web framework model is as
shown below -
Express:
  Express is used for server-side development in full stack. As it is running in Node.js, it is easy
to configure, implement and control the web application.
 Following are the reasons why Express is a great framework to start from -
1. Routing: Express JS provides a routing mechanism so that it is possible to reach to different
web pages or URLs.
2. Error handling: Express provides built-in error handling for documents.
3. Easy integration: Express can easily be implemented behind an existing reverse proxy system.
This allows it to be easily integrated into your existing secured system.
4. Cookies: Express provides easy cookie management.
5. Session and cache management: Express has session management and cache management
facility.
Angular:
 Angular is a client-side framework developed by Google. It is written in TypeScript. Angular
provides all the functionalities needed to handle user input in the browser, manipulate data on
the client side. It also controls how elements are displayed in the browser window.
 Following are the reasons why Angular is a great framework to start from -
1. Clean: Using Angular the developer can develop clean and logical code.
2. Extensibility: The Angular allows to extend almost every aspect of the language to provide the
custom implementation.
3. Reusable Code: Using Angular the reusable code can be written.
4. Data Binding: Using Angular the data can be bound to HTML elements using the scope
mechanism.
5. Support: As the Angular framework is developed by Google, there exists a great support for
developing the web applications.
6. Compatibility: Angular is based on TypeScript. Hence it is easy to integrate Angular into the
working environment.
Node.js:
 The Node.js is a development framework that uses Google’s V8 JavaScript engine. The
meaning of V8 JavaScript engine is that it parses and executes the JavaScript code. The
Node.js code is written in JavaScript and then compiled.
 Following are the reasons why Node.js is a great framework to start from -
1. Easy to use: Node.js is very much easy to set up. Developing the web applications using Node.js
is also very easy.
2. Extensibility: New modules that are required to extend the Node.js functionality can be
developed at any time.
3. Event-driven scalability: In Node.js, the web requests are processed on the same thread using a
basic event model. Node.js uses a single thread model with event looping. Similarly, the non-
blocking response of Node.js makes it highly scalable to serve large numbers of requests.
4. Efficient: The Node.js is built on V8 JavaScript engine and it is very fast in code execution.
5. Use of JavaScript, end-to-end: One of the important reasons of using Node.js is that it allows to
write both server and client side scripts in JavaScript. This makes it easier to work for client
side developers as well as for server side developers.
MongoDB:

 MongoDB is a part of backend services. It is basically a scalable NoSQL database. The data is
stored in the form of a JSON object.
 The name Mongo comes from “humongous”.
 Following are the reasons why MongoDB is a great framework to start from -
1. Document Orientation : The dots is stored in the document form is the MongDB.
 2. Highest Performance: It's the highest performing database.
3. High Scalability: The MongoDB allows horizontal scalability by sharing data across
multiple servers.
4. High availability: It provides high availability and redundancy with the help of replication.
That means it creates multiple copies of the data and sends these copies to different server
so that if one server fails, then the data is retrieved from another server.
Q3. Analyze the role of Frontend and Backend services in a Full Stack Web Development project.
Q4. Describe the entire process of Full Stack Web Development, starting from the User's request to
displaying the final output on the Browser. Highlight the role of each component involved in the
process.
Q5. Elaborate the Full Stack Web Development paradigm involves the use of various technologies
such as Express, Angular, Node.js, Mongo DB and React.
Q6. Discuss about the various technology stack along with its pros and cons.