diff --git a/_includes/class_info.md b/_includes/class_info.md index 3ef3df0..b1da577 100644 --- a/_includes/class_info.md +++ b/_includes/class_info.md @@ -8,6 +8,11 @@ - [{{site.instructor}}]({{site.instructor_url}}) - <{{site.instructor_email}}> +## TA + +- Shubham Talbar +- + ## AppFolio Backup - [Dr. Nevena Golubovic](https://www.linkedin.com/in/nevenagolubovic/) @@ -23,9 +28,14 @@ Please use [Piazza]({{site.piazza_url}}) for class-related correspondance. - 11:00am -- 12:15pm PT - Phelps 2510 +### Office Hours + +- In-person: Wednesday 10:00am -- 11:00am, Phelps 2510 +- Virtual: Thursday 2:00pm -- 3:00pm, link in [Piazza]({{site.piazza_url}}) + ### Initial tasks due before -Tuesday, September 26 1pm PT +Friday, October 6 2pm PT - Complete the [introduction survey]({{site.intro_survey}}) - Join the class on [Piazza]({{site.piazza_url}}) @@ -33,39 +43,39 @@ Tuesday, September 26 1pm PT ### [Project 0](/project0/) due before -Friday, October 6 1pm PT +Monday, October 9 2pm PT ### [Project 1](/project1/) due before -Friday, October 13 1pm PT +Monday, October 16 2pm PT ### [Project 2](/project2/) due before -Friday, October 20 1pm PT +Monday, October 23 2pm PT ### Project 3 Pairing Message due before -Friday, October 27 1pm PT +Monday, October 30 2pm PT ### Final Project Team Message due before -Friday, November 3 1pm PT +Monday, November 6 2pm PT ### [Project 3](/project3/) due before -Friday, November 3 1pm PT +Monday, November 6 2pm PT ### [Project](/project/#report) report draft for feedback due before -Monday, November 27 1pm PT +Monday, November 27 2pm PT ### [Project](/project/#report) report due before -Monday, December 4 1pm PT +Monday, December 4 2pm PT ### [Project](/project/#video) video due before -Monday, December 11 1pm PT +Monday, December 11 2pm PT ## Class Resources diff --git a/schedule.md b/schedule.md index 7e80fbb..43988d7 100644 --- a/schedule.md +++ b/schedule.md @@ -16,7 +16,8 @@ The following schedule is subject to change, and many slide links are not yet ac ### Topics -- Course Introduction +- Course Introduction ([slides](/slides/2023/01_course_introduction)) +- Hypertext Transfer Protocol (HTTP) ([slides](/slides/2023/02_http)) ### Tasks @@ -35,7 +36,6 @@ The following schedule is subject to change, and many slide links are not yet ac ### Topics -- Hypertext Transfer Protocol (HTTP) - HTTP Servers - Application Servers diff --git a/slides/2023/01_course_introduction/cloudflare_0719.png b/slides/2023/01_course_introduction/cloudflare_0719.png new file mode 100644 index 0000000..ccb3897 Binary files /dev/null and b/slides/2023/01_course_introduction/cloudflare_0719.png differ diff --git a/slides/2023/01_course_introduction/cloudflare_1120.png b/slides/2023/01_course_introduction/cloudflare_1120.png new file mode 100644 index 0000000..c86bf82 Binary files /dev/null and b/slides/2023/01_course_introduction/cloudflare_1120.png differ diff --git a/slides/2023/01_course_introduction/facebook_0319.png b/slides/2023/01_course_introduction/facebook_0319.png new file mode 100644 index 0000000..48c30a9 Binary files /dev/null and b/slides/2023/01_course_introduction/facebook_0319.png differ diff --git a/slides/2023/01_course_introduction/facebook_2021.jpg b/slides/2023/01_course_introduction/facebook_2021.jpg new file mode 100644 index 0000000..0e94cc5 Binary files /dev/null and b/slides/2023/01_course_introduction/facebook_2021.jpg differ diff --git a/slides/2023/01_course_introduction/index.html b/slides/2023/01_course_introduction/index.html new file mode 100644 index 0000000..f0b8f09 --- /dev/null +++ b/slides/2023/01_course_introduction/index.html @@ -0,0 +1,446 @@ +--- +layout: presentation +title: Course Introduction +--- + +class: center, middle + +# {{page.title}} + +## CS291A: Scalable Internet Services + +--- + +# Shyr-Shea Chang + +* UCLA Applied Math Alumna (Ph.D in 2019) + - BS in Math from National Univ. of Taiwan (2013) + +* Software Engineer at AppFolio since 2021 + - Main work on ML side + - Also worked on backend and frontend when needed + +* First time teaching this course + - Helped out with some lectures and projects last year + - Credit to Bryce Boe et al. for the materials for the class + +--- + +# Nevena Golubovic + +* UCSB CS Alumna (MS & Ph.D in 2019) + - BS in CS from Univ. of Belgrade (2009) + +* Software Engineer at AppFolio since 2020 + - Software developer experience in industry + - AppFolio, Cisco, Google, Sony Mobile + +* First time teaching this course + - Helped out with some lectures and projects last year + - Credit to Bryce Boe et al. for the materials for the class + - Took the same class in 2013 (CS290B) + +--- + +# Shubham Talbar + +* Graduated from UCSB in Winter 2023 +* Working at Appfolio as a Software Engineer with the Risk & Fraud team +* First took CS291A when starting grad school in Fall 2021 +* Previously worked with Morgan Stanley Financial Planning Team +* Looking forward to a great Fall quarter full of learnings and scaling systems + +--- + +# Course web page and GitHub repo + +Website: https://cs291.com/ + +Website source: + + +Slide source: + + +If you notice an issue with or wish to make an improvement to any of the course +content (e.g., slides, web pages) please edit them and make a pull request. + +--- + +# Questions and Feedback + +At any point during this course: + +Stop me to: + +* ask a question +* ask for clarification +* provide an additional example* + +Communicate to me: + +* how I can help you succeed in this course +* ideas for making the course more engaging +* any other feedback you may have + +--- + +# Topics for today + +* Course Motivation + +* Course Structure + +--- + +class: center inverse middle + +# Course Motivation + +--- + +class: center middle + +# How do you find a place to rent? + +--- + +# ...How do you find a place to rent? + +* [Rent.com](http://www.rent.com/) +* [Apartment Guide](http://www.apartmentguide.com/) +* [Rental Houses](http://www.rentalhouses.com/search/Goleta-CA) +* [Zillow](http://www.zillow.com/homes/for_rent/) +* [Realtor](http://www.realtor.com/apartments/Goleta_CA) +* [Trulia](http://www.trulia.com/for_rent/Goleta,CA) +* [PadMapper](http://www.padmapper.com/) +* [Craigslist](https://santabarbara.craigslist.org/) + +--- + +class: center middle + +# How do you find your way in a new city? + +--- + +# ...How do you find your way in a new city? + +* [Google Maps](https://www.google.com/maps) +* [mapquest](http://www.mapquest.com/maps?city=Goleta&state=CA) +* [tripadvisor](http://www.tripadvisor.com/LocalMaps-g32438-Goleta-Area.html) +* [Yelp](http://www.yelp.com/c/goleta-ca-us/restaurants) +* [Lyft](https://www.lyft.com) +* [Uber](https://www.uber.com) + +--- + +class: center middle + +# How do you ask questions and generate texts? + +--- + +# ...How do you ask questions and generate texts? + +* [ChatGPT](https://chat.openai.com/) +* [Bard](https://bard.google.com/) +* [GooseAI](https://goose.ai/) +* [Cohere](https://cohere.com/) +* [Claude](https://claude.ai/) +* [LLaMA](https://ai.meta.com/llama/) +* [PaLM](https://ai.google/discover/palm2/) +* and many more! + +--- + +# Internet (or Web) Services + +Each of the previous problems can be solved by a variety of Internet services. + +Every day billions of people use various Internet services to solve such +problems. + +> What other every day problems are solved by Internet services? + +> Do services use other services? + +--- + +class: center inverse middle + +# As an Internet service grows in popularity, supporting the increased amount of Internet traffic results in increased complexity of the Internet service + +--- + +class: center middle + +![Reddit downs North Korea's web sites](reddit_nk.png) + +![Stephen Fry takes down websites with single tweet](stephen_fry_tweet.png) + +--- + +class: center inverse middle + +# Complex Services Can Also Fail + +--- + +class: center middle + +![Cloudflare November 2, 2020](cloudflare_1120.png) + + + +--- + +class: center middle + +![Slack May 12, 2020](slack_0520.png) + + + +--- + +class: center middle + +![Cloudflare Outage July 2, 2019](cloudflare_0719.png) + + + +--- + +class: center middle + +![Facebook Outage March 14, 2019](facebook_0319.png) + + + +--- + + +# Internet Services, what's that? + +- What are the characteristics of an internet service? + +.center[![Question Mark](question_mark.jpg)] + +--- + +# ...Internet Services, what's that? + +There are many application-level protocols that are used to build out Internet +Services. + +For this class, Internet services will refer to HTTP-based services. + +The interface to your web service may be the web browser (e.g., Chrome, +Firefox), an API client (via REST, GraphQL, etc), or both. + +--- + +# What about mobile? + +- Many native mobile apps are backed by Internet services via an API. +- Concerns of mobile app/service development +- In app purchases + +![Mobile v. Desktop from 2010 through 2014](mobile_v_desktop.png) + + High Performance Browser networking details issues with mobile users and + offers some optimizations designed for them + ([HPBN chapters 5 through 8](https://hpbn.co/#toc)). However, these topics + won't be covered in this class. + +--- + +# Scalable, what does that mean? + +.center[![Question Mark](question_mark.jpg)] + +--- + +# ...Scalable, what does that mean? + +An Internet service is scalable if increasing demands can be effectively met +with increasing capacity. + +Demands could be: + +* Web traffic quantity (typical association) + +* Dataset size + +--- + +# Effectively meet demands: Explanation + +* Internet service remains available + +* Response time does not excessively degrade + +## Think about it + +You have a web service designed to run on a single server. What do you do when +you can no longer effectively meet demand. + +__Is your solution scalable?__ + +--- + +class: center inverse middle + +# Course Structure + +--- + +# First Five Weeks + +* The basics (HTTP and HTML) + +* HTTP Application Server architectures + +* High availability via load balancing + +* Client-side and server-side caching + +* Content-delivery networks + +* Software engineering techniques: _Agile_, _TDD_, _Continuous Integration_ + (CI), Pair Programming + +--- + +# Later Course Topics + +* Relational databases with web applications: concurrency control and query + analysis + +* Scaling via: + + * Sharding + + * Service-Oriented-Architecture (SOA) + + * Read-followers + +* Non-relational data stores (NoSQL) + +* Web security: _firewalls_, _https_, _XSS_, _CSRF_ + +* HTTP 2.0 + +--- + +# Course Skills + +__This course is fairly demanding, but is one of the most industry-applicable +courses you can take.__ You will develop the following skills: + +* Programming in __Ruby__ + +* Building web services using the __Rails__ framework + +* Working with __Docker__ + +* Experience with Amazon Web Services (__AWS__): __EC2__, __Elastic + Beanstalk__, __Lambda__, __S3__ + +* Load testing Internet services via __Tsung__, and __ab__ + +* __Agile__/__Scrum__ software development + +* Development using __Git__ with a _feature-branch_ flow via __github__ _pull + requests_ + +--- + +# This course is _not_ + +a deep-dive into: + +* Cloud Computing + +* Distributed Systems + +* Networking + +* Relational Databases + +* Security + +But we will touch on all of the above. + +--- + +# Industry Focused + +The skills you should develop through this course are the same that I use +everyday at work. + +The projects will all be open source so if you're proud of your team's work +(you should be) then put a link to the project on your résumé. + +Industry related tools you will use: + +* Git via Github (project source version control) + +* Ruby on Rails (development stack) + +* GitHub actions (automated testing) +--- + +# What you will do + +In this course you will learn and utilize some of the technologies behind +building large-scale Internet services. + +You will test and support to the best of your abilities: + +* Exponential growth in the amount of traffic to your web service + +* Exponential growth in the dataset your web service relies upon + +--- + +# In Summary + +This course won't teach you how to build a web application that obtains +worldwide attention and usage. + +However, this course will teach you how to build a web application __that can +respond to__ worldwide attention and usage. + +--- + +--- + +# Why Ruby on Rails? + +Ruby is an interpreted language, thus it is not terribly __fast__, nor is very +__memory efficient__. + +However, it is very easily scalable, and for most Internet services, developer +time ($$$) is going to be much more significant than the efficiency of the +service. + +Building Rails Internet services quickly with zero prior experience makes this +class possible. + +Consistency in frameworks across teams allows us to better support each other. + + +--- + +# Assignments + +Due tomorrow 1pm +- Piazza +- Intro survey + +Due Friday (10/6) 1pm +- Project 0 + +Due next Friday (10/13) 1pm +- http://rubykoans.com/ \ No newline at end of file diff --git a/slides/2023/01_course_introduction/mobile_v_desktop.png b/slides/2023/01_course_introduction/mobile_v_desktop.png new file mode 100644 index 0000000..9de4a9f Binary files /dev/null and b/slides/2023/01_course_introduction/mobile_v_desktop.png differ diff --git a/slides/2023/01_course_introduction/question_mark.jpg b/slides/2023/01_course_introduction/question_mark.jpg new file mode 100644 index 0000000..7bb96bb Binary files /dev/null and b/slides/2023/01_course_introduction/question_mark.jpg differ diff --git a/slides/2023/01_course_introduction/reddit_nk.png b/slides/2023/01_course_introduction/reddit_nk.png new file mode 100644 index 0000000..6c041e3 Binary files /dev/null and b/slides/2023/01_course_introduction/reddit_nk.png differ diff --git a/slides/2023/01_course_introduction/slack_0520.png b/slides/2023/01_course_introduction/slack_0520.png new file mode 100644 index 0000000..fba6f64 Binary files /dev/null and b/slides/2023/01_course_introduction/slack_0520.png differ diff --git a/slides/2023/01_course_introduction/stephen_fry_tweet.png b/slides/2023/01_course_introduction/stephen_fry_tweet.png new file mode 100644 index 0000000..9b6d22e Binary files /dev/null and b/slides/2023/01_course_introduction/stephen_fry_tweet.png differ diff --git a/slides/2023/02_http/chrome_network_table.png b/slides/2023/02_http/chrome_network_table.png new file mode 100644 index 0000000..aabd69a Binary files /dev/null and b/slides/2023/02_http/chrome_network_table.png differ diff --git a/slides/2023/02_http/concurrent_http.png b/slides/2023/02_http/concurrent_http.png new file mode 100644 index 0000000..f1107f5 Binary files /dev/null and b/slides/2023/02_http/concurrent_http.png differ diff --git a/slides/2023/02_http/first_web_server.png b/slides/2023/02_http/first_web_server.png new file mode 100644 index 0000000..3c9d45d Binary files /dev/null and b/slides/2023/02_http/first_web_server.png differ diff --git a/slides/2023/02_http/http_components.png b/slides/2023/02_http/http_components.png new file mode 100644 index 0000000..4c26fb2 Binary files /dev/null and b/slides/2023/02_http/http_components.png differ diff --git a/slides/2023/02_http/http_pipelining.png b/slides/2023/02_http/http_pipelining.png new file mode 100644 index 0000000..09e7fb0 Binary files /dev/null and b/slides/2023/02_http/http_pipelining.png differ diff --git a/slides/2023/02_http/http_session.png b/slides/2023/02_http/http_session.png new file mode 100644 index 0000000..4e3eb5c Binary files /dev/null and b/slides/2023/02_http/http_session.png differ diff --git a/slides/2023/02_http/index.html b/slides/2023/02_http/index.html new file mode 100644 index 0000000..890eb51 --- /dev/null +++ b/slides/2023/02_http/index.html @@ -0,0 +1,791 @@ +--- +layout: presentation +title: HTTP +--- + +class: center, middle + +# {{page.title}} + +## CS291A: Scalable Internet Services + +--- + +# Agenda + +* The Life Cycle of a Web Request + +* HTTP Requests and Responses + +* HTTP Performance (HPBN, chapters 9-11) + +* Project 1 + +--- + +class: center inverse middle + +# The Life Cycle of a Web Request + +--- + +# Two Endpoints + +A __web browser__ is a process (at least one) that runs on an operating system. + +It- + +* responds to user input + +* renders the display + +* utilizes the network + +-- + +A __web server__ is a process (at least one) that runs on an operating system. + +It- + +* responds to network requests + +* loads resources that may come from file system, database, other servers + +--- + +# Core Components of a Web request + +* __Web server__: Opens a TCP socket to listen for requests + +* __Browser__: Makes a DNS query to obtain an IP address for www.reddit.com + +* __Browser__: Initiates a TCP connection to the IP address + +* __Web server__: Accepts the TCP connection + +* __Web server__: Adds TLS context to the TCP connection + +* __Browser__: Wraps the TCP connection in a TLS session + +* __Browser__: Sends an HTTP request over the TLS session + +* __Web server__: Parses the request, fetches and sends the requested resources + +--- + +class: center inverse middle + +# HTTP + +--- + +# Chrome Network Table + +By the end of this lecture, you should understand this output: + +.center[![Chrome Network Table](chrome_network_table.png)] + +--- + +# History + +> When was HTTP created? + +-- + +The year is 1990. The Internet has existed for ~20 years, email for ~8. + +Tim Berners-Lee has the idea to combine __HyperText__ and the __Internet__. He +creates the first version of __HTTP__ and __HTML__. + +__HyperText__: Links documents together via __HyperLinks__ + +> When was the first web browser created? + +-- + +* 1993: Mosaic, the first web browser, is created at UIUC + +* 1994: Marc Andreessen leaves UIUC and founds Netscape with Jim Clark + +--- + +# The First Web Server + +![The First Web Server](first_web_server.png) + +--- + +# HTTP Explained + +In its original, simplest version: + +* Open a TCP socket (standard port is 80) + +* Send an ASCII request for a resource (`GET mypage.html`) + +* Response comes back containing only the content of `mypage.html` + +* Close the TCP socket + +-- + +HTTP was originally designed to: + +* Send HTML (was later extended to send anything) + +* To facilitate interaction between a web browser and a web server (now also + used heavily for server-to-server communication) + +--- + +class: center inverse middle + +# HTTP Request/Response Components + +--- + +# HTTP Request + +* __Method/Verb__: What do you want to do (e.g., __GET__, __POST__) + +* __Resource__: What is the logical path of the resource you want + +* __HTTP Version__: What version of HTTP are you using? + +* __Headers__: Standard way to specify or request optional behavior + +* __Body__: Content that is being sent to the server (e.g., a file upload) + +--- + +# HTTP Response + +* __HTTP Version__: Indicates the HTTP version the server is "speaking" + +* __Status Code__: Indicates success, failure, or other possible [response + codes](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes) + +* __Headers__: Provides meta data about the response. + +* __Body__: The primary payload of the response (for a successful _GET_ + request, this contains the resource content) + +--- + +# HTTP Components Example + +![Components of HTTP request and response](http_components.png) + +--- + +class: center inverse middle + +# HTTP Methods/Verbs + +--- + +# GET + +* Request a copy of a _resource_ + +* The request should have no side-effects (i.e., doesn't change server state) + +* __GOOD__: `GET /fluffy_kitty.jpg` + +* __BAD__: `GET /users/sign_out` + +--- + +# POST + +* Sends data to the server + +* Generally used to create a _resource_ + +* Has side-effects (e.g., creates a resource) + +* Not idempotent (i.e., making the same request twice creates two + separate, but similar resources) + + * "Do you want to submit your form again?" + +--- + +# PUT + +* Sends data to the server + +* Often used to update an existing resource + +* Has side-effects + +* Should be idempotent (e.g., updating a resource twice should result in the + same effect to the resource) + +--- + +# DELETE + +* Destroys a resource + +* Has side-effects + +* Should be idempotent + +* __GOOD__: `DELETE /session/` (for log out) + +--- + +# HEAD + +* Exactly like GET but excludes the body in the response + +> When might you want to use HTTP HEAD? + +--- + +# HTTP Method/Verb Misuse + +Correct HTTP method/verb usage is not enforced, and is often misused. + +> What do you think the following is supposed to do? + +```http +GET /post/5?action=hide +``` + +-- + +> What other problem do you think can occur with the misuse of HTTP methods/verbs? + +--- + +# Other HTTP Methods/Verbs + +* CONNECT + + * Establish a connection through a proxy server + +* OPTIONS + + * See which methods/verbs are available for a resource + + * Used for [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) requests + +* TRACE + + * Used to reflect the HTTP request back + +--- + +# HTTP Resource + +Specifies a logical hierarchy to access a resource: + +* __GOOD__: `/gp/product/1565925092/` + +* __BAD__: `/index.jsp?page_id=4251` + +-- + +## Query String + +* The portion of the resource after a _question mark_ (`?`) + +* Used to assist in locating the resource + +* Values are assigned using the equal token (e.g., `sort=top`) + +* Multiple values can be concatenated via _ampersand_ (`&`) + +Example: + + + +--- + +# HTTP Version + +Version strings are often used in protocols to make it easy to evolve the +protocol. + +With HTTP different versions have different behavior: + +* (1991) HTTP 0.9 (retroactively versioned): Single line protocol with no + headers. Only __GET__ supported: `GET index.html` + +* (1996) HTTP 1.0: Added headers, and a version string + +* (1999) HTTP 1.1: Connection keep-alive by default, additional caching + mechanisms. __Primary HTTP version used today__ + +* (2015) HTTP 2.0: Binary framing, header compression, many other + optimizations. Discussed in more detail in a future lecture + +* (2022) HTTP 3.0: QUIC/UDP. Lower latency. Packet Loss. + Discussed in more detail in a future lecture. + +--- + +class: center inverse middle + +# HTTP Headers + +--- + +# HTTP Headers Overview + +Provides metadata for the request and response. + +HTTP Header keys are case _InSenSiTiVe_. + +> What HTTP headers do you know of? + +--- + +# HTTP Headers: Accept (request) + +Indicates the desired format of the requested resource. + +```http +Accept: text/html +``` + +I desire the resource in html format. + +```http +Accept: application/json +``` + +I desire the resource as a JSON document. + +```http +Accept: application/json,application/xml +``` + +I prefer a JSON document, but an XML document will do. + +--- + +# HTTP Headers: Content-Type (request/response) + +Indicates the format of the request or response body. + +```http +Content-Type: text/html +``` + +The body of this request/response is an HTML document. + +```http +Content-Type: application/json +``` + +The body of this request/response is a JSON document. + +Other common request content-types: + +* `application/x-www-form-urlencoded` (HTTP form) +* `multipart/form-data` (HTTP form with file upload) + +--- + +# HTTP Headers: Accept-* (request) + +## Accept-Encoding + +Indicates preferred encoding for the response body. + +```http +Accept-Encoding: bzip2,gzip +``` + +I prefer the data compressed via bzip2. If that cannot be done, please gzip the +response. + +## Accept-Language + +Indicates the preferred language for the resource + +```http +Accept-Language: es,en-US +``` + +I prefer Spanish, but will accept US-English. + +--- + +# HTTP Headers: Host (request) + +Indicates the DNS hostname associated with the desired resource. + +Required in an HTTP 1.1 request. + +> Why is the HOST header required? + +-- + +Compare the responses to the following: + +```bash +curl -I http://185.199.109.153 --header 'Host: cs291.com' +curl -I http://185.199.109.153 --header 'Host: twitter.github.io' +``` + +--- + +# HTTP Headers: User-Agent (request) + +Indicates information about the client (web browser, crawler, tool) to the web +server. + +```http +User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.99 Safari/537.36 +``` + +Can be used to serve different content to different clients. However, try to +avoid doing so. + +--- + +# HTTP Headers: Set-Cookie, Cookie + +## Set-Cookie (response) + +A response header informing the browser to use the provided cookies in +subsequent requests to the server. + +## Cookie (request) + +A request header containing the data previously set by the server via a +`Set-Cookie` header. + +-- + +> What kind of information might one put in a cookie? + +-- + +> What security concerns may exist with cookies? + +--- + +# Other HTTP Headers + +## Caching Related Headers + +* ETag +* Date +* Last-Modified +* Cache-Control +* Age + +## Security Related Headers + +* Content-Security-Policy +* Strict-Transport-Security +* X-Frame-Options + +`X-` prefixed headers are not part of the official specification and may later +become _standardized_. + +--- + +class: center inverse middle + +# HTTP Statuses + +--- + +# HTTP Statuses Overview + +The HTTP response status indicates the outcome of the request. Status codes +fall into one of five categories: + +* 1XX - Informational +* 2XX - Successful +* 3XX - Redirection +* 4XX - Client Error +* 5XX - Server Error + +Ref: [HTTP Status Code Definitions](https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html) + +--- + +# Common HTTP Statuses + +* __200 OK__: The requested resource is being returned. + +* __301 Moved Permanently__: The resource has been moved and the browser should + always use the new URL provided via the `Location: https://...` header. + +* __302 Found__: The resource can be found at another location via the + `Location` header. + +* __304 Not Modified__: When request includes a cache header (e.g., + `If-Modified-Since`) this status indicates the content hasn't changed saving + resources from being fetched, rendered, and sent. + +* __403 Forbidden__: The request is not authorized to access the resource. + +* __404 Not Found__: The resource does not exist. + +* __500 Internal Server Error__: Something unexpected happened on the server. + +* __503 Service Unavailable__: Temporary failure on the server-side possibly + with an upstream server. + +--- + +# HTTP Request Body + +HTTP PUT and POST requests typically have a body associated with them. HTML +_form_ elements usually result in a POST request with a `x-www-form-urlencoded` +type. + +Example: + +```bash +curl --trace-ascii - http://httpbin.org/post \ + --data 'username=bboe&comment=Hi There' +``` + +```http +POST /post HTTP/1.1 +Host: httpbin.org +User-Agent: curl/7.43.0 +Accept: */* +Content-Length: 30 +Content-Type: application/x-www-form-urlencoded + +username=bboe&comment=Hi There +``` + +--- + +# HTTP Response Body + +The body of a response usually contains the requested resource content. + +```http +HTTP/1.1 200 OK +Content-Type: text/html; charset=utf-8 +Content-Length: 9973 + + + +... + +``` + +--- + +# Try it! Direct Input Server + +## Listen for a TCP connection + +```bash +nc -l localhost -p 5000 +``` + +## Browse to: + +## Paste the following into your terminal + +```http +HTTP/1.1 200 OK +Content-Type: text/html; charset=utf-8 +Content-Length: 111 + + + +

HTTP is easy!

+ + +``` + +__Note__: Ensure the newline gets copied between the headers and the body. + +--- + +# HTTP Performance + +Prior to HTTP 1.1, one TCP connection was used for a single HTTP request. + +> What performance flaws exist in this design? + +--- + +# TCP Connection Delay + +Establishing a TCP connection requires 1 round-trip. + +![TCP round trip visualized](tcp_round_trip.png) + +Image Source: “High Performance Browser Networking,” by Ilya Grigorik + +--- + +# Slow Start and Congestion Avoidance + +The early phases of a TCP connection are bandwidth constrained. + +.center[![TCP congestion mechanisms](tcp_congestion.png)] + +Image Source: “High Performance Browser Networking,” by Ilya Grigorik + +--- + +# TCP Congestion Window Size (cwnd) + +It takes a fair amount of time to get up-to-speed. Making new connections per +HTTP request is not terribly efficient. + +.center[![TCP connection window size](tcp_cwnd.png)] + +Image Source: “High Performance Browser Networking,” by Ilya Grigorik + +--- + +# HTTP Keep-Alive + +HTTP 1.1 officially added support for the `Connection` header most commonly +used as: + +`Connection: keep-alive` + +In fact, with HTTP 1.1, the default is `keep-alive`. The alternative, and the +way to signal the end of the HTTP session is: + +`Connection: close` + +With a keep-alive HTTP session, the server waits some amount of time for +an additional request after processing the most recent request. + +--- + +# HTTP Keep-Alive Session + +.center[![HTTP Session with Two Requests](http_session.png)] + +Image Source: “High Performance Browser Networking,” by Ilya Grigorik + +--- + +# HTTP Pipelining + +With HTTP keep-alive, we can make multiple requests on a single TCP connection. Success! + +But, we're still waiting for the current response before we can issue the next +request. Why wait? + +--- + +# HTTP Pipelining Session + +.center[![HTTP Session with Two Requests](http_pipelining.png)] + +Image Source: “High Performance Browser Networking,” by Ilya Grigorik + +--- + +# Think About it + +> What sort of issues might occur with HTTP pipelining? + +--- + +# Pipelining Issues + +## Head of Line Blocking + +Head of line blocking means that a request that takes a long time is blocking +another request from occurring. + +-- + +## Extra work for the server + +Pipeling may require the server to buffer future responses while blocked on the +head of the line. These extra resources can exhaust the server. + +Furthermore, if an error occurs the server may end up doing the same _work_ +twice. + +-- + +## Adoption + +Many intermediaries (proxies, caches) simply do not support HTTP pipelining thus +making the feature less appealing. + +--- + +# More Speed + +A single web page may have tens of resources. In practice obtaining each +resource serially over the same TCP connection is too slow. + +> What can be done to get more speed? + +--- + +# Concurrent HTTP Sessions + +Most browsers will open up to __six__ concurrent TCP connections to the same +server. + +.center[![Concurrent HTTP Sessions](concurrent_http.png)] + +Image Source: “High Performance Browser Networking,” by Ilya Grigorik + +--- + +# Even more speed + +According to the HTTP Archive the average number of resources for websites they +crawled is `~100`. With up to six connections each HTTP session must fetch +approximately `16` resources. With head-of-line blocking this may still be too +slow. + +> What can we do? + +--- + +# Domain Sharding + +_Domain sharding_ is the process of separating resources to different +domains, e.g., `i.ytimg.com`, `s.ytimg.com`. + +The web browser will make up to `6` connections for each domain. + +Reduces page load time for some work-loads (test to see if it's right for you). + +--- + +# Hacks that work + +Concurrent TCP sessions and domain sharding are hacks to get more performance +out of an existing system (HTTP/1.1). + +Using these hacks makes application development and deployment more +complicated. + +## Other Performance Related Hacks + +* CSS/JS concatenation and minimization + +* Image spriting + +## The Future is Here + +In a future lecture we'll talk about how HTTP/2 obviates many of these hacks. + +--- + +# Chrome Network Table Revisited + +Does this table make sense now? + +.center[![Chrome Network Table](chrome_network_table.png)] diff --git a/slides/2023/02_http/success-kid-original-828x550.jpg b/slides/2023/02_http/success-kid-original-828x550.jpg new file mode 100644 index 0000000..0fb6754 Binary files /dev/null and b/slides/2023/02_http/success-kid-original-828x550.jpg differ diff --git a/slides/2023/02_http/tcp_congestion.png b/slides/2023/02_http/tcp_congestion.png new file mode 100644 index 0000000..22efd7e Binary files /dev/null and b/slides/2023/02_http/tcp_congestion.png differ diff --git a/slides/2023/02_http/tcp_cwnd.png b/slides/2023/02_http/tcp_cwnd.png new file mode 100644 index 0000000..b77cc6a Binary files /dev/null and b/slides/2023/02_http/tcp_cwnd.png differ diff --git a/slides/2023/02_http/tcp_round_trip.png b/slides/2023/02_http/tcp_round_trip.png new file mode 100644 index 0000000..4379ca1 Binary files /dev/null and b/slides/2023/02_http/tcp_round_trip.png differ