Full Stack

Development
Content

● What is full stack development

● System Analysis
● Front-end Development
● Back-end Development
● Deployment
● Opportunities and Challenges
What is Full Stack
Development
Who is a full stack developer

● A full stack developer is a web developer equipped to

work with a digital entity’s front and back ends,
meaning they are usually skilled in aspects of computer
programming, user experience (UX) design, project
management, and in many cases, client communication.
● The position is predicated upon versatility, innovative
thinking, and a blend of technical programming
knowledge and high-level client communication.
Types of full stack developers

● MEAN stack developer

● MERN stack developer
● MEVN stack developer
● Java full-stack developer
● .NET full-stack developer
● Python Full Stack developer
● Laravel Full Stack developer
Focus of full-stack development

● The full stack development focuses on developing the

entire web application.
● The full-stack developer should know all the
○ Front-end
○ Back-end
○ Servers
○ Database management
○ Cloud services technologies.
○ APIs
System Analysis
and Design
What is System analysis

● System analysis is an evaluation of a technological

system, such as a software package, for the goal of
troubleshooting, development, or improvement.
● Analysts can find coding mistakes, user accessibility
problems, or design incompatibilities by conducting a
thorough investigation.
● Systems analysts take into account a product's overall
viability and efficacy as opposed to systems
administrators
User and System Requirements

● System requirements are the configuration that a system

must have in order for a hardware or software application
to run smoothly and efficiently.
● System requirements are a wide
● User requirements are detailed declaration that the client
makes are needed in order to meet their objectives.
● What the customer wants specifically and how they want
it should be made clear in the statement.
System Requirement

● Two different requirements:

○ Functional Requirements
■ Describes what product should do, its features
and functions
○ Non-functional Requirements
■ Focuses on general properties of a system
● Security, Processing speed, Reliability
Tools of Requirement Gathering

1.Interview

2.Questionnaire
3.Document analysis
4.Brainstorming
5.Observation
Need of System Analysis for Full Stack
Development

● System analysis enables the development of a system

with better management by altering the program to :
○ Users' needs
○ Technological advancements
○ Any changes that might be required in the future,
ensuring complete control over the finished result.
● The need to fully rewrite the software, which is usually
expensive, will also be eliminated if the system analysis
is done with good care.
System Design

● System design is the process of defining the elements

of a system
● These elements include:
○ Architecture
○ Modules
○ Components the different interfaces of those
components, and the data that goes through that
system.
Tools used for System Design

1.System Flow Chart

2.Data Flow Diagram (DFD)
3.Entity- Relation Diagram
4.Context Diagram
5.Decision Table
6.Decision Tree
7.Unified Modeling Language (UML)
8.Use Case
Use case diagram
Frontend
Development
What is frontend development

● Front-end web development, also known as client-side

development
● Practice of producing HTML, CSS and JavaScript for a website or
Web Application so that a user can see and interact with them
directly
● They need to ensure that their site comes up correctly in:
○ different browsers (cross-browser)
○ different operating systems (cross-platform)
○ different devices (cross-device)
Frontend technologies and frameworks

● Essential part of any business that strives to enhance user

interaction, efficiency, and the look and feel of their website
or application.
● Development teams use front-end technologies to create:
○ Website’s design
○ Structure, animation
○ Everything you see on the screen when you open it
Types of frontend frameworks/libraries

● Web-based
○ React.js
○ Angular.js
○ Vue.js
React Syntax

● Use of JSX
● Component based
● React-dom used to
interact with HTML
placement/root of
the page
Vue Syntax

● Use of JSX
● Component based
● Use of template tags
to write JSX and
organize code as
separate component
 Angular Syntax

● Use of JSX but through

TypeScript
● Component based
● Use of decorators (ex.
@component) which
defines and provides
metadata to a class or
functional component
Types of frontend frameworks/libraries

● Mobile-based
○ Flutter
○ React-Native
 React-Native Syntax
● Basically React but
created for mobile
● Use of JSX
● Component based
● Use of mobile
compartments such
as View (Div
equivalent in React),
statusBar, etc
Flutter Syntax

● Uses the Dart

Language
● Widget based
● Unlike
components,
widget allows for
more customizable
Backend
Development
What is backend development?

● Also known as data access layer

● terminology used to describe the server side or logical aspect of an
application or website
● Persists data so frontend part can use the information properly
● Unlike the frontend, the backend does not have a graphical interface
● Uses languages such as Java, JavaScript, C#, Python and many more to
write its logic
● Usually prominent
Key Aspects of backend development

● There are three key points behind the backend of an application

1. Server
2. Database
a. SQL
b. NOSQL
3. Application itself
● All three key points are binded and work together through the use of
Application Programming Interface (API)
Application Programming Interface

● A way for clients and server to communicate with one another

● API also involve database manipulation
● This is what is used by the frontend to make the request response cycle
start up
● Like stated before, APIs can be written in many kinds of programming
languages
Server-Client Relationship

● Client sends Request

to server
● Server checks
database for
requested data
● Loads data on the
web
● Server Response to
Client
Types of Backend
Technologies
Types of Backend Technology

● Laravel
● C# (ASP.NET)
● Node JS
Laravel Syntax

● Uses PHP as its language

● Uses templates to ease PHP complexity
○ Frontend possible through Blade (A laravel template)
● Implementing DRY principle (Don’t repeat yourself)
Node JS and Express JS Syntax

● Uses JavaScript as its language base

● Express JS provides concept of middleware
○ Middleware is an array of functions useful for implementing
some issues needed in program
● Allows to write API through using RES and REQ (result and
request)
○ Allowing to communicate with server and client
○ This is also a middleware on its own
ASP.NET Syntax

● Use of Razor Syntax (A C# based programming language)

● To focus on server side, use @ symbol to start inline, single
or multi-statement block
Most favored or used back-end technology

● Most favored back-end tech in order are:

○ Laravel
○ Django
○ Flask
○ Express.Js
○ Ruby On Rails
Deployment
Website Deployment

● Step 1:- To publish a website, you'll need a website hosting provider.

● Step 2:- Purchase a domain name.
● Step 3:- Optimize Your Website.
● Step 4:- Uploading in a Browser.
○ 4.1:- Log into your hosting service
○ 4.2 Open the File Manager.
○ 4.3 Navigate to your web root or directory.
○ 4.4 Select the files you want to upload and upload it.
The Connection
Overall Connection

● System analysis and its relation to front-end development

○ User experience designed prior hand so building frontend is
simple
○ Attraction and overall feel of system is spectacular
● System analysis and its relation to back-end development
○ Database planning makes it easier to build necessary database
alongside their relationship
● The relationship between front-end and back-end
development
○ Codependency as one can not provide much without the other
Opportunities and
Challenges In Full
Stack/ Web
Development
Opportunities

● Comprehensive programming abilities

● Full-stack developers understand back-end and front-end
programming steps, which may expand their career options.
● Due to its impact on marketing and business, full-stack web
development has become one of the most paid occupations in the
world.
● Fast job growth
Challenges

● Working with multiple technologies

● Managing front-end and back-end development
● Testing and debugging code
● Knowledge of multiple programming languages
Where to start
Possible Resources

● Many possible resources to start your full stack

development journey
○ Udemy
○ Academind
○ Coursera (Free)
Best books

● Cookbooks are amazing resources to get the overall

concept of a given tech stack or topic:
○ Node Cookbook
○ Laravel Cookbook
○ React Cookbook
○ Object Oriented Analysis and Design Cookbook
THANK YOU