Full Stack Development

(IT432)

Anju Mishra
Department of Information Technology

1
Module I- Introduction to Full Stack Development

Topic Name- Full Stack Web Development, Web Development Architecture

Subtopic Name: Definitions, Value & Scope of Full Stack Web Development, Architecture

Learning Objectives: To learn the concept of Full Stack Development & its architecture

Learning Outcomes: Students will be able to recognizer various technologies in Full stack

2
Outline
 T-Shaped Developer
 Full Stack Developer
 Popular Stacks
 Technologies Hierarchies
 Front End vs Back End
 Software Architecture & Patterns
 Q &A

3
Phases of Application Development

4
Full Stack Web Development
 It refers to the development of both front end(client side)
and back end(server side) portions of web application

5
Why To Become a Full Stack Developer?

6
Full Stack Developer
 A full stack web developer is a person who
can develop both client and server software.
 In addition to mastering HTML and CSS,
he/she also knows how to:
 Program a browser (like using JavaScript,
jQuery, Angular, or Vue)
 Program a server (like using PHP, ASP,
Python, or Node)
 Program a database (like using SQL,
SQLite, or MongoDB)
7
T- Shaped Developer
 The T-shaped model is a concept
that has been around for a while
that describes the abilities or
characteristics of an individual.
 An ideal T-shaped person has many
generalized skills with a
specialization in one or a few
specific fields.
 A full-stack web developer is an
excellent example of this model.
8
 Popular Stacks

 LAMP stack: JavaScript - Linux - Apache - MySQL – PHP

 LEMP stack: JavaScript - Linux - Nginx - MySQL – PHP
 MEAN stack: JavaScript - MongoDB - Express - AngularJS - Node.js
 Django stack: JavaScript - Python - Django – MySQL
 Ruby on Rails: JavaScript - Ruby - SQLite - Rails
9
Technologies Hierarchies

10
Client Software(Front End) vs Server Software(Back End)
 JSON  PHP
 XML  ASP
 jQuery  C++
 Angular  Java
 React  Python
 HTML  Node.js
 CSS  Express.js
 Bootstrap  Ruby
 W3.CSS  REST
 JavaScript  GO
 ES5  SQL
 HTML DOM  MongoDB
11
Software Architecture
 Software architecture of a system
describes its major components, their
relationships, and how they interact with
each other.

 It essentially serves as a blueprint.

 It provides an abstraction to manage the

system complexity and establish
communication and coordination among
components.

12
Software architecture Patterns
 Client-server

 Peer-to-peer

 Model-View-Controller (MVC)

 Microservices

 Event driven

 Layered
13
Client-server
 The architecture works on a request-
response model.
 The client sends the request to the server
for information & the server responds
with it.
 Every website you browse, be it a
WordPress blog or a web application like
Facebook, Twitter or your banking app is
built on the client-server architecture.

14
Peer-to-Peer
 A P2P network is a network in which
computers also known as nodes can
communicate with each other without the
need of a central server.
 The absence of a central server rules out
the possibility of a single point of failure.
 All the computers in the network have
equal rights.
 A node acts as a seeder and a receiver at
the same time. So, even if some of the
computers/nodes go down, the network
& the communication is still up.
 P2P is the base of blockchain 15
Model-View-Controller (MVC)
 The MVC architecture is a software architectural
pattern in which the application logic is divided into
three components on the basis of functionality.
 These components are called:
 Models - represent how data is stored in the
database
 Views - the components that are visible to the user,
such as an output or a GUI
 Controllers - the components that act as an interface
between models and views
 The MVC architecture is used not only for desktop
applications but also for mobile and web applications.
16
Microservices
In a microservices architecture, different
features/tasks are split into separate
respective modules/codebases which
work in conjunction with each other
forming a large service as a whole.
This particular architecture facilitates
easier & cleaner app maintenance,
feature development, testing &
deployment in comparison to a
monolithic architecture.

17
Event driven
Non-blocking architecture is also
known as the Reactive or the Event-
driven architecture. They are very
popular in the modern web
application development.
They are capable of handling a big
number of concurrent connections
with minimal resource consumption.
Modern applications need a fully
asynchronous model to scale.
These modern web frameworks
provide more reliable behavior in a
distributed environment. 18
Layered Architecture
This pattern can be used to structure
programs that can be decomposed into
groups of subtasks, each of which is at a
particular level of abstraction. Each layer
provides services to the next higher layer.
Here are the most common layers:
 Presentation layer
 Application layer
 Business logic layer
 Data access layer

19
Example: eShop Web App

20
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

21
Q&A
 What is Full Stack and Full Stack Development ?

 Discuss the Event Driven application architecture ?

 Which are the Front end and Back end Technologies ?

 What are advantages and disadvantages of the being Full

Stack developer?

22
Learning Outcome
 At the end of this session, you will be able to
 Understand the basics of Full Stack Development
 Understand the Modern Application Architecture
 Get familiar with Front end and Back-end terminologies
 Learn about advantages and disadvantages of being a
Full stack developer

23
References
1. http://singlepageappbook.com/goal.html
2. https://www.peerbits.com/blog/web-application-architecture.html
3. https://www.educative.io/blog/how-to-design-a-web-application-software-archit
ecture-101
4. https://medium.com/ios-expert-series-or-interview-series/software-architectural-
patterns-design-structures-c5692fe8affc

24