Skip to main content

02 - Web Application Development

Fundamentals

Web Concepts

  • World Wide Web - An information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and accessible via the Internet
    • Hypertext - A text displayed on a computer display or other electronic devices with references (hyperlinks) to other text that the reader can immediately access
    • URI - A unique sequence of characters that identifies a logical or physical resource
    • URL - A standard that defines URLs, domains, IP addresses, the application/x-www-form-urlencoded format, and their API
  • Core Web Protocols & Languages
    • HTTP - An application protocol for distributed, collaborative, hypermedia information systems
      • HTTP cookie - A small piece of data that a server sends to a user's web browser
    • HTML - The World Wide Web's core markup language
    • CSS - A simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents
  • Real-time & Messaging Protocols
    • WebSockets - A technology that makes it possible to open a two-way interactive communication session between the user's browser and a server
    • WebRTC - A free and open-source project providing web browsers and mobile applications with real-time communication (RTC)
    • Server-sent events - A technology to enable servers to push data to web pages over HTTP or using dedicated server-push protocols
    • MQTT - A lightweight, publish-subscribe, machine to machine network protocol for message queue/message queuing service
    • AMQP - An open standard application layer protocol for message-oriented middleware
  • Data & Event Specifications
    • ActivityPub - A decentralized social networking protocol based on the ActivityStreams 2.0 data format
    • Bluesky
    • CloudEvents - A specification for describing event data in a common way
    • Fediverse
    • JSON Merge Patch - A JSON format that describes changes to be made to a target JSON document
    • OpenAPI spec - A standard, language-agnostic interface to HTTP APIs
    • API Tooling
      • Redocly CLI - An open-source command-line tool that helps you lint, bundle, and preview OpenAPI definitions
  • Performance
    • DNS Prefetching - A mechanism to resolve domain names before a user tries to follow a link

Browser Technologies & DOM

  • Browsers
    • Chrome - A freeware, cross-platform web browser developed by Google
    • Chromium - An open-source browser project that aims to build a safer, faster, and more stable way for all users to experience the web
    • Firefox - A free and open-source web browser developed by the Mozilla Foundation
    • w3m - A text-based web browser as well as a pager
    • EWW - The Emacs Web Wowser, a web browser for Emacs
  • Rendering Engines
    • WebKit - The framework for displaying rich, interactive web content in your apps
    • Gecko - The web browser engine developed by Mozilla
    • Blink - The rendering engine used by Chromium
    • Servo - A modern, high-performance browser engine designed for both application and embedded use
  • Scripting Engines
    • V8 - Google’s open source high-performance JavaScript and WebAssembly engine, written in C++
    • JavaScriptCore - The JavaScript engine that powers Safari and other apps on Apple platforms
  • Client Scripting APIs
    • XMLHttpRequest (XHR) - An API that provides scripted client functionality for transferring data between a client and a server
    • Fetch Standard - A living standard that defines requests, responses, and the process that binds them: fetching
  • Site Analyzers
    • Wappalyzer - A technology profiler that shows you what websites are built with

Design & Architecture

Human Interface Design

  • Usability - The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use
  • User interface design - A craft in which designers perform an important function in creating the user experience
  • Paper prototyping - A widely used method in the user-centered design process, a process that helps developers to create software that meets the user's expectations and needs
  • Website wireframe - A skeletal outline of a webpage
  • Accessibility - The design of products, devices, services, or environments for people with disabilities
    • Accessibility Object Model (AOM) - A JavaScript API to allow developers to modify (and eventually explore) the accessibility tree for an HTML page
    • WAI-ARIA - The Accessible Rich Internet Applications suite of web standards
  • Responsive web design - An approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes
  • Color space - A specific organization of colors
    • ICC profile - A set of data that characterizes a color input or output device, or a color space
      • sRGB - A standard RGB color space that HP and Microsoft created cooperatively in 1996 for use on monitors, printers, and the Internet
      • HSL and HSV - The two most common cylindrical-coordinate representations of points in an RGB color model
  • UI design tools
    • Figma Design - A powerful, collaborative design tool for teams
    • Locofi.ai - Design to code in a flash
    • Material Design - Google’s open-source design system for building beautiful, usable products
  • Human interface guidelines
    • Apple HIG - A set of recommendations to help you create apps that look and behave consistently across all Apple platforms
    • GNOME HIG - A guide for creating high-quality, consistent, and usable applications for the GNOME desktop
  • Psychological concerns
    • Seven stages of action - An idealized description of the cognitive and physical steps an individual takes to achieve a goal
      • 1: Forming the target.
      • 2: Forming the intention.
      • 3: Specifying an action.
      • 4: Executing the action.
      • 5: Perceiving the state of the world.
      • 6: Interpreting the state of the world.
      • 7: Evaluating the outcome.
    • Attention - The cognitive process of selectively concentrating on one aspect of the environment while ignoring other things
    • Metacognition - An awareness of one's thought processes and an understanding of the patterns behind them
    • Principle of least astonishment - A general principle that states that the result of performing some operation should be obvious, consistent, and predictable, based upon the name of the operation and other context
    • Affordance - A property of an object that indicates how it can be used
    • Stroop effect - A demonstration of interference in the reaction time of a task
    • Fitts's law - A predictive model of human movement primarily used in human–computer interaction and ergonomics
  • Visual Design
  • Core Web Vitals - The subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools
    • Largest Contentful Paint (LCP)
    • Interaction to Next Paint (INP)
    • Cumulative Layout Shift (CLS)

Architectural Styles & Patterns

  • Architecture Styles and Patterns
    • Three-tier architecture - A client–server architecture in which presentation, application processing, and data management functions are logically separated
    • Microservices architecture - An approach to developing a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms
    • Event-driven architecture
    • Resource-oriented architecture - A style of software architecture and programming paradigm for designing and developing software in the form of a network of resources
  • Web Application Architectures
    • Single-page application - A web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server
    • JAMstack - An architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability
  • API Architectures, Styles & Patterns
    • REST - A software architectural style that was created to guide the design and development of the architecture for the World Wide Web
    • SOAP (legacy) - A messaging protocol specification for exchanging structured information in the implementation of web services
    • GraphQL - A query language for APIs and a runtime for fulfilling those queries with your existing data
    • gRPC - A modern open source high performance Remote Procedure Call (RPC) framework that can run in any environment
    • json-rpc - A stateless, light-weight remote procedure call (RPC) protocol
    • Webhook - A method of augmenting or altering the behavior of a web page or web application with custom callbacks

Frontend Development

Frontend Frameworks

  • Core SPA Frameworks
    • Angular - A web framework that empowers developers to build fast, reliable applications
    • React - The library for web and native user interfaces
    • Vue.js - A JavaScript framework for building user interfaces
    • Ember.js - A framework for ambitious web developers
  • HTML-First Frameworks
    • htmx - A library that allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes
  • Syntax & Templating
    • JSX - A syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file
    • MDX - An authorable format that lets you seamlessly write JSX in your Markdown documents
  • State Management
    • Redux - A JS library for predictable and maintainable global state management
    • Recoil - A state management library for React
    • XState - A library for creating, interpreting, and executing finite state machines and statecharts
  • WASM Runtimes
    • PyScript - A free Open Source Software (OSS) that facilitates the creation, deployment, and sharing of Python applications

CSS Ecosystem

Frontend Build Tooling

  • Bundlers
    • Vite - A build tool that aims to provide a faster and leaner development experience for modern web projects
    • Parcel - The zero configuration build tool
    • webpack - A static module bundler for modern JavaScript applications
    • Rspack - A high performance JavaScript bundler written in Rust
  • Transpilers
    • babel - A JavaScript compiler
  • Minifiers
    • JSMin - A minification tool that removes comments and unnecessary whitespace from JavaScript files

UI Widgets & Interaction

  • Tailwind Component Libraries
    • daisyUI - The most popular component library for Tailwind CSS
  • React Component Libraries
    • Material UI - An open-source React component library that implements Google's Material Design
    • Chakra UI - A component system for building products with speed
  • Vue UI Libraries
    • Vuetify - A no design skills required Open Source UI Library with beautifully handcrafted Vue Components
  • Framework-agnostic Libraries
    • Data & Visuals
      • Tabulator - An easy to use, simple to code, fully featured, interactive JavaScript library for creating tables and data grids
      • Chart.js - A simple yet flexible JavaScript charting library for designers & developers
    • Interaction & Media
      • Swiper.js - The most modern mobile touch slider with hardware accelerated transitions and amazing native behavior
      • Hammer.js - A javascript library for multi-touch gestures

Backend Development

Backend Frameworks

  • JS/TS Backend Frameworks
    • Express.js - A minimal and flexible Node.js web application framework
    • Koa - A new web framework designed by the team behind Express
    • Nest.js - A progressive Node.js framework for building efficient, reliable and scalable server-side applications
    • Hono - A small, simple, and ultrafast web framework for the Edges
  • API Tools
    • tRPC - A tool that allows you to easily build & consume fully typesafe APIs without schemas or code generation
  • Go Backend Frameworks
    • Echo - A high performance, extensible, minimalist Go web framework
    • Gin Web Framework - A web framework written in Go
    • Gorilla web toolkit - A helpful toolkit that provides useful, composable packages for writing HTTP-based applications
    • Yokai - A simple, modular and observable Go framework for backend applications
  • Python Backend Frameworks & Servers
    • WSGI - The Web Server Gateway Interface
      • Gunicorn - A Python WSGI HTTP Server for UNIX
      • Flask - A lightweight WSGI web application framework
    • ASGI - A spiritual successor to WSGI, the long-standing Python standard for compatibility between web servers, frameworks, and applications
      • Uvicorn - An ASGI web server implementation for Python
      • Hypercorn - An ASGI web server based on the sans-io hyper, h11, h2, and wsproto libraries and inspired by Gunicorn
      • FastAPI - A modern, fast (high-performance), web framework for building APIs with Python based on standard Python type hints
      • SlowAPI - A small library to rate limit your ASGI applications
  • Ruby Backend Frameworks & Servers
    • Rack - A modular Ruby web server interface
      • Puma - A fact, concurrent web server for Ruby & Rack
      • Sinatra - A DSL for quickly creating web applications in Ruby with minimal effort
  • Perl Backend Frameworks (legacy)
    • Classic CGI
      • mod_cgi - A module for the execution of CGI scripts
      • CGI.pm - A module to handle Common Gateway Interface requests and responses
    • Fast CGI
      • mod_fcgid - A high performance alternative to mod_cgi or mod_cgid
      • FCGI.pm - A module for FastCGI applications
  • Java Backend Frameworks
    • Jakarta EE - A set of specifications that define Java APIs for enterprise software development
      • Apache Tomcat - An open-source web server and servlet container
    • Spring - A project that makes Java simple, modern, productive, reactive, and cloud-ready
      • Spring Boot - A tool that takes an opinionated view of the Spring platform and third-party libraries so you can get started with minimum fuss
  • .NET Backend Frameworks
    • ASP.NET - A free, cross-platform, open source framework for building web apps and services with .NET and C#

Full-stack Development

  • JS/TS Full-stack Frameworks
    • Next.js - A React framework for building full-stack web applications
    • Nuxt.js - A free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js
    • Astro - The web framework for content-driven website
  • Rust Full-Stack Frameworks
    • Leptos - A cutting-edge Rust framework for the modern web

Web Infrastructure

Web Server & Proxy

  • Web Servers & Reverse Proxy Servers
    • NGINX - An open source software for web serving, reverse proxying, caching, load balancing, media streaming, and more
    • Apache HTTP Server - A project to develop and maintain an open-source HTTP server for modern operating systems including UNIX and Windows
    • Caddy - A powerful, extensible platform to serve your sites, services, and apps, written in Go
    • HAProxy - A free, very fast and reliable reverse-proxy offering high availability, load balancing, and proxying for TCP and HTTP-based applications
    • nodejs http-server - A simple static HTTP server
  • GraphQL Servers
    • Apollo Server - An open-source, spec-compliant GraphQL server that's compatible with any GraphQL client
  • API Management
    • Kong API gateway - A lightweight, fast, and flexible cloud-native API gateway
    • Azure API Management - A hybrid, multicloud management platform for APIs across all environments
    • Amazon API Gateway - A fully managed service that makes it easy for developers to create, publish, maintain, monitor, and secure APIs at any scale
    • Google Cloud Apigee - The platform for developing and managing API services

CDN & Edge Computing

  • Concepts
    • Web cache - An information technology for the temporary storage (caching) of web documents, such as HTML pages and images, to reduce bandwidth usage, server load, and perceived lag
    • Content delivery network - A geographically distributed network of proxy servers and their data centers
      • Point of presence - An artificial demarcation point or interface point between communicating entities
  • Forward Proxy Servers
    • Squid - A caching proxy for the Web supporting HTTP, HTTPS, FTP, and more
  • CDN Providers
    • Cloudflare - A global network designed to make everything you connect to the Internet secure, private, fast, and reliable
    • Amazon CloudFront - A content delivery network (CDN) service built for high performance, security, and developer convenience
      • Lambda@Edge - A feature of Amazon CloudFront that lets you run code closer to users of your application
    • Google Cloud CDN - A content delivery network (CDN) that accelerates delivery of your web and video content
    • Azure Front Door - A modern cloud content delivery network (CDN) that provides a secure and scalable entry point for fast delivery of your global web applications and content

Development & Testing Tools

Web/HTTP Clients

  • CLIs
    • cURL - A command line tool and library for transferring data with URLs
    • Wget - A free software package for retrieving files using HTTP, HTTPS, FTP and FTPS
    • curlie - The power of curl, the ease of use of httpie
    • hurl - A command line tool that runs HTTP requests defined in a simple plain text format
    • httpie cli - A simple yet powerful command-line HTTP and API testing client for the API era
    • wuzz - An interactive cli tool for HTTP inspection
    • httptap - View the HTTP and HTTPS requests made by any linux program
  • Libraries
    • Python Requests - An elegant and simple HTTP library for Python, built for human beings
    • JS Axios - A promise-based HTTP Client for node.js and the browser
    • Go Resty - A simple HTTP and REST client library for Go
    • Go FastHTTP - A fast HTTP package for Go
    • Surf - An advanced Go HTTP client with Chrome/Firefox browser impersonation, HTTP/3 with QUIC fingerprinting, JA3/JA4 TLS emulation, and anti-bot bypass
    • Ruby Net - A collection of classes that implement client-side internet protocols
    • httpx - An HTTP client library for the Ruby programming language
    • Rust reqwest - An ergonomic, async HTTP client
  • GraphQL Libraries
    • URQL - The highly customizable and versatile GraphQL client for React, Svelte, Vue, or plain JavaScript
  • API Testing Platforms
    • Bruno - A Git-integrated, fully offline, and open-source API client
    • Postman/Newman - An API platform for building and using APIs
  • Classic Web Automation
    • Mechanize - A module that helps you automate interaction with a website
    • Mechanize (Ruby) - A ruby library that makes automated web interaction easy

Web Debugging Tools

  • Web Debugging
    • Chrome DevTools - A set of web developer tools built directly into the Google Chrome browser
    • Fiddler - A free web debugging proxy for any browser, system or platform

Web Test Automation Frameworks

  • Browser Automation & Testing
    • Puppeteer - A Node.js library which provides a high-level API to control Chrome/Chromium over the DevTools Protocol
    • Playwright - A framework for Web Testing and Automation
    • Playwright for Go - A Go library to automate Chromium, Firefox and WebKit with a single API
    • WebDriver - A remote control interface that enables introspection and control of user agents
      • Selenium WebDriver - A tool that drives a browser natively, as a user would, either locally or on a remote machine
      • WebDriver BiDi - The BiDirectional WebDriver Protocol, a mechanism for remote control of user agents
    • Selenium IDE - An open source record and playback test automation for the web
    • Karma - A test runner that fits all our needs
    • Dependencies
      • Chrome for Testing - A new flavor of Chrome that specifically targets web app testing and automation use cases
  • Web Scraping
    • Crawlee - A web scraping and browser automation library
    • BeautifulSoup - A Python library designed for quick turnaround projects like screen-scraping
    • Scrapy - An open source and collaborative framework for extracting the data you need from websites
    • Colly - A Golang framework for building web scrapers
    • Katana - A next-generation crawling and spidering framework

Specialized Topics

Document Site Generation

  • Static Site Generators
    • Docusaurus - A static-site generator. It builds a single-page application with fast client-side navigation, leveraging the full power of React to make your site interactive
    • VuePress - A Vue-powered Static Site Generator
    • Hugo - The world's fastest framework for building websites
      • Docsy - A Hugo theme for technical documentation sites, providing easy site navigation, structure, and more
    • Sphinx - A tool that makes it easy to create intelligent and beautiful documentation
    • MkDocs - A fast, simple and downright gorgeous static site generator that's geared towards building project documentation
    • Nanoc - A static-site generator, fit for building anything from a small personal blog to a large corporate website
  • Wiki Systems
    • Wiki software - A collaborative software that runs a wiki, which allows users to create and collaboratively edit pages or entries via a web browser
    • MediaWiki - A free and open-source wiki software
    • Ibis - A federated encyclopedia which uses the ActivityPub protocol, just like Mastodon or Lemmy
  • Content Management Tools
    • Content management system - A computer software used to manage the creation and modification of digital content
    • Nextcloud - The industry-leading, fully open-source, on-premise content collaboration platform
    • WordPress - A free and open-source content management system written in hypertext preprocessor language and paired with a MySQL or MariaDB database with supported HTTPS
  • Static Site & JAMstack Hosting
    • GitLab Pages - A feature that allows you to publish static websites directly from a repository in GitLab
    • Cloudflare Pages - A JAMstack platform for frontend developers to collaborate and deploy websites

Data/AI Platforms & Frameworks

  • Platforms
    • OpenWebUI - An extensible, feature-rich, and user-friendly self-hosted AI platform designed to operate entirely offline
  • Frameworks
    • Streamlit - A faster way to build and share data apps
    • Chainlit - An open-source Python package to build production ready Conversational AI