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: Mono-Repos & BFF