CIS1912 DevOps

Who are we?

David Cao

Edwin Mui

Ryan Tanenholz

  • Office hours will be listed on the website

Who are you?

Administrative Things

  • Grading
    • Grades posted on Canvas
    • 50% homeworks (4 assignments)
    • 35% final project
    • 15% labs
  • Class Materials at cis1912.org
  • GitHub classroom for assignments/labs
  • Slack for discussion
    • Invite link on Canvas
Please create a GitHub account if you do not have one already!

Grading Policies

  • Late Policy: 5 free late days, no questions asked. Can be used on assignments only. Each late day afterwards will be 25% off.
  • Labs: Binary scoring, lowest 2 dropped. Each lab will be due before next week's class (most will be done in class).
  • Collaboration: All assignments are meant to be done alone. However, feel free to collaborate on labs.
  • AI Tools: There are no restrictions on using AI tools to help with your assignments. However, keep in mind that over-reliance can and will hinder your learning.

What is DevOps?

What is DevOps?

  • Straight from Google's ✨ AI Overview ✨
    • DevOps is a cultural and professional movement in the software industry that emphasizes rapid, frequent, and reliable software delivery by combining development (Dev) and operations (Ops) teams.
  • Essentially, how do we build new features fast and safely?

A World Without DevOps

  • Traditionally, two separate roles: developer and operations
  • Developer writes code for feature
  • Developer asks Ops to deploy
  • Ops deploys code and deals with its reliability

Why does this suck?

A World Without DevOps

  • Ops person has no idea what the code they're deploying is
  • This new feature might require application specific knowledge, as well as take a few iterations to roll out
  • When something fails in production, the Ops team is notified not the Developer

A World With DevOps

  • Give Developers the tools they need to deploy & monitor changes
    • Automated testing and deployments (CI/CD)
    • Automatic rollbacks
    • Metrics and observability
  • DevOps is not a role, it's a philosophy
  • The difference between a good engineer and a great one is their knowledge of DevOps!

Course Goals

  • Teach you how systems are built and managed in the "real world"
    • We will use an agentic application (Jarvis) as a working example throughout the course
  • Learn the driving philsophies behind why we do things certain ways
  • Implement said philosphies as code and/or organizational structure
  • Teach you (a little bit) about backend paradigms
  • We will be primarily using Python and JS (next.js), but this is not the focus of the course

Who this course is for

  • Given the amount of background knowledge assumed, aimed at primarily Juniors and Seniors
  • If you are unfamiliar with backend-frontend, databases, HTTP/networking, this course will be very difficult
  • You should not be afraid of large codebases
  • You should and are expected to have the ability to learn primarily from documentation

Networking, Backend/Frontend Paradigms, Mono-Repos

Agenda

  • Overview of the internet
  • Backend/Frontend Paradigms
  • Mono-Repo Lab

What is the Internet?

The internet is a system of interconnected computer networks that uses standardized communication protocols (mainly TCP). Most web applications use a client-server architecture, but the internet also provides support for other things like peer-to-peer connections.

client server architecture

What is a server?

A server is a machine that listens for external requests and responds accordingly. In the context of the web:

  • Typically manages an underlying database
  • External requests follow the HTTP(S) protocol
  • The types of requests allowed follow an API, i.e. a specified set of actions

What is a client?

A client refers to whoever or whatever is initiating the web request. This could be:

  • Your computer!
  • The website currently loaded in your browser
  • Another server making requests

IP Addresses

  • IP = Internet Protocol
  • Identifies a machine using 4 octets (8 bits)
  • Can be dynamic or static
  • Special IPs
    • Loopback (referred to as localhost)
      • 127.0.0.0 - 127.255.255.255 (127.0.0.0/8)
    • Private (local only)
      • 10.0.0.0 - 10.255.255.255 (10.0.0.0/8)
      • 172.16.0.0 - 172.31.255.255 (172.16.0.0/12)
      • 192.168.0.0 - 192.168.255.255 (192.168.0.0/16)

How is Data Sent?

  • Transmission Control Protocol (TCP)
  • Connect to a machine using IP + port
  • Ensures exactly-once processing per message
  • Ports can be any 16-bit value, 0-65535
    • Why might we need multiple ports?
  • Other protocols:
    • User Datagram Protocol (UDP) has no error checking
    • Quick UDP Internet Connection (QUIC) is a newer protocol built on UDP that is meant to replace TCP in HTTP/3

How is Data Sent?

  • Data is packaged and sent in packets. Packet sizes are limited due to the limitations of the physical network.
  • Protocols such as Transmission Control Protocol (TCP) and User Datagram Protocol (UDP) determine how data is packaged, addressed, transmitted, and received.

alt text

Bird's Eye TCP

Consider a scenario where Alice wants to talk to Bob:

  1. [SYN] Alice to Bob - "I want to connect. My sequence starts at 100."
  2. [SYN-ACK] Bob to Alice - "Connection accepted. I got your 100, my sequence starts at 300."
  3. [ACK] Alice to Bob - "Got your 300. Connection established, let's communicate."

How does this ensure exactly-once processing per packet?

What is HTTP?

HTTP(S) stands for the HyperText Transfer Protocol (Secure), which is a protocol built on top of TCP (Transmission Control Protocol). HTTP uses port 80 and HTTPS uses port 443.

HTTP simply provides some framework around what types of messages should be sent assuming a Create-Read-Update-Delete (CRUD) model.

HTTP Methods

An HTTP request at the very least has two properties: a URL and a method.

The method provides some abstraction to the client to understand what their request should be doing, i.e. reading data or writing data.

Depending on the method, an HTTP request contains parameters or data. Parameters can be thought of as variables used in a function and data is typically more free-form, i.e. a JSON blob.

HTTP Methods

Method Description
GET Retrieves a resource from the server. Should not modify server state.
POST Submits data to be processed by the server, often creating a new resource.
PUT Updates an existing resource on the server with the provided data.
DELETE Removes the specified resource from the server.
HEAD Similar to GET but retrieves only the headers, not the body. Useful for checking resource metadata.
OPTIONS Requests information about the communication options available for the target resource.
PATCH Partially modifies an existing resource with the provided data.
TRACE Performs a message loop-back test along the path to the target resource.
CONNECT Establishes a tunnel to the server identified by the target resource.

API

An API is an Application Programming Interface. In short, it's an abstraction of how to connect to some service.

Web APIs are commonly exposed through HTTP methods that allow clients to do CRUD operations.

API

example photo API

Lifecycle of a Web Request

Lifecycle of a Web Request

What happens when you type in netflix.com into your browser?

  1. Client formulates HTTP(S) request and sends it to Internet Service Provider (ISP), e.g. Comcast/AT&T/Verizon.
  2. ISP does DNS resolution to determine IP of web address
  3. HTTP(S) request is sent to server
  4. Server does some work and returns a response
  5. Client parses response and displays to user

Lifecycle of a Web Request

lifecycle of web request

https://hackmd.io/@Web-Fundamentals-ML/r115J-Vpu

Frontend & Backend Paradigms

What is a Frontend/Backend?

A frontend is a term used for some GUI-like interface. Typically, these are meant for humans to use. Frontends can make requests to an external source that is typically a backend.

A backend is a term used for some data source, typically exposed through an API. This could be something like a raw SQL-database or a server that provides HTTP methods and queries a database behind the scenes.

Vanilla/Static Website

This is how our course website is made! The backend is a simple filesystem that exposes a directory to the internet. Think of this as an online folder. There is no explicit frontend besides pure HTML files. The client simply GETs the HTML files and they are rendered on the browser.

This is great for serving static content, but can't really do much beyond that. However, it makes it very easy and intuitive to develop new content since one can change the HTML files directly.

Standalone Frontend

A more advanced paradigm is developing a standalone frontend. The backend acts simply as an API that provides CRUD access to a database. The frontend is an entire application typically written in some native language, e.g. Javascript for browsers, Swift for iOS, Kotlin for Android.

The very first request typically delivers the frontend application code to the browser. The frontend then makes API requests on a user's behalf to render content nicely or provide intuitive GUIs for actions. The sky is the limit but requires much more work.

Backend-for-Frontend

This is similar to a standalone frontend, but sometimes it's worth it to create an intermediary backend-for-frontend (BFF). This can consolidate backend APIs together to provide a unified API and reduce backend load. A BFF can help decouple the dependency a frontend client has on the backend API as well.

Backend-Driven Frontend

An in-between paradigm can sometimes work well. Here, the backend renders HTML files in real time to deliver to the client. This way, the backend can dynamically change content based on parameters, e.g. user, location, etc. However, can get messy as you typically need to write generic-style HTML or use a templating language. Additionally, it takes extra effort to create a standalone API.

Example: Netflix could have a template for displaying a list of movies. They could use this template to render HTML for different webpages, e.g. horror movies, action movies, TV shows, etc.

Lab: Setup