Jeppiaar Engineering College, Chennai – 6000 119.

Department of Information Technology

Programme : B.Tech – Information Technology

Year / Semester : III / 05 AY : 2023-24 ( ODD)
Course Code & Name : IT3501 & Full Stack Web Development

Unit – I : Basics of Full Stack

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.

Full Stack web Development

 process of designing, creating, testing, and deploying a complete web
application from code to deployment.
 It involves various tools and technologies, including
o front-end web development,
o back-end web development, and
o database development.
 A full stack web developer is a person who can develop
both client and server software.
Advantages of FSD
 Cost-Effectiveness: Better Productivity | Time and money saver
 Rounded Solution : High Quality Product | Effective Troubleshooting
 Complete Ownership : Entire design structure in mind | End-To-End Visibility
 Enhanced Flexibility | Easy up gradation | On-time Delivery

Disadvantages of FSD
 Not suitable for large or complex projects.
 Broad range of skills and knowledge.
 Difficult to debug and maintain.
 Time-consuming and complex.
 Scalability

Front End Development Vs Back End Development

Q1 : Basic Web Development Framework

 A full stack development framework is a collection of software that

provides a complete end-to-end solution for web applications
development which includes a web server, database, and
programming language.
o The web server handles requests from clients, while the
database stores data.
o The programming language is used to build the web
application.

Diagram shows the components of a basic website/web

application

 The main components of web framework are

o User
o Browser
o Web server
o Backend Services
 User :
 Users are the most important part of a website.
 The expectations of a user define the requirements for a good
website.
 The user role in a web framework is to view the visual output and
provide interaction input of webpages.
 Users interact with websites using mouse clicks, keyboard input, and
swipes and taps on mobile devices.
Browser:
A web browser is an application for accessing websites
The browser plays three roles in the web framework:

1. Communication: The browser communicates with the web server to

request and receive data. This data can be HTML, CSS, JavaScript,
images, or other files.
2. Rendering: The browser renders the data it receives from the web
server into a visual representation that the user can see. This process is
called "rendering".
3. User interaction: The browser handles user interaction with the
website. This includes mouse clicks, keyboard input, and touchscreen
gestures.
Browser to Web server Communication is a process where the
browser sends requests to the web server and the web server sends
responses back to the browser.
Protocols used are:

 HTTP - define the format of these requests and responses.

 HTTPS - adds an additional security layer to the communication by
using SSL/TLS encryption.
 The browser makes three main types of requests to the server:
GET, POST, and AJAX.
 GET requests are typically used to retrieve data from the server such as
HTML files, images, or JSON data.
 POST requests are used to send data to the server.

 AJAX requests are used to make asynchronous requests (retrieve data

from the server without having to reload the entire page.

Web Servers

 The webserver’s main focus is handling requests from browsers

 The webserver uses the HTTP headers as well as the URL to
determine what action to take.
 Webservers such as Apache and IIS provide mechanisms to include
server-side scripts and then wire them up to specific URL locations
requested by the browser.
Backend Services
 Backend services are services that run behind the webserver and
provide data used to build responses to the browser.
 The most common type of backend service is a database that stores
information.
 When a request comes in from the browser that requires information
from the database or other backend service, the server-side script
connects to the database, retrieves the information, formats it, and
then sends it back to the browser.
 Conversely, when data comes in from a web request that needs to be
stored in the database, the server-side script connects to the
database and updates the data.
--------------------------------------------------------------------------
 Q2 : MVC Architecture

 The MVC architecture provides a structured approach to developing

applications in the MERN stack.
 MVC (Model-View-Controller) is a software design pattern that
divides an application into three interconnected components:
 Model,
 View,
 Controller.
 Each component has a specific responsibility, and the interactions
between them.
 Most widely used industry-standard web development framework
helps in improving code organization, scalability, and reusability,
leading to a more efficient development process.
1. Model:
Responsibility: Represents the application's data and business logic.
Function: Manages data, logic, and rules; notifies views of changes.
Example: Database queries, data processing, business rules.

2. View:
Responsibility: Presents data to the user & handles user interface
interactions.
Function: Displays information, receives user input, sends commands to
the controller.
Example: HTML, CSS, UI components.

3. Controller:

Responsibility: Handles user input, processes requests, & updates the

model.
Function: Interprets input, manipulates data in the model, updates the
view.
Example: Application logic, user input handling.
Key Concepts of MVC :

Separation of Concerns:
 Divides the application into distinct which enhances
maintainability, scalability, and code organization.
Modularity:
 Encourages the development of modular, reusable components for
each aspect of the application (Model, View, Controller).
 Facilitates code reuse, ease of maintenance, and collaboration
among developers.
Loose Coupling:
 Components (Model, View, Controller) are independent and
communicate through defined interfaces, minimizing
dependencies.
 Allows changes in one component without affecting others,
promoting flexibility.
Reusability:
 Components (Model, View, Controller) can be reused in different
parts of the application or in other projects
 Reduces development time, promotes consistency across the
application.
Testability:
 Each component (Model, View, Controller) can be tested
independently, facilitating unit testing and ensuring code
reliability.
 : Enables more effective testing, leading to higher code quality and
easier debugging.
Scalability:
 Separation of concerns and modularity make it easier to scale the
application by adding or modifying components as needed.
Example:
Consider a web application for a bookstore:

 Model: Manages data such as book information, inventory, and

pricing rules.
 View: Presents the book catalog, allows users to browse and search
for books.
 Controller: Handles user interactions, such as adding books to the
shopping cart, updating inventory, and processing orders.

Advantages:
 Modular Development
 Parallel Development
 Easier Maintenance
 Enhanced Testability
 Scalability:

Limitations:

 Learning Curve: Developers unfamiliar with the MVC pattern may

experience a learning curve, especially when transitioning from more
monolithic architectures.
 Overhead: For smaller applications, the overhead of implementing
the full MVC pattern might be considered excessive.
 Potential for Complexity: In some cases, MVC architectures can
become complex, particularly if not properly designed or if
additional design patterns are introduced.
 Not Always Ideal for Small Projects: For small projects, the
additional structure imposed by MVC might be seen as unnecessary.
 Q3 : Node.js – to – Angular Stack | MEAN STACK

Diagram depicts how the Node.js-to-Angular stack fits into the

basic website//web application model.
Or
Basic diagram showing where Node.js, Express, MongoDB, and
Angular fit in the web paradigm
 The MEAN stack is a full-stack JavaScript framework that is
commonly used to build dynamic and scalable web applications.
 The acronym "MEAN" stands for MongoDB, Express.js, Angular, and
Node.js — each representing a different technology in the stack.
 Benefits of using the MEAN stack include the following:
 Develop applications quickly & easily using JavaScript.
 A large and active community of developers
 A rich set of features and libraries
 Modularity and Maintainability | Scalability
Summarization of MEAN Stack:
MongoDB: (Unit 3)
1. Flexible Schema:
- schema-less design allows for adaptable and dynamic data
modeling.
2. Scalability:
- MongoDB scales horizontally, making it suitable for handling large
volumes of data and high traffic loads.
3. Document-Oriented:
- MongoDB stores data in BSON documents, supporting nested
structures and arrays.
4. Rich Query Language:
- MongoDB offers a powerful query language for efficient data
retrieval and manipulation.
5. Geospatial Capabilities:
- MongoDB includes built-in support for geospatial indexing and
queries.
6. High Performance and availability:
- MongoDB’s replication model makes it easy to maintain scalability
while keeping high performance..
Express.js: (Unit 4)
1. Lightweight and Minimalist:
- Express.js is known for its minimalist design, providing essential
features without unnecessary complexity.
2. Middleware Support:
- Express.js offers a robust middleware system for injecting custom
functionality into the request/response cycle.
3. Routing| Route Management :
- Express.js simplifies RESTful API creation and HTTP request
handling through an intuitive routing system.
4. HTTP Utility Methods:
- Express.js provides convenient methods for handling HTTP
requests, easing common tasks.
5. Template Engines:
- Express.js supports various template engines, allowing flexibility in
rendering dynamic views.
6. Cookies | Session and cache management
- provides easy cookie management, also enables session and cache
management:
Angular ( Unit 4 ):
1. Declarative UI:
- Angular uses a declarative approach for building user interfaces,
simplifying state management.
2. Two-Way Data Binding:
- Angular's two-way data binding synchronizes UI changes with the
underlying data model.
3. Modularity:
- Angular encourages modular development for improved
organization, maintainability, and reusability.
4. Dependency Injection:
- Angular's dependency injection system supports loosely coupled
components for modular design.
5. TypeScript Support: Angular is built with TypeScript, enhancing
code quality, tooling support, and developer productivity.
Node.js: ( Unit 2 )
1. Non-Blocking I/O:
- Node.js features a non-blocking, event-driven architecture for
scalable handling of simultaneous connections.
2. Fast Execution:
- built on the V8 engine, offers fast execution for high-performance
applications.
3. Large Package Ecosystem (npm):
- Node.js comes with npm, facilitating easy installation and
management of third-party libraries.
4. JavaScript end-to-end:
- Node.js enables the use of JavaScript for both server-side and
client-side development.
5. Community Support:
- Node.js boasts a large and active community contributing to ongoing
improvements and support.
6. Cross-Platform Compatibility: Node.js is cross-platform, running on
various operating systems for versatile deployment.
Popular Different Web Development Stacks: ( 6 Marks )
1. MEAN Stack:
- Components: MongoDB (database), Express.js (backend framework),
Angular (frontend framework), Node.js (runtime environment).
- Key Features: Full-stack JavaScript development, supports real-time
applications, and is known for its scalability.

2. MERN Stack:
- Components: MongoDB (database), Express.js (backend framework),
React (frontend library), Node.js (runtime environment).
- Key Features: Similar to MEAN but uses React for the frontend,
offering a flexible and efficient user interface development.
3. LAMP Stack:
- Components: Linux (operating system), Apache (web server),
MySQL (database), PHP (scripting language).
- Key Features: A classic stack for building dynamic websites and web
applications, widely used for its open-source nature and ease of use.
4. Django Stack:
- Components: Django (backend framework, Python-based), Django
ORM (Object-Relational Mapping), SQLite or other databases, JavaScript
(for frontend, optional).
- Key Features: Known for its simplicity and efficiency, particularly
suitable for rapid development and follows the "Don't Repeat Yourself"
(DRY) principle.
5. Ruby on Rails (RoR) Stack:
- Components: Ruby (programming language), Ruby on Rails
(backend framework),
- Key Features: Emphasizes convention over configuration, known for
its developer-friendly syntax, and follows the Model-View-Controller
(MVC) architectural pattern.
------------