AIDAHO Tinkering Club:
Web App

Markus Mößler

April 30, 2025

Overview

What is a Web Application?

  • “A web application (or web app) is application software that is created with web technologies and runs via a web browser.” (Wikipedia contributors, 2025)
  • Web application structure:
    • Frontend: Client-side interface (HTML, CSS, JavaScript, and/or JavaScript libraries like React, Angular, or Vue.js, see also)
    • Backend: Server-side logic (e.g., Python Tornado, Node.js with Express, 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.

Two Approaches for Building Web Applications

  1. Monolithic Architecture
    • Single, unified codebase for frontend, backend, and database.
    • E.g., Flask (Python) with Jinja templates and PostgreSQL.
    • 🙂: Simplicity, easy deployment for small projects.
    • 😐: Harder to scale; maintenance can become complex as the project grows.
  2. Frontend/Backend Separation
    • Frontend and backend are decoupled and communicate via APIs (e.g., REST or GraphQL).
    • E.g., React or Vue.js for frontend, Tornado or FastAPI (Python) for backend.
    • 🙂: Scalability, flexible tech stack, improved performance.
      • 👉🏼 Suits well with containerization.
    • 😐: Requires API design and coordination.

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 Brief Introduction to Docker

  • Docker is a platform for developing, shipping, and running applications inside lightweight, portable containers.
  • A container is a standardized unit that packages an application along with its dependencies, environment variables, and configuration.
  • Benefits:
    • Consistency: “It runs on my machine” actually works on every machine.
    • Isolation: Prevents conflicts between different environments or services.
    • Portability: Containers can be moved across systems (e.g., from development to production) without changes.
  • Key Concepts:
    • Image: A blueprint of the container (think: frozen snapshot of the app + config).
    • Container: A running instance of an image.
    • Dockerfile: Script to define how to build the image.
    • Docker Compose: Tool to define and run multi-container apps.
  • 👉🏼 Docker Get Started

A Simple Tornado Wep App

Background

  • What is it? “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.” (Wikipedia contributors, 2024)
  • What can it do? “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”).” (Wikipedia contributors, 2024)
  • In principle, Tornado is a web server and a web framework,
  • Resources:

Containerization

  • The Tornado Blog Demo can be packaged into a Docker containers to ensure consistent development and deployment.
  • Structure:
    • One container runs the Tornado application.
    • Another container runs the PostgreSQL database.
  • Docker Compose is used to orchestrate both services.
  • See also the tornado GitHub repository
postgres:
  image: postgres:10.3
  environment:
    POSTGRES_USER: blog
    POSTGRES_PASSWORD: blog
    POSTGRES_DB: blog
  ports:
    - "3306"
blog:
  build: .
  links:
    - postgres
  ports:
    - "8888:8888"
  command: --db_host=postgres
.
├── documentation
├── README.md
└── tornado-backend
    ├── blog.py
    ├── docker-compose.yml
    ├── Dockerfile
    ├── README.md
    ├── requirements.txt
    ├── schema.sql
    ├── static
       └── blog.css
    └── templates
        ├── archive.html
        ├── base.html
        ├── compose.html
        ├── create_author.html
        ├── entry.html
        ├── feed.xml
        ├── home.html
        ├── login.html
        └── modules
            └── entry.html

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 3306| 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.

Resources

  • 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.

React App Development 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

Development and Deployment

  1. Development:
    • Set up the project using tools like create-react-app or Vite.
    • Write components using JSX or TypeScript.
    • Test locally with npm start (serves the app on localhost:3000).
  2. Build:
    • Run npm run build to create a production-optimized bundle (static HTML/CSS/JS in build/).
  3. Deployment
    • Serve the production-optimized bunlde e.g. via nginx in
      • /data/www
      • /usr/share/nginx/html

Development with create-react-app

Create React App (CRA):

  • Tool provided by the React team to quickly scaffold a new React project.
  • Includes pre-configured Webpack, Babel, ESLint, and testing setup.
  • Use: npx create-react-app my-app
    • 🙂 Good for beginners, stable, batteries-included.
    • 😐 Slow dev server and build times.
    • 😐 Lacks support for modern tooling (e.g., Vite, ES modules, SSR).

More Modern Alternatives:

  • Vite (recommended)
    • Great DX (developer experience).
    • React template: npm create vite@latest my-app – –template react
  • Next.js
    • Full-stack React framework.
    • Best for production apps with routing, SEO, etc.

Containerization

Development

  • Each component runs in its own Docker container:
    • React frontend with live-reload dev server
    • Tornado backend (Python)
    • PostgreSQL database
  • All services communicate over a shared Docker network
  • The backend connects directly to the database container
  • Hot-reloading enables fast development and testing

Deployment

  • React app is built into static files and served as static files
  • Containers:
    • Tornado backend
    • PostgreSQL database
    • (Optional) Add a reverse proxy:
      • Use Nginx to route requests between users and backend services
      • Improves performance, SSL termination, and routing flexibility

Visualization

graph TD
    subgraph Docker-Compose
        ReactDev["⚛️ React Dev Server (Port 3000)"]
        TornadoDev["🌀 Tornado Backend (Port 8888)"]
        PostgreSQL["🐘 PostgreSQL DB (Port 5432)"]
    end

    User["👤 Developer"] -->|Opens Browser| ReactDev
    ReactDev -->|API calls| TornadoDev
    TornadoDev -->|Queries| PostgreSQL

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)
Wikipedia contributors. (2025). Web application — Wikipedia, the free encyclopedia. Retrieved from https://en.wikipedia.org/wiki/Web_application