Overview of Full-Stack

What is Full Stack Development?

• Full-stack development is the process of planning and creating

both the front-end (client-side) and back-end (server-side)
elements of a web application.
• While back-end development deals with managing the server-
related elements of the website, such as database
administration, API development, and more, front-end
development concentrates on creating engaging user
interfaces and providing a rich user experience
 Who is a Full Stack Developer

• A full-stack developer is a person who can carry out both

duties independently eliminating the need to hire two distinct
developers—the front-end developer and the backend
developer who are recruited for separate responsibilities while
constructing an application.
 Importance of Full Stack Development

• Versatility: Full stack developers can handle both front-end (UI/UX) and back-
end (server, database) tasks, enabling smooth integration and communication
between layers.
• Faster Development: With a single developer or unified team managing both
ends, project timelines shorten and coordination improves.
• Cost Efficiency: Companies save on hiring separate front-end and back-end
teams, reducing overheads especially for startups or small businesses.
• Better Troubleshooting: Full stack developers understand the full architecture,
making it easier to debug and optimize performance across the entire stack.
• Adaptability: They can switch between tasks as needed—building new features,
fixing bugs, or optimizing performance—making them ideal for agile
environments
 Languages for Full Stack Web Development

• A full-stack developer is generally hired for small-scale projects, however, for larger-scale web applications, the
efficient procedure is to utilize different developers for different roles.
• JavaScript is one of the best options available to developers for full-stack development since it is one of the few
languages that can be utilised on both the front end and the back end. This feature of JavaScript enables it to
capture seamless communication between the client and the server.
• Some of the popular languages used for developing the front end of websites are HTML,
CSS, JavaScript, ReactJS, VueJS, and more, however, for developing backend are Python, NodeJS, Java, Ruby, and
more.
• There are also several stacks available such as MERN stack, MEAN stack, Ruby on Rails, and more which makes
the entire development lifecycle smooth and convenient
 Frameworks for Full Stack Web Development

• A framework is a reusable set of components that accelerates

development by offering libraries, compilers, debuggers, and
APIs, improving code quality, reducing build time, and
supporting software security.
• Below are some key frameworks for full-stack web
development:
– Ruby on Rails: Written in Ruby, Rails is known for its Convention over
Configuration (CoC) and Don’t Repeat Yourself (DRY) principles. It
supports full-stack development with built-in tools for routing,
controllers, views, and database management.
• Django: A Python-based framework ideal for rapid development
with a batteries-included approach, Django offers everything
developers need, making it useful for scalable applications and
compatible with data-intensive tasks like machine learning.
• Spring Boot: A Java framework that simplifies the setup for
production-ready applications by reducing boilerplate code, making
it a strong choice for complex, enterprise-level projects.
• Laravel: A PHP framework known for its elegant syntax and ease of
use, Laravel provides rich functionality (e.g., ORM, routing,
authentication) that streamlines web application development and
maintenance
 Full Stack Web Development Tools

• 1. Front End Tools

– Front-end development focuses on the user interface and
experience, everything users see and interact with.
Core Technologies:
HTML: Structures web pages using markup tags.
CSS: Styles HTML elements and enables responsive design.
JavaScript: Adds interactivity and dynamic functionality to websites.
Popular Libraries & Frameworks:
React.js: Component-based JavaScript library for building user
interfaces.
AngularJS: JavaScript framework for creating dynamic single-page
applications.
Bootstrap: Framework for building responsive, mobile-first web
pages using HTML, CSS, and JS.
jQuery: Simplifies DOM manipulation, event handling, and Ajax
interactions.
SASS: CSS preprocessor that adds features like variables and nesting
• Additional Tools:
Version Control: Git, GitHub
Package Managers: npm, Yarn
Text Editors: VS Code, Sublime Text, Atom
Browser DevTools: Chrome DevTools for debugging and performance
analysis
APIs: Using REST, GraphQL, and tools like Axios to fetch data
• 2. Back-End Tools
• Back-end development handles server-side logic, databases, and application
architecture—everything users don’t see but powers the application.
• Programming Languages:
• Node.js: Executes JavaScript server-side; ideal for scalable backend services.
• Python: Known for simplicity and used with frameworks like Django and Flask.
• Java: Scalable and robust, often used in enterprise applications.
• PHP: Server-side scripting language for web applications.
• C++/C#: Used in systems programming and backend services.
• Frameworks:
• Express (Node.js): Minimalist framework for building APIs.
• Django (Python): High-level framework for rapid development.
• Spring (Java): Enterprise-grade backend framework.
• Laravel (PHP): Elegant syntax and tools for backend PHP apps.
• Ruby on Rails: Convention-over-configuration framework for
Ruby.
• Other Key Considerations:
• Efficient data structuring and database management (SQL,
NoSQL)
• Handling API requests/responses
• Ensuring data security and authentication
• Server configuration and deployment
 Front End vs Back End vs Full Stack Web
Development
Feature Front-End Development Back-End Development Full-Stack Development

Focus User interface (UI) and design elements Server logic, database interactions Both client and server-side development

Core Languages HTML, CSS, JavaScript Java, Python, PHP, Ruby Combines front-end and back-end
languages

Key Tools & Frameworks React, Angular, Vue.js Django, Spring Boot, Express.js Uses both front-end and back-end tools

Purpose Ensures visual appeal and usability Ensures data is processed and stored Handles all aspects of web development
securely
 Role of Web Servers in Full Stack Development

• Web servers are the backbone of full stack architecture, acting

as the bridge between the client (front end) and the server-
side logic (back end).
• They handle HTTP requests, serve static and dynamic content,
manage routing, and ensure secure, seamless communication
between users and databases.
• Key Functions of Web Servers:
• Request Handling: Accept and process incoming requests from the
browser (client).
• Content Serving: Deliver HTML, CSS, JS, and image files to the client.
• Middleware Support: Enable authentication, caching, compression, and
logging.
• Load Balancing: Distribute traffic across multiple servers to improve
performance.
• API Management: Serve as the access point for RESTful or GraphQL APIs
• Popular Web Servers in Full Stack Development:
• Apache HTTP Server: Widely used open-source server for
serving static and dynamic content.
• Nginx: High-performance server ideal for load balancing and
reverse proxy.
• Node.js (with Express): Used to build custom servers and APIs
in JavaScript.
• Microsoft IIS: Server used with ASP.NET for Windows-based
hosting
 Steps to Become a Full Stack Developer:

• Learn the fundamentals of HTML, CSS, and JavaScript.

• Gain hands-on experience with front-end frameworks like React or
Angular.
• Learn a back-end language such as Node.js, Python, Java, or PHP.
• Understand how to build and consume APIs.
• Work with databases like MySQL, PostgreSQL, or MongoDB.
• Use version control tools like Git and platforms like GitHub.
• Learn the basics of deployment, DevOps, and cloud services.
• Build and deploy real-world full stack projects.
• Stay updated with the latest technologies and development trends.
 Advantages of Full Stack Web Development

• Economical: A full-stack developer is hired when you’re working on a

small-scale project. As a result, you won’t need to hire additional
developers because the full-stack developer has all the necessary skill sets.
• Efficiency: A system is more effective when there is less misunderstanding
among the project’s stakeholders. Since a full-stack developer also reduces
communication among the other project specialists, this results in a more
coordinated and effective development process.
• Issue resolving: An application designed by a full-stack developer may
interact easily with the front and back ends of the website since they have
a thorough grasp of what they are doing. As the entire project is produced
by a single developer, it also makes the process of fixing any flaws that are
present in the project easier to identify.
 Limitations of Full Stack Web Development

• Due to their broad skillset, full-stack developers may lack deep

expertise in specific areas, which can be limiting when
specialized knowledge is needed.
• Keeping up with multiple technologies requires ongoing
learning, demanding more time than roles focused on a single
tech area.
• Managing both front-end and back-end can add complexity
and extend timelines, making full-stack development less
suitable for small projects or tight deadlines.
 Overview
Web
Web REST server Persistence
UI service app (Data Base)

• This is the typical structure of a full-stack

application
• Full Stack Web Development means building
both the front-end (client-side) and back-end
(server-side) of a web application, including
database handling.
 Overview
Web
Web REST server Persistence
UI service app (Data Base)

• The Web UI (Client Layer) typically uses the

following technologies:
– HTML
– Cascading Style Sheets (CSS)
– JavaScript or TypeScript
– Frameworks, e.g., React.js, Angular, Vue.js
 Overview
Web
Web REST server Persistence
UI service app (Data Base)

• REST services (Middleware / Communication Layer) are

the most common way for a web UI to communicate
with a server
– Standard and open communication protocol
– Any kind of client can communicate with
any kind of server
– Ex- REST API, GraphQL API
 Overview
Web
Web REST server Persistence
UI service app (Data Base)

• Web server app (Application Layer / Server-Side):

– Handles the business logic and communication between front-end and database.
– Responsibilities:
• Processing requests from front-end
• Authentication (login, signup)
• Applying business rules (discounts, workflows)
• Returning responses as HTML/JSON/XML
– You can use various technologies to implement a web server app, such as:
• Java (Spring Boot)
• Python (Django/Flask/FastAPI)
• Node.js (Express.js)
• PHP, Ruby on Rails, .NET, etc.
 Overview
Web
Web REST server Persistence
UI service app (Data Base)

• Database Layer: You can use various alternative

technologies to persist data, such as:
– Relational database, e.g., MySQL
– NoSQL database, e.g., MongoDB
– Cloud storage, e.g., AWS S3
– Mainframe storage, e.g., IBM Z
 Our Technology Stack

Web
Web REST server
UI service app Persistence

HTML Java 21 H2 RDBMS

CSS Spring Boot
TypeScript
React
 The Name "REST"
• Representational State Transfer
– Representational → Refers to the representation of a resource (like
JSON, XML, or HTML).
– State → The resource's current state (data at a given time).
– Transfer → The transfer of resource state between client and server
over HTTP.
 Understanding REST Communication
• A client sends an HTTP request message to a REST service, and
the REST service returns an HTTP response message

HTTP request

REST
Client
service

HTTP response
 HTTP Request Messages
• Let's take a closer look at a typical HTTP request message…

HTTP request
REST
Client
service

POST /employees HTTP/1.1

Host: example.com
Content-type: application/json
Accept: application/json
Content-length: 27 HTTP message header

{"name": "Andy", "age": 56}

HTTP message body
 HTTP Verbs
• REST services use HTTP verbs to define "CRUD" operations
– CRUD = Create | Read | Update | Delete
 HTTP Verbs
• GET – Retrieve Data
– Purpose: Fetch information from the server.
– Example: Get a list of products.
• POST – Create Data
– Purpose: Add a new resource.
– Example: Place a new order.
• PUT – Update Data
– Purpose: Update an existing resource.
– Example: Update user profile.
• DELETE – Remove Data
– Purpose: Delete a resource.
– Example: Cancel an order.
 Common Data Types
• REST services typically consume or return JSON
or XML data
• JSON (application/json)
{
"name": "Andy",
"age": 56,
"skills": ["C++", "Java"]
}

• XML (application/xml or text/xml)

<employee>
<name>Andy</name>
<age>56</age>
<skills>
<skill>C++</skill>
<skill>Java</skill>
</skills>
</employee>
 HTTP Response Messages
• Let's take a closer look at a typical HTTP response message…

HTTP response REST

Client
service

HTTP/1.1 201 Created

Location: /employees/4
Content-type: application/json
Content-length: 37
Date: Tue, 20 Apr 2021 08:23:51 GMT
HTTP message header

{"id": 4, "name": "Andy", "age": 56} HTTP message body