RAJEEV GANDHI MEMORIAL COLLEGE OF ENGINEERING &
TECHNOLOGY
Autonomous
Affiliated to JNTUA – Anantapuramu, Approved by AICTE – New Delhi,
Accredited by NBA and NAAC with ‘A+’ Grade – New Delhi
Nandyal – 518501, Kurnool (Dt), A.P
DEPARTMENT OF
ELECTRONICS AND COMMUNICATION ENGINEERING
A Technical Report on
FULLSTACK DEVELOPMENT
ESTD: 1995
Submitted by
“A.RAJENDRA KUMAR(18091A04F1)”
CERTIFICATE
This is to certify that A.RAJENDRA KUMAR (18091A04F1), of B.TECH,
E.C.E
have
carried
out
the
Technical
seminar
report
on
“FULLSTACK
DEVELOPMENT” under the esteemed guidance of Department for the fulfillment of the
award of the BACHELOR OF TECHNOLOGY in Electronics and Communication
Engineering in R.G.M.C.E.T, Nandyal (Affiliated to J.N.T.U.A, Anantapuramu) is a
bonafied record of the work done by me during the year 2018-2022.
Dr.K.Mallikarjuna
HOD of E.C.E
CANDITATE’S DECLERATION
I hereby declare that the report titled “FULL STACK DEVELOPMENT”
submitted towards completion of Technical Report in IV Year 2nd Semester of B.Tech (ECE) at
the Rajeev Gandhi Memorial College of Engineering & Technology, Nandyal. Is an
authentic record of my original report and is prepared by me.
I have not submitted the matter embodied in this report for the award of any other degree
in any other institutions.
By
A.RAJENDRA KUMAR
Regd.No.18091A04F1
Place: Nandyal
Date:
Abstract
Full stack web development means that we focus on all parts of the application: the
frontend, the backend, and the database. Sometimes the software on the server and
its operating system are seen as parts of the stack, but we won't go into those.
We will code the backend with JavaScript, using the Node.js runtime environment.
Using the same programming language on multiple layers of the stack gives full stack
web development a whole new dimension.
However, it's not a requirement of full stack web development to use the same
programming language (JavaScript) for all layers of the stack.
It used to be more common for developers to specialize in one layer of the stack, for
example the backend. Technologies on the backend and the frontend were quite
different.
With the Full stack trend, it has become common for developers to be proficient on
all layers of the application and the database. Oftentimes, full stack developers must
also have enough configuration and administration skills to operate their application,
for example, in the cloud
practically all web applications have (at least) two "layers": the browser, being closer
to the end-user, is the top layer, and the server the bottom one. There is often also a
database layer below the server. We can therefore think of the architecture of a web
application
Communicating on the web requires knowledge of the HTTP protocol. One must also
handle databases and server administration and configuration. It would also be good
to know enough CSS to make applications at least somewhat presentable.
CONTENTS:
• Introduction
• Modern Frontend Frameworks
• Virtual Machines
• HTML
• CSS
• JavaScript
• Websites and webservers
• Frontend Libraries
• AngularJs
• React Js
• Bootstrap
• jQuery
• SASS
• Backend
• Php
• C++, Java, Python
• JavaScript
• Nodejs
• Backend Frameworks
• Database
• Oracle, Mongo dB
• Features of Mongo dB
• Ajax
• Advantages and Disadvantages
• Conclusion
• References
FULLSTACK DEVELOPMENT
Introduction
The industry definition of a Full Stack Developer is an engineer who
can work on different levels of an application stack. The term stack
refers to the combination of components and tools that make up the
application.
The components could be in the front-end or the back-end of the
system. The main objective of full stack engineer is to keep every
part of the system running smoothly.
A Full Stack Developer can performs tasks ranging from resizing an
image or text in a webpage to patching the kernel.
WHAT IS FULL STACK?
Modern applications are developed to be installed on mobile devices
or hosted on the web. This is a result of trends in faster internet
speeds, greater web access and penetration, and the development of
more powerful mobile devices.
This has created the need to rethink application development.
Instead of an isolated desktop or mobile application, modern
applications
have
a
distributed
back-end
infrastructure
interactively serving a variety of front-end clients over the web.
HOW IT IS DONE?
• Back-End –
Operating System (OS)
Firewall
Web server
Database (SQL or NoSQL)
Caches
Message queuing software
Application
• Front-End –
HTML
CSS
JavaScript
Dart
Dept.of.ECE
1
FULLSTACK DEVELOPMENT
MODERN FRONT-END FRAME WORKS
We have seen the big shift in the web from HTML 4 to HTML5 which has
built-in APIs to help you accomplish many tasks to built a richer web
application. This has resulted in a variety of front-end MVC frameworks such
as:
• Polymer
• AngularJS
• React.
VIRTUAL MACHINES:
Virtual Machines Definition In computing, a virtual machine (VM) is
an emulation of a particular computer system.
Virtual machines operate based on the computer architecture and
functions of a real or hypothetical computer, and their
implementations may involve specialized hardware, software, or a
combination of both.
SOFTWARE:
•VirtualBox
•VMware
•Linux
COMMAND LINE INTERFACE:
Command Line Interface Command Line Interface or CLI is the
fastest way of communicating with a computer.
Dept.of.ECE
2
FULLSTACK DEVELOPMENT
Figure: IMAGE OF FULL STACK DEVELOPMENT
Technology related to full stack development:
Front end: It is the visible part of website or web application which is responsible
for user experience. The user directly interacts with the front-end portion of the
web application or website.
Front end Languages: The front-end portion is built by using some languages
which are discussed below:
• HTML
➢ HTML stands for Hyper Text Markup Language. It is used to design the
front-end portion of web pages using markup language.
➢ HTML is the combination of Hypertext and Markup language. Hypertext
defines the link between the web pages.
➢ The markup language is used to define the text documentation within tag
which defines the structure of web pages.
Dept.of.ECE
3
FULLSTACK DEVELOPMENT
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
• CSS
➢ Cascading Style Sheets, fondly referred to as CSS, is a simply
designed language intended to simplify the process of making web
pages presentable.
➢ CSS allows you to apply styles to web pages. More importantly, CSS
enables you to do this independent of the HTML that makes up each
web page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style></style>
</head>
<body>
</body>
</html>
Dept.of.ECE
4
FULLSTACK DEVELOPMENT
JavaScript
➢ JavaScript is a famous scripting language used to create the magic on
the sites to make the site interactive for the user.
➢ It is used to enhancing the functionality of a website to running cool
games and web-based software.
<!DOCTYPE html>
<html>
<head>
<title>
Simple webpage
</title>
<style>
body {
text-align: centre;
}
Dept.of.ECE
5
FULLSTACK DEVELOPMENT
h1 {
colour: green;
}
</style>
</head>
<body>
<h1>Welcome to RGM</h1>
<p>ECE</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Basic Example to Describe JavaScript
</title>
</head>
<body>
<script>
console.log("Welcome to RGM");
</script>
</body>
</html>
•
Websites: JavaScript helps us to add behavior of our website. It helps users to interact
with the website. For clicking on buttons, saving details, uploading details on the
website, etc.
•
Web Servers: We can make robust server applications using JavaScript. To be precise
we use JavaScript frameworks like Node.js and Express.js to build these servers.
•
Game Development: In Game Development industry, JavaScript is used widely. With
the addition of HTML5 Canvas, it’s now possible to make 2D and 3D games in JavaScript
very efficiently.
3D Drawings: JavaScript in addition with HTML Canvas is used to make threedimensional graphics.
•
Dept.of.ECE
6
FULLSTACK DEVELOPMENT
Front End Frameworks and Libraries:
•
ANGULARJS
➢ AngularJs is a JavaScript open-source front-end framework that is mainly
used to develop single page web applications (SPAs).
➢ It is a continuously growing and expanding framework which provides
better ways for developing web applications.
➢ It changes the static HTML to dynamic HTML.
➢ It is an open-source project which can be freely used and changed by
anyone.
➢ It extends HTML attributes with Directives, and data is bound with HTML.
•
REACT JS
➢ React is a declarative, efficient, and flexible JavaScript library for
building user interfaces.
➢ ReactJS is an open-source, component-based front end library
responsible only for the view layer of the application.
➢ It is maintained by Facebook.
import React,{ Component }
from 'react';
class App extends Component {
render() {
return (
<div>
<h1>Hello, Learner.Welcome to RGM.</h1>
</div>
);
}
}
export default App;
•
BOOTSTRAP
➢ Bootstrap is a free and open-source tool collection for creating
responsive websites and web applications.
➢ It is the most popular HTML, CSS, and JavaScript framework for
developing responsive, mobile-first web sites.
<!DOCTYPE html>
<html lang="en">
Dept.of.ECE
7
FULLSTACK DEVELOPMENT
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
"
integrity=
"sha384ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.j
s"
integrity=
"sha384UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous">
</script>
<!-- Latest compiled JavaScript library -->
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js "
integrity=
"sha384JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container text-center">
</body>
Dept.of.ECE
8
FULLSTACK DEVELOPMENT
•
JQUERY
➢ jQuery is an open-source JavaScript library that simplifies the
interactions between an HTML/CSS document, or more precisely the
Document Object Model (DOM), and JavaScript.
➢ Elaborating the terms, jQuery simplifies HTML document traversing and
manipulation, browser event handling, DOM animations, Ajax
interactions, and cross-browser JavaScript development.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js ">
</script>
<script>
$(document).ready(function() {
$("h1").hover(function() {
$(this).css("color", "green");
}, function() {
$(this).css("color", "aliceblue");
});
});
</script>
</head>
• SASS:
➢ It is the most reliable, mature and robust CSS extension language.
➢ It is used to extend the functionality of an existing CSS of a site
including everything from variables, inheritance, and nesting with
ease.
➢ Some other libraries and frameworks are: Semantic-UI, Foundation,
Materialize, Backbone.js, Express.js, Ember.js etc.
Dept.of.ECE
9
FULLSTACK DEVELOPMENT
•
•
•
•
•
•
Work with text editors to use shortcuts and its facilities i.e. Visual studio, Atom,
Sublime etc.
Make UI responsible using grid system.
Git and git commands like init, add, commit etc for version control and to work
with team.
Other tools like npm & yarn package managers, sass css pre-processor,
browser DevTools i.e. chrome devtools.
Understand using HTTP, JSON, GraphQL APIs to fetch data using axios or
other tools.
It also requires some design skill to make layout and look better.
Other Important Points:
•
•
Work with text editors to use shortcuts and its facilities i.e. Visual studio,
Atom, Sublime etc.
Make UI responsible using grid system.
Git and git commands like init, add, commit etc for version control and to
work with team.
Other tools like npm & yarn package managers, sass css pre-processor,
browser DevTools i.e. chrome devtools.
Understand using HTTP, JSON, GraphQL APIs to fetch data using axios
or other tools.
It also requires some design skill to make layout and look better
Dept.of.ECE
10
•
•
•
•
FULLSTACK DEVELOPMENT
Back end:
➢ It refers to the server-side development of web application or website
with a primary focus on how the website works.
➢ It is responsible for managing the database through queries and APIs by
client- side commands.
➢ This type of website mainly consists of three parts front end, back end,
and database.
➢ The back-end portion is built by using some libraries, frameworks, and
languages which are discussed below:
PHP:
➢ PHP is a server-side scripting language designed specifically for web
development.
➢ Since, PHP code executed on server side so it is called server-side
scripting language.
<?php
/* echo is a print command */
echo "Hello world!";
?>
C++:
➢ It is a general-purpose programming language and widely used now a
days for competitive programming.
➢ It is also used as backend language.
Java:
➢ Java is one of the most popular and widely used programming language
and platform.
➢ It is highly scalable.
➢ Java components are easily available.
public class GFG {
public static void main(String args[])
{
System.out.println("Hello World");
}
}
Dept.of.ECE
11
FULLSTACK DEVELOPMENT
Python:
➢ Python is a programming language that lets you work quickly and
integrate systems more efficiently.
JavaScript:
➢ JavaScript can be used as both (front end and back end)
programming languages.
➢
➢
➢
➢
➢
➢
➢
➢
➢
➢
➢
➢
➢
➢
var events = require('events');
var eventEmitter = new events.EventEmitter();
// Create an event handler:
var myEventHandler = function () {
console.log('Welcome to GeeksforGeeks');
}
// Assign the event handler to an event:
eventEmitter.on('geeks', myEventHandler);
// Fire the 'geeks' event:
eventEmitter.emit('geeks');
Node.js:
➢ Node.js is an open source and cross-platform runtime environment for
executing JavaScript code outside of a browser.
➢ You need to remember that NodeJS is not a framework and it’s not a
programming language.
➢ Most of the people are confused and understand it’s a framework or a
programming language.
➢ We often use Node.js for building back-end services like APIs like
Web App or Mobile App.
➢ It’s used in production by large companies such as PayPal, Uber,
Netflix, Walmart and so on.
Dept.of.ECE
12
FULLSTACK DEVELOPMENT
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Basic Example to Describe JavaScript
</title>
</head>
<body>
<script>
console.log ("Welcome to GeeksforGeeks");
</script>
</body>
</html>
➢ Structuring the data in efficient way.
➢ Handle request-response of APIs for storing and retrieve data.
➢ Security of data is important.
➢
JavaScript is essential for all stacks as it is dominant technology on
Web.
Dept.of.ECE
13
FULLSTACK DEVELOPMENT
Back End Frameworks:
➢ The list of back-end frameworks are: Express, Django, Rails, Laravel,
Spring etc.
➢ The other back-end program/scripting languages are: C#, Ruby,
REST, GO etc.
Database:
➢ Database is the collection of inter-related data which helps in efficient
retrieval, insertion and deletion of data from database and organizes
the data in the form of tables, views, schemas, reports etc.
Oracle:
➢ Oracle database is the collection of data which is treated as a unit.
➢ The purpose of this database is to store and retrieve information
related to the query.
➢ It is a database server and used to manages information.
MongoDB:
➢ MongoDB, the most popular NoSQL database, is an open source
document-oriented database.
➢ The term ‘NoSQL’ means ‘non-relational’. It means that MongoDB isn’t
based on the table-like relational database structure but provides an
altogether different mechanism for storage and retrieval of data.
➢ A simple MongoDB document Structure:
{
title: 'rajendra',
by: 'Harshit Gupta',
url: 'https://www.rgm.org',
type: 'NoSQL'
}
•
Features of MongoDB:
Document Oriented:
➢ MongoDB stores the main subject in the minimal number of documents
and not by breaking it up into multiple relational structures like RDBMS.
➢ For example, it stores all the information of a computer in a single
document called Computer and not in distinct relational structures like
CPU, RAM, Hard disk, etc.
Dept.of.ECE
14
FULLSTACK DEVELOPMENT
Indexing:
o
Without indexing, a database would have to scan every document
of a collection to select those that match the query which would be
inefficient.
o So, for efficient searching Indexing is a must and MongoDB uses it
to process huge volumes of data in very less time.
Scalability:
o MongoDB scales horizontally using sharding (partitioning data
across various servers).
o Data is partitioned into data chunks using the shard key, and
these data chunks are evenly distributed across shards that reside
across many physical servers.
o Also, new machines can be added to a running database.
SQL databases store data in tabular format. This data is stored in a predefined data
model which is not very much flexible for today’s real-world highly growing
applications. Modern applications are more networked, social and interactive than
ever. Applications are storing more and more data and are accessing it at higher rates.
Relational Database Management System(RDBMS) is not the correct choice when it
comes to handling big data by the virtue of their design since they are not
horizontally scalable. If the database runs on a single server, then it will reach a
scaling limit. NoSQL databases are more scalable and provide superior performance.
MongoDB is such a NoSQL database that scales by adding more and more servers and
increases productivity with its flexible document model.
SQL:
➢ Structured Query Language is a standard Database language which is
used to create, maintain and retrieve the relational database.
➢ Structured Query Language or SQL is a standard Database language
which is used to create, maintain and retrieve the data from relational
databases like MySQL, Oracle, SQL Server, PostGre, etc. The recent
ISO standard version of SQL is SQL:2019.
Popular Stacks:
•
Dept.of.ECE
MEAN Stack: MongoDB, Express, AngularJS and Node.js.
15
FULLSTACK DEVELOPMENT
•
MERN Stack: MongoDB, Express, ReactJS and Node.js
•
Django Stack: Django, python and MySQL as Database.
•
Rails or Ruby on Rails: Uses Ruby, PHP and MySQL.
•
LAMP Stack: Linux, Apache, MySQL and PHP.
Dept.of.ECE
16
FULLSTACK DEVELOPMENT
AJAX:
➢ The Notes page of the application follows an early-nineties style of web
development and "uses Ajax". As such, it's on the crest of the wave of early
2000's web technology.
➢ AJAX (Asynchronous JavaScript and XML) is a term introduced in February
2005 on the back of advancements in browser technology to describe a new
revolutionary approach that enabled the fetching of content to web pages
using JavaScript included within the HTML, without the need to render the
page.
➢ Prior to the AJAX era, all web pages worked like the traditional web
application we saw earlier in this chapter.
➢ All of the data shown on the page was fetched with the HTML-code
generated by the server.
➢ The Notes page uses AJAX to fetch the notes data. Submitting the form still
uses the traditional mechanism of submitting web-forms.
➢ The application URLs reflect the old, carefree times.
➢ JSON data is fetched from the
url https://studies.cs.helsinki.fi/exampleapp/data.json and new notes are
sent to the URL https://studies.cs.helsinki.fi/exampleapp/new_note .
Nowadays URLs like these would not be considered acceptable, as they
don't follow the generally acknowledged conventions of RESTful APIs.
➢ The thing termed AJAX is now so commonplace that it's taken for granted.
The term has faded into oblivion, and the new generation has not even heard
of it.
Dept.of.ECE
17
FULLSTACK DEVELOPMENT
•
•
•
•
The browser fetches the HTML code defining the content and the structure of
the page from the server using an HTTP GET request.
Links in the HTML code cause the browser to also fetch the CSS style
sheet main.css...
...and a JavaScript code file main.
When the data has been fetched, the browser executes an event handler,
which renders the notes to the page using the DOM-API.
Dept.of.ECE
18
FULLSTACK DEVELOPMENT
Advantages:
•
•
•
•
•
•
•
•
•
•
•
•
You can master all the techniques involved in a development project
You can make a prototype very rapidly
You can provide help to all the team members
You can reduce the cost of the project
You can reduce the time used for team communication
You can switch between front and back end development based on
requirements
You can better understand all aspects of new and upcoming
technologies
The experience of the developer helps in the application development
in different ways since he/she has worked in different projects either
as a front-end or back-end developer.
They can get a full picture of the application development and design.
This helps in the proper management of the project.
Since they are up-to-date with all technologies, they can make the
application or website user-friendly.
The developers know all levels of the project, which helps in
communicating with the client properly about the product. Also, they
can do the presentations or do the documentations way better than
others.
Troubleshooting of the application can be done easily by a Full Stack
developer.
•
Disadvantages:
•
•
•
•
•
•
•
Dept.of.ECE
The solution chosen can be wrong for the project
The solution chosen can be dependent on developer skills
The solution can generate a key person risk
Being a full stack developer is increasingly complex
A developer can’t learn anything deeply since he/she has to learn
everything related to the application.
The working process can be really slow as the developer has to check
himself while handling different languages.
The developers are difficult to replace; vacation or delegation of work is
a long-cherished dream.
19
FULLSTACK DEVELOPMENT
Conclusion:
➢ In conclusion, being a full stack developer comes with a high
skill ceiling. They are supposed to be adept at handling
everything in the domain of web development.
➢ There are a lot of skills that are crucial for a career in a fullstack.
➢ However, once you have the necessary skills, you can apply it
to become basically anyone you want.
➢ Thus, there are a lot of career opportunities in a full-stack.
➢ You can use part of your knowledge to serve as either front
or backend developer, or you can obviously, by making use of
the entire spectrum of your knowledge, can become a full
stack developer
References:
➢ www.geeksforgeeks.com
➢ www.freecodecamp.com
➢ www.edureka.com
➢ www.simplelearn.com
Dept.of.ECE
20