AIDAHO Tinkering Club:
Web App

Markus Mößler

April 15, 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.

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 container to ensure consistent development and deployment.
  • Structure:
    • A single container runs the Tornado application.
    • It connects to a separate PostgreSQL container for the database.
  • Docker Compose is typically used to orchestrate both services.

Visualization

graph TD
    subgraph Docker-Compose
        TornadoContainer["🌀 Tornado Container"]
        DBContainer["🐘 PostgreSQL Container"]
    end

    TornadoContainer -->|Connects via Port 5432| DBContainer
    User["🌍 User (Browser)"] -->|Port 8888| TornadoContainer

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.

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

  • Steps to develop and build a React app:
  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. 🧪 Testing:
    • Use testing frameworks like Jest and React Testing Library.
    • Run unit/integration tests.
  3. 📦 Build:
    • Run npm run build to create a production-optimized bundle (static HTML/CSS/JS in build/).
  4. 📦 Dockerize:
    • Use a Dockerfile to serve the build/ directory via a web server like Nginx.
  5. 🚀 Deployment:
    • Push the Docker image to a registry or deploy with tools like Docker Compose, Kubernetes, or Heroku.

Containerization

  • In a full-stack setup, we containerize both the React frontend and the Tornado backend.
  • Each service runs in its own container.
  • During development, React runs on a live-reload dev server.
  • Backend connects to a database container (e.g., PostgreSQL).
  • Services communicate via a shared Docker network.

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