Web Architecture 101

(The basic architecture concepts I wish I knew when I was getting started as a web developer)
How InterviewBit Works?
All the components

1. DNS
2. Load Balancer
3. Web Application Server
4. Database Server
5. Caching Services
6. Job Queues and servers
7. Full text search using inverted index
8. Services
9. Analytics Data
10. Cloud Storage
11. CDN
Load Balancer

1. Vertical vs horizontal scaling:

https://stackoverflow.com/questions/11707879/difference-between-scaling-h
orizontally-and-vertically-for-databases
2. Elastic Scaling: https://en.wikipedia.org/wiki/Elasticity_(cloud_computing)
3. InterviewBit Runs anywhere between 25 to 300 servers
Databases

1. SQL
a. Stores data in tables connected through ids (usually integers)
b. Querying languages: https://www.khanacademy.org/computing/computer-programming/sql
2. NoSQL
a. More capable of handling large amounts of data
b. Intro to NoSQL:
https://resources.mongodb.com/getting-started-with-mongodb/back-to-basics-1-introduction-
to-nosql
3. SQL don’t scale horizontally very well, can only scale vertically.
Caching Service

1. Key value store, for O(1) retrieval

2. Avoid recomutations
3. Google caches common search results like “Dog” or “Kim kardashian”
4. Caching in Facebook:
https://medium.com/@shagun/scaling-memcache-at-facebook-1ba77d71c082
5. InterviewBit Caches test cases
Async Job Queues and Servers

1. Google uses job queues to crawl the web pages and build index
2. Bulk delete in gmail id done via a job queue.
3. Where might we be using a job queue in InterviewBit?
Full text search

1. https://www.elastic.co/products/elasticsearch
2. http://lucene.apache.org/solr/features.html

user_id Resume Text Keyword User id

1 Built a project using frontend in
react 1,2
react and backend search in
apache solr
Apache 1
solr
2 React expert
CDN (Content Distribution Network)
What do the request and response look like?

A typical request!
What do the request and response look like?
A typical response
Types of http response codes

1. 2XX (successful responses)

a. 200 (OK)
b. 201 (Created)
2. 3XX (redirection)
a. 301 (moved permanently)
b. 302 (found)
c. 304 (not modified!!!)
3. 4XX (Client Error)
a. 401 (unauthorised)
b. 402 (payment required)
c. 404 (?)
4. 5xx
a. 500 (internal server error)
Lets the about the good stuff!

1. When a browser gets a 200 response it is supposed to consume the response

What all constitutes a web page?

1. HTML
2. CSS
3. Javascript
4. Images
How to optimize a website?

1. Don’t serve it all at one go.

2. Minify
3. Compress
4. Status code 304, cache, cache, cache
5. Use a CDN
6. Optimize Images
a. Image must exact size as at which they are being displayed
b. Losssles/lossy compression
c. Imageinterlacing
Minification
Compression

1. Server compresses the files before writing on wire

2. Response header tells brower that the data is compressed and need to
uncompressed before being parsed.
3. Browser compresses the content, and utilizes the actual content of the file.
4. This technique often leads to 4x reduction is size and similar improvement in
page load speed.
Caching and Optimizing Images

1. Special status code of 304

2. Images are usually the heaviest component on webpage.
a. Ensure compression
b. Ensure precisely the right size. not bigger. not smaller.
c. cache!
“Product Engineer”

“Product Manager” + “Software Engineer” = “Product Engineer”

Product Engineer key characteristics

1. Can leverage tech expertise to fix problems.

2. Has user empathy
3. Monitors and Measures difference made by her code
4. Reiterates and improves.
5. Can work with ambiguous problem statements
6. Examples: Sundar Pichai, Marissa Mayer
Backend Engineer

1. Usually works with more well defined problems

2. Might not be directly connected with end user experience.
3. Number are more important than user empathy.
4. Usually works on optimizing and making systems stable and scalable
5. Examples: Steve wozniak, Jeff Dean, Sanjay Ghemawat
Hackathon Week

1. A project that you will remember 10 years down the line and feel proud of.!
2. Can this project transform to be a billion dollar company?
3. Punch above your weight, make it big!