SlideShare a Scribd company logo
Your client or supervisor wants
you to design how you would
build a complex web app.
Step 1: Discovery Stage
Main question I think about: "Is it better to build this as a single
application or break it into multiple applications?"
Sub-questions to influence this decision:
1) how many developers willbe working on this? How many front-end
and how many back-end? What are the languages and frameworks these
developers are already familiar with?
2) what part of this application do you think will get the most traffic?
3) how important is speed of building theproject vs stability of the
project. In other words, if you had to choosebetweenlaunching features
very quickly but where customers would find somebugs or where you
could build features at 1/3 or ¼ of thespeed but not having any bugs is
really important, then what would you choose? Which bugs would you
find acceptable? Which bugs would you not find acceptable?
4) are there any APIs or micro-services that our team can already utilize
that we've either built previously or which are available that you know
of?
5) any specific preference on which programming language, framework,
or test framework to use?
Step 3: Choose the programming languages and frameworks
for back-end and front-end
Step 4: Choose how you would store datafor each app or
micro-service
Step 5: Choose your testing/deployment process for each app
or micro-serviceusing continuous integration, continuous
delivery, continuous deployment)
System Design Process for Web Applications
Step 2: Research stage
Research to find if there arelibraries or APIs that you can
leveragethat would reducethecomplexity of your app. For
example, if someone already built somemodules that you can
also leverage, explore those options.
For example, if you're doing machine learning stuff, look to see if
there arePython libraries or modules you could leverage.
Ifthereare APIs that already do somecriticalpart of what you
need, see ifyou can leverage thoseAPIs instead of your team
creating all ofthese functions.
Doing early research now will influencehow many modules or
micro-services you'll end up creating.
By Michael Choi (founder of Coding Dojo, Data Compass, Hacker Hero, Village 88)
(Optional) Step 6: Manage micro-services/apps. Orchestrate
these management using containers or using traditional web
servers.
Listen beforejumping in. Ask lots of
questions and don't assume.
Research before jumping in
Need anything
real time?
Yes
Only build thereal-time
component as a micro-
service using Node.js ,
Express and socket.
No
Is this a weekend
project?
Yes
Use a light framework
such as Flask (for Python),
Sinatra (for Ruby), or just
script it out without using
any framework.
How many
full timeback-end
engineers will be
working on this
project?
No
Less than ~10?
Which is more
important? Speed or
stability.
Speed
Use MVC frameworks with
strong test cases support such
as Rails. Rspec is amazing!!!
Stability
Use either Django (Python),
Laravel/CodeIgniter/Zend (PHP), Spring
(Java), .NETCore (for C#), etc. Do this based
on what your team members is already
familiar with. "All ofthis is practically the
same and not that different"is what you
should think although becareful on saying
this out aloud to other developers as this
could causeun-necessary heated arguments
about which framework is better and why.
Listen to them and have them pick one that
the team is most comfortable with.
Need any
machine learning
libraries? Or need to do
a lot of math
computations?
Strongly consider going with Python as
Python has great libraries for machine
learning and math/statistics. Use any MVC
framework such as Django.
Yes
No
Find ways to modularize the app into multipleservices/apps.
Each service/app could communicate to each other through
API calls. As a ruleof thumb, try to keep each service/app to
have less than 10 back-end engineers.
Once you broke this app into several
"micro-services" or modules, for each of
the module, go through the process.
`More than ~10 engineers
Step 3: Choosing programming languages/frameworks for back-end and front-end
(fancier word for this is called designing "micro-services")
Design how your micro-service would
communicate to other micro-services
using API calls. Figure out how you
would authenticate the request (to
prevent unauthorized folks to request
and retrievesensitive information).
Figureout which API methods you will
make available and what type of
response will be sent back (html, json,
xml, etc)
For each html page
that's rendered, how many
lines of javascript would you
expect?
Use frameworks such as React or
Angular
Does your app need
to be a single page
application?
No need to uselargeframeworks such as React
or Angular as this could significantly slow down
how fast the app can bebuilt.. Use plain
Javascript supplemented by light-weight
libraries.
Ifthereare frameworks that allow very quick
build-out, listen to your engineers and use those
frameworks but really make sure these
frameworks are not an overkill for organizing
small amount of javascript code.
Yes
Not sure
Thousands of lines of javascript per http response!
Less than 1,000 lines of javascript code per html file or http response
Utilize strengths of each
language/framework.
Havea small team of engineers
per project to increase
efficiency.
Connect multiple apps/micro-
services using APIs
Don't over-engineer the front
end portion of the app.
Don't over-engineer. Testcases
reduces #of bugs and is
important when reliability is
more important than speed. If
speed is more important, it's
okay to start out without
writing extensive test cases.
Any data (large files, long
texts/blob) that could be
stored in services like
Amazon S3?
Store these large data as
files in Amazon S3. Protect
it so that other peoplecan't
simply browse files in your
s3 bucket.
Do you need
relational or non-
relational
database?
How big will the
database get say
in thenext 3-5
years?
Use MySQL, Postgres,
MariaDB, etc. Use theone
that the team prefers.
Consider using services like
Amazon RDS. Check how
much data RDS can hold
(16TB as ofApr 2020)
Use Oracle – need lots of
money. Millions. Usually
not the right option when
you're starting a brand new
project.
Use Hadoop – could be hard
to set up and is usually not
the right option for any web
application unless you're
analyzing 16TB+of data
consistently. Look into
services such as Apache Hive
if you want a managed
solution.
Don't even consider using
SQLiteor any other light
databases for production.
1 TB or less
16+ TB
Way more than 16+ TB
< 16 TB
Any data
that you're okay if not
stored permanently?
(e.g. real time
broadcasting)
Store these in
memory based
database such as
Redis, Memcache,
etc.
Needs to be stored
okay to delete once the data is served
permanentlypermanently
How big will the
database get say
in thenext 3-5
years?
Use non-relational
database such as
MongoDB.
Consider using services
available in Amazon AWS
such as Apache Hiveor
other cloud services that
can scale your non
relational database for you.
1 TB or less
Bigger
relational
Non-relational
Step 4: Choose how you would store data for each app or micro-service
Reference urls:
https://aws.amazon.com/products/databases/
Don't crowd your database
with things that can be stored
elsewhere.
Don't over-engineer. Scale
things as theproject evolves
but know what the next steps
would be if you needed to scale
Storing things on memory is
significantly faster than storing
on disk.
Use Github and createa
repository for each micro-
service you're creating
Your developers fork the
repository, work on the
specific version they are
asked to work on and
submit pull request for
features they've
completed as well as test
cases for the new features
they've built.
Engineers areinstructed to
run thetest cases locally
and make sure it passes
beforethey submit a pull
request. This could also be
done automatically
utilizing pre-commit hooks
also.
Use GitFlow. For each
repo, theengineering lead
for that project creates
branches where branches
label themajor version
(e.g. 1.0, 1.1, 1.2, 1.2a, 2.0,
2.1, etc). Other
developers are not given
the authority to create
branches in the
main/origin repository.
You have tools such as Jenkin
set up that it listens for a pull
request being submitted.
Jenkins automatically test to
see ifthis pull request breaks
any existing test cases in the
staging server.
Did the pull
request pass all test
cases in staging?
Pullrequest
doesn't go
through and the
developer is
asked to fix their
code.
Engineering lead reviews
the code.
Code is good?
Did it come with test cases?
Was it documented well?
Developer is
asked to re-do
and re-submit.
Engineering lead
approves thepull
request! And gives a pat
to the developer.
no
yes
no
yes
Continuous Integration
Pullrequest is merged to
the appropriate branch.
Continuous Delivery
Services such as 'Jenkins' listen for
changes in the branch.
Branch updated?
Staging site is updated automatically!
QA team tests staging site thoroughly
to identify bugs not caught by test
cases. They do this using tools such as
Selenium.
QA lead and theEngineering lead is
happy with how staging is working..
Approveroll out
to production?
Engineers update the production with
the latestcode. Good job!
Production site is
updated
automatically!
No
Continuous
deployment set
up?
Yes
No
Yes
Set up GitHub
Step 5: Choose your testing/deployment process for each app or micro-service
Deployment
Continuous
Deployment
Continuous
Need to support
multipleversion of your
product? Or would this
app/micro-service require 5+
FT backend engineers to work
on this project
for months?
Use GitHub Flow. Only
one main development
branch – master.
Simpler and great for
simple/smaller projects.
You can still usepre-
commit hooks to make
sure all test cases pass
locally before codes are
committed.
No
Yes
Reference urls on Git/GitLab flow:
https://nvie.com/posts/a-successful-git-branching-model/
https://pradeeploganathan.com/git/git-branching-strategies/
https://sigmoidal.io/automatic-code-quality-checks-with-git-hooks/
Use version control as a
collaboration tool. Don't
over-complicate how to use
Git. Tools such as Jenkins and
connecting with Git hooks can
help you deploy apps much
faster and reduce bugs.
(Optional) Step 6: Manage servers or containers
Option 1: Servers Option 2: Containers
These tools/services may be helpful for managing your servers.
Amazon AWS / Microsoft Azure / Google Cloud – places to rent and set up your
own webserver.
AWS Elastic Beanstalk – orchestration service for deploying applications and
orchestrating EC2, S3, Simple Notification Service, Elastic Load Balancers, etc.
Azure App Service – Microsoft version of managing applications and servers
created from Azure
These tools/services may be helpful for managing your containers.
Docker: used for creating containers.
Kubernetes: open-source container-orchestration system for automating
application deployment, scaling, and management. Originally designed by
Google.
Amazon Elastic Container Service (ECS): a fully managed container
orchestration service.
AWS Elastic Kubernetes Service (EKS): fully managed Kubernetes service from
Amazon AWS
Amazon Fargate: a serverless compute engine forAmazon ECS and EKS that
allows you to run containers without having to manage servers or clusters.
Azure Kubernetes Services: fully managed Kubernetes service from Microsoft
Azure
IBM Cloud Kubernetes Service: fully managed Kubernetes service from IBM
Rancher: open-source multi-cluster orchestration platform; lets operations
teams deploy, manage and secure enterprise Kubernetes.
Tools that can be used with either option
Elasticsearch: search engine based on the Lucene library. Built in Java, it can be used to search
all kinds of documents including log files. Has near-time search and supports multitenancy.
Kibana: lets you visualize your Elasticsearch data and navigate the Elastic Stack so you can do
anything from tracking query load to understanding the way requests flow through your apps.
RabbitMQ: open-source message-broker software (sometimes called message-oriented
middleware)
Containerization isthefuture. Use
containers ifyou can unless you're
supporting older architecture that's
not using containers.
Keep learning. There are new
tools/services being introduced
always! This area ofhow apps are
managed and deployed in the cloud
is going through lots of
transformations. Don't panic when
you learn a new servicein the cloud
you haven't heard of. Be calm that
everything boils down to
fundamentals and you can also pick
up appropriateservices when you
need to.

More Related Content

What's hot

eBay Architecture
eBay Architecture eBay Architecture
eBay Architecture Tony Ng
 
The Architecture of an API Platform
The Architecture of an API PlatformThe Architecture of an API Platform
The Architecture of an API PlatformJohannes Ridderstedt
 
Market and business drivers for mobile application
Market and business drivers for mobile applicationMarket and business drivers for mobile application
Market and business drivers for mobile applicationK Senthil Kumar
 
TALEND ETL Introducción
TALEND ETL IntroducciónTALEND ETL Introducción
TALEND ETL IntroducciónSoftware
 
Diseño de APIs con OpenAPI
Diseño de APIs con OpenAPIDiseño de APIs con OpenAPI
Diseño de APIs con OpenAPIPedro J. Molina
 
APIdays London 2019 - Selecting the best API Governance for your organisation...
APIdays London 2019 - Selecting the best API Governance for your organisation...APIdays London 2019 - Selecting the best API Governance for your organisation...
APIdays London 2019 - Selecting the best API Governance for your organisation...apidays
 
What is Cloud Native Explained?
What is Cloud Native Explained?What is Cloud Native Explained?
What is Cloud Native Explained?jeetendra mandal
 
COMPUTER APPLICATION PROJECT ON
COMPUTER APPLICATION PROJECT ON COMPUTER APPLICATION PROJECT ON
COMPUTER APPLICATION PROJECT ON Jitender Suryavansh
 
API Strategy Introduction
API Strategy IntroductionAPI Strategy Introduction
API Strategy IntroductionDoug Gregory
 
0 to hero with Azure DevOps
0 to hero with Azure DevOps0 to hero with Azure DevOps
0 to hero with Azure DevOpsChristos Matskas
 
Agile case study
Agile case studyAgile case study
Agile case studySandy Lee
 
API Management Solution Powerpoint Presentation Slides
API Management Solution Powerpoint Presentation SlidesAPI Management Solution Powerpoint Presentation Slides
API Management Solution Powerpoint Presentation SlidesSlideTeam
 
Usability Testing 101 - an introduction
Usability Testing 101 - an introductionUsability Testing 101 - an introduction
Usability Testing 101 - an introductionElizabeth Snowdon
 
Requirement Gathering in Azure DevOps
Requirement Gathering in Azure DevOps Requirement Gathering in Azure DevOps
Requirement Gathering in Azure DevOps Tricia Sinclair
 
Business requirements gathering and analysis
Business requirements gathering and analysisBusiness requirements gathering and analysis
Business requirements gathering and analysisMena M. Eissa
 
API Monetization
API MonetizationAPI Monetization
API MonetizationCapgemini
 
Use Case TABLE with Actors & Goals
Use Case TABLE with Actors & Goals Use Case TABLE with Actors & Goals
Use Case TABLE with Actors & Goals Putcha Narasimham
 

What's hot (20)

eBay Architecture
eBay Architecture eBay Architecture
eBay Architecture
 
The Architecture of an API Platform
The Architecture of an API PlatformThe Architecture of an API Platform
The Architecture of an API Platform
 
Market and business drivers for mobile application
Market and business drivers for mobile applicationMarket and business drivers for mobile application
Market and business drivers for mobile application
 
TALEND ETL Introducción
TALEND ETL IntroducciónTALEND ETL Introducción
TALEND ETL Introducción
 
Diseño de APIs con OpenAPI
Diseño de APIs con OpenAPIDiseño de APIs con OpenAPI
Diseño de APIs con OpenAPI
 
APIdays London 2019 - Selecting the best API Governance for your organisation...
APIdays London 2019 - Selecting the best API Governance for your organisation...APIdays London 2019 - Selecting the best API Governance for your organisation...
APIdays London 2019 - Selecting the best API Governance for your organisation...
 
What is Cloud Native Explained?
What is Cloud Native Explained?What is Cloud Native Explained?
What is Cloud Native Explained?
 
COMPUTER APPLICATION PROJECT ON
COMPUTER APPLICATION PROJECT ON COMPUTER APPLICATION PROJECT ON
COMPUTER APPLICATION PROJECT ON
 
API Strategy Introduction
API Strategy IntroductionAPI Strategy Introduction
API Strategy Introduction
 
0 to hero with Azure DevOps
0 to hero with Azure DevOps0 to hero with Azure DevOps
0 to hero with Azure DevOps
 
Agile case study
Agile case studyAgile case study
Agile case study
 
API Management Solution Powerpoint Presentation Slides
API Management Solution Powerpoint Presentation SlidesAPI Management Solution Powerpoint Presentation Slides
API Management Solution Powerpoint Presentation Slides
 
Azure DevOps
Azure DevOpsAzure DevOps
Azure DevOps
 
Usability Testing 101 - an introduction
Usability Testing 101 - an introductionUsability Testing 101 - an introduction
Usability Testing 101 - an introduction
 
Definitive Guide to API Management
Definitive Guide to API ManagementDefinitive Guide to API Management
Definitive Guide to API Management
 
Requirement Gathering in Azure DevOps
Requirement Gathering in Azure DevOps Requirement Gathering in Azure DevOps
Requirement Gathering in Azure DevOps
 
Business requirements gathering and analysis
Business requirements gathering and analysisBusiness requirements gathering and analysis
Business requirements gathering and analysis
 
API Monetization
API MonetizationAPI Monetization
API Monetization
 
Crutial steps in requirement gathering
Crutial steps in requirement gatheringCrutial steps in requirement gathering
Crutial steps in requirement gathering
 
Use Case TABLE with Actors & Goals
Use Case TABLE with Actors & Goals Use Case TABLE with Actors & Goals
Use Case TABLE with Actors & Goals
 

Similar to System design for Web Application

30 Skills to Master to Become a Senior Software Engineer
30 Skills to Master to Become a Senior Software Engineer30 Skills to Master to Become a Senior Software Engineer
30 Skills to Master to Become a Senior Software EngineerSean Coates
 
Devops interview questions 1 www.bigclasses.com
Devops interview questions  1  www.bigclasses.comDevops interview questions  1  www.bigclasses.com
Devops interview questions 1 www.bigclasses.combigclasses.com
 
web development ppt by prakash bedage
web development ppt by prakash bedageweb development ppt by prakash bedage
web development ppt by prakash bedagePrakashBedage
 
web development project prakash.pptx
web development project prakash.pptxweb development project prakash.pptx
web development project prakash.pptxPrakashBedage
 
Top 30 Scalability Mistakes
Top 30 Scalability MistakesTop 30 Scalability Mistakes
Top 30 Scalability MistakesJohn Coggeshall
 
Workshop - The Little Pattern That Could.pdf
Workshop - The Little Pattern That Could.pdfWorkshop - The Little Pattern That Could.pdf
Workshop - The Little Pattern That Could.pdfTobiasGoeschel
 
Building and deploying LLM applications with Apache Airflow
Building and deploying LLM applications with Apache AirflowBuilding and deploying LLM applications with Apache Airflow
Building and deploying LLM applications with Apache AirflowKaxil Naik
 
The Development History of PVS-Studio for Linux
The Development History of PVS-Studio for LinuxThe Development History of PVS-Studio for Linux
The Development History of PVS-Studio for LinuxPVS-Studio
 
Open Source Project Management
Open Source Project ManagementOpen Source Project Management
Open Source Project ManagementSemen Arslan
 
Why You Should Use MERN Stack for Startup Apps?
Why You Should Use MERN Stack for Startup Apps?Why You Should Use MERN Stack for Startup Apps?
Why You Should Use MERN Stack for Startup Apps?Pixel Crayons
 
COMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxCOMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxwrite31
 
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
AD113  Speed Up Your Applications w/ Nginx and PageSpeedAD113  Speed Up Your Applications w/ Nginx and PageSpeed
AD113 Speed Up Your Applications w/ Nginx and PageSpeededm00se
 
Software Development Standard Operating Procedure
Software Development Standard Operating Procedure Software Development Standard Operating Procedure
Software Development Standard Operating Procedure rupeshchanchal
 
Nyc mule soft_meetup_13_march_2021
Nyc mule soft_meetup_13_march_2021Nyc mule soft_meetup_13_march_2021
Nyc mule soft_meetup_13_march_2021NeerajKumar1965
 
Top 10 python frameworks for web development in 2020
Top 10 python frameworks for web development in 2020Top 10 python frameworks for web development in 2020
Top 10 python frameworks for web development in 2020Alaina Carter
 
How can JAVA Performance tuning speed up applications.pdf
How can JAVA Performance tuning speed up applications.pdfHow can JAVA Performance tuning speed up applications.pdf
How can JAVA Performance tuning speed up applications.pdfMindfire LLC
 
Top 11 Front-End Web Development Tools To Consider in 2020
 Top 11 Front-End Web Development Tools To Consider in 2020 Top 11 Front-End Web Development Tools To Consider in 2020
Top 11 Front-End Web Development Tools To Consider in 2020Katy Slemon
 
Dev Learn Handout - Session 604
Dev Learn Handout - Session 604Dev Learn Handout - Session 604
Dev Learn Handout - Session 604Chad Udell
 
Top 10 Scalability Mistakes
Top 10 Scalability MistakesTop 10 Scalability Mistakes
Top 10 Scalability MistakesJohn Coggeshall
 

Similar to System design for Web Application (20)

30 Skills to Master to Become a Senior Software Engineer
30 Skills to Master to Become a Senior Software Engineer30 Skills to Master to Become a Senior Software Engineer
30 Skills to Master to Become a Senior Software Engineer
 
Devops interview questions 1 www.bigclasses.com
Devops interview questions  1  www.bigclasses.comDevops interview questions  1  www.bigclasses.com
Devops interview questions 1 www.bigclasses.com
 
web development ppt by prakash bedage
web development ppt by prakash bedageweb development ppt by prakash bedage
web development ppt by prakash bedage
 
web development project prakash.pptx
web development project prakash.pptxweb development project prakash.pptx
web development project prakash.pptx
 
Top 30 Scalability Mistakes
Top 30 Scalability MistakesTop 30 Scalability Mistakes
Top 30 Scalability Mistakes
 
Workshop - The Little Pattern That Could.pdf
Workshop - The Little Pattern That Could.pdfWorkshop - The Little Pattern That Could.pdf
Workshop - The Little Pattern That Could.pdf
 
Building and deploying LLM applications with Apache Airflow
Building and deploying LLM applications with Apache AirflowBuilding and deploying LLM applications with Apache Airflow
Building and deploying LLM applications with Apache Airflow
 
Computer software specialists wikki verma
Computer software specialists   wikki vermaComputer software specialists   wikki verma
Computer software specialists wikki verma
 
The Development History of PVS-Studio for Linux
The Development History of PVS-Studio for LinuxThe Development History of PVS-Studio for Linux
The Development History of PVS-Studio for Linux
 
Open Source Project Management
Open Source Project ManagementOpen Source Project Management
Open Source Project Management
 
Why You Should Use MERN Stack for Startup Apps?
Why You Should Use MERN Stack for Startup Apps?Why You Should Use MERN Stack for Startup Apps?
Why You Should Use MERN Stack for Startup Apps?
 
COMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxCOMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docx
 
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
AD113  Speed Up Your Applications w/ Nginx and PageSpeedAD113  Speed Up Your Applications w/ Nginx and PageSpeed
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
 
Software Development Standard Operating Procedure
Software Development Standard Operating Procedure Software Development Standard Operating Procedure
Software Development Standard Operating Procedure
 
Nyc mule soft_meetup_13_march_2021
Nyc mule soft_meetup_13_march_2021Nyc mule soft_meetup_13_march_2021
Nyc mule soft_meetup_13_march_2021
 
Top 10 python frameworks for web development in 2020
Top 10 python frameworks for web development in 2020Top 10 python frameworks for web development in 2020
Top 10 python frameworks for web development in 2020
 
How can JAVA Performance tuning speed up applications.pdf
How can JAVA Performance tuning speed up applications.pdfHow can JAVA Performance tuning speed up applications.pdf
How can JAVA Performance tuning speed up applications.pdf
 
Top 11 Front-End Web Development Tools To Consider in 2020
 Top 11 Front-End Web Development Tools To Consider in 2020 Top 11 Front-End Web Development Tools To Consider in 2020
Top 11 Front-End Web Development Tools To Consider in 2020
 
Dev Learn Handout - Session 604
Dev Learn Handout - Session 604Dev Learn Handout - Session 604
Dev Learn Handout - Session 604
 
Top 10 Scalability Mistakes
Top 10 Scalability MistakesTop 10 Scalability Mistakes
Top 10 Scalability Mistakes
 

Recently uploaded

Implementing KPIs and Right Metrics for Agile Delivery Teams.pdf
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdfImplementing KPIs and Right Metrics for Agile Delivery Teams.pdf
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdfVictor Lopez
 
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?XfilesPro
 
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product Updates
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product UpdatesGraphSummit Stockholm - Neo4j - Knowledge Graphs and Product Updates
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product UpdatesNeo4j
 
Breaking the Code : A Guide to WhatsApp Business API.pdf
Breaking the Code : A Guide to WhatsApp Business API.pdfBreaking the Code : A Guide to WhatsApp Business API.pdf
Breaking the Code : A Guide to WhatsApp Business API.pdfMeon Technology
 
How to install and activate eGrabber JobGrabber
How to install and activate eGrabber JobGrabberHow to install and activate eGrabber JobGrabber
How to install and activate eGrabber JobGrabbereGrabber
 
How To Build a Successful SaaS Design.pdf
How To Build a Successful SaaS Design.pdfHow To Build a Successful SaaS Design.pdf
How To Build a Successful SaaS Design.pdfayushiqss
 
KLARNA - Language Models and Knowledge Graphs: A Systems Approach
KLARNA -  Language Models and Knowledge Graphs: A Systems ApproachKLARNA -  Language Models and Knowledge Graphs: A Systems Approach
KLARNA - Language Models and Knowledge Graphs: A Systems ApproachNeo4j
 
StrimziCon 2024 - Transition to Apache Kafka on Kubernetes with Strimzi
StrimziCon 2024 - Transition to Apache Kafka on Kubernetes with StrimziStrimziCon 2024 - Transition to Apache Kafka on Kubernetes with Strimzi
StrimziCon 2024 - Transition to Apache Kafka on Kubernetes with Strimzisteffenkarlsson2
 
A Comprehensive Appium Guide for Hybrid App Automation Testing.pdf
A Comprehensive Appium Guide for Hybrid App Automation Testing.pdfA Comprehensive Appium Guide for Hybrid App Automation Testing.pdf
A Comprehensive Appium Guide for Hybrid App Automation Testing.pdfkalichargn70th171
 
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTier1 app
 
Agnieszka Andrzejewska - BIM School Course in Kraków
Agnieszka Andrzejewska - BIM School Course in KrakówAgnieszka Andrzejewska - BIM School Course in Kraków
Agnieszka Andrzejewska - BIM School Course in Krakówbim.edu.pl
 
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...Alluxio, Inc.
 
A Guideline to Gorgias to to Re:amaze Data Migration
A Guideline to Gorgias to to Re:amaze Data MigrationA Guideline to Gorgias to to Re:amaze Data Migration
A Guideline to Gorgias to to Re:amaze Data MigrationHelp Desk Migration
 
Designing for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web ServicesDesigning for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web ServicesKrzysztofKkol1
 
A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1
A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1
A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1KnowledgeSeed
 
JustNaik Solution Deck (stage bus sector)
JustNaik Solution Deck (stage bus sector)JustNaik Solution Deck (stage bus sector)
JustNaik Solution Deck (stage bus sector)Max Lee
 
Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...
Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...
Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...Abortion Clinic
 
Into the Box 2024 - Keynote Day 2 Slides.pdf
Into the Box 2024 - Keynote Day 2 Slides.pdfInto the Box 2024 - Keynote Day 2 Slides.pdf
Into the Box 2024 - Keynote Day 2 Slides.pdfOrtus Solutions, Corp
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2
 

Recently uploaded (20)

Implementing KPIs and Right Metrics for Agile Delivery Teams.pdf
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdfImplementing KPIs and Right Metrics for Agile Delivery Teams.pdf
Implementing KPIs and Right Metrics for Agile Delivery Teams.pdf
 
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
 
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product Updates
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product UpdatesGraphSummit Stockholm - Neo4j - Knowledge Graphs and Product Updates
GraphSummit Stockholm - Neo4j - Knowledge Graphs and Product Updates
 
Breaking the Code : A Guide to WhatsApp Business API.pdf
Breaking the Code : A Guide to WhatsApp Business API.pdfBreaking the Code : A Guide to WhatsApp Business API.pdf
Breaking the Code : A Guide to WhatsApp Business API.pdf
 
How to install and activate eGrabber JobGrabber
How to install and activate eGrabber JobGrabberHow to install and activate eGrabber JobGrabber
How to install and activate eGrabber JobGrabber
 
How To Build a Successful SaaS Design.pdf
How To Build a Successful SaaS Design.pdfHow To Build a Successful SaaS Design.pdf
How To Build a Successful SaaS Design.pdf
 
KLARNA - Language Models and Knowledge Graphs: A Systems Approach
KLARNA -  Language Models and Knowledge Graphs: A Systems ApproachKLARNA -  Language Models and Knowledge Graphs: A Systems Approach
KLARNA - Language Models and Knowledge Graphs: A Systems Approach
 
StrimziCon 2024 - Transition to Apache Kafka on Kubernetes with Strimzi
StrimziCon 2024 - Transition to Apache Kafka on Kubernetes with StrimziStrimziCon 2024 - Transition to Apache Kafka on Kubernetes with Strimzi
StrimziCon 2024 - Transition to Apache Kafka on Kubernetes with Strimzi
 
A Comprehensive Appium Guide for Hybrid App Automation Testing.pdf
A Comprehensive Appium Guide for Hybrid App Automation Testing.pdfA Comprehensive Appium Guide for Hybrid App Automation Testing.pdf
A Comprehensive Appium Guide for Hybrid App Automation Testing.pdf
 
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
 
Agnieszka Andrzejewska - BIM School Course in Kraków
Agnieszka Andrzejewska - BIM School Course in KrakówAgnieszka Andrzejewska - BIM School Course in Kraków
Agnieszka Andrzejewska - BIM School Course in Kraków
 
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
 
A Guideline to Gorgias to to Re:amaze Data Migration
A Guideline to Gorgias to to Re:amaze Data MigrationA Guideline to Gorgias to to Re:amaze Data Migration
A Guideline to Gorgias to to Re:amaze Data Migration
 
Designing for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web ServicesDesigning for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web Services
 
Top Mobile App Development Companies 2024
Top Mobile App Development Companies 2024Top Mobile App Development Companies 2024
Top Mobile App Development Companies 2024
 
A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1
A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1
A Python-based approach to data loading in TM1 - Using Airflow as an ETL for TM1
 
JustNaik Solution Deck (stage bus sector)
JustNaik Solution Deck (stage bus sector)JustNaik Solution Deck (stage bus sector)
JustNaik Solution Deck (stage bus sector)
 
Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...
Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...
Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...
 
Into the Box 2024 - Keynote Day 2 Slides.pdf
Into the Box 2024 - Keynote Day 2 Slides.pdfInto the Box 2024 - Keynote Day 2 Slides.pdf
Into the Box 2024 - Keynote Day 2 Slides.pdf
 
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
 

System design for Web Application

  • 1. Your client or supervisor wants you to design how you would build a complex web app. Step 1: Discovery Stage Main question I think about: "Is it better to build this as a single application or break it into multiple applications?" Sub-questions to influence this decision: 1) how many developers willbe working on this? How many front-end and how many back-end? What are the languages and frameworks these developers are already familiar with? 2) what part of this application do you think will get the most traffic? 3) how important is speed of building theproject vs stability of the project. In other words, if you had to choosebetweenlaunching features very quickly but where customers would find somebugs or where you could build features at 1/3 or ¼ of thespeed but not having any bugs is really important, then what would you choose? Which bugs would you find acceptable? Which bugs would you not find acceptable? 4) are there any APIs or micro-services that our team can already utilize that we've either built previously or which are available that you know of? 5) any specific preference on which programming language, framework, or test framework to use? Step 3: Choose the programming languages and frameworks for back-end and front-end Step 4: Choose how you would store datafor each app or micro-service Step 5: Choose your testing/deployment process for each app or micro-serviceusing continuous integration, continuous delivery, continuous deployment) System Design Process for Web Applications Step 2: Research stage Research to find if there arelibraries or APIs that you can leveragethat would reducethecomplexity of your app. For example, if someone already built somemodules that you can also leverage, explore those options. For example, if you're doing machine learning stuff, look to see if there arePython libraries or modules you could leverage. Ifthereare APIs that already do somecriticalpart of what you need, see ifyou can leverage thoseAPIs instead of your team creating all ofthese functions. Doing early research now will influencehow many modules or micro-services you'll end up creating. By Michael Choi (founder of Coding Dojo, Data Compass, Hacker Hero, Village 88) (Optional) Step 6: Manage micro-services/apps. Orchestrate these management using containers or using traditional web servers. Listen beforejumping in. Ask lots of questions and don't assume. Research before jumping in
  • 2. Need anything real time? Yes Only build thereal-time component as a micro- service using Node.js , Express and socket. No Is this a weekend project? Yes Use a light framework such as Flask (for Python), Sinatra (for Ruby), or just script it out without using any framework. How many full timeback-end engineers will be working on this project? No Less than ~10? Which is more important? Speed or stability. Speed Use MVC frameworks with strong test cases support such as Rails. Rspec is amazing!!! Stability Use either Django (Python), Laravel/CodeIgniter/Zend (PHP), Spring (Java), .NETCore (for C#), etc. Do this based on what your team members is already familiar with. "All ofthis is practically the same and not that different"is what you should think although becareful on saying this out aloud to other developers as this could causeun-necessary heated arguments about which framework is better and why. Listen to them and have them pick one that the team is most comfortable with. Need any machine learning libraries? Or need to do a lot of math computations? Strongly consider going with Python as Python has great libraries for machine learning and math/statistics. Use any MVC framework such as Django. Yes No Find ways to modularize the app into multipleservices/apps. Each service/app could communicate to each other through API calls. As a ruleof thumb, try to keep each service/app to have less than 10 back-end engineers. Once you broke this app into several "micro-services" or modules, for each of the module, go through the process. `More than ~10 engineers Step 3: Choosing programming languages/frameworks for back-end and front-end (fancier word for this is called designing "micro-services") Design how your micro-service would communicate to other micro-services using API calls. Figure out how you would authenticate the request (to prevent unauthorized folks to request and retrievesensitive information). Figureout which API methods you will make available and what type of response will be sent back (html, json, xml, etc) For each html page that's rendered, how many lines of javascript would you expect? Use frameworks such as React or Angular Does your app need to be a single page application? No need to uselargeframeworks such as React or Angular as this could significantly slow down how fast the app can bebuilt.. Use plain Javascript supplemented by light-weight libraries. Ifthereare frameworks that allow very quick build-out, listen to your engineers and use those frameworks but really make sure these frameworks are not an overkill for organizing small amount of javascript code. Yes Not sure Thousands of lines of javascript per http response! Less than 1,000 lines of javascript code per html file or http response Utilize strengths of each language/framework. Havea small team of engineers per project to increase efficiency. Connect multiple apps/micro- services using APIs Don't over-engineer the front end portion of the app. Don't over-engineer. Testcases reduces #of bugs and is important when reliability is more important than speed. If speed is more important, it's okay to start out without writing extensive test cases.
  • 3. Any data (large files, long texts/blob) that could be stored in services like Amazon S3? Store these large data as files in Amazon S3. Protect it so that other peoplecan't simply browse files in your s3 bucket. Do you need relational or non- relational database? How big will the database get say in thenext 3-5 years? Use MySQL, Postgres, MariaDB, etc. Use theone that the team prefers. Consider using services like Amazon RDS. Check how much data RDS can hold (16TB as ofApr 2020) Use Oracle – need lots of money. Millions. Usually not the right option when you're starting a brand new project. Use Hadoop – could be hard to set up and is usually not the right option for any web application unless you're analyzing 16TB+of data consistently. Look into services such as Apache Hive if you want a managed solution. Don't even consider using SQLiteor any other light databases for production. 1 TB or less 16+ TB Way more than 16+ TB < 16 TB Any data that you're okay if not stored permanently? (e.g. real time broadcasting) Store these in memory based database such as Redis, Memcache, etc. Needs to be stored okay to delete once the data is served permanentlypermanently How big will the database get say in thenext 3-5 years? Use non-relational database such as MongoDB. Consider using services available in Amazon AWS such as Apache Hiveor other cloud services that can scale your non relational database for you. 1 TB or less Bigger relational Non-relational Step 4: Choose how you would store data for each app or micro-service Reference urls: https://aws.amazon.com/products/databases/ Don't crowd your database with things that can be stored elsewhere. Don't over-engineer. Scale things as theproject evolves but know what the next steps would be if you needed to scale Storing things on memory is significantly faster than storing on disk.
  • 4. Use Github and createa repository for each micro- service you're creating Your developers fork the repository, work on the specific version they are asked to work on and submit pull request for features they've completed as well as test cases for the new features they've built. Engineers areinstructed to run thetest cases locally and make sure it passes beforethey submit a pull request. This could also be done automatically utilizing pre-commit hooks also. Use GitFlow. For each repo, theengineering lead for that project creates branches where branches label themajor version (e.g. 1.0, 1.1, 1.2, 1.2a, 2.0, 2.1, etc). Other developers are not given the authority to create branches in the main/origin repository. You have tools such as Jenkin set up that it listens for a pull request being submitted. Jenkins automatically test to see ifthis pull request breaks any existing test cases in the staging server. Did the pull request pass all test cases in staging? Pullrequest doesn't go through and the developer is asked to fix their code. Engineering lead reviews the code. Code is good? Did it come with test cases? Was it documented well? Developer is asked to re-do and re-submit. Engineering lead approves thepull request! And gives a pat to the developer. no yes no yes Continuous Integration Pullrequest is merged to the appropriate branch. Continuous Delivery Services such as 'Jenkins' listen for changes in the branch. Branch updated? Staging site is updated automatically! QA team tests staging site thoroughly to identify bugs not caught by test cases. They do this using tools such as Selenium. QA lead and theEngineering lead is happy with how staging is working.. Approveroll out to production? Engineers update the production with the latestcode. Good job! Production site is updated automatically! No Continuous deployment set up? Yes No Yes Set up GitHub Step 5: Choose your testing/deployment process for each app or micro-service Deployment Continuous Deployment Continuous Need to support multipleversion of your product? Or would this app/micro-service require 5+ FT backend engineers to work on this project for months? Use GitHub Flow. Only one main development branch – master. Simpler and great for simple/smaller projects. You can still usepre- commit hooks to make sure all test cases pass locally before codes are committed. No Yes Reference urls on Git/GitLab flow: https://nvie.com/posts/a-successful-git-branching-model/ https://pradeeploganathan.com/git/git-branching-strategies/ https://sigmoidal.io/automatic-code-quality-checks-with-git-hooks/ Use version control as a collaboration tool. Don't over-complicate how to use Git. Tools such as Jenkins and connecting with Git hooks can help you deploy apps much faster and reduce bugs.
  • 5. (Optional) Step 6: Manage servers or containers Option 1: Servers Option 2: Containers These tools/services may be helpful for managing your servers. Amazon AWS / Microsoft Azure / Google Cloud – places to rent and set up your own webserver. AWS Elastic Beanstalk – orchestration service for deploying applications and orchestrating EC2, S3, Simple Notification Service, Elastic Load Balancers, etc. Azure App Service – Microsoft version of managing applications and servers created from Azure These tools/services may be helpful for managing your containers. Docker: used for creating containers. Kubernetes: open-source container-orchestration system for automating application deployment, scaling, and management. Originally designed by Google. Amazon Elastic Container Service (ECS): a fully managed container orchestration service. AWS Elastic Kubernetes Service (EKS): fully managed Kubernetes service from Amazon AWS Amazon Fargate: a serverless compute engine forAmazon ECS and EKS that allows you to run containers without having to manage servers or clusters. Azure Kubernetes Services: fully managed Kubernetes service from Microsoft Azure IBM Cloud Kubernetes Service: fully managed Kubernetes service from IBM Rancher: open-source multi-cluster orchestration platform; lets operations teams deploy, manage and secure enterprise Kubernetes. Tools that can be used with either option Elasticsearch: search engine based on the Lucene library. Built in Java, it can be used to search all kinds of documents including log files. Has near-time search and supports multitenancy. Kibana: lets you visualize your Elasticsearch data and navigate the Elastic Stack so you can do anything from tracking query load to understanding the way requests flow through your apps. RabbitMQ: open-source message-broker software (sometimes called message-oriented middleware) Containerization isthefuture. Use containers ifyou can unless you're supporting older architecture that's not using containers. Keep learning. There are new tools/services being introduced always! This area ofhow apps are managed and deployed in the cloud is going through lots of transformations. Don't panic when you learn a new servicein the cloud you haven't heard of. Be calm that everything boils down to fundamentals and you can also pick up appropriateservices when you need to.