Scribd
Upload
18 views19 pages

Full Stack Unit - 1

Uploaded by

Akhil Rawat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views19 pages

Full Stack Unit - 1

Uploaded by

Akhil Rawat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

Why Full Stack

Full-stack development refers to the development of both the front-end and back-end of a web application or website.
A full stack is made up of the front-end that deals with the user interface, the back-end that deals with data validation, and
the database that acts as storage—a repository of information from the front-end through the logic layer.
1. You can master all the techniques involved in a development project
2. You can make a prototype very rapidly
3. You can provide help to all the team members
4. You can reduce the cost of the project
5. You can reduce the time used for team communication
6. You can switch between front and back end development based on
requirements
7. You can better understand all aspects of new and upcoming
technologies
Full Stack Development components

There are two major components of Full Stack Development, namely, front end and
back end.
The front end is that part of the web application that the user can interact with. It is
built using various language tools and frameworks such as HTML, CSS, JavaScript,
Libraries, CSS Processors, Build Tools, and Frameworks.
On the other hand, the back end of the full stack manages and modifies the data
provided by the user using the front end interface. It uses a number of services
including servers and databases. It uses programming languages like PHP, Python, and
Ruby, Database Management Systems (DBMS), Framework, Rest API and Caching
Systems.
Full Stack Development
components
Consider a retail website. Users can browse or purchase specific items, delete
or add items in cart, change their profile, and do many other things. All these
actions require a front-end user interface (UI), as well as some business logic,
written in the back-end.
•The website UI can be built using various, front-end technologies like HTML,
CSS, Javascript.
•The back end is written in programming languages like Java or Python.
Further, a good web application would need scalability, event handling, and
routing, which are usually handled by libraries and frameworks like
SpringBoot or Django.
•The back end also consists of logic that can connect the application to other
services and databases. For example, all the user and transaction data is stored
in a database through specific drivers handled on the back end.
A full stack developer is one who can single-handedly implement both the front-
end and back-end workflows, like placing the order or changing the user profile.
Popular Stacks in Full Stack Development

MEAN Stack: Mean stack most popular stack out there. It includes working with
MongoDB. Express, AngularJS, and Node.js.
MERN Stack: The MERN stack is widely used among startups and even in some
Fortune 500 companies. It includes MongoDB, Express, ReactJS, and Node.js.
Django Stack: The Django stack is well revered among Python users and MySQL
Database developers.
Rails or Ruby on Rails: Another popular stack, Rails uses Ruby, PHP, and MySQL
for complete operation in the Full Stack Development environment.
LAMP Stack: LAMP is in implementation for a while now, and it has earned a
good reputation among developers. LAMP consists of Linux, Apache, MySQL, and
PHP for development.
Layers of Full Stack
HTTP Protocol

It stands for hypertext transfer protocol. Using this protocol the


client sends a request to the server and based on the request the
server and the web browser respond to the client.

Once the connection is established using the Http protocol between


client and server, the client then sends a request in the form of binary
data to the server asking to access specific files or information from
the server.
Every HTTP request contains three elements which are:- Request Line, Request
Header, Body of Request(optional).
XMLHttpRequest object

The XMLHttpRequest object can be used to exchange data with a web server
behind the scenes. This means that it is possible to update parts of a web page,
without reloading the whole page.
The readyState property holds the status of the
XMLHttpRequest.

The onreadystatechange property defines a function to be


executed when the readyState changes.

The status property and the statusText property holds the status
of the XMLHttpRequest object.
onreadystatechange Defines a function to be called when the readyState property changes

readyState Holds the status of the XMLHttpRequest.


0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

status 200: "OK"


403: "Forbidden"
404: "Page not found"
<!doctype html>
<head>

</head>
<body>
<div id="d1">
<h1>change the content</h1>
</div>
<button onclick="change()">ckick here</button>
<script>
function change(){
var req=new XMLHttpRequest();
req.open('GET','aj1.html',true);
req.send();
req.onreadystatechange=function(){
if(req.readyState==4&&req.status==200){
document.getElementById("d1").innerHTML=req.responseText;
}
}
}
</script>
</body>
</html>

You might also like