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
    • Fediverse - An ensemble of interconnected servers that are used for web publishing and file hosting, but which can communicate with each other
    • Bluesky - A microblogging social media service and a public benefit corporation based in the United States
    • CloudEvents - A specification for describing event data in a common way
    • 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
    • TypeSpec - A minimal language that helps developers describe API shapes in a familiar way
    • 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
  • Web Application Types
    • Progressive web app - A type of application software delivered through the web, built using common web technologies including HTML, CSS, JavaScript, and WebAssembly

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 (JavaScript engine) - 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
    • Canvas API - The means for drawing graphics via JavaScript and the HTML <canvas> element
    • WebGL API - A JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins
  • Site Analyzers
    • Wappalyzer - A technology profiler that shows you what websites are built with

Web Architectural Styles & Patterns

  • 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

UI Frameworks & Core Libraries

  • Core SPA Frameworks
    • React - The library for web and native user interfaces
      • Core Concepts
        • Component - A fundamental building block used to create user interfaces
        • Props - A mechanism for passing data from a parent component to a child component
        • Children - A special prop that allows components to be composed
        • Key Props - A special string attribute you need to include when creating lists of elements
        • Rendering - The process of React asking your components to describe what they want to look like
        • Event Handler - A function that is executed in response to an event
        • State - A JavaScript object that stores a component's dynamic data
        • Controlled Component - A component where React state controls the value of an input element
        • Hooks - A set of functions that let you "hook into" React state and lifecycle features from function components
        • Strict Mode - A tool for highlighting potential problems in an application
        • Side-effect - A term that refers to any operation that affects something outside of the function being executed
        • Refs - A feature that provides a way to access DOM nodes or React elements created in the render method
        • Context - A way to pass data through the component tree without having to pass props down manually at every level
        • Portals - A feature that provides a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component
        • Suspense - A component that lets you specify a loading indicator for a part of the component tree
        • Error Boundary - A React component that catches JavaScript errors anywhere in their child component tree
    • Preact - A fast 3kB alternative to React with the same modern API
    • Vue.js - A JavaScript framework for building user interfaces
    • Angular - A web framework that empowers developers to build fast, reliable applications
    • Svelte - A UI framework that uses a compiler to let you write breathtakingly concise components that do minimal work in the browser, using languages you already know — HTML, CSS and JavaScript
    • 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
    • htm - A JSX alternative using standard tagged templates, with no transpiler necessary
  • Framework-agnostic Core Libraries
    • TanStack - A collection of high-quality, framework-agnostic open-source libraries for web development
      • TanStack Query - A powerful asynchronous state management for TS/JS, React, Solid, Vue, Svelte and Angular
      • TanStack Router - A powerful, type-safe, and framework-agnostic router for building modern web applications
      • TanStack Table - A headless UI for building powerful tables & datagrids for TS/JS, React, Vue, Solid and Svelte
      • TanStack Form - A type-safe and framework-agnostic form state management for React, Vue, Solid, and Svelte
      • TanStack Virtual - A headless UI for virtualizing large lists and grids in React, Vue, Svelte, Solid and JS

State, Routing & Logic

  • State Management
    • Redux - A JS library for predictable and maintainable global state management
    • Zustand - A small, fast, and scalable barebones state-management solution using simplified flux principles
    • Recoil - A state management library for React
    • XState - A library for creating, interpreting, and executing finite state machines and statecharts
  • Routing
    • React Router - A user-obsessed, standards-focused, multi-strategy router you can deploy anywhere
  • 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
  • WASM Runtimes
    • PyScript - A free Open Source Software (OSS) that facilitates the creation, deployment, and sharing of Python applications

Styling & UI Components

  • CSS Ecosystem
    • Frameworks and UI Kits
      • Bootstrap - The world’s most popular front-end open source toolkit
      • Tailwind CSS - A utility-first CSS framework packed with classes
      • Oat - An ultra-lightweight, semantic, zero-dependency HTML UI component library that provides minimal, standards-based CSS and JS
    • Tailwind Component Libraries
      • daisyUI - The most popular component library for Tailwind CSS
    • CSS-in-JS
      • Emotion - A library designed for writing css styles with JavaScript
      • Linaria - A zero-runtime CSS in JS library
    • Preprocessors
    • Transforms
  • UI Component Libraries
    • templUI - A growing collection of beautifully designed UI components for Go and templ
    • Material UI - An open-source React component library that implements Google's Material Design
    • Chakra UI - A component system for building products with speed
    • Vuetify - A no design skills required Open Source UI Library with beautifully handcrafted Vue Components
  • Specialized UI Widgets
    • Rich Text Editors
      • Tiptap - The headless and open source editor framework designed for web 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

Build & Development Tooling

  • Development Environments
    • Storybook - A frontend workshop for building UI components and pages in isolation
  • 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
    • Rsbuild - The Rspack-based web build tool
  • Transpilers
    • babel - A JavaScript compiler
  • Minifiers
    • JSMin - A minification tool that removes comments and unnecessary whitespace from JavaScript files
  • Linters & Formatters
    • Biome - A fast formatter and linter for JavaScript, TypeScript, JSX, TSX, JSON, HTML, CSS and GraphQL that provides a cohesive toolchain for web projects
    • Knip - A tool that finds and fixes unused dependencies, exports and files in JavaScript and TypeScript projects

Backend Development

Backend Frameworks

  • JS/TS Backend Frameworks
    • Fastify - A fast and low-overhead web framework for Node.js, designed for optimal performance and developer experience
    • 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
    • Fiber - An Express inspired web framework built on top of Fasthttp, the fastest HTTP engine for Go, designed to ease development with performance in mind
    • 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 - A lightning-fast ASGI server implementation for Python, using uvloop and httptools for high performance
      • Hypercorn - An ASGI and WSGI web server based on the sans-io hyper, h11, h2, and wsproto libraries with support for HTTP/1, HTTP/2, and HTTP/3
      • 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
    • Ruby on Rails - A web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern
    • Rack - A modular Ruby web server interface
      • Puma - A fact, concurrent web server for Ruby & Rack
      • Falcon - A multi-process, multi-fiber rack-compatible HTTP server built on top of async, async-container and async-http
      • Sinatra - A DSL for quickly creating web applications in Ruby with minimal effort
    • Sidekiq - A simple, efficient background processing tool for Ruby
  • 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#
  • Elixir Backend Frameworks
    • Phoenix - A web framework for building rich, interactive web applications quickly with less code and fewer moving parts, used to craft APIs, HTML5 apps, and more at scale

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
    • Fresh - A next generation web framework, built for speed, reliability, and simplicity
  • 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
    • Unkey - An open-source API management platform designed to help developers secure, manage, and scale their APIs
    • 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
    • Gravitee - A unified API visibility and governance platform that provides a single pane of glass for managing, securing, and governing APIs across any infrastructure

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
      • Cloudflare Workers - A serverless execution environment that allows you to create entirely new applications or augment existing ones without configuring or maintaining infrastructure
      • Cloudflare Workers Bindings - A mechanism that allows your Worker to interact with resources on the Cloudflare Developer Platform, providing better performance and fewer restrictions than REST APIs for accessing resources from Workers
    • 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

Blockchain & Decentralized Web

  • Non-fungible token - A unique digital identifier that is recorded on a blockchain and is used to certify ownership and authenticity
  • Decentralized autonomous organization - A member-owned community without centralized leadership managed by decentralized computer programs with voting and finances handled through a blockchain

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
    • Typhoeus - A library that wraps libcurl in order to make fast and reliable requests
    • Ruby Net - A collection of classes that implement client-side internet protocols
    • httpx - An HTTP client library for the Ruby programming language
    • wreq-ruby - An easy and powerful Ruby HTTP client with advanced browser fingerprinting that accurately emulates various browsers with precise TLS/HTTP2 signatures
    • 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 reliable end-to-end testing for modern web apps with a single API for Chromium, Firefox, and WebKit
      • Playwright for Go - A Go library to automate Chromium, Firefox and WebKit with a single API
    • Cypress - An open-source, JavaScript-based testing framework that enables developers to write, run, and debug end-to-end and component tests directly in the browser for modern web applications
    • 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
    • Chrome DevTools Protocol (CDP) - A low-level API that allows external tools to instrument, inspect, debug, and profile Chromium-based browsers
    • 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
  • Accessibility Testing
    • axe-core - An accessibility testing engine for websites and other HTML-based user interfaces
  • AI-powered Web Automation
    • browser-use - An open-source Python library that allows AI agents to interact with web browsers using natural language
  • 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

Document Site Generation

Static Site Generators

  • 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
    • mdBook - A utility to create modern online books from Markdown files
    • 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
    • Jekyll - A simple, blog-aware, static site generator perfect for personal, project, or organization sites
    • Eleventy - A simpler static site generator written in JavaScript
    • 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
    • gitmal - A static page generator designed for Git repositories
  • 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

Headless CMS

  • Cloud-native & API-first CMS
    • Contentful - A headless content management system that provides a content-first approach to building digital products
    • Strapi - The leading open-source headless CMS
    • Sanity - A platform for structured content that lets you build better digital experiences