updated presentation slides

  <meta charset="utf-8">

  <meta name="generator" content="pandoc">

  <meta name="author" content="Markus Mößler">

  <meta name="dcterms.date" content="2025-04-15">

  <meta name="dcterms.date" content="2025-04-30">

  <title>AIDAHO Tinkering Club: Web App</title>

  <meta name="apple-mobile-web-app-capable" content="yes">

  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    }

    .display.math{display: block; text-align: center; margin: 0.5rem auto;}

    /* CSS for syntax highlighting */

    html { -webkit-text-size-adjust: 100%; }

    pre > code.sourceCode { white-space: pre; position: relative; }

    pre > code.sourceCode > span { line-height: 1.25; }

    pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }

    pre > code.sourceCode > span:empty { height: 1.2em; }

    .sourceCode { overflow: visible; }

    code.sourceCode > span { color: inherit; text-decoration: inherit; }

    div.csl-bib-body { }

    div.csl-entry {

      clear: both;

      margin-bottom: 0em;

    }

    .hanging-indent div.csl-entry {

      margin-left:2em;

<section id="title-slide">

  <h1 class="title">AIDAHO Tinkering Club:<br>Web App</h1>

  <p class="author">Markus Mößler</p>

  <p class="date">April 15, 2025</p>

  <p class="date">April 30, 2025</p>

</section>

<section>

backend.</li>

<li>🙂: Scalability, flexible tech stack, improved performance.

<ul>

<li>👉 Suits well with containerization.</li>

<li>👉🏼 Suits well with containerization.</li>

</ul></li>

<li>😐: Requires API design and coordination.</li>

</ul></li>

    style ExternalAPI fill:#bff,stroke:#333,stroke-width:2px

</pre>

</section>

<section id="a-brief-introduction-to-docker" class="slide level2">

<h2>A Brief Introduction to Docker</h2>

<section id="a-brief-introduction-to-docker"

class="slide level2 small-header">

<h2 class="small-header">A Brief Introduction to Docker</h2>

<div style="font-size: 20pt">

<ul>

<li><strong>Docker</strong> is a platform for developing, shipping, and

<li><strong>Docker Compose</strong>: Tool to define and run

multi-container apps.</li>

</ul></li>

</ul>

</div>

</section>

<section class="slide level2">

<div style="font-size: 20pt">

<ul>

<li>Get Started

<ul>

<li><a href="https://docs.docker.com/get-started/introduction/">Docker

Introduction</a></li>

<li><a

href="https://docs.docker.com/get-started/docker-concepts/the-basics/what-is-a-container/">Docker

Concepts</a></li>

<li><a href="https://docs.docker.com/get-started/workshop/">Docker

Workshop</a></li>

</ul></li>

<li>👉🏼 <a href="https://docs.docker.com/get-started">Docker Get

Started</a></li>

</ul>

</div>

</section></section>

<ul>

<li>it can be used to connect to backend services and to…</li>

<li>render HTML templates, enabling basic UI rendering</li>

<li>👉 <a

<li>👉🏼 <a

href="https://github.com/tornadoweb/tornado/blob/master/demos/blog/blog.py">See:

Tornado blog demo on GitHub</a></li>

</ul></li>

(2012)</span></li>

</ul></li>

<li><a href="https://github.com/tornadoweb/tornado">See also the tornado

GitHub</a></li>

GitHub repository</a></li>

</ul></li>

</ul>

</div>

<div style="font-size: 20pt">

<ul>

<li>The <strong>Tornado Blog Demo</strong> can be packaged into a Docker

container to ensure consistent development and deployment.</li>

containers to ensure consistent development and deployment.</li>

<li>Structure:

<ul>

<li>A single container runs the Tornado application.</li>

<li>It connects to a separate PostgreSQL container for the

database.</li>

<li>One container runs the Tornado application.</li>

<li>Another container runs the PostgreSQL database.</li>

</ul></li>

<li>Docker Compose is typically used to orchestrate both services.</li>

<li>Docker Compose is used to orchestrate both services.</li>

<li><a

href="https://github.com/tornadoweb/tornado/blob/master/demos/blog/docker-compose.yml">See

also the tornado GitHub repository</a></li>

</ul>

<!-- ```yml

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

```

```bash

.

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

``` -->

<div style="display: flex; gap: 2em; font-size: 16pt">

<div style="flex: 1">

<div class="sourceCode" id="cb1"><pre

<section id="references" class="title-slide slide level1">

<h1>References</h1>

<div id="refs" class="references csl-bib-body hanging-indent"

data-line-spacing="2" role="list">

data-entry-spacing="0" data-line-spacing="2" role="list">

<div id="ref-Dory2012Introduction" class="csl-entry" role="listitem">

Dory, M., Parrish, A., &amp; Berg, B. (2012). <em>Introduction to

tornado: Modern web applications with python</em>. O’Reilly Media.

---

title: "AIDAHO Tinkering Club:<br>Web App"

author: "Markus Mößler"

date: "April 15, 2025"

date: "April 30, 2025"

# date: "April 15, 2025"

# date: "December 20, 2024"

---

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

     - 👉🏼 Suits well with containerization.

   - 😐: Requires API design and coordination.

</div>

---

## A Brief Introduction to Docker

## A Brief Introduction to Docker {.small-header}

<div style="font-size: 20pt">

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

</div>

---

<div style="font-size: 20pt">

- Get Started

  - [Docker Introduction](https://docs.docker.com/get-started/introduction/)

  - [Docker Concepts](https://docs.docker.com/get-started/docker-concepts/the-basics/what-is-a-container/)

  - [Docker Workshop](https://docs.docker.com/get-started/workshop/)

- 👉🏼 [Docker Get Started](https://docs.docker.com/get-started)

</div>

- **In principle**, Tornado is a web server and a web framework,

    - it can be used to connect to backend services and to...

    - render HTML templates, enabling basic UI rendering

  - 👉 [See: Tornado blog demo on GitHub](https://github.com/tornadoweb/tornado/blob/master/demos/blog/blog.py)

  - 👉🏼 [See: Tornado blog demo on GitHub](https://github.com/tornadoweb/tornado/blob/master/demos/blog/blog.py)

- **Resources**:

  - The most interesting resources for learning/referencing Tornado:

    - [https://www.tornadoweb.org/en/stable/](https://www.tornadoweb.org/en/stable/)

    - Textbook: @Dory2012Introduction

  - [See also the tornado GitHub](https://github.com/tornadoweb/tornado)

  - [See also the tornado GitHub repository](https://github.com/tornadoweb/tornado)

</div>

<div style="font-size: 20pt">

- The **Tornado Blog Demo** can be packaged into a Docker container to ensure consistent development and deployment.

- The **Tornado Blog Demo** can be packaged into a Docker containers 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.

<!-- ```yml

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

```

```bash

.

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

``` -->

  - 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](https://github.com/tornadoweb/tornado/blob/master/demos/blog/docker-compose.yml)

<div style="display: flex; gap: 2em; font-size: 16pt">

    User["User"] -->|HTTP Requests<br>Port 8888| TornadoServer

    TornadoServer -->|Renders| Templates

    TornadoServer -->|Serves| StaticAssets

    TornadoServer -->|Async Queries<br>Port 5432| PostgreSQL

    TornadoServer -->|Async Queries<br>Port 3306| PostgreSQL

</pre>

# A Simple React Frontend on top of a Tornado Backend