IT3501 – FULL STACK WEB DEVELOPMENT
UNIT 1 – BASICS OF FULL STACK
Full Stack Development
Full Stack Development refers to the development of both front end (client side) and back
end (server side) portions of web application.
Full stack web Developers
Full stack web developers have the ability to design complete web applications and websites.
They work on the frontend, backend, database and debugging of web applications or websites.
Front-end Development
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 Technologies:
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.
• 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.
• 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.
Front End Libraries and Frameworks
• 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.
• [Link]: 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.
• 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.
• 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.
• 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, [Link],
[Link], [Link] etc.
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.
Back-end Technologies
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.
• 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.
• Python: Python is a programming language that lets you work quickly and integrate
systems more efficiently.
• [Link]: [Link] 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 [Link] 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.
Back End Frameworks: The list of back-end frameworks is: Express, Django, Rails,
Laravel, Spring etc.
The other back-end program/scripting languages are: C#, Ruby, REST, GO etc.
Other Important Points
• Structuring the data in efficient way.
• Handle request-response of APIs for storing and retrieve data.
• Security of data is important.
Note: JavaScript is essential for all stacks as it is dominant technology on Web.
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.
• Sql Structured Query Language is a standard Database language which is used to
create, maintain and retrieve the relational database.
Advantages
The advantage of being a full stack web developer is:
• 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
Disadvantages
• 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
Understanding the different Stacks
• MEAN Stack: MongoDB, Express, AngularJS and [Link].
• MERN Stack: MongoDB, Express, ReactJS and [Link]
• 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.
• LEMP stack: JavaScript - Linux - Nginx - MySQL - PHP
MEAN Stack
MEAN stack involves a number of open-source technologies that are based on JavaScript. MEAN
technology stack for web development uses MongoDB as its database that makes it easier to send
and receive data between the server and client side, [Link] as its backend framework, and
[Link] as its front-end framework.
While [Link] uses JavaScript to help developers build software on the server side,
[Link] eliminates a number of codes to help reduce time to market and is compatible with
tablets, smartphones, desktops, smart televisions, and laptops. The [Link], too, offers an efficient
runtime and is lightweight.
Companies Using Mean Stack
Accenture
Fiverr
UNIQLO
LAMP Stack
One of the earliest stacks to be in use, LAMP stack involves the Linux operating system, Apache
server, MySQL as its database and PHP as its programming language. The stack consists of open-
source software, making it viable to be used with other open-source software development stack.
The OS used in this web development stack is stable and secure. The programming language can
be substituted with Python or Perl. The server can also be interchanged with Nginx while the
database can be replaced with MariaBD.
Companies Using Lamp Stack
Wikipedia
Tumblr
Slack
.NET Stack
The .NET stack comes with a framework that has been tested and proven capable creating
dynamic web applications. In fact, Microsoft’s technology stack for web application boasts of the
.NET framework along with the C# programming language being its most vital feature.
The .NET stack consists of more than 60 frameworks, platforms, libraries, SKDs that
spread throughout over 13 layers. The stack is, therefore, highly independent as well as inter-
operable where programming language is concerned. It is also one of the most secure stacks, able
to keep most attacks at bay. With portability and speed as its vital feature, the .NET stack is highly
favoured among developers.
Companies Using .net Stack
Microsoft
Stack Overflow
doubleSlash
Ruby on Rails Stack (ROR)
Ruby on Rails Stack comes with a high library integration. These libraries are termed as
gems by the developers. The framework within this technology stack for web applications is
extremely scalable and also comes with a built-in database along with being MySQL compatible.
Where one would need to type in several lines in MySQL to pull any data from the
database, Ruby on Rails allows you to do so by just typing a few words This speed helps in cutting
short the development time significantly.
Companies Using RoR Stack
Airbnb
Twitter
Shopify
Python-Django Stack
The Python-Django stack involves the Python programming language as the base and the
Django framework. The stack uses MySQL as its database and the Apache web server. The Python-
Django stack ensures quick development while keeping the quality intact. In case of a smaller time
frame, this web development stack can be an ideal choice to build web software or to curate a
minimum variable product of a web application.
Companies Using python-django Stack
Disqus
Spotify
Dropbox
Criteria for choosing best technology stack
Type Of Application – Business goals, light/heavy load processing apps
Time to Market – For start-up or small business, less time and development cost
Cost – Developer Salary and Maintenance cost
Security – Cyberattacks, security guidelines
Scalability – Vertical scaling (Private cloud) & horizontal scaling (different location – same
functionality)
Project Size – choice of stack simple or complex
Experience – Developer skill and experience
Requirements – Target audience, age, interests, expectations
Licensing – open-source solutions preferable
Bug Testing – bug fixing and quality products/apps
Developer Community - good amount of documentation citing problem statements and solutions
Maintainability – depends on web architecture and codebase
Ease of Testing – simple test cases
Successful Web Projects
Airbnb - Airbnb, a popular global hospitality service that helps people find rental
accommodation, uses Ruby on Rails technology stack. The entire technology stack of Airbnb
comprises JavaScript, React JS, Nginx, Ruby, Rails, Java, MySQL, and Redis.
Shopify - Shopify is yet another successful web project that relies on Ruby on Rails as its base. It
helps entrepreneurs to build powerful online storefronts. The overall technology stack of Shopify
consists of JavaScript, React JS, Nginx, Ruby, Rails, Java, MySQL, Redis, and Memcached.
Instagram - The popular social media application, Instagram, is based on Python. It’s a
mainstream social media app that has attracted millennials in a big way. If you decode the entire
technology stack of Instagram, it comprises JavaScript, [Link], Nginx, Python, Django,
PostgreSQL, and Redis.
Quora - Quora, a question-answer website, uses Python as the base technology. Here, people can
find answers to their queries & also post questions. The entire technology stack of Quora consists
of JavaScript, [Link], Nginx, Python, Pylons, MySQL, and Memcached technologies.
Product Hunt - Product Hunt, a website that allows the sharing of product information, is based
on Ruby on Rails. You can get information about any new product. The technology stack of Product
Hunt comprises technologies such as JavaScript, React JS, Nginx, Ruby, Rails, [Link], PostgreSQL,
and Redis.
CodeAcademy - CodeAcademy, an educational platform for coding, is built on Ruby on Rails. It
offers coding classes in more than 15 different programming languages. The CodeAcademy
education platform’s technology stack consists of JavaScript, [Link], Nginx, Ruby, Rails,
MongoDB, and Redis.
Pinterest - Pinterest is built on Python technology. It is a popular social network aimed at helping
people to find something interesting related to their interests. The entire technology stack of
Pinterest comprises JavaScript, [Link], Nginx, Python, Django, Java, MySQL, and Redis.
Reddit - Reddit is yet another platform built on Python. It’s a popular news aggregator, web
content rating, and discussion platform. The technology stack of Reddit has JavaScript, [Link],
jQuery, Nginx, Python, Flask, [Link], PostgreSQL, and Memcached.
Facebook - Facebook is the world’s biggest and most popular social networking platform. The
active user base of Facebook is around 3 billion. If you dissect the technology stack of Facebook,
you will find technologies such as JavaScript, [Link], Apache, PHP, MySQL, and Memcached.
YouTube - A popular video-sharing platform, YouTube, uses Python as its base technology. It
allows users to upload videos, leave comments & so on. If you analyze the technology stack of
YouTube, you will find technologies such as PHP, Apache HTTP, MySQL, Linux, HTML5, EC2, and
Psyco.
Uber - Uber is yet another application that runs on Python. It is the world’s largest transportation
company that offers best-in-class taxi services to users. The technology stack of Uber comprises
technologies such as Java, React, [Link], Nginx, MongoDB, Python, and [Link].
Netflix - When it comes to the on-demand video streaming service, TV Series & Movies, Netflix is
the first name that comes to everyone’s mind. The tech stack for Netflix, the most popular
streaming platform lately, includes Java, MySQL, [Link], Hadoop, Flask, Dynomite, and Amazon
RDS.
Slack - Slack is a professional messenger app used by companies for effective communication.
There is an option for private group & direct messaging. The technology stack for Slack includes
technologies such as Java, PHP, JavaScript, MySQL, Apache HTTP, and React.
HubSpot - HubSpot is an all-in-one marketing platform that allows you facilities like Inbound
Marketing, Sales, and CRM (Customer Relationship Management). The technology stack of
Hubspot includes MySQL, Java, Swift, Kafka, Amazon S3, Hadoop, HBase, JavaScript, Saas, Swift,
etc.
eBay - eBay is an American multinational eCommerce organization that facilitates consumer-to-
consumer as well as business-to-consumer sales. The technology stack for eBay includes
JavaScript, [Link], Java, ES6, Apache Tomcat, Cassandra, Hadoop, Oracle, and Marko.
MVC Architecture
MVC was created by Trygve Reenskaug. The main goal of this design pattern was to
solve the problem of users controlling a large and complex data set by splitting a large
application into specific sections that all have their own purpose.
Features of MVC:
• It provides a clear separation of business logic, Ul logic, and input logic.
• It offers full control over your HTML and URLs which makes it easy to design web
application architecture.
• It is a powerful URL-mapping component using which we can build applications
that have comprehensible and searchable URLs.
• It supports Test Driven Development (TDD).
Model View Controller or MVC as it is popularly called, is a software design pattern for
developing web applications. A Model View Controller pattern is made up of the following
three parts −
• Model − The lowest level of the pattern which is responsible for maintaining data.
• View − This is responsible for displaying all or a portion of the data to the user.
• Controller − Software Code that controls the interactions between the Model and
View.
MVC is popular as it isolates the application logic from the user interface layer and
supports separation of concerns. Here the Controller receives all requests for the
application and then works with the Model to prepare any data needed by the View. The
View then uses the data prepared by the Controller to generate a final presentable
response. The MVC abstraction can be graphically represented as follows.
The Model
The model is responsible for managing the data of the application. It responds to the
request from the view and it also responds to instructions from the controller to update
itself.
The View
It means presentation of data in a particular format, triggered by a controller's decision
to present the data. They are script-based templating systems like JSP, ASP, PHP and very
easy to integrate with AJAX technology.
The Controller
The controller is responsible for responding to the user input and perform interactions
on the data model objects. The controller receives the input, it validates the input and
then performs the business operation that modifies the state of the data model.
Ex:
The view layer, written in HTML, CSS, and JavaScript using the React and Tailwind CSS
frameworks, is the frontend. Users can interact with this layer to get a full experience
when using the application.
The controller layer, written using [Link] and Express framework, is the backend. This
layer represents the server-side of our application and performs the following tasks:
• Contains all the business logic.
• Serves the HTTP requests.
• Acts as a bridge between the frontend and the database.
Finally, the model layer is the database hosted by MongoDB. It stores all the data that the
application needs to function.
View: the front-end
The view layer, also known as the frontend, is the first point of interaction between the
user and the backend of the application. This layer determines how the application looks
and feels to the end users, so it’s important to care for it both visually and functionally.
React is just a JavaScript library, so need additional tools like HTML, CSS, and JavaScript—
the core technologies used in web development.
The problem is that a React application has nothing to show to the user! For example, if
we want to display a table of all the saved files, we need a data source.
The controller layer—the backend
We need to effectively communicate all the data stored in our MongoDB database to our
React application. To do this, we’ll put an Express API between React and MongoDB.
This Express API will contain our application logic. So, the API will receive the HTTP
requests from the React application, pull some data from the MongoDB database, process
it, and then send that data to the React application for display.
The Express API and the React application are going to communicate through the HTTP
or AJAX request protocol. Each request may contain some data, which will be in the form
of JSON.
The Express API and MongoDB communicate through the Mongoose client. Mongoose is
a MongoDB object modelling tool, which is designed to provide a straightforward solution
to model data in the application. We can think of Mongoose as the frontend of MongoDB.
The model layer—the database
If we want to display a table of all saved files, then we need some source of data. Once
again, the problem is that our React application has nothing to show to the user!
There are four reasons that the frontend and backend are separate and don’t
communicate directly:
• Abstraction
• Security
• Performance
• Separation of concerns
If we directly connect the database to the React application, it will be difficult and time-
consuming to change the database. That’s why abstraction is a very important reason to
keep the frontend and backend separate. Security is an even more important reason. We
shouldn’t connect the database to the frontend, unless the stored data in the database is
worthless!
When it comes to performance, there are many ways to optimize and protect access to
the databases in the backend, such as caching and authentication schemas. These
strategies aren’t easily available in the frontend and can degrade the application
performance. Lastly, a separation of concerns is why it’s best to make the frontend have
one single responsibility—that is, the frontend!
Some of the popular Frameworks that follow the MVC Design pattern are:
• JAVA Frameworks: Sprint, Spring Boot.
• Python Framework: Django.
• NodeJS (JavaScript): ExpressJS.
• PHP Framework: Cake PHP, Phalcon, PHPixie.
• Ruby: Ruby on Rails.
• [Link]: [Link] MVC.
• Perl: Catalyst.
Advantages of MVC:
• Codes are easy to maintain and they can be extended easily.
• The MVC model component can be tested separately.
• The components of MVC can be developed simultaneously.
• It reduces complexity by dividing an application into three units. Model, view, and
controller.
• It supports Test Driven Development (TDD).
• It works well for Web apps that are supported by large teams of web designers and
developers.
• This architecture helps to test components independently as all classes and
objects are independent of each other.
• Search Engine Optimization (SEO) Friendly.
Disadvantages of MVC:
• It is difficult to read, change, test, and reuse this model.
• It is not suitable for building small applications.
• The inefficiency of data access in view.
• The framework navigation can be complex as it introduces new layers of
abstraction which requires users to adapt to the decomposition criteria of MVC.
• Increased complexity and Inefficiency of data.
Ex: Simple Web Application
<!DOCTYPE html>
<html><head>
<title>Simple Program</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"] {
width: 100%;
padding: 5px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#output {
margin-top: 20px;
padding: 10px;
border: 1px solid #007BFF;
border-radius: 5px;
}
</style></head>
<body>
<div class="container">
<label for="inputText">Enter your message:</label>
<input type="text" id="inputText" placeholder="Type something...">
<button onclick="displayOutput()">Show Output</button>
<div id="output"></div>
</div>
<script>
function displayOutput() {
const inputText = [Link]('inputText').value;
const outputDiv = [Link]('output');
[Link] = `You entered: ${inputText}`;
}
</script></body></html>