Web Apps & Servers - robbiehume/CS-Notes GitHub Wiki

Links

Misc.

Common flow:

  • Client --> ELB/ALB --> EC2 --> nginx --> application server --> backend framework

Web Servers

  • A web server is essentially just a piece of software on a dedicated computer server that serves web content
    • While it helps to have dedicated hardware for it, it can run on any computer
  • To serve web content, a web server listens on a port for a request sent via a transport protocol and returns a response with the requested resource
  • A web server can "listen" on many different different ports, but most commonly 80 (HTTP) and 443 (HTTPS)
  • A response can include resources such as HTML, JSON, JS, images, etc.

Web Server Static vs Dynamic Routing

  • Static Routing: web server serves actual file out of a folder
  • Dynamic Routing: serve the content dynamically from a database depending on the user or other different data
    • Does this by sending all requests to a single file that serves as an entry point for the web app which will dynamically return a response based on certain parameters

Application Servers

  • Purpose: hosts and runs applications, executing business logic and generating dynamic content
  • Functionality: processes requests, interacts with databases, and manages application-specific tasks
  • Role: acts as middleware between the webserver and backend programs
  • Examples: Apache Tomcat, JBoss, Gunicorn, Waitress

Websites / Web Apps

  • Static website: the resources it retrieves don't change
    • A static website is like ordering takeout, but modern web apps are like dining in person at a sit-down restaurant which comes with a lot more complexity
  • Dynamic website: resources and webpage can adapt depending on different factors (date, user, location, etc.)
    • This is done with backend logic and/or front end API calls to the backend

Approaches (SSG, SSR, SPA)

Feature SSG (Static Site Generation) SSR (Server-Side Rendering) SPA (Single Page Application)
Rendering Time Build time (static) Server-side at request time (dynamic) Client-side at runtime (dynamic)
Initial Load Speed Fast (served as static files) Moderate (server-rendered HTML) Can be slow due to heavy JS
SEO Excellent Excellent Limited, requires additional work
Interactivity Low to moderate (depends on client-side JS) High High
Content Freshness Stale until the next build Real-time Real-time
Use Cases Blogs, documentation sites, static pages E-commerce, content-heavy sites needing freq. updates Apps requiring dynamic UIs
Benefits Fast, SEO, cost-effective Dynamic content, SEO, faster initial load (on front end) High interactivity, reduced server load
Trade-offs Limited interactivity, content not real-time Higher server load, slower navigation SEO challenges, slow initial load
  • For SPA, you can improve initial load time using techniques such as code splitting, lazy loading, and implementing SSR for the first page load
    • Perplexity thread: link

Web app / web server flow

  • Client (browser) will send an HTTP request to the web server, requesting a web page or some other resource
  • The server will return the necessary resource
    • There may also be an application server that holds servlets that the web server can retrieve to handle a request by the client

API vs Web Services vs Microservices

  • Link
  • Web services:
    • Web services are a set of technologies and rules that enable two or more components on the web to interoperate and talk to each other
    • All web services are APIs, but only some APIs are web services
  • Microservices:
    • Microservices are architectural styles used in modern web apps that require more fragmented functionality
    • Each service is a modular, unique process that can be deployed independently

Sessions and cookies

  • Web sessions and cookies
  • Stack overflow comparison
  • Web session: a series of contiguous actions by a visitor on an individual website within a given time frame
    • This could include your search engine searches, filling out a form to receive content, scrolling on a website page, adding items to a shopping cart, researching airfare, or which pages you viewed on a single website
    • Any interaction that you have with a single website is recorded as a web session to that website property
    • To track sessions, a web session ID is stored in a visitor's browser. This session ID is passed along with any HTTP requests the visitor makes while on the site (e.g., clicking a link)
    • The code that initializes a session also includes an expiration, so a single session never lasts beyond a certain duration, at least as far as the web property is concerned. Depending on the site, a developer may make it as short as 5 minutes or as long as 1,440 minutes (an entire day)
  • Cookie: a small piece of data from a website that is stored on a visitor's browser to help the website track the visitor's activity on the website
    • Sessions and cookies are sometimes conflated. While they are closely related, they are not the same thing
    • A cookie identifies, often anonymously, a specific visitor or a specific computer
    • Cookies can be used for authentication, storing site preferences, saving shopping carts, and server session identification
  • Use of Sessions and Cookies:
    • By knowing who is visiting a site and what they've done before, web developers can customize pages to create a personalized web experience
    • For example, a cookie may store information such as your name and preferences that it gathered when you filled out a form, then use that information to populate pages you visit throughout one or multiple web sessions
    • A web session ID is unique to a specific visit, while a cookie is unique to a specific visitor and thus (developers hope) remains the same through multiple web sessions
      • By mapping a single cookie ID to multiple session IDs, developers and analysts can get a clearer picture of how visitors interact with their web application
    • Use case examples:
      • To avoid storing massive amounts of information in-browser, developers use session IDs to store information server-side while enabling user privacy. Every time a user takes an action or makes a request on a web application, the application sends the session ID and cookie ID back to the server, along with a description of the action itself
      • Once a web developer accrues enough information on how users traverse their site, they can start to create very personalized, engaging experiences
      • Web developers often cache web session information using fast, scalable in-memory processing technologies to ensure that their web sites deliver a very responsive personalized experience for many visitors at the same time