AIDAHO Tinkering Club:
Web App

Markus Mößler

December 20, 2025

Overview

What is a Web Application?

  • A web application is an application software that runs on a web server and is accessed via a web browser.
  • Web application structure:
    • Frontend: Client-side interface (HTML, CSS, JavaScript, frameworks like React, Angular, or Vue.js).
    • Backend: Server-side logic (e.g., Python Tornado, Node.js, Django).
    • Database: Stores and retrieves data (e.g., PostgreSQL, MySQL, MongoDB).
  • Key Components:
    1. Client-Side: Handles UI and user interactions.
    2. Server-Side: Processes business logic and interacts with the database.
    3. Database: Persistent storage of information.

Selected/Common Approaches to Building Web Applications

  1. Monolithic Architecture
    • Single, unified codebase for frontend, backend, and database.
    • E.g., Flask (Python) + Jinja Templates + PostgreSQL.
  2. Frontend/Backend Separation
    • Frontend and backend are decoupled, communicating via APIs (e.g., REST).
    • E.g., React or Vue.js for frontend, Tornado or FastAPI (Python) for backend

Visualization

flowchart TD
    User["👤 User"] -->|Accesses| Browser["🌐 Web Browser"]
    Browser -->|Sends Request| Server["🖥️ Application Server"]
    Server -->|Processes Request| Backend["⚙️ Backend Services"]
    Backend -->|Queries| Database["💾 Database"]
    Backend -->|Calls APIs| ExternalAPI["🔗 External APIs"]
    Backend -->|Sends Response| Server
    Server -->|Sends Response| Browser
    Browser -->|Displays Data| User

    style User fill:#f9f,stroke:#333,stroke-width:2px
    style Browser fill:#bbf,stroke:#333,stroke-width:2px
    style Server fill:#afa,stroke:#333,stroke-width:2px
    style Backend fill:#faa,stroke:#333,stroke-width:2px
    style Database fill:#ff9,stroke:#333,stroke-width:2px
    style ExternalAPI fill:#bff,stroke:#333,stroke-width:2px

A Simple Tornado Wep App

Background

  • Wikipedia contributors (2024)

    • “Tornado is a scalable, non-blocking web server and web application framework written in Python.[2] It was developed for use by FriendFeed; the company was acquired by Facebook in 2009 and Tornado was open-sourced soon after.”
    • “Tornado is noted for its high performance. Its design enables handling a large number of concurrent connections (i.e., tries to solve the”C10k problem”).”

  • In principle, Tornado is a web server and a web framework, i.e,

    • it can be used to connect to backend services and to…
    • build user interfaces, i.e., the frontend

  • An example for such a “full-stack” web application is the Tornado blog demo on GitHub

Ressources

Visualization

graph TD
    subgraph Blog Service
        TornadoServer["Tornado Server"]
        Templates["HTML Templates (Jinja-like)"]
        StaticAssets["Static Assets (CSS/JS)"]
    end

    subgraph Database Service 
        PostgreSQL["PostgreSQL Database"]
    end

    User["User"] -->|HTTP Requests
Port 8888| TornadoServer
    TornadoServer -->|Renders| Templates
    TornadoServer -->|Serves| StaticAssets
    TornadoServer -->|Async Queries
Port 5432| PostgreSQL

A Simple React Frontend on top of a Tornado Backend

Background

  • Introduction:
    • React is a JavaScript library developed by Facebook for building fast and interactive user interfaces (UIs) for web and mobile applications.
    • It follows a component-based architecture, enabling developers to build reusable UI components.
  • React for Frontend Development:
    • Ideal for dynamic and interactive UIs, such as dashboards or real-time data visualizations.
    • Suitable for building Single Page Applications (SPAs), where content updates dynamically without full page reloads.
  • Integration with Backends:
    • Communicates with backends (e.g., Tornado) via APIs like REST or GraphQL.
    • Use libraries like Axios or Fetch for data fetching.

Ressources

  • There is a wealth of resources about React!
  • Selected interesting resources for learning/referencing React:
  • There are even more resources for projects, reusable components, etc.
  • Notes on syntax:
    • React is based on JavaScript, so the JavaScript syntax can be used, but it is cumbersome.
    • It is more common to use JSX (JavaScript XML) or TypeScript.

Visualization

graph TD
    index.html --> index.js
    index.js --> App.js
    App.js --> ComponentA.js
    App.js --> ComponentB.js
    ComponentA.js --> styles.css
    ComponentB.js --> api.js

    index.html["index.html
Entry point, mounts React app"]
    index.js["index.js
ReactDOM renders App.js"]
    App.js["App.js
Root Component"]
    ComponentA.js["ComponentA.js
A sub-component"]
    ComponentB.js["ComponentB.js
Another sub-component"]
    styles.css["styles.css
CSS for ComponentA"]
    api.js["api.js
Handles API calls"]

    subgraph "Public Folder"
        index.html
    end

    subgraph "Src Folder"
        index.js
        App.js
        ComponentA.js
        ComponentB.js
        styles.css
        api.js
    end

References

Dory, M., Parrish, A., & Berg, B. (2012). Introduction to tornado: Modern web applications with python. O’Reilly Media.
Wikipedia contributors. (2024). Tornado (web server) — Wikipedia, the free encyclopedia. Retrieved from https://en.wikipedia.org/wiki/Tornado_(web_server)